From 1f04c908134a5efdea426ef519c807676050de06 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 28 Sep 2020 19:06:12 +0300 Subject: [PATCH 01/33] [DE] Add form control settings to the right panel --- apps/common/main/lib/util/utils.js | 3 +- .../main/app/controller/RightMenu.js | 4 + .../main/app/template/FormSettings.template | 57 +++ .../main/app/template/RightMenu.template | 3 + .../main/app/view/FormSettings.js | 388 ++++++++++++++++++ .../documenteditor/main/app/view/RightMenu.js | 21 +- 6 files changed, 474 insertions(+), 2 deletions(-) create mode 100644 apps/documenteditor/main/app/template/FormSettings.template create mode 100644 apps/documenteditor/main/app/view/FormSettings.js diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js index e00a3b8b7..68b5f826d 100644 --- a/apps/common/main/lib/util/utils.js +++ b/apps/common/main/lib/util/utils.js @@ -106,7 +106,8 @@ Common.Utils = _.extend(new(function() { Signature : 9, Pivot : 10, Cell : 11, - Slicer : 12 + Slicer : 12, + Form : 13 }, importTextType = { DRM: 0, diff --git a/apps/documenteditor/main/app/controller/RightMenu.js b/apps/documenteditor/main/app/controller/RightMenu.js index f33f7e4cf..dc8842090 100644 --- a/apps/documenteditor/main/app/controller/RightMenu.js +++ b/apps/documenteditor/main/app/controller/RightMenu.js @@ -80,6 +80,7 @@ define([ this._settings[Common.Utils.documentSettingsType.Chart] = {panelId: "id-chart-settings", panel: rightMenu.chartSettings, btn: rightMenu.btnChart, hidden: 1, locked: false}; this._settings[Common.Utils.documentSettingsType.MailMerge] = {panelId: "id-mail-merge-settings", panel: rightMenu.mergeSettings, btn: rightMenu.btnMailMerge, hidden: 1, props: {}, locked: false}; this._settings[Common.Utils.documentSettingsType.Signature] = {panelId: "id-signature-settings", panel: rightMenu.signatureSettings, btn: rightMenu.btnSignature, hidden: 1, props: {}, locked: false}; + this._settings[Common.Utils.documentSettingsType.Form] = {panelId: "id-form-settings", panel: rightMenu.formSettings, btn: rightMenu.btnForm, hidden: 1, props: {}, locked: false}; }, setApi: function(api) { @@ -262,6 +263,7 @@ define([ this.rightmenu.chartSettings.updateMetricUnit(); this.rightmenu.imageSettings.updateMetricUnit(); this.rightmenu.tableSettings.updateMetricUnit(); + this.rightmenu.formSettings && this.rightmenu.formSettings.updateMetricUnit(); }, createDelayedElements: function() { @@ -347,6 +349,7 @@ define([ this.rightmenu.headerSettings.disableControls(disabled); this.rightmenu.tableSettings.disableControls(disabled); this.rightmenu.imageSettings.disableControls(disabled); + this.rightmenu.formSettings && this.rightmenu.formSettings.disableControls(disabled); if (!allowMerge && this.rightmenu.mergeSettings) { this.rightmenu.mergeSettings.disableControls(disabled); disabled && this.rightmenu.btnMailMerge.setDisabled(disabled); @@ -365,6 +368,7 @@ define([ this.rightmenu.btnShape.setDisabled(disabled); this.rightmenu.btnTextArt.setDisabled(disabled); this.rightmenu.btnChart.setDisabled(disabled); + this.rightmenu.btnForm && this.rightmenu.btnForm.setDisabled(disabled); } else { var selectedElements = this.api.getSelectedElements(); if (selectedElements.length > 0) diff --git a/apps/documenteditor/main/app/template/FormSettings.template b/apps/documenteditor/main/app/template/FormSettings.template new file mode 100644 index 000000000..603b4d701 --- /dev/null +++ b/apps/documenteditor/main/app/template/FormSettings.template @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/apps/documenteditor/main/app/template/RightMenu.template b/apps/documenteditor/main/app/template/RightMenu.template index 7b4bb1ba8..0af6d1dda 100644 --- a/apps/documenteditor/main/app/template/RightMenu.template +++ b/apps/documenteditor/main/app/template/RightMenu.template @@ -18,6 +18,8 @@
+
+
@@ -30,5 +32,6 @@ +
\ No newline at end of file diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js new file mode 100644 index 000000000..49f67fa2a --- /dev/null +++ b/apps/documenteditor/main/app/view/FormSettings.js @@ -0,0 +1,388 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2020 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ +/** + * FormSettings.js + * + * Created by Julia Radzhabova on 28/09/20 + * Copyright (c) 2020 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'text!documenteditor/main/app/template/FormSettings.template', + 'jquery', + 'underscore', + 'backbone', + 'common/main/lib/component/ComboBox', + 'common/main/lib/component/MetricSpinner', + 'common/main/lib/component/CheckBox' +], function (menuTemplate, $, _, Backbone) { + 'use strict'; + + DE.Views.FormSettings = Backbone.View.extend(_.extend({ + el: '#id-form-settings', + + // Compile our stats template + template: _.template(menuTemplate), + + // Delegated events for creating new items, and clearing completed ones. + events: { + }, + + options: { + alias: 'FormSettings' + }, + + initialize: function () { + this._initSettings = true; + + this._state = { + DisabledControls: true + }; + this.spinners = []; + this.lockedControls = []; + this._locked = true; + + 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'); + 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'); + }, + + createDelayedElements: function() { + var $markup = this.$el || $(this.el); + + var me = this; + + this.labelFormName = $markup.findById('#form-settings-name'); + + // Short Size + this.cmbKey = new Common.UI.ComboBox({ + el: $markup.findById('#form-combo-key'), + cls: 'input-group-nr', + menuStyle: 'min-width: 85px;', + 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('changed:after', this.onKeyChanged.bind(this)); + this.cmbKey.on('hide:after', this.onHideMenus.bind(this)); + + this.txtPlaceholder = new Common.UI.InputField({ + el : $markup.findById('#form-txt-pholder'), + allowBlank : true, + validateOnChange: false, + validateOnBlur: false, + style : 'width: 100%;', + value : '' + }); + this.lockedControls.push(this.txtPlaceholder); + this.txtPlaceholder.on('changed:after', this.onPlaceholderChanged.bind(this)); + + 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.chMaxChars = new Common.UI.CheckBox({ + el: $markup.findById('#form-chb-max-chars'), + labelText: this.textMaxChars + }); + this.chMaxChars.on('change', this.onChMaxCharsChanged.bind(this)); + this.lockedControls.push(this.chMaxChars); + + this.spnMaxChars = new Common.UI.MetricSpinner({ + el: $markup.findById('#form-spin-max-chars'), + step: 1, + width: 53, + defaultUnit : "", + value: '10', + maxValue: 1000000, + minValue: 1 + }); + this.lockedControls.push(this.spnMaxChars); + this.spnMaxChars.on('change', this.onMaxCharsChange.bind(this)); + this.spnMaxChars.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); + + this.chComb = new Common.UI.CheckBox({ + el: $markup.findById('#form-chb-comb'), + labelText: this.textComb + }); + this.chComb.on('change', this.onChCombChanged.bind(this)); + this.lockedControls.push(this.chComb); + + this.spnWidth = new Common.UI.MetricSpinner({ + el: $markup.findById('#form-spin-width'), + step: .1, + width: 80, + defaultUnit : "cm", + value: '3 cm', + maxValue: 55.88, + minValue: 0.1 + }); + this.lockedControls.push(this.spnWidth); + this.spnWidth.on('change', this.onWidthChange.bind(this)); + this.spnWidth.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); + + this.updateMetricUnit(); + }, + + setApi: function(api) { + this.api = api; + if (this.api) { + // this.api.asc_registerCallback('asc_onParaSpacingLine', _.bind(this._onLineSpacing, this)); + } + 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))); + } + 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); + } + }, + + onChMaxCharsChanged: function(field, newValue, oldValue, eOpts){ + this.spnMaxChars.setDisabled(field.getValue()!='checked'); + }, + + 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())); + }, + + onChCombChanged: function(field, newValue, oldValue, eOpts){ + var checked = (field.getValue()=='checked'); + if (checked) { + this.chMaxChars.setValue(true); + } + 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); + } + }, + + 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); + } + }, + + onAddIntervalChange: function(field, newValue, oldValue, eOpts){ + if (this.api) + this.api.put_AddSpaceBetweenPrg((field.getValue()=='checked')); + this.fireEvent('editcomplete', this); + }, + + ChangeSettings: function(props) { + if (this._initSettings) + this.createDelayedElements(); + + this.disableControls(this._locked); + + if (props) { + var val = props.get_PlaceholderText(); + this.txtPlaceholder.setValue(val ? 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); + + var type = props.get_SpecificType(); + var specProps; + //for list controls + if (type == Asc.c_oAscContentControlSpecificType.ComboBox || type == Asc.c_oAscContentControlSpecificType.DropDownList) { + 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) { + var count = specProps.get_ItemsCount(); + var arr = []; + for (var i=0; i