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.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) {

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

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

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

@ -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) {

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.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) {

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

@ -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) {

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

@ -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) {

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

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

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

@ -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;