[DE] Add settings for combobox and dropdown list controls

apps/documenteditor/main/app/template/ControlSettingsDialog.template

@@ -64,4 +64,29 @@
             </tr>
         </table>
     </div>
+</div>
+<div id="id-adv-control-settings-list" class="settings-panel active">
+    <div class="inner-content">
+        <table cols="2" style="width: 100%;">
+            <tr>
+                <td>
+                    <label class="header" style="width: 99px;"><%= scope.textDisplayName %></label>
+                    <label class="header" style=""><%= scope.textValue %></label>
+                </td>
+                <td></td>
+            </tr>
+            <tr style="vertical-align: top;">
+                <td class="padding-small">
+                    <div id="control-settings-list" style="width:200px; height: 192px;margin-right: 10px;"></div>
+                </td>
+                <td class="padding-small">
+                    <button type="button" class="btn btn-text-default" id="control-settings-btn-add" style="min-width: 86px;margin-bottom: 5px;"><%= scope.textAdd %></button>
+                    <button type="button" class="btn btn-text-default" id="control-settings-btn-change" style="min-width: 86px;margin-bottom: 5px;"><%= scope.textChange %></button>
+                    <button type="button" class="btn btn-text-default" id="control-settings-btn-delete" style="min-width: 86px;margin-bottom: 5px;"><%= scope.textDelete %></button>
+                    <button type="button" class="btn btn-text-default" id="control-settings-btn-up" style="min-width: 86px;margin-bottom: 5px;"><%= scope.textUp %></button>
+                    <button type="button" class="btn btn-text-default" id="control-settings-btn-down" style="min-width: 86px;margin-bottom: 5px;"><%= scope.textDown %></button>
+                </td>
+            </tr>
+        </table>
+    </div>
 </div>

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(['<div class="listview inner" style=""></div>'].join('')),
+                itemTemplate: _.template([
+                    '<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
+                    '<div style="width:90px;display: inline-block;vertical-align: middle; overflow: hidden; text-overflow: ellipsis;white-space: pre;margin-right: 5px;"><%= name %></div>',
+                    '<div style="width:90px;display: inline-block;vertical-align: middle; overflow: hidden; text-overflow: ellipsis;white-space: pre;"><%= value %></div>',
+                    '</div>'
+                ].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; i<items.length; i++) {
+                        arr.push({
+                            value: items[i].get_Value(),
+                            name: items[i].get_Name()
+                        });
+                    }
+
+                    this.list.store.reset(arr);
+                }
+                */
+                this.disableListButtons();
             }
         },
 
@@ -248,6 +309,13 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
                 lock = Asc.c_oAscSdtLockType.ContentLocked;
             props.put_Lock(lock);
 
+            // for list controls
+            // var arr = [];
+            // this.list.store.each(function (item, index) {
+            //     arr.push(new Asc.asc_CListItem(item.get('name'), item.get('value')));
+            // }, this);
+            // props.set_ListItems(arr);
+
             return props;
         },
 
@@ -275,6 +343,89 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template',
             }
         },
 
+        onSelectItem: function(listView, itemView, record) {
+            this.disableListButtons(false);
+        },
+
+        disableListButtons: function(disabled) {
+            if (disabled===undefined)
+                disabled = !this.list.getSelectedRec();
+            this.btnChange.setDisabled(disabled);
+            this.btnDelete.setDisabled(disabled);
+            this.btnUp.setDisabled(disabled);
+            this.btnDown.setDisabled(disabled);
+        },
+
+        onAddItem: function() {
+            var me = this,
+                win = new DE.Views.EditListItemDialog({
+                    handler: function(result, name, value) {
+                        if (result == 'ok') {
+                            var rec = me.list.store.add({
+                                    value: value,
+                                    name: name
+                                });
+                            if (rec) {
+                                me.list.selectRecord(rec);
+                                me.list.scrollToRecord(rec);
+                                me.disableListButtons();
+                            }
+                        }
+                        me.list.cmpEl.find('.listview').focus();
+                    }
+                });
+            win.show();
+        },
+
+        onChangeItem: function() {
+            var me = this,
+                rec = this.list.getSelectedRec(),
+                win = new DE.Views.EditListItemDialog({
+                    handler: function(result, name, value) {
+                        if (result == 'ok') {
+                            if (rec) {
+                                rec.set({
+                                    value: value,
+                                    name: name
+                                });
+                            }
+                        }
+                        me.list.cmpEl.find('.listview').focus();
+                    }
+                });
+            rec && win.show();
+            rec && win.setSettings({name: rec.get('name'), value: rec.get('value')});
+        },
+
+        onDeleteItem: function(btn, eOpts){
+            var rec = this.list.getSelectedRec();
+            if (rec) {
+                var store = this.list.store;
+                var idx = _.indexOf(store.models, rec);
+                store.remove(rec);
+                if (idx>store.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 || {}))
 });

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 = [
+                '<div class="box">',
+                '<div class="input-row">',
+                    '<label>' + this.textDisplayName + '</label>',
+                '</div>',
+                '<div id="id-dlg-label-name" class="input-row"></div>',
+                '<div class="input-row">',
+                '<label>' + this.textValue + '</label>',
+                '</div>',
+                '<div id="id-dlg-label-value" class="input-row"></div>',
+                '</div>'
+            ].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 || {}));
+});