/* * * (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/TextareaField', 'common/main/lib/component/CheckBox', 'common/main/lib/view/ImageFromUrlDialog' ], 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: undefined, LockDelete: undefined }; this.spinners = []; this.lockedControls = []; this.internalId = null; this._locked = true; this._originalTextFormProps = null; this._originalFormProps = null; this._originalProps = null; this.render(); }, render: function () { var el = this.$el || $(this.el); el.html(this.template({ scope: this })); this.TextOnlySettings = el.find('.form-textfield'); this.PlaceholderSettings = el.find('.form-placeholder'); this.KeySettings = el.find('.form-keyfield'); this.CheckOnlySettings = el.find('.form-checkbox'); this.RadioOnlySettings = el.find('.form-radiobox'); this.ListOnlySettings = el.find('.form-list'); this.ImageOnlySettings = el.find('.form-image'); }, createDelayedElements: function() { this._initSettings = false; var $markup = this.$el || $(this.el); var me = this; this.labelFormName = $markup.findById('#form-settings-name'); // Common props this.cmbKey = new Common.UI.ComboBox({ el: $markup.findById('#form-combo-key'), cls: 'input-group-nr', menuStyle: 'min-width: 100%;', editable: true, data: [] }); this.cmbKey.setValue(''); this.lockedControls.push(this.cmbKey); 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)); 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.txtPlaceholder.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); this.textareaHelp = new Common.UI.TextareaField({ el : $markup.findById('#form-txt-help'), style : 'width: 100%; height: 60px;', value : '' }); this.lockedControls.push(this.textareaHelp); this.textareaHelp.on('changed:after', this.onHelpChanged.bind(this)); this.textareaHelp.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); // Text props 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: 48, 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: 64, defaultUnit : "cm", value: 'Auto', allowAuto: true, 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);}); // Radio props this.cmbGroupKey = new Common.UI.ComboBox({ el: $markup.findById('#form-combo-group-key'), cls: 'input-group-nr', menuStyle: 'min-width: 100%;', editable: true, data: [] }); this.cmbGroupKey.setValue(''); this.lockedControls.push(this.cmbGroupKey); this.cmbGroupKey.on('selected', this.onGroupKeyChanged.bind(this)); this.cmbGroupKey.on('changed:after', this.onGroupKeyChanged.bind(this)); this.cmbGroupKey.on('hide:after', this.onHideMenus.bind(this)); // combobox & dropdown list this.txtNewValue = new Common.UI.InputField({ el : $markup.findById('#form-txt-new-value'), allowBlank : true, validateOnChange: false, validateOnBlur: false, style : 'width: 100%;', value : '' }); this.lockedControls.push(this.txtNewValue); this.list = new Common.UI.ListView({ el: $markup.findById('#form-list-list'), store: new Common.UI.DataViewStore(), emptyText: '', template: _.template(['
'].join('')), itemTemplate: _.template([ '
', // '
<%= name %>
', '
<%= name %>
', '
' ].join('')) }); this.list.on('item:select', _.bind(this.onSelectItem, this)); this.lockedControls.push(this.list); this.btnListAdd = new Common.UI.Button({ parentEl: $markup.findById('#form-list-add'), cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-zoomup', hint: this.textTipAdd }); this.btnListAdd.on('click', _.bind(this.onAddItem, this)); this.lockedControls.push(this.btnListAdd); this.btnListDelete = new Common.UI.Button({ parentEl: $markup.findById('#form-list-delete'), cls: 'btn-toolbar', iconCls: 'toolbar__icon cc-remove', hint: this.textTipDelete }); this.btnListDelete.on('click', _.bind(this.onDeleteItem, this)); this.lockedControls.push(this.btnListDelete); this.btnListUp = new Common.UI.Button({ parentEl: $markup.findById('#form-list-up'), cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-up', hint: this.textTipUp }); this.btnListUp.on('click', _.bind(this.onMoveItem, this, true)); this.lockedControls.push(this.btnListUp); this.btnListDown = new Common.UI.Button({ parentEl: $markup.findById('#form-list-down'), cls: 'btn-toolbar', iconCls: 'toolbar__icon btn-down', hint: this.textTipDown }); this.btnListDown.on('click', _.bind(this.onMoveItem, this, false)); this.lockedControls.push(this.btnListDown); // image props this.btnSelectImage = new Common.UI.Button({ parentEl: $('#form-button-replace'), cls: 'btn-text-menu-default', caption: this.textSelectImage, style: "width:100%;", menu: new Common.UI.Menu({ style: 'min-width: 194px;', maxHeight: 200, items: [ {caption: this.textFromFile, value: 0}, {caption: this.textFromUrl, value: 1}, {caption: this.textFromStorage, value: 2} ] }) }); this.lockedControls.push(this.btnSelectImage); this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this)); this.btnSelectImage.menu.items[2].setVisible(this.mode.canRequestInsertImage || this.mode.fileChoiceUrl && this.mode.fileChoiceUrl.indexOf("{documentType}")>-1); this.btnRemForm = new Common.UI.Button({ parentEl: $markup.findById('#form-btn-delete'), cls : 'btn-toolbar', iconCls : 'toolbar__icon cc-remove', caption : this.textDelete, style : 'text-align: left;' }); this.btnRemForm.on('click', _.bind(function(btn){ this.api.asc_RemoveContentControlWrapper(this._state.id); }, this)); this.lockedControls.push(this.btnRemForm); this.btnLockForm = new Common.UI.Button({ parentEl: $markup.findById('#form-btn-lock'), cls : 'btn-toolbar', iconCls : 'toolbar__icon btn-lock', caption : this.textLock, 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._state.LockDelete ? Asc.c_oAscSdtLockType.SdtLocked : Asc.c_oAscSdtLockType.Unlocked); this.api.asc_SetContentControlProperties(props, this.internalId); } }, this)); this.updateMetricUnit(); }, setApi: function(api) { this.api = api; if (this.api) { // this.api.asc_registerCallback('asc_onParaSpacingLine', _.bind(this._onLineSpacing, this)); } return this; }, setMode: function(mode) { this.mode = mode; }, onKeyChanged: function(combo, record) { 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); } }, onPlaceholderChanged: function(input, newValue, oldValue, e) { 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.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, true); this.spnMaxChars.setDisabled(false); } this.spnWidth.setDisabled(!checked); 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); } }, 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); props.put_TextFormPr(formTextPr); this.api.asc_SetContentControlProperties(props, this.internalId); this.fireEvent('editcomplete', this); } }, onGroupKeyChanged: function(combo, record) { if (this.api && !this._noApply) { var props = this._originalProps || new AscCommon.CContentControlPr(); var specProps = this._originalCheckProps || new AscCommon.CSdtCheckBoxPr(); specProps.put_GroupKey(record.value); props.put_CheckBoxPr(specProps); this.api.asc_SetContentControlProperties(props, this.internalId); this.fireEvent('editcomplete', this); } }, fillListProps: function() { if (this.api && !this._noApply) { var props = this._originalProps || new AscCommon.CContentControlPr(); var specProps = this._originalListProps || new AscCommon.CSdtComboBoxPr(); specProps.clear(); this.list.store.each(function (item, index) { specProps.add_Item(item.get('name'), item.get('value')); }); (this.type == Asc.c_oAscContentControlSpecificType.ComboBox) ? props.put_ComboBoxPr(specProps) : props.put_DropDownListPr(specProps); this.api.asc_SetContentControlProperties(props, this.internalId); } }, onAddItem: function() { var store = this.list.store, value = this.txtNewValue.getValue(); if (value!=='') { var rec = store.findWhere({value: value}); if (!rec) { store.add({value: value, name: value}); this.fillListProps(); } } this.fireEvent('editcomplete', this); }, onDeleteItem: function(btn, eOpts){ var rec = this.list.getSelectedRec(); if (rec) { var store = this.list.store; store.remove(rec); this.fillListProps(); } this.fireEvent('editcomplete', this); }, onMoveItem: function(up) { var store = this.list.store, length = store.length, rec = this.list.getSelectedRec(); if (rec) { var index = store.indexOf(rec); store.add(store.remove(rec), {at: up ? Math.max(0, index-1) : Math.min(length-1, index+1)}); this.fillListProps(); } this.fireEvent('editcomplete', this); }, setImageUrl: function(url, token) { this.api.AddImageUrl(url, this._originalProps, token); }, insertImageFromStorage: function(data) { if (data && data.url && data.c=='control') { this.setImageUrl(data.url, data.token); } }, onImageSelect: function(menu, item) { if (item.value==1) { var me = this; (new Common.Views.ImageFromUrlDialog({ handler: function(result, value) { if (result == 'ok') { if (me.api) { var checkUrl = value.replace(/ /g, ''); if (!_.isEmpty(checkUrl)) { me.setImageUrl(checkUrl); } } } me.fireEvent('editcomplete', me); } })).show(); } else if (item.value==2) { Common.NotificationCenter.trigger('storage:image-load', 'control'); } else { if (this._isFromFile) return; this._isFromFile = true; if (this.api) this.api.asc_addImage(this._originalProps); this.fireEvent('editcomplete', this); this._isFromFile = false; } }, ChangeSettings: function(props) { if (this._initSettings) this.createDelayedElements(); if (props) { this._originalProps = props; this._noApply = true; this.internalId = props.get_InternalId(); var val = props.get_PlaceholderText(); 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); if (this._state.LockDelete !== (val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.SdtLocked)) { this._state.LockDelete = (val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.SdtLocked); this.btnLockForm.setCaption(this._state.LockDelete ? this.textUnlock : this.textLock); } this.disableControls(this._locked); 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) { this._originalListProps = specProps; var count = specProps.get_ItemsCount(); var arr = []; for (var i=0; i0.1) { this.spnWidth.setValue(val!==0 && val!==undefined ? Common.Utils.Metric.fnRecalcFromMM(val * 25.4 / 20 / 72.0) : -1, true); this._state.Width=val; } val = formTextPr.get_MaxCharacters(); this.chMaxChars.setValue(val && val>=0); this.spnMaxChars.setDisabled(!val || val<0); this.spnMaxChars.setValue(val && val>=0 ? val : 10); } this._noApply = false; if (this.type !== type || type == Asc.c_oAscContentControlSpecificType.CheckBox) this.showHideControls(type, formTextPr, specProps); this.type = type; } }, updateMetricUnit: function() { if (this.spinners) { for (var i=0; i