diff --git a/apps/documenteditor/main/app/template/ControlSettingsDialog.template b/apps/documenteditor/main/app/template/ControlSettingsDialog.template index 1598c4200..f5d339807 100644 --- a/apps/documenteditor/main/app/template/ControlSettingsDialog.template +++ b/apps/documenteditor/main/app/template/ControlSettingsDialog.template @@ -64,4 +64,29 @@ + +
+
+ + + + + + + + + +
+ + +
+
+
+ + + + + +
+
\ 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 e8553800f..2b5aa2208 100644 --- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js @@ -43,7 +43,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', 'common/main/lib/util/utils', 'common/main/lib/component/CheckBox', 'common/main/lib/component/InputField', - 'common/main/lib/view/AdvancedSettingsWindow' + 'common/main/lib/view/AdvancedSettingsWindow', + 'documenteditor/main/app/view/EditListItemDialog' ], function (contentTemplate) { 'use strict'; DE.Views.ControlSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ @@ -61,7 +62,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', title: this.textTitle, items: [ {panelId: 'id-adv-control-settings-general', panelCaption: this.strGeneral}, - {panelId: 'id-adv-control-settings-lock', panelCaption: this.textLock} + {panelId: 'id-adv-control-settings-lock', panelCaption: this.textLock}, + {panelId: 'id-adv-control-settings-list', panelCaption: this.textCombobox} ], contentTemplate: _.template(contentTemplate)({ scope: this @@ -154,6 +156,46 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', labelText: this.txtLockEdit }); + // combobox & dropdown list + this.list = new Common.UI.ListView({ + el: $('#control-settings-list', this.$window), + store: new Common.UI.DataViewStore(), + emptyText: '', + template: _.template(['
'].join('')), + itemTemplate: _.template([ + '
', + '
<%= name %>
', + '
<%= value %>
', + '
' + ].join('')) + }); + this.list.on('item:select', _.bind(this.onSelectItem, this)); + + this.btnAdd = new Common.UI.Button({ + el: $('#control-settings-btn-add') + }); + this.btnAdd.on('click', _.bind(this.onAddItem, this)); + + this.btnChange = new Common.UI.Button({ + el: $('#control-settings-btn-change') + }); + this.btnChange.on('click', _.bind(this.onChangeItem, this)); + + this.btnDelete = new Common.UI.Button({ + el: $('#control-settings-btn-delete') + }); + this.btnDelete.on('click', _.bind(this.onDeleteItem, this)); + + this.btnUp = new Common.UI.Button({ + el: $('#control-settings-btn-up') + }); + this.btnUp.on('click', _.bind(this.onMoveItem, this, true)); + + this.btnDown = new Common.UI.Button({ + el: $('#control-settings-btn-down') + }); + this.btnDown.on('click', _.bind(this.onMoveItem, this, false)); + this.afterRender(); }, @@ -222,6 +264,25 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', (val===undefined) && (val = Asc.c_oAscSdtLockType.Unlocked); this.chLockDelete.setValue(val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.SdtLocked); this.chLockEdit.setValue(val==Asc.c_oAscSdtLockType.SdtContentLocked || val==Asc.c_oAscSdtLockType.ContentLocked); + + //for list controls + /* + // this.btnsCategory[2].setVisible(type == 'list'); + + var items = props.get_ListItems(); + if (items) { + var arr = []; + for (var i=0; istore.length-1) idx = store.length-1; + if (store.length>0) { + this.list.selectByIndex(idx); + this.list.scrollToRecord(store.at(idx)); + } + } + this.disableListButtons(); + this.list.cmpEl.find('.listview').focus(); + }, + + 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.list.selectRecord(rec); + this.list.scrollToRecord(rec); + } + this.list.cmpEl.find('.listview').focus(); + }, + textTitle: 'Content Control Settings', textName: 'Title', textTag: 'Tag', @@ -289,7 +440,15 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', textApplyAll: 'Apply to All', textAppearance: 'Appearance', textSystemColor: 'System', - strGeneral: 'General' + strGeneral: 'General', + textAdd: 'Add', + textChange: 'Edit', + textDelete: 'Delete', + textUp: 'Up', + textDown: 'Down', + textCombobox: 'Combo box', + textDisplayName: 'Display name', + textValue: 'Value' }, DE.Views.ControlSettingsDialog || {})) }); \ No newline at end of file diff --git a/apps/documenteditor/main/app/view/EditListItemDialog.js b/apps/documenteditor/main/app/view/EditListItemDialog.js new file mode 100644 index 000000000..ba854af97 --- /dev/null +++ b/apps/documenteditor/main/app/view/EditListItemDialog.js @@ -0,0 +1,162 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * 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 + * + */ + +/** + * EditListItemDialog.js + * + * Created by Julia Radzhabova on 05.11.2019 + * Copyright (c) 2019 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'common/main/lib/component/Window', + 'common/main/lib/component/InputField' +], function () { 'use strict'; + + DE.Views.EditListItemDialog = Common.UI.Window.extend(_.extend({ + options: { + width: 330, + header: false, + cls: 'modal-dlg', + buttons: ['ok', 'cancel'] + }, + + initialize : function(options) { + _.extend(this.options, options || {}); + + this.template = [ + '
', + '
', + '', + '
', + '
', + '
', + '', + '
', + '
', + '
' + ].join(''); + + this.options.tpl = _.template(this.template)(this.options); + Common.UI.Window.prototype.initialize.call(this, this.options); + }, + + render: function() { + Common.UI.Window.prototype.render.call(this); + + var me = this; + me.inputName = new Common.UI.InputField({ + el : $('#id-dlg-label-name'), + allowBlank : false, + blankError : me.textNameError, + style : 'width: 100%;', + validateOnBlur: false, + validation : function(value) { + return value ? true : ''; + } + }); + me.inputName._input.on('input', function (e) { + if (me.copyvalue==undefined && me.inputValue.getValue()==me.inputName.getValue()) { + me.copyvalue = 1; + } + if (me.copyvalue==1) + me.inputValue.setValue($(e.target).val()); + else if (me.copyvalue==2) + me.copyvalue = 0; + }); + + me.inputValue = new Common.UI.InputField({ + el : $('#id-dlg-label-value'), + style : 'width: 100%;', + validateOnBlur: false + }); + me.inputValue._input.on('input', function (e) { + if (me.copyvalue==undefined && me.inputValue.getValue()==me.inputName.getValue()) { + me.copyvalue = 2; + } + if (me.copyvalue==2) + me.inputName.setValue($(e.target).val()); + else if (me.copyvalue==1) + me.copyvalue = 0; + }); + + var $window = this.getChild(); + $window.find('.btn').on('click', _.bind(this.onBtnClick, this)); + }, + + show: function() { + Common.UI.Window.prototype.show.apply(this, arguments); + + var me = this; + _.delay(function(){ + me.inputName.cmpEl.find('input').focus(); + },50); + }, + + onPrimary: function(event) { + this._handleInput('ok'); + return false; + }, + + onBtnClick: function(event) { + this._handleInput(event.currentTarget.attributes['result'].value); + }, + + _handleInput: function(state) { + if (this.options.handler) { + if (state == 'ok') { + if (this.inputName.checkValidate() !== true) { + this.inputName.cmpEl.find('input').focus(); + return; + } + } + + this.options.handler.call(this, state, this.inputName.getValue(), this.inputValue.getValue()); + } + + this.close(); + }, + + setSettings: function (props) { + if (props) { + this.inputName.setValue(props.name || ''); + this.inputValue.setValue(props.value || ''); + } + }, + + textDisplayName: 'Display name', + textValue: 'Value', + textNameError: 'Display name must not be empty.' + }, DE.Views.EditListItemDialog || {})); +}); \ No newline at end of file