Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] 'Right' menu refactoring

Browse source
This commit is contained in:
Maxim Kadushkin 2019-08-23 13:09:39 +03:00
parent e1142bac16
commit 92cfcf2e4b
8 changed files with 87 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/documenteditor/main/app/view/ChartSettings.js
View file

@ -84,16 +84,16 @@ define([
this._originalProps = null; this._originalProps = null;
this.render(); this.render();
this.labelWidth = $(this.el).find('#chart-label-width');
this.labelHeight = $(this.el).find('#chart-label-height');
}, },
render: function () { render: function () {
var el = $(this.el); var el = this.$el || $(this.el);
el.html(this.template({ el.html(this.template({
scope: this scope: this
})); }));
this.labelWidth = el.find('#chart-label-width');
this.labelHeight = el.find('#chart-label-height');
}, },
setApi: function(api) { setApi: function(api) {

2
apps/documenteditor/main/app/view/HeaderFooterSettings.js
View file

@ -84,7 +84,7 @@ define([
}, },
render: function () { render: function () {
var el = $(this.el); var el = this.$el || $(this.el);
el.html(this.template({ el.html(this.template({
scope: this scope: this
})); }));

8
apps/documenteditor/main/app/view/ImageSettings.js
View file

@ -82,16 +82,16 @@ define([
this._originalProps = null; this._originalProps = null;
this.render(); this.render();
this.labelWidth = $(this.el).find('#image-label-width');
this.labelHeight = $(this.el).find('#image-label-height');
}, },
render: function () { render: function () {
var el = $(this.el); var el = this.$el || $(this.el);
el.html(this.template({ el.html(this.template({
scope: this scope: this
})); }));
this.labelWidth = el.find('#image-label-width');
this.labelHeight = el.find('#image-label-height');
}, },
setApi: function(api) { setApi: function(api) {

48
apps/documenteditor/main/app/view/ParagraphSettings.js
View file

@ -91,10 +91,16 @@ define([
{displayValue: this.textAuto, defaultValue: 1, value: c_paragraphLinerule.LINERULE_AUTO, minValue: 0.5, step: 0.01, defaultUnit: ''}, {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'} {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 // Short Size
this.cmbLineRule = new Common.UI.ComboBox({ this.cmbLineRule = new Common.UI.ComboBox({
el: $('#paragraph-combo-line-rule'), el: $markup.findById('#paragraph-combo-line-rule'),
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 85px;', menuStyle: 'min-width: 85px;',
editable: false, editable: false,
@ -105,7 +111,7 @@ define([
this.lockedControls.push(this.cmbLineRule); this.lockedControls.push(this.cmbLineRule);
this.numLineHeight = new Common.UI.MetricSpinner({ this.numLineHeight = new Common.UI.MetricSpinner({
el: $('#paragraph-spin-line-height'), el: $markup.findById('#paragraph-spin-line-height'),
step: .01, step: .01,
width: 85, width: 85,
value: '', value: '',
@ -117,7 +123,7 @@ define([
this.lockedControls.push(this.numLineHeight); this.lockedControls.push(this.numLineHeight);
this.numSpacingBefore = new Common.UI.MetricSpinner({ this.numSpacingBefore = new Common.UI.MetricSpinner({
el: $('#paragraph-spin-spacing-before'), el: $markup.findById('#paragraph-spin-spacing-before'),
step: .1, step: .1,
width: 85, width: 85,
value: '', value: '',
@ -132,7 +138,7 @@ define([
this.lockedControls.push(this.numSpacingBefore); this.lockedControls.push(this.numSpacingBefore);
this.numSpacingAfter = new Common.UI.MetricSpinner({ this.numSpacingAfter = new Common.UI.MetricSpinner({
el: $('#paragraph-spin-spacing-after'), el: $markup.findById('#paragraph-spin-spacing-after'),
step: .1, step: .1,
width: 85, width: 85,
value: '', value: '',
@ -147,7 +153,7 @@ define([
this.lockedControls.push(this.numSpacingAfter); this.lockedControls.push(this.numSpacingAfter);
this.chAddInterval = new Common.UI.CheckBox({ this.chAddInterval = new Common.UI.CheckBox({
el: $('#paragraph-checkbox-add-interval'), el: $markup.findById('#paragraph-checkbox-add-interval'),
labelText: this.strSomeParagraphSpace, labelText: this.strSomeParagraphSpace,
disabled: this._locked disabled: this._locked
}); });
@ -158,27 +164,25 @@ define([
disabled: this._locked, disabled: this._locked,
menu : true menu : true
}); });
this.btnColor.render( $('#paragraph-color-btn')); this.btnColor.render($markup.findById('#paragraph-color-btn'));
this.lockedControls.push(this.btnColor); this.lockedControls.push(this.btnColor);
this.numLineHeight.on('change', _.bind(this.onNumLineHeightChange, this)); this.numLineHeight.on('change', this.onNumLineHeightChange.bind(this));
this.numSpacingBefore.on('change', _.bind(this.onNumSpacingBeforeChange, this)); this.numSpacingBefore.on('change', this.onNumSpacingBeforeChange.bind(this));
this.numSpacingAfter.on('change', _.bind(this.onNumSpacingAfterChange, this)); this.numSpacingAfter.on('change', this.onNumSpacingAfterChange.bind(this));
this.chAddInterval.on('change', _.bind(this.onAddIntervalChange, this)); this.chAddInterval.on('change', this.onAddIntervalChange.bind(this));
this.cmbLineRule.on('selected', _.bind(this.onLineRuleSelect, this)); this.cmbLineRule.on('selected', this.onLineRuleSelect.bind(this));
this.cmbLineRule.on('hide:after', _.bind(this.onHideMenus, this)); this.cmbLineRule.on('hide:after', this.onHideMenus.bind(this));
$(this.el).on('click', '#paragraph-advanced-link', _.bind(this.openAdvancedSettings, this));
this.TextOnlySettings = $('.text-only');
},
render: function () { this.linkAdvanced = $markup.findById('#paragraph-advanced-link');
var el = $(this.el);
el.html(this.template({
scope: this
}));
this.linkAdvanced = $('#paragraph-advanced-link');
this.linkAdvanced.toggleClass('disabled', this._locked); 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) { setApi: function(api) {

73
apps/documenteditor/main/app/view/RightMenu.js
View file

@ -146,32 +146,31 @@ define([
}, },
render: function (mode) { render: function (mode) {
var el = $(this.el);
this.trigger('render:before', this); this.trigger('render:before', this);
this.defaultHideRightMenu = mode.customization && !!mode.customization.hideRightMenu; this.defaultHideRightMenu = mode.customization && !!mode.customization.hideRightMenu;
var open = !Common.localStorage.getBool("de-hide-right-settings", this.defaultHideRightMenu); var open = !Common.localStorage.getBool("de-hide-right-settings", this.defaultHideRightMenu);
el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px'); this.$el.css('width', ((open) ? MENU_SCALE_PART : SCALE_MIN) + 'px');
el.show(); 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.btnText.setElement($markup.findById('#id-right-menu-text'), false); this.btnText.render();
this.btnTable.setElement($('#id-right-menu-table'), false); this.btnTable.render(); this.btnTable.setElement($markup.findById('#id-right-menu-table'), false); this.btnTable.render();
this.btnImage.setElement($('#id-right-menu-image'), false); this.btnImage.render(); this.btnImage.setElement($markup.findById('#id-right-menu-image'), false); this.btnImage.render();
this.btnHeaderFooter.setElement($('#id-right-menu-header'), false); this.btnHeaderFooter.render(); this.btnHeaderFooter.setElement($markup.findById('#id-right-menu-header'), false); this.btnHeaderFooter.render();
this.btnChart.setElement($('#id-right-menu-chart'), false); this.btnChart.render(); this.btnChart.setElement($markup.findById('#id-right-menu-chart'), false); this.btnChart.render();
this.btnShape.setElement($('#id-right-menu-shape'), false); this.btnShape.render(); this.btnShape.setElement($markup.findById('#id-right-menu-shape'), false); this.btnShape.render();
this.btnTextArt.setElement($('#id-right-menu-textart'), false); this.btnTextArt.render(); this.btnTextArt.setElement($markup.findById('#id-right-menu-textart'), false); this.btnTextArt.render();
this.btnText.on('click', _.bind(this.onBtnMenuClick, this)); this.btnText.on('click', this.onBtnMenuClick.bind(this));
this.btnTable.on('click', _.bind(this.onBtnMenuClick, this)); this.btnTable.on('click', this.onBtnMenuClick.bind(this));
this.btnImage.on('click', _.bind(this.onBtnMenuClick, this)); this.btnImage.on('click', this.onBtnMenuClick.bind(this));
this.btnHeaderFooter.on('click', _.bind(this.onBtnMenuClick, this)); this.btnHeaderFooter.on('click', this.onBtnMenuClick.bind(this));
this.btnChart.on('click', _.bind(this.onBtnMenuClick, this)); this.btnChart.on('click', this.onBtnMenuClick.bind(this));
this.btnShape.on('click', _.bind(this.onBtnMenuClick, this)); this.btnShape.on('click', this.onBtnMenuClick.bind(this));
this.btnTextArt.on('click', _.bind(this.onBtnMenuClick, this)); this.btnTextArt.on('click', this.onBtnMenuClick.bind(this));
this.paragraphSettings = new DE.Views.ParagraphSettings(); this.paragraphSettings = new DE.Views.ParagraphSettings();
this.headerSettings = new DE.Views.HeaderFooterSettings(); 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._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.el = $markup.findById('#id-right-menu-mail-merge'); this.btnMailMerge.render().setVisible(true);
this.btnMailMerge.on('click', _.bind(this.onBtnMenuClick, this)); this.btnMailMerge.on('click', this.onBtnMenuClick.bind(this));
this.mergeSettings = new DE.Views.MailMergeSettings(); 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._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.el = $markup.findById('#id-right-menu-signature'); this.btnSignature.render().setVisible(true);
this.btnSignature.on('click', _.bind(this.onBtnMenuClick, this)); this.btnSignature.on('click', this.onBtnMenuClick.bind(this));
this.signatureSettings = new DE.Views.SignatureSettings(); this.signatureSettings = new DE.Views.SignatureSettings();
} }
@ -222,27 +221,29 @@ define([
} }
if (open) { if (open) {
$('#id-paragraph-settings').parent().css("display", "inline-block" ); $markup.findById('#id-paragraph-settings').parent().css("display", "inline-block" );
$('#id-paragraph-settings').addClass("active"); $markup.findById('#id-paragraph-settings').addClass("active");
} }
// this.$el.html($markup);
this.trigger('render:after', this); this.trigger('render:after', this);
return this; return this;
}, },
setApi: function(api) { setApi: function(api) {
this.api = api; var me = this;
var fire = function() { this.fireEvent('editcomplete', this); }; me.api = api;
this.paragraphSettings.setApi(api).on('editcomplete', _.bind( fire, this)); var _fire_editcomplete = function() {me.fireEvent('editcomplete', me);};
this.headerSettings.setApi(api).on('editcomplete', _.bind( fire, this)); this.paragraphSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.imageSettings.setApi(api).on('editcomplete', _.bind( fire, this)); this.headerSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.chartSettings.setApi(api).on('editcomplete', _.bind( fire, this)); this.imageSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.tableSettings.setApi(api).on('editcomplete', _.bind( fire, this)); this.chartSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.shapeSettings.setApi(api).on('editcomplete', _.bind( fire, this)); this.tableSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.textartSettings.setApi(api).on('editcomplete', _.bind( fire, this)); this.shapeSettings.setApi(api).on('editcomplete', _fire_editcomplete);
if (this.mergeSettings) this.mergeSettings.setApi(api).on('editcomplete', _.bind( fire, this)); this.textartSettings.setApi(api).on('editcomplete', _fire_editcomplete);
if (this.signatureSettings) this.signatureSettings.setApi(api).on('editcomplete', _.bind( fire, this)); 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) { setMode: function(mode) {

14
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -127,6 +127,13 @@ define([
this.fillControls = []; this.fillControls = [];
this.render(); this.render();
},
render: function () {
var el = this.$el || $(this.el);
el.html(this.template({
scope: this
}));
this.FillColorContainer = $('#shape-panel-color-fill'); this.FillColorContainer = $('#shape-panel-color-fill');
this.FillImageContainer = $('#shape-panel-image-fill'); this.FillImageContainer = $('#shape-panel-image-fill');
@ -137,13 +144,6 @@ define([
this.CanChangeType = $('.change-type'); this.CanChangeType = $('.change-type');
}, },
render: function () {
var el = $(this.el);
el.html(this.template({
scope: this
}));
},
setApi: function(api) { setApi: function(api) {
this.api = api; this.api = api;
if (this.api) { if (this.api) {

2
apps/documenteditor/main/app/view/TableSettings.js
View file

@ -231,7 +231,7 @@ define([
}, },
render: function () { render: function () {
var el = $(this.el); var el = this.$el || $(this.el);
el.html(this.template({ el.html(this.template({
scope: this scope: this
})); }));

14
apps/documenteditor/main/app/view/TextArtSettings.js
View file

@ -106,19 +106,19 @@ define([
this.BorderType = Asc.c_oDashType.solid; this.BorderType = Asc.c_oDashType.solid;
this.render(); this.render();
},
render: function () {
var el = this.$el || $(this.el);
el.html(this.template({
scope: this
}));
this.FillColorContainer = $('#textart-panel-color-fill'); this.FillColorContainer = $('#textart-panel-color-fill');
this.FillGradientContainer = $('#textart-panel-gradient-fill'); this.FillGradientContainer = $('#textart-panel-gradient-fill');
this.TransparencyContainer = $('#textart-panel-transparent-fill'); this.TransparencyContainer = $('#textart-panel-transparent-fill');
}, },
render: function () {
var el = $(this.el);
el.html(this.template({
scope: this
}));
},
setApi: function(api) { setApi: function(api) {
this.api = api; this.api = api;
return this; return this;