diff --git a/apps/documenteditor/main/app/view/ChartSettings.js b/apps/documenteditor/main/app/view/ChartSettings.js index c0eedc91d..64eb011be 100644 --- a/apps/documenteditor/main/app/view/ChartSettings.js +++ b/apps/documenteditor/main/app/view/ChartSettings.js @@ -84,16 +84,16 @@ define([ this._originalProps = null; this.render(); - - this.labelWidth = $(this.el).find('#chart-label-width'); - this.labelHeight = $(this.el).find('#chart-label-height'); }, render: function () { - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template({ scope: this })); + + this.labelWidth = el.find('#chart-label-width'); + this.labelHeight = el.find('#chart-label-height'); }, setApi: function(api) { diff --git a/apps/documenteditor/main/app/view/HeaderFooterSettings.js b/apps/documenteditor/main/app/view/HeaderFooterSettings.js index 5b7028254..ae792ce79 100644 --- a/apps/documenteditor/main/app/view/HeaderFooterSettings.js +++ b/apps/documenteditor/main/app/view/HeaderFooterSettings.js @@ -84,7 +84,7 @@ define([ }, render: function () { - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template({ scope: this })); diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js index 22ac089b2..84b2e50fd 100644 --- a/apps/documenteditor/main/app/view/ImageSettings.js +++ b/apps/documenteditor/main/app/view/ImageSettings.js @@ -82,16 +82,16 @@ define([ this._originalProps = null; this.render(); - - this.labelWidth = $(this.el).find('#image-label-width'); - this.labelHeight = $(this.el).find('#image-label-height'); }, render: function () { - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template({ scope: this })); + + this.labelWidth = el.find('#image-label-width'); + this.labelHeight = el.find('#image-label-height'); }, setApi: function(api) { diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js index a3bba0dd5..04bee00dd 100644 --- a/apps/documenteditor/main/app/view/ParagraphSettings.js +++ b/apps/documenteditor/main/app/view/ParagraphSettings.js @@ -91,10 +91,16 @@ define([ {displayValue: this.textAuto, defaultValue: 1, value: c_paragraphLinerule.LINERULE_AUTO, minValue: 0.5, step: 0.01, defaultUnit: ''}, {displayValue: this.textExact, defaultValue: 5, value: c_paragraphLinerule.LINERULE_EXACT, minValue: 0.03, step: 0.01, defaultUnit: 'cm'} ]; + }, + + render: function () { + var $markup = $(this.template({ + scope: this + })); // Short Size this.cmbLineRule = new Common.UI.ComboBox({ - el: $('#paragraph-combo-line-rule'), + el: $markup.findById('#paragraph-combo-line-rule'), cls: 'input-group-nr', menuStyle: 'min-width: 85px;', editable: false, @@ -105,7 +111,7 @@ define([ this.lockedControls.push(this.cmbLineRule); this.numLineHeight = new Common.UI.MetricSpinner({ - el: $('#paragraph-spin-line-height'), + el: $markup.findById('#paragraph-spin-line-height'), step: .01, width: 85, value: '', @@ -117,7 +123,7 @@ define([ this.lockedControls.push(this.numLineHeight); this.numSpacingBefore = new Common.UI.MetricSpinner({ - el: $('#paragraph-spin-spacing-before'), + el: $markup.findById('#paragraph-spin-spacing-before'), step: .1, width: 85, value: '', @@ -132,7 +138,7 @@ define([ this.lockedControls.push(this.numSpacingBefore); this.numSpacingAfter = new Common.UI.MetricSpinner({ - el: $('#paragraph-spin-spacing-after'), + el: $markup.findById('#paragraph-spin-spacing-after'), step: .1, width: 85, value: '', @@ -147,7 +153,7 @@ define([ this.lockedControls.push(this.numSpacingAfter); this.chAddInterval = new Common.UI.CheckBox({ - el: $('#paragraph-checkbox-add-interval'), + el: $markup.findById('#paragraph-checkbox-add-interval'), labelText: this.strSomeParagraphSpace, disabled: this._locked }); @@ -158,27 +164,25 @@ define([ disabled: this._locked, menu : true }); - this.btnColor.render( $('#paragraph-color-btn')); + this.btnColor.render($markup.findById('#paragraph-color-btn')); this.lockedControls.push(this.btnColor); - this.numLineHeight.on('change', _.bind(this.onNumLineHeightChange, this)); - this.numSpacingBefore.on('change', _.bind(this.onNumSpacingBeforeChange, this)); - this.numSpacingAfter.on('change', _.bind(this.onNumSpacingAfterChange, this)); - this.chAddInterval.on('change', _.bind(this.onAddIntervalChange, this)); - this.cmbLineRule.on('selected', _.bind(this.onLineRuleSelect, this)); - this.cmbLineRule.on('hide:after', _.bind(this.onHideMenus, this)); - $(this.el).on('click', '#paragraph-advanced-link', _.bind(this.openAdvancedSettings, this)); - this.TextOnlySettings = $('.text-only'); - }, + this.numLineHeight.on('change', this.onNumLineHeightChange.bind(this)); + this.numSpacingBefore.on('change', this.onNumSpacingBeforeChange.bind(this)); + this.numSpacingAfter.on('change', this.onNumSpacingAfterChange.bind(this)); + this.chAddInterval.on('change', this.onAddIntervalChange.bind(this)); + this.cmbLineRule.on('selected', this.onLineRuleSelect.bind(this)); + this.cmbLineRule.on('hide:after', this.onHideMenus.bind(this)); - render: function () { - var el = $(this.el); - el.html(this.template({ - scope: this - })); - - this.linkAdvanced = $('#paragraph-advanced-link'); + this.linkAdvanced = $markup.findById('#paragraph-advanced-link'); this.linkAdvanced.toggleClass('disabled', this._locked); + + this.$el.on('click', '#paragraph-advanced-link', this.openAdvancedSettings.bind(this)); + this.$el.html($markup); + + this.TextOnlySettings = $('.text-only', this.$el); + + this.rendered = true; }, setApi: function(api) { diff --git a/apps/documenteditor/main/app/view/RightMenu.js b/apps/documenteditor/main/app/view/RightMenu.js index e33266c43..f1b95cc70 100644 --- a/apps/documenteditor/main/app/view/RightMenu.js +++ b/apps/documenteditor/main/app/view/RightMenu.js @@ -146,32 +146,31 @@ define([ }, render: function (mode) { - var el = $(this.el); - this.trigger('render:before', this); this.defaultHideRightMenu = mode.customization && !!mode.customization.hideRightMenu; var open = !Common.localStorage.getBool("de-hide-right-settings", this.defaultHideRightMenu); - el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px'); - el.show(); + this.$el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px'); + this.$el.show(); - el.html(this.template({})); + var $markup = $(this.template({})); + this.$el.html($markup); - this.btnText.setElement($('#id-right-menu-text'), false); this.btnText.render(); - this.btnTable.setElement($('#id-right-menu-table'), false); this.btnTable.render(); - this.btnImage.setElement($('#id-right-menu-image'), false); this.btnImage.render(); - this.btnHeaderFooter.setElement($('#id-right-menu-header'), false); this.btnHeaderFooter.render(); - this.btnChart.setElement($('#id-right-menu-chart'), false); this.btnChart.render(); - this.btnShape.setElement($('#id-right-menu-shape'), false); this.btnShape.render(); - this.btnTextArt.setElement($('#id-right-menu-textart'), false); this.btnTextArt.render(); + this.btnText.setElement($markup.findById('#id-right-menu-text'), false); this.btnText.render(); + this.btnTable.setElement($markup.findById('#id-right-menu-table'), false); this.btnTable.render(); + this.btnImage.setElement($markup.findById('#id-right-menu-image'), false); this.btnImage.render(); + this.btnHeaderFooter.setElement($markup.findById('#id-right-menu-header'), false); this.btnHeaderFooter.render(); + this.btnChart.setElement($markup.findById('#id-right-menu-chart'), false); this.btnChart.render(); + this.btnShape.setElement($markup.findById('#id-right-menu-shape'), false); this.btnShape.render(); + this.btnTextArt.setElement($markup.findById('#id-right-menu-textart'), false); this.btnTextArt.render(); - this.btnText.on('click', _.bind(this.onBtnMenuClick, this)); - this.btnTable.on('click', _.bind(this.onBtnMenuClick, this)); - this.btnImage.on('click', _.bind(this.onBtnMenuClick, this)); - this.btnHeaderFooter.on('click', _.bind(this.onBtnMenuClick, this)); - this.btnChart.on('click', _.bind(this.onBtnMenuClick, this)); - this.btnShape.on('click', _.bind(this.onBtnMenuClick, this)); - this.btnTextArt.on('click', _.bind(this.onBtnMenuClick, this)); + this.btnText.on('click', this.onBtnMenuClick.bind(this)); + this.btnTable.on('click', this.onBtnMenuClick.bind(this)); + this.btnImage.on('click', this.onBtnMenuClick.bind(this)); + this.btnHeaderFooter.on('click', this.onBtnMenuClick.bind(this)); + this.btnChart.on('click', this.onBtnMenuClick.bind(this)); + this.btnShape.on('click', this.onBtnMenuClick.bind(this)); + this.btnTextArt.on('click', this.onBtnMenuClick.bind(this)); this.paragraphSettings = new DE.Views.ParagraphSettings(); this.headerSettings = new DE.Views.HeaderFooterSettings(); @@ -192,8 +191,8 @@ define([ }); this._settings[Common.Utils.documentSettingsType.MailMerge] = {panel: "id-mail-merge-settings", btn: this.btnMailMerge}; - this.btnMailMerge.el = $('#id-right-menu-mail-merge'); this.btnMailMerge.render().setVisible(true); - this.btnMailMerge.on('click', _.bind(this.onBtnMenuClick, this)); + this.btnMailMerge.el = $markup.findById('#id-right-menu-mail-merge'); this.btnMailMerge.render().setVisible(true); + this.btnMailMerge.on('click', this.onBtnMenuClick.bind(this)); this.mergeSettings = new DE.Views.MailMergeSettings(); } @@ -208,8 +207,8 @@ define([ }); this._settings[Common.Utils.documentSettingsType.Signature] = {panel: "id-signature-settings", btn: this.btnSignature}; - this.btnSignature.el = $('#id-right-menu-signature'); this.btnSignature.render().setVisible(true); - this.btnSignature.on('click', _.bind(this.onBtnMenuClick, this)); + this.btnSignature.el = $markup.findById('#id-right-menu-signature'); this.btnSignature.render().setVisible(true); + this.btnSignature.on('click', this.onBtnMenuClick.bind(this)); this.signatureSettings = new DE.Views.SignatureSettings(); } @@ -222,27 +221,29 @@ define([ } if (open) { - $('#id-paragraph-settings').parent().css("display", "inline-block" ); - $('#id-paragraph-settings').addClass("active"); + $markup.findById('#id-paragraph-settings').parent().css("display", "inline-block" ); + $markup.findById('#id-paragraph-settings').addClass("active"); } + // this.$el.html($markup); this.trigger('render:after', this); return this; }, setApi: function(api) { - this.api = api; - var fire = function() { this.fireEvent('editcomplete', this); }; - this.paragraphSettings.setApi(api).on('editcomplete', _.bind( fire, this)); - this.headerSettings.setApi(api).on('editcomplete', _.bind( fire, this)); - this.imageSettings.setApi(api).on('editcomplete', _.bind( fire, this)); - this.chartSettings.setApi(api).on('editcomplete', _.bind( fire, this)); - this.tableSettings.setApi(api).on('editcomplete', _.bind( fire, this)); - this.shapeSettings.setApi(api).on('editcomplete', _.bind( fire, this)); - this.textartSettings.setApi(api).on('editcomplete', _.bind( fire, this)); - if (this.mergeSettings) this.mergeSettings.setApi(api).on('editcomplete', _.bind( fire, this)); - if (this.signatureSettings) this.signatureSettings.setApi(api).on('editcomplete', _.bind( fire, this)); + var me = this; + me.api = api; + var _fire_editcomplete = function() {me.fireEvent('editcomplete', me);}; + this.paragraphSettings.setApi(api).on('editcomplete', _fire_editcomplete); + this.headerSettings.setApi(api).on('editcomplete', _fire_editcomplete); + this.imageSettings.setApi(api).on('editcomplete', _fire_editcomplete); + this.chartSettings.setApi(api).on('editcomplete', _fire_editcomplete); + this.tableSettings.setApi(api).on('editcomplete', _fire_editcomplete); + this.shapeSettings.setApi(api).on('editcomplete', _fire_editcomplete); + this.textartSettings.setApi(api).on('editcomplete', _fire_editcomplete); + if (this.mergeSettings) this.mergeSettings.setApi(api).on('editcomplete', _fire_editcomplete); + if (this.signatureSettings) this.signatureSettings.setApi(api).on('editcomplete', _fire_editcomplete); }, setMode: function(mode) { diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 388d5f024..db785780e 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -127,6 +127,13 @@ define([ this.fillControls = []; this.render(); + }, + + render: function () { + var el = this.$el || $(this.el); + el.html(this.template({ + scope: this + })); this.FillColorContainer = $('#shape-panel-color-fill'); this.FillImageContainer = $('#shape-panel-image-fill'); @@ -137,13 +144,6 @@ define([ this.CanChangeType = $('.change-type'); }, - render: function () { - var el = $(this.el); - el.html(this.template({ - scope: this - })); - }, - setApi: function(api) { this.api = api; if (this.api) { diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js index 79918c51a..75821fdcd 100644 --- a/apps/documenteditor/main/app/view/TableSettings.js +++ b/apps/documenteditor/main/app/view/TableSettings.js @@ -231,7 +231,7 @@ define([ }, render: function () { - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template({ scope: this })); diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index 8f832c6e9..bce206e90 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -106,19 +106,19 @@ define([ this.BorderType = Asc.c_oDashType.solid; this.render(); + }, + + render: function () { + var el = this.$el || $(this.el); + el.html(this.template({ + scope: this + })); this.FillColorContainer = $('#textart-panel-color-fill'); this.FillGradientContainer = $('#textart-panel-gradient-fill'); this.TransparencyContainer = $('#textart-panel-transparent-fill'); }, - render: function () { - var el = $(this.el); - el.html(this.template({ - scope: this - })); - }, - setApi: function(api) { this.api = api; return this;