CIDesigner.js

Type.registerNamespace("SitefinityWebApp.Widgets.CI.Designer");

SitefinityWebApp.Widgets.CI.Designer.CIDesigner = function (element) {
    
    this._companyname = null;
    this._streetandnumber = null;
    this._postoffice = null;
    this._postcodeandcity = null;
    this._telephonenumber = null;
    this._faxnumber = null;
    this._email = null;
    this._GoogleMapsImageSelector = null;
    this._GoogleMapsRetinaImageSelector = null;
    this._resizeControlDesignerDelegate = null;

    SitefinityWebApp.Widgets.CI.Designer.CIDesigner.initializeBase(this, [element]);
}

SitefinityWebApp.Widgets.CI.Designer.CIDesigner.prototype = {
    /* --------------------------------- set up and tear down --------------------------------- */
    initialize: function () {
        // Here you can attach to events or do other initialization 
        SitefinityWebApp.Widgets.CI.Designer.CIDesigner.callBaseMethod(this, 'initialize');

        this._handlePageLoadDelegate = Function.createDelegate(this, this._handlePageLoad);
        Sys.Application.add_load(this._handlePageLoadDelegate);

    },
    _handlePageLoad: function (sender, args) {
//        var my_href = window.location.href;
//        var propertyValueCulturePosition = my_href.search(/propertyValueCulture/i);
//        var pageCulture = my_href.slice(propertyValueCulturePosition + 21, propertyValueCulturePosition + 23);
//        //        this.get_pageid().get_pageSelector()._setCultures(pageCulture);
    },
    dispose: function () {
        // this is the place to unbind/dispose the event handlers created in the initialize method
        SitefinityWebApp.Widgets.CI.Designer.CIDesigner.callBaseMethod(this, 'dispose');

    },

    /* --------------------------------- public methods ---------------------------------- */
    // Called when the designer window gets opened and here is place to "bind" your designer to the control properties
    refreshUI: function () {
        var controlData = this._propertyEditor.get_control(); // JavaScript clone of your control - all the control properties will be properties of the controlData too
        this.resizeEvents();

        jQuery(this.get_companyname()).val(controlData.CompanyName);
        jQuery(this.get_streetandnumber()).val(controlData.StreetAndNumber);
        jQuery(this.get_postoffice()).val(controlData.PostOffice);
        jQuery(this.get_postcodeandcity()).val(controlData.PostCodeAndCity);
        jQuery(this.get_telephonenumber()).val(controlData.TelephoneNumber);
        jQuery(this.get_faxnumber()).val(controlData.FaxNumber);
        jQuery(this.get_email()).val(controlData.Email);

        // load image src
        var i = this.get_GoogleMapsImageSelector();
        var imageid = controlData.gMapsPictureID;
        if (imageid) i.set_value(imageid); //sets the value of i._itemId

        // load image src
        var j = this.get_GoogleMapsRetinaImageSelector();
        var rimageid = controlData.gMapsRetinaPictureID;
        if (rimageid) j.set_value(rimageid); //sets the value of i._itemId
    },

    // Called when the "save" button is clicked. Here you can transfer the settings from the designer to the control
    applyChanges: function () {
        var controlData = this._propertyEditor.get_control();
        controlData.CompanyName = jQuery(this.get_companyname()).val();
        controlData.StreetAndNumber = jQuery(this.get_streetandnumber()).val();
        controlData.PostOffice = jQuery(this.get_postoffice()).val();
        controlData.PostCodeAndCity = jQuery(this.get_postcodeandcity()).val();
        controlData.TelephoneNumber = jQuery(this.get_telephonenumber()).val();
        controlData.FaxNumber = jQuery(this.get_faxnumber()).val();
        controlData.Email = jQuery(this.get_email()).val();

        // save selected image
        var i = this.get_GoogleMapsImageSelector();
        var imageid = i.get_value(); //returns the correct value only if the user chooses an image
        //there might be a bug in the js that comes with SF. The following if sets the correct image id
        if (imageid == "00000000-0000-0000-0000-000000000000") controlData.gMapsPictureID = i._itemId;
        else controlData.gMapsPictureID = imageid;

        var j = this.get_GoogleMapsRetinaImageSelector();
        var rimageid = j.get_value(); //returns the correct value only if the user chooses an image
        //there might be a bug in the js that comes with SF. The following if sets the correct image id
        if (rimageid == "00000000-0000-0000-0000-000000000000") controlData.gMapsRetinaPictureID = j._itemId;
        else controlData.gMapsRetinaPictureID = rimageid;
    },
    /* --------------------------------- event handlers ---------------------------------- */

    /* --------------------------------- private methods --------------------------------- */

    /* --------------------------------- properties -------------------------------------- */
    // add resize events
    resizeEvents: function () {
        //resize page select
        //        var p = this.get_pageid();
        //        p.add_selectorOpened(this._resizeControlDesigner);
        //        p.add_selectorClosed(this._resizeControlDesigner);

        // resize control designer on image selector load
        var i = this.get_GoogleMapsImageSelector();
        this._resizeControlDesignerDelegate = Function.createDelegate(this, this._resizeControlDesigner);
        $addHandler(i._replaceImageButtonElement, "click", this._resizeControlDesignerDelegate);

        // resize control designer on image selector mode toggle
        var d = i._asyncImageSelector._dialogModesSwitcher;
        d.add_valueChanged(this._resizeControlDesigner);

        // resize control designer on image selector cancel
        var a = i._asyncImageSelector._cancelLink;
        $addHandler(a, "click", this._resizeControlDesignerDelegate);

        // resize control designer on image selector save
        var s = i._asyncImageSelector._saveLink;
        $addHandler(s, "click", this._resizeControlDesignerDelegate);

        // resize control designer on image upload
        i._asyncImageSelector.get_uploaderView().add_onFileUploaded(this._resizeControlDesigner);

        // resize control designer on image selector load
        var j = this.get_GoogleMapsRetinaImageSelector();
        this._resizeControlDesignerDelegate = Function.createDelegate(this, this._resizeControlDesigner);
        $addHandler(j._replaceImageButtonElement, "click", this._resizeControlDesignerDelegate);

        // resize control designer on image selector mode toggle
        var e = j._asyncImageSelector._dialogModesSwitcher;
        e.add_valueChanged(this._resizeControlDesigner);

        // resize control designer on image selector cancel
        var b = j._asyncImageSelector._cancelLink;
        $addHandler(b, "click", this._resizeControlDesignerDelegate);

        // resize control designer on image selector save
        var t = j._asyncImageSelector._saveLink;
        $addHandler(t, "click", this._resizeControlDesignerDelegate);

        // resize control designer on image upload
        j._asyncImageSelector.get_uploaderView().add_onFileUploaded(this._resizeControlDesigner);
    },

    // DOM Element with id: Message
    get_companyname: function () { return this._companyname; },
    set_companyname: function (value) { this._companyname = value; },
    get_streetandnumber: function () { return this._streetandnumber; },
    set_streetandnumber: function (value) { this._streetandnumber = value; },
    get_postoffice: function () { return this._postoffice; },
    set_postoffice: function (value) { this._postoffice = value; },
    get_postcodeandcity: function () { return this._postcodeandcity; },
    set_postcodeandcity: function (value) { this._postcodeandcity = value; },
    get_telephonenumber: function () { return this._telephonenumber; },
    set_telephonenumber: function (value) { this._telephonenumber = value; },
    get_faxnumber: function () { return this._faxnumber; },
    set_faxnumber: function (value) { this._faxnumber = value; },
    get_email: function () { return this._email; },
    set_email: function (value) { this._email = value; },
    get_GoogleMapsImageSelector: function () { return this._GoogleMapsImageSelector; },
    set_GoogleMapsImageSelector: function (value) { this._GoogleMapsImageSelector = value; },
    get_GoogleMapsRetinaImageSelector: function () { return this._GoogleMapsRetinaImageSelector; },
    set_GoogleMapsRetinaImageSelector: function (value) { this._GoogleMapsRetinaImageSelector = value; },

    // function to initialize resizer methods and handlers
    _resizeControlDesigner: function () {
        setTimeout("dialogBase.resizeToContent()", 100);
    }
}

SitefinityWebApp.Widgets.CI.Designer.CIDesigner.registerClass('SitefinityWebApp.Widgets.CI.Designer.CIDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);