[DE] Delay rendering controls on the right panel.

apps/documenteditor/main/app/view/ChartSettings.js

@@ -83,6 +83,9 @@ define([
             this._originalProps = null;
 
             this.render();
+
+            this.labelWidth = $(this.el).find('#chart-label-width');
+            this.labelHeight = $(this.el).find('#chart-label-height');
         },
 
         render: function () {
@@ -291,9 +294,6 @@ define([
             this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
             this.lockedControls.push(this.btnChartType);
 
-            this.labelWidth = $(this.el).find('#chart-label-width');
-            this.labelHeight = $(this.el).find('#chart-label-height');
-
             this.btnEditData = new Common.UI.Button({
                 el: $('#chart-button-edit-data')
             });

apps/documenteditor/main/app/view/HeaderFooterSettings.js

@@ -64,7 +64,6 @@ define([
         },
 
         initialize: function () {
-            var me = this;
             this._initSettings = true;
 
             this._state = {
@@ -80,67 +79,6 @@ define([
             this._locked = false;
 
             this.render();
-
-            var _arrPosition = [
-                [c_pageNumPosition.PAGE_NUM_POSITION_TOP,     c_pageNumPosition.PAGE_NUM_POSITION_LEFT,      'icon-right-panel btn-colontitul-tl', 'headerfooter-button-top-left', this.textTopLeft],
-                [c_pageNumPosition.PAGE_NUM_POSITION_TOP,     c_pageNumPosition.PAGE_NUM_POSITION_CENTER,    'icon-right-panel btn-colontitul-tc', 'headerfooter-button-top-center', this.textTopCenter],
-                [c_pageNumPosition.PAGE_NUM_POSITION_TOP,     c_pageNumPosition.PAGE_NUM_POSITION_RIGHT,     'icon-right-panel btn-colontitul-tr', 'headerfooter-button-top-right', this.textTopRight],
-                [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,  c_pageNumPosition.PAGE_NUM_POSITION_LEFT,      'icon-right-panel btn-colontitul-bl', 'headerfooter-button-bottom-left', this.textBottomLeft],
-                [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,  c_pageNumPosition.PAGE_NUM_POSITION_CENTER,    'icon-right-panel btn-colontitul-bc', 'headerfooter-button-bottom-center', this.textBottomCenter],
-                [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,  c_pageNumPosition.PAGE_NUM_POSITION_RIGHT,     'icon-right-panel btn-colontitul-br', 'headerfooter-button-bottom-right', this.textBottomRight]
-            ];
-
-            this._btnsPosition = [];
-            _.each(_arrPosition, function(item, index, list){
-                var _btn = new Common.UI.Button({
-                    cls: 'btn-options huge',
-                    iconCls: item[2],
-                    posWhere:item[0],
-                    posAlign:item[1],
-                    hint: item[4]
-                });
-                _btn.render( $('#'+item[3])) ;
-                _btn.on('click', _.bind(this.onBtnPositionClick, this));
-                this._btnsPosition.push( _btn );
-                this.lockedControls.push(_btn);
-            }, this);
-
-            this.numPosition = new Common.UI.MetricSpinner({
-                el: $('#headerfooter-spin-position'),
-                step: .1,
-                width: 85,
-                value: '1.25 cm',
-                defaultUnit : "cm",
-                maxValue: 55.88,
-                minValue: 0
-            });
-            this.spinners.push(this.numPosition);
-            this.lockedControls.push(this.numPosition);
-
-            this.lblPosition = $(this.el).find('#headerfooter-label-position');
-
-            this.chDiffFirst = new Common.UI.CheckBox({
-                el: $('#headerfooter-check-diff-first'),
-                labelText: this.textDiffFirst
-            });
-            this.lockedControls.push(this.chDiffFirst);
-
-            this.chDiffOdd = new Common.UI.CheckBox({
-                el: $('#headerfooter-check-diff-odd'),
-                labelText: this.textDiffOdd
-            });
-            this.lockedControls.push(this.chDiffOdd);
-
-            this.chSameAs = new Common.UI.CheckBox({
-                el: $('#headerfooter-check-same-as'),
-                labelText: this.textSameAs
-            });
-            this.lockedControls.push(this.chSameAs);
-
-            this.numPosition.on('change', _.bind(this.onNumPositionChange, this));
-            this.chDiffFirst.on('change', _.bind(this.onDiffFirstChange, this));
-            this.chDiffOdd.on('change', _.bind(this.onDiffOddChange, this));
-            this.chSameAs.on('change', _.bind(this.onSameAsChange, this));
         },
 
         render: function () {
@@ -240,7 +178,71 @@ define([
             }
         },
 
+        createDelayedControls: function() {
+            var _arrPosition = [
+                [c_pageNumPosition.PAGE_NUM_POSITION_TOP,     c_pageNumPosition.PAGE_NUM_POSITION_LEFT,      'icon-right-panel btn-colontitul-tl', 'headerfooter-button-top-left', this.textTopLeft],
+                [c_pageNumPosition.PAGE_NUM_POSITION_TOP,     c_pageNumPosition.PAGE_NUM_POSITION_CENTER,    'icon-right-panel btn-colontitul-tc', 'headerfooter-button-top-center', this.textTopCenter],
+                [c_pageNumPosition.PAGE_NUM_POSITION_TOP,     c_pageNumPosition.PAGE_NUM_POSITION_RIGHT,     'icon-right-panel btn-colontitul-tr', 'headerfooter-button-top-right', this.textTopRight],
+                [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,  c_pageNumPosition.PAGE_NUM_POSITION_LEFT,      'icon-right-panel btn-colontitul-bl', 'headerfooter-button-bottom-left', this.textBottomLeft],
+                [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,  c_pageNumPosition.PAGE_NUM_POSITION_CENTER,    'icon-right-panel btn-colontitul-bc', 'headerfooter-button-bottom-center', this.textBottomCenter],
+                [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,  c_pageNumPosition.PAGE_NUM_POSITION_RIGHT,     'icon-right-panel btn-colontitul-br', 'headerfooter-button-bottom-right', this.textBottomRight]
+            ];
+
+            this._btnsPosition = [];
+            _.each(_arrPosition, function(item, index, list){
+                var _btn = new Common.UI.Button({
+                    cls: 'btn-options huge',
+                    iconCls: item[2],
+                    posWhere:item[0],
+                    posAlign:item[1],
+                    hint: item[4]
+                });
+                _btn.render( $('#'+item[3])) ;
+                _btn.on('click', _.bind(this.onBtnPositionClick, this));
+                this._btnsPosition.push( _btn );
+                this.lockedControls.push(_btn);
+            }, this);
+
+            this.numPosition = new Common.UI.MetricSpinner({
+                el: $('#headerfooter-spin-position'),
+                step: .1,
+                width: 85,
+                value: '1.25 cm',
+                defaultUnit : "cm",
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spinners.push(this.numPosition);
+            this.lockedControls.push(this.numPosition);
+
+            this.lblPosition = $(this.el).find('#headerfooter-label-position');
+
+            this.chDiffFirst = new Common.UI.CheckBox({
+                el: $('#headerfooter-check-diff-first'),
+                labelText: this.textDiffFirst
+            });
+            this.lockedControls.push(this.chDiffFirst);
+
+            this.chDiffOdd = new Common.UI.CheckBox({
+                el: $('#headerfooter-check-diff-odd'),
+                labelText: this.textDiffOdd
+            });
+            this.lockedControls.push(this.chDiffOdd);
+
+            this.chSameAs = new Common.UI.CheckBox({
+                el: $('#headerfooter-check-same-as'),
+                labelText: this.textSameAs
+            });
+            this.lockedControls.push(this.chSameAs);
+
+            this.numPosition.on('change', _.bind(this.onNumPositionChange, this));
+            this.chDiffFirst.on('change', _.bind(this.onDiffFirstChange, this));
+            this.chDiffOdd.on('change', _.bind(this.onDiffOddChange, this));
+            this.chSameAs.on('change', _.bind(this.onSameAsChange, this));
+        },
+        
         createDelayedElements: function() {
+            this.createDelayedControls();
             this.updateMetricUnit();
         },
 
@@ -249,6 +251,8 @@ define([
         },
 
         disableControls: function(disable) {
+            if (this._initSettings) return;
+            
             if (this._state.DisabledControls!==disable) {
                 this._state.DisabledControls = disable;
                 _.each(this.lockedControls, function(item) {

apps/documenteditor/main/app/view/ImageSettings.js

@@ -64,7 +64,6 @@ define([
         },
 
         initialize: function () {
-            var me = this;
             this._initSettings = true;
 
             this._state = {
@@ -84,7 +83,35 @@ define([
 
             this.render();
 
-            var viewData = [
+            this.labelWidth = $(this.el).find('#image-label-width');
+            this.labelHeight = $(this.el).find('#image-label-height');
+        },
+
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({
+                scope: this
+            }));
+        },
+
+        setApi: function(api) {
+            this.api = api;
+            if (this.api)
+                this.api.asc_registerCallback('asc_onImgWrapStyleChanged', _.bind(this._ImgWrapStyleChanged, this));
+            return this;
+        },
+
+        updateMetricUnit: function() {
+            var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
+            this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
+
+            value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height);
+            this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
+        },
+
+        createDelayedControls: function() {
+            var me = this,
+                viewData = [
                 { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconcls:'wrap-inline', tip: this.txtInline, selected: true },
                 { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconcls:'wrap-square', tip: this.txtSquare },
                 { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconcls:'wrap-tight', tip: this.txtTight },
@@ -116,9 +143,6 @@ define([
             this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType));
             this.lockedControls.push(this.btnWrapType);
 
-            this.labelWidth = $(this.el).find('#image-label-width');
-            this.labelHeight = $(this.el).find('#image-label-height');
-
             this.btnOriginalSize = new Common.UI.Button({
                 el: $('#image-button-original-size')
             });
@@ -149,35 +173,14 @@ define([
                 if (this.api) this.api.asc_pluginRun(this._originalProps.asc_getPluginGuid(), 0, this._originalProps.asc_getPluginData());
                 this.fireEvent('editcomplete', this);
             }, this));
-            $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
-        },
-
-        render: function () {
-            var el = $(this.el);
-            el.html(this.template({
-                scope: this
-            }));
 
             this.linkAdvanced = $('#image-advanced-link');
             this.lblReplace = $('#image-lbl-replace');
-        },
+            $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
-
-        setApi: function(api) {
-            this.api = api;
-            if (this.api)
-                this.api.asc_registerCallback('asc_onImgWrapStyleChanged', _.bind(this._ImgWrapStyleChanged, this));
-            return this;
-        },
-
-        updateMetricUnit: function() {
-            var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
-            this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
-
-            value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height);
-            this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
         },
         
         createDelayedElements: function() {
+            this.createDelayedControls();
             this.updateMetricUnit();
         },
 
@@ -248,6 +251,7 @@ define([
         },
 
         _ImgWrapStyleChanged: function(style) {
+            if (!this.mnuWrapPicker) return;
             if (this._state.WrappingStyle!==style) {
                 this._noApply = true;
                 var record = this.mnuWrapPicker.store.findWhere({data: style});
@@ -387,6 +391,8 @@ define([
         },
 
         disableControls: function(disable) {
+            if (this._initSettings) return;
+            
             if (this._state.DisabledControls!==disable) {
                 this._state.DisabledControls = disable;
                 _.each(this.lockedControls, function(item) {

apps/documenteditor/main/app/view/ParagraphSettings.js

@@ -67,7 +67,6 @@ define([
         },
 
         initialize: function () {
-            var me = this;
             this._initSettings = true;
 
             this._state = {
@@ -157,22 +156,8 @@ define([
             this.btnColor = new Common.UI.ColorButton({
                 style: "width:45px;",
                 disabled: this._locked,
-                menu        : new Common.UI.Menu({
+                menu        : true
-                    items: [
-                        { template: _.template('<div id="paragraph-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
-                        { template: _.template('<a id="paragraph-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
-                    ]
-                })
             });
-
-            this.btnColor.on('render:after', function(btn) {
-                me.mnuColorPicker = new Common.UI.ThemeColorPalette({
-                    el: $('#paragraph-color-menu'),
-                    transparent: true
-                });
-                me.mnuColorPicker.on('select', _.bind(me.onColorPickerSelect, me));
-            });
-
             this.btnColor.render( $('#paragraph-color-btn'));
             this.lockedControls.push(this.btnColor);
 
@@ -456,7 +441,19 @@ define([
         },
 
         UpdateThemeColors: function() {
-            if (this.mnuColorPicker)
+            if (!this.mnuColorPicker) {
+                this.btnColor.setMenu( new Common.UI.Menu({
+                    items: [
+                        { template: _.template('<div id="paragraph-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
+                        { template: _.template('<a id="paragraph-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
+                    ]
+                }));
+                this.mnuColorPicker = new Common.UI.ThemeColorPalette({
+                    el: $('#paragraph-color-menu'),
+                    transparent: true
+                });
+                this.mnuColorPicker.on('select', _.bind(this.onColorPickerSelect, this));
+            }
             this.mnuColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },