[DE] Add form control settings to the right panel

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,

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)

apps/documenteditor/main/app/template/FormSettings.template

@@ -0,0 +1,57 @@
+<table cols="1">
+    <tr>
+        <td>
+            <label class="header" id="form-settings-name"><%= scope.textField %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textKey %></label>
+            <div id="form-combo-key" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textPlaceholder %></label>
+            <div id="form-txt-pholder"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-large">
+            <label class="input-label"><%= scope.textTip %></label>
+            <textarea id="form-txt-help" class="form-control" style="width: 100%; height: 90px;"></textarea>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="form-chb-max-chars" style="display: inline-block;margin-right: 10px;"></div>
+            <div id="form-spin-max-chars" style="display: inline-block;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="form-chb-comb"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan="2">
+            <label class="input-label" style="margin-right: 10px;"><%= scope.textWidth %></label>
+            <div id="form-spin-width" style=""></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="form-btn-delete" style="width:100%;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="form-btn-lock" style="width:100%;"></div>
+        </td>
+    </tr>
+</table>

apps/documenteditor/main/app/template/RightMenu.template

@@ -18,6 +18,8 @@
         </div>
         <div id="id-signature-settings" class="settings-panel">
         </div>
+        <div id="id-form-settings" class="settings-panel">
+        </div>
     </div>
     <div class="tool-menu-btns">
         <div class="ct-btn-category arrow-left"></div>
@@ -30,5 +32,6 @@
         <button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button>
         <button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button>
         <button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
+        <button id="id-right-menu-form" class="btn btn-category arrow-left hidden" content-target="id-form-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
     </div>
 </div>

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<count; i++) {
+                            arr.push({
+                                value: specProps.get_ItemValue(i),
+                                name: specProps.get_ItemDisplayText(i)
+                            });
+                        }
+                        this.list.store.reset(arr);
+                    }
+                    this.disableListButtons();
+                }
+
+                if (type == Asc.c_oAscContentControlSpecificType.CheckBox) {
+                    specProps = props.get_CheckBoxPr();
+                }
+
+                this.type = type;
+
+                // form settings
+                var formPr = props.get_FormPr();
+                if (formPr) {
+                    val = formPr.get_Key();
+                    this.cmbKey.setValue(val ? val : '');
+
+                    val = formPr.get_HelpText();
+                    this.textareaHelp.val(val ? val : '');
+
+                    var hidden = true;
+                    if (type == Asc.c_oAscContentControlSpecificType.CheckBox && specProps) {
+                        val = specProps.get_GroupKey();
+                        this.txtGroupKey.setValue(val ? val : '');
+                        hidden = (typeof val !== 'string');
+                        this.labelFormName.text(hidden ? this.textCheckBox : this.textRadiobox);
+                    }
+                    this.$el.find('.group-key').toggleClass('hidden', hidden);
+                }
+
+                var formTextPr = props.get_TextFormPr();
+                if (formTextPr) {
+                    this.labelFormName.text(this.textField);
+                    val = formTextPr.get_Comb();
+                    if ( this._state.Comb!==val ) {
+                        this.chComb.setValue(!!val, true);
+                        this._state.Comb=val;
+                    }
+
+                    this.spnWidth.setDisabled(!val);
+                    val = formTextPr.get_Width();
+                    if ( Math.abs(this._state.Width-val)>0.1) {
+                        this.spnWidth.setValue(val ? val : '', true);
+                        this._state.Width=val;
+                    }
+
+                    val = formTextPr.get_MaxCharacters();
+                    if ( Math.abs(this._state.MaxChars-val)>0.1) {
+                        this.chMaxChars.setValue(val && val>=0, true);
+                        this.spnMaxChars.setDisabled(!val || val<0);
+                        this.spnMaxChars.setValue(val && val>=0 ? val : 10, true);
+                        this._state.MaxChars=val;
+                    }
+                }
+            }
+        },
+
+        updateMetricUnit: function() {
+            if (this.spinners) {
+                for (var i=0; i<this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.01);
+                }
+            }
+        },
+
+        onHideMenus: function(menu, e, isFromInputControl){
+            if (!isFromInputControl) this.fireEvent('editcomplete', this);
+        },
+
+        setLocked: function (locked) {
+            this._locked = locked;
+        },
+
+        disableControls: function(disable) {
+            if (this._state.DisabledControls!==disable) {
+                this._state.DisabledControls = disable;
+                _.each(this.lockedControls, function(item) {
+                    item.setDisabled(disable);
+                });
+                this.textTip.toggleClass('disabled', disable);
+            }
+        },
+
+        hideTextOnlySettings: function(value) {
+            if (this._state.HideTextOnlySettings !== value) {
+                this._state.HideTextOnlySettings = value;
+                this.TextOnlySettings.toggleClass('hidden', value==true);
+            }
+        },
+
+        textField: 'Text field',
+        textKey: 'Key',
+        textPlaceholder: 'Placeholder',
+        textTip: 'Tip',
+        textMaxChars: 'Characters limit',
+        textComb: 'Comb of characters',
+        textWidth: 'Width',
+        textDelete: 'Delete',
+        textLock: 'Lock'
+
+    }, DE.Views.FormSettings || {}));
+});

apps/documenteditor/main/app/view/RightMenu.js

@@ -58,6 +58,7 @@ define([
     'documenteditor/main/app/view/MailMergeSettings',
     'documenteditor/main/app/view/TextArtSettings',
     'documenteditor/main/app/view/SignatureSettings',
+    'documenteditor/main/app/view/FormSettings',
     'common/main/lib/component/Scroller'
 ], function (menuTemplate, $, _, Backbone) {
     'use strict';
@@ -210,6 +211,22 @@ define([
                 this.signatureSettings = new DE.Views.SignatureSettings();
             }
 
+            if (mode && mode.canFeatureContentControl && mode.canEditContentControl) {
+                this.btnForm = new Common.UI.Button({
+                    hint: this.txtFormSettings,
+                    asctype: Common.Utils.documentSettingsType.Form,
+                    enableToggle: true,
+                    disabled: true,
+                    toggleGroup: 'tabpanelbtnsGroup',
+                    allowMouseEventsOnDisabled: true
+                });
+                this._settings[Common.Utils.documentSettingsType.Form]   = {panel: "id-form-settings",      btn: this.btnForm};
+                this.btnForm.setElement($markup.findById('#id-right-menu-form'), false); this.btnForm.render().setVisible(true);
+                this.btnForm.on('click', this.onBtnMenuClick.bind(this));
+                this.formSettings = new DE.Views.FormSettings();
+            }
+
+
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
                     el: $(this.el).find('.right-panel'),
@@ -242,6 +259,7 @@ define([
             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);
+            if (this.formSettings) this.formSettings.setApi(api).on('editcomplete', _fire_editcomplete);
         },
 
         setMode: function(mode) {
@@ -326,6 +344,7 @@ define([
         txtTextArtSettings:         'Text Art Settings',
         txtChartSettings:           'Chart Settings',
         txtMailMergeSettings:       'Mail Merge Settings',
-        txtSignatureSettings:       'Signature Settings'
+        txtSignatureSettings:       'Signature Settings',
+        txtFormSettings:            'Form Settings'
     }, DE.Views.RightMenu || {}));
 });