From 3234492cccf84cf1e32d2a0e85d1735e30ba4300 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 30 Sep 2020 10:33:38 +0300 Subject: [PATCH] [DE] Refactoring form settings --- .../main/app/controller/RightMenu.js | 14 +- .../main/app/template/FormSettings.template | 25 +- .../main/app/view/ControlSettingsDialog.js | 15 +- .../main/app/view/FormSettings.js | 234 +++++++++++------- 4 files changed, 182 insertions(+), 106 deletions(-) diff --git a/apps/documenteditor/main/app/controller/RightMenu.js b/apps/documenteditor/main/app/controller/RightMenu.js index 0686c3460..7f4d50648 100644 --- a/apps/documenteditor/main/app/controller/RightMenu.js +++ b/apps/documenteditor/main/app/controller/RightMenu.js @@ -167,11 +167,15 @@ define([ this._settings[Common.Utils.documentSettingsType.Signature].locked = value.get_Locked(); } - if (control_props) { - settingsType = Common.Utils.documentSettingsType.Form; - this._settings[settingsType].props = control_props; - this._settings[settingsType].locked = false; - this._settings[settingsType].hidden = 0; + if (control_props && control_props.get_FormPr()) { + var spectype = control_props.get_SpecificType(); + if (spectype==Asc.c_oAscContentControlSpecificType.CheckBox || spectype==Asc.c_oAscContentControlSpecificType.Picture || + spectype==Asc.c_oAscContentControlSpecificType.ComboBox || spectype==Asc.c_oAscContentControlSpecificType.DropDownList || spectype==Asc.c_oAscContentControlSpecificType.None) { + settingsType = Common.Utils.documentSettingsType.Form; + this._settings[settingsType].props = control_props; + this._settings[settingsType].locked = false; + this._settings[settingsType].hidden = 0; + } } if ( this._settings[Common.Utils.documentSettingsType.Header].locked ) { // если находимся в locked header/footer, то считаем, что все элементы в нем тоже недоступны diff --git a/apps/documenteditor/main/app/template/FormSettings.template b/apps/documenteditor/main/app/template/FormSettings.template index 603b4d701..346845393 100644 --- a/apps/documenteditor/main/app/template/FormSettings.template +++ b/apps/documenteditor/main/app/template/FormSettings.template @@ -1,7 +1,7 @@ @@ -10,7 +10,7 @@
- + - + - + - + @@ -46,12 +46,13 @@ +
- +
@@ -19,24 +19,24 @@
- +
-
-
+
+
- -
+ +
-
+
-
+
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js index 5b4d78bee..c24ff3024 100644 --- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js @@ -307,7 +307,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', step: .1, width: 80, defaultUnit : "cm", - value: '3 cm', + value: 'Auto', + allowAuto: true, maxValue: 55.88, minValue: 0.1 }); @@ -522,7 +523,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', this.spnMaxChars.setValue(val && val>=0 ? val : 10); val = formTextPr.get_Width(); - this.spnWidth.setValue(val ? val : '', true); + this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : -1, true); } } }, @@ -607,8 +608,12 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', if (this.btnsCategory[5].isVisible()) { var formTextPr = new AscCommon.CSdtTextFormPr(); - if (this.spnWidth.getValue()) - formTextPr.put_Width(this.spnWidth.getNumberValue()); + if (this.spnWidth.getValue()) { + var value = this.spnWidth.getNumberValue(); + formTextPr.put_Width(value<=0 ? 0 : parseInt(Common.Utils.Metric.fnRecalcToMM(value) * 72 * 20 / 25.4)); + } else + formTextPr.put_Width(0); + if (this.placeholder && this.placeholder.changed) { formTextPr.put_PlaceHolderSymbol(this.placeholder.code); formTextPr.put_PlaceHolderFont(this.placeholder.font); @@ -618,7 +623,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', var checked = (this.chMaxChars.getValue()=='checked' || this.chComb.getValue()=='checked'); formTextPr.put_MaxCharacters(checked); if (checked) - formTextPr.put_MaxCharacters(this.spnMaxChars.getNumberValue() || 12); + formTextPr.put_MaxCharacters(this.spnMaxChars.getNumberValue() || 10); props.put_TextFormPr(formTextPr); } diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js index dd281f841..7cd239b05 100644 --- a/apps/documenteditor/main/app/view/FormSettings.js +++ b/apps/documenteditor/main/app/view/FormSettings.js @@ -45,6 +45,7 @@ define([ 'backbone', 'common/main/lib/component/ComboBox', 'common/main/lib/component/MetricSpinner', + 'common/main/lib/component/TextareaField', 'common/main/lib/component/CheckBox' ], function (menuTemplate, $, _, Backbone) { 'use strict'; @@ -71,7 +72,12 @@ define([ }; this.spinners = []; this.lockedControls = []; + this.internalId = null; this._locked = true; + this._originalTextFormProps = null; + this._originalFormProps = null; + this._originalProps = null; + this._lockedControl = false; this.render(); }, @@ -82,16 +88,12 @@ define([ scope: this })); - this.FillColorContainer = $('#shape-panel-color-fill'); - this.FillImageContainer = $('#shape-panel-image-fill'); - this.FillPatternContainer = $('#shape-panel-pattern-fill'); - this.FillGradientContainer = $('#shape-panel-gradient-fill'); - this.TransparencyContainer = $('#shape-panel-transparent-fill'); - this.ShapeOnlySettings = $('.shape-only'); - this.CanChangeType = $('.change-type'); + this.textFieldContainer = el.find('.form-panel-textfield'); }, createDelayedElements: function() { + this._initSettings = false; + var $markup = this.$el || $(this.el); var me = this; @@ -102,14 +104,14 @@ define([ this.cmbKey = new Common.UI.ComboBox({ el: $markup.findById('#form-combo-key'), cls: 'input-group-nr', - menuStyle: 'min-width: 85px;', + menuStyle: 'min-width: 100%;', editable: true, data: [], disabled: this._locked }); this.cmbKey.setValue(''); this.lockedControls.push(this.cmbKey); - this.cmbKey.on('selected', this.onKeySelect.bind(this)); + this.cmbKey.on('selected', this.onKeyChanged.bind(this)); this.cmbKey.on('changed:after', this.onKeyChanged.bind(this)); this.cmbKey.on('hide:after', this.onHideMenus.bind(this)); @@ -123,14 +125,16 @@ define([ }); this.lockedControls.push(this.txtPlaceholder); this.txtPlaceholder.on('changed:after', this.onPlaceholderChanged.bind(this)); + this.txtPlaceholder.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); - this.textareaHelp = $markup.findById('#form-txt-help'); - this.textareaHelp.keydown(function (event) { - if (event.keyCode == Common.UI.Keys.RETURN) { - event.stopPropagation(); - } - me.isHelpChanged = true; + this.textareaHelp = new Common.UI.TextareaField({ + el : $markup.findById('#form-txt-help'), + style : 'width: 100%; height: 90px;', + value : '' }); + this.lockedControls.push(this.textareaHelp); + this.textareaHelp.on('changed:after', this.onHelpChanged.bind(this)); + this.textareaHelp.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); this.chMaxChars = new Common.UI.CheckBox({ el: $markup.findById('#form-chb-max-chars'), @@ -142,7 +146,7 @@ define([ this.spnMaxChars = new Common.UI.MetricSpinner({ el: $markup.findById('#form-spin-max-chars'), step: 1, - width: 53, + width: 48, defaultUnit : "", value: '10', maxValue: 1000000, @@ -162,9 +166,10 @@ define([ this.spnWidth = new Common.UI.MetricSpinner({ el: $markup.findById('#form-spin-width'), step: .1, - width: 80, + width: 64, defaultUnit : "cm", - value: '3 cm', + value: 'Auto', + allowAuto: true, maxValue: 55.88, minValue: 0.1 }); @@ -177,7 +182,7 @@ define([ cls : 'btn-toolbar', iconCls : 'toolbar__icon btn-remove-duplicates', caption : this.textDelete, - style : 'width: 100%;text-align: left;' + style : 'text-align: left;' }); this.btnRemForm.on('click', _.bind(function(btn){ this.api.asc_RemoveContentControlWrapper(this._state.id); @@ -189,10 +194,14 @@ define([ cls : 'btn-toolbar', iconCls : 'toolbar__icon btn-remove-duplicates', caption : this.textLock, - style : 'width: 100%;text-align: left;' + style : 'text-align: left;' }); this.btnLockForm.on('click', _.bind(function(btn){ - + if (this.api && !this._noApply) { + var props = this._originalProps || new AscCommon.CContentControlPr(); + props.put_Lock(!this._lockedControl ? Asc.c_oAscSdtLockType.SdtContentLocked : Asc.c_oAscSdtLockType.Unlocked); + this.api.asc_SetContentControlProperties(props, this.internalId); + } }, this)); this.lockedControls.push(this.btnLockForm); @@ -207,74 +216,101 @@ define([ return this; }, - onKeySelect: function(combo, record) { - if (this.api) - this.api.put_PrLineSpacing(record.value, record.defaultValue); - this.numLineHeight.setDefaultUnit(this._arrLineRule[record.value].defaultUnit); - this.numLineHeight.setMinValue(this._arrLineRule[record.value].minValue); - this.numLineHeight.setStep(this._arrLineRule[record.value].step); - this.fireEvent('editcomplete', this); - }, - onKeyChanged: function(combo, record) { - if (me._changedProps) { - me._changedProps.put_XAlign(undefined); - me._changedProps.put_X(Common.Utils.Metric.fnRecalcToMM(Common.Utils.String.parseFloat(record.value))); + if (this.api && !this._noApply) { + var props = this._originalProps || new AscCommon.CContentControlPr(); + var formPr = this._originalFormProps || new AscCommon.CSdtFormPr(); + formPr.put_Key(record.value); + props.put_FormPr(formPr); + this.api.asc_SetContentControlProperties(props, this.internalId); + this.fireEvent('editcomplete', this); } - this.fireEvent('editcomplete', this); }, onPlaceholderChanged: function(input, newValue, oldValue, e) { - var val = parseInt(me.txtFieldNum.getValue()); - if (val !== parseInt(oldValue)) { - me.api.asc_PreviewMailMergeResult(val-1); - me.fireEvent('editcomplete', me); + if (this.api && !this._noApply) { + var props = this._originalProps || new AscCommon.CContentControlPr(); + props.put_PlaceholderText(newValue); + this.api.asc_SetContentControlProperties(props, this.internalId); + this.fireEvent('editcomplete', this); + } + }, + + onHelpChanged: function(input, newValue, oldValue, e) { + if (this.api && !this._noApply) { + var props = this._originalProps || new AscCommon.CContentControlPr(); + var formPr = this._originalFormProps || new AscCommon.CSdtFormPr(); + formPr.put_HelpText(newValue); + props.put_FormPr(formPr); + this.api.asc_SetContentControlProperties(props, this.internalId); + this.fireEvent('editcomplete', this); } }, onChMaxCharsChanged: function(field, newValue, oldValue, eOpts){ this.spnMaxChars.setDisabled(field.getValue()!='checked'); + if (this.api && !this._noApply) { + var props = this._originalProps || new AscCommon.CContentControlPr(); + var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr(); + var checked = (field.getValue()=='checked' || this.chComb.getValue()=='checked'); + formTextPr.put_MaxCharacters(checked ? (this.spnMaxChars.getNumberValue() || 10) : checked); + props.put_TextFormPr(formTextPr); + this.api.asc_SetContentControlProperties(props, this.internalId); + this.fireEvent('editcomplete', this); + } }, onMaxCharsChange: function(field, newValue, oldValue, eOpts){ - if ( this.cmbLineRule.getRawValue() === '' ) - return; - var type = c_paragraphLinerule.LINERULE_AUTO; - if (this.api) - this.api.put_PrLineSpacing(this.cmbLineRule.getValue(), (this.cmbLineRule.getValue()==c_paragraphLinerule.LINERULE_AUTO) ? field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue())); + if (this.api && !this._noApply) { + var props = this._originalProps || new AscCommon.CContentControlPr(); + var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr(); + var checked = (this.chMaxChars.getValue()=='checked' || this.chComb.getValue()=='checked'); + formTextPr.put_MaxCharacters(checked ? (field.getNumberValue() || 10) : checked); + props.put_TextFormPr(formTextPr); + this.api.asc_SetContentControlProperties(props, this.internalId); + this.fireEvent('editcomplete', this); + } }, onChCombChanged: function(field, newValue, oldValue, eOpts){ var checked = (field.getValue()=='checked'); if (checked) { - this.chMaxChars.setValue(true); + this.chMaxChars.setValue(true, true); + this.spnMaxChars.setDisabled(false); } this.spnWidth.setDisabled(!checked); - if (this.api) - this.api.put_AddSpaceBetweenPrg((field.getValue()=='checked')); - this.fireEvent('editcomplete', this); - }, - - onNumSpacingBeforeChange: function(field, newValue, oldValue, eOpts){ - if (this.api) { - var num = field.getNumberValue(); - this._state.LineSpacingBefore = (num<0) ? -1 : Common.Utils.Metric.fnRecalcToMM(num); - this.api.put_LineSpacingBeforeAfter(0, this._state.LineSpacingBefore); + if (this.api && !this._noApply) { + var props = this._originalProps || new AscCommon.CContentControlPr(); + var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr(); + formTextPr.put_Comb(checked); + if (checked) { + formTextPr.put_MaxCharacters(this.spnMaxChars.getNumberValue() || 10); + if (this.spnWidth.getValue()) { + var value = this.spnWidth.getNumberValue(); + formTextPr.put_Width(value<=0 ? 0 : parseInt(Common.Utils.Metric.fnRecalcToMM(value) * 72 * 20 / 25.4)); + } else + formTextPr.put_Width(0); + } + props.put_TextFormPr(formTextPr); + this.api.asc_SetContentControlProperties(props, this.internalId); + this.fireEvent('editcomplete', this); } }, - onNumSpacingAfterChange: function(field, newValue, oldValue, eOpts){ - if (this.api){ - var num = field.getNumberValue(); - this._state.LineSpacingAfter = (num<0) ? -1 : Common.Utils.Metric.fnRecalcToMM(num); - this.api.put_LineSpacingBeforeAfter(1, this._state.LineSpacingAfter); - } - }, + onWidthChange: function(field, newValue, oldValue, eOpts){ + if (this.api && !this._noApply) { + var props = this._originalProps || new AscCommon.CContentControlPr(); + var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr(); + if (this.spnWidth.getValue()) { + var value = this.spnWidth.getNumberValue(); + formTextPr.put_Width(value<=0 ? 0 : parseInt(Common.Utils.Metric.fnRecalcToMM(value) * 72 * 20 / 25.4)); + } else + formTextPr.put_Width(0); - onAddIntervalChange: function(field, newValue, oldValue, eOpts){ - if (this.api) - this.api.put_AddSpaceBetweenPrg((field.getValue()=='checked')); - this.fireEvent('editcomplete', this); + props.put_TextFormPr(formTextPr); + this.api.asc_SetContentControlProperties(props, this.internalId); + this.fireEvent('editcomplete', this); + } }, ChangeSettings: function(props) { @@ -284,12 +320,25 @@ define([ this.disableControls(this._locked); if (props) { + this._originalProps = props; + + this._noApply = true; + + this.internalId = props.get_InternalId(); + var val = props.get_PlaceholderText(); - this.txtPlaceholder.setValue(val ? val : ''); + if (this._state.placeholder !== val) { + this.txtPlaceholder.setValue(val ? val : ''); + this._state.placeholder = val; + } val = props.get_Lock(); (val===undefined) && (val = Asc.c_oAscSdtLockType.Unlocked); - // this.btnLock.setValue(val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.SdtLocked || val==Asc.c_oAscSdtLockType.ContentLocked); + if (this._lockedControl !== val) { + this._lockedControl = (val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.SdtLocked || val==Asc.c_oAscSdtLockType.ContentLocked); + this.btnLockForm.setCaption(this._lockedControl ? this.textUnlock : this.textLock); + this.btnRemForm.setDisabled(this._lockedControl || this._locked); + } var type = props.get_SpecificType(); var specProps; @@ -298,6 +347,7 @@ define([ this.labelFormName.text(type == Asc.c_oAscContentControlSpecificType.ComboBox ? this.textCombobox : this.textDropDown); specProps = (type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.get_ComboBoxPr() : props.get_DropDownListPr(); if (specProps) { + this._originalListProps = specProps; var count = specProps.get_ItemsCount(); var arr = []; for (var i=0; i