/* * * (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 * */ /** * ControlSettingsDialog.js.js * * Created by Julia Radzhabova on 12.12.2017 * Copyright (c) 2018 Ascensio System SIA. All rights reserved. * */ 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/SymbolTableDialog', 'documenteditor/main/app/view/EditListItemDialog' ], function (contentTemplate) { 'use strict'; DE.Views.ControlSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ options: { contentWidth: 310, height: 392, toggleGroup: 'control-adv-settings-group', storageName: 'de-control-settings-adv-category' }, initialize : function(options) { var me = this; _.extend(this.options, { 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-list', panelCaption: this.textCombobox}, {panelId: 'id-adv-control-settings-date', panelCaption: this.textDate}, {panelId: 'id-adv-control-settings-checkbox',panelCaption: this.textCheckbox} ], contentTemplate: _.template(contentTemplate)({ scope: this }) }, options); this.handler = options.handler; this.props = options.props; this.api = options.api; Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); }, render: function() { Common.Views.AdvancedSettingsWindow.prototype.render.call(this); var me = this; this.txtName = new Common.UI.InputField({ el : $('#control-settings-txt-name'), allowBlank : true, validateOnChange: false, validateOnBlur: false, style : 'width: 100%;', maxLength: 64, value : '' }); this.txtTag = new Common.UI.InputField({ el : $('#control-settings-txt-tag'), allowBlank : true, validateOnChange: false, validateOnBlur: false, style : 'width: 100%;', maxLength: 64, value : '' }); this.txtPlaceholder = new Common.UI.InputField({ el : $('#control-settings-txt-pholder'), allowBlank : true, validateOnChange: false, validateOnBlur: false, style : 'width: 100%;', value : '' }); this.cmbShow = new Common.UI.ComboBox({ el: $('#control-settings-combo-show'), cls: 'input-group-nr', menuStyle: 'min-width: 120px;', editable: false, data: [ { displayValue: this.textBox, value: Asc.c_oAscSdtAppearance.Frame }, { displayValue: this.textNone, value: Asc.c_oAscSdtAppearance.Hidden } ] }); this.cmbShow.setValue(Asc.c_oAscSdtAppearance.Frame); this.btnColor = new Common.UI.ColorButton({ style: "width:45px;", menu : new Common.UI.Menu({ additionalAlign: this.menuAddAlign, items: [ { id: 'control-settings-system-color', caption: this.textSystemColor, template: _.template('<%= caption %>') }, {caption: '--'}, { template: _.template('
') }, { template: _.template('' + me.textNewColor + '') } ] }) }); this.btnColor.on('render:after', function(btn) { me.colors = new Common.UI.ThemeColorPalette({ el: $('#control-settings-color-menu') }); me.colors.on('select', _.bind(me.onColorsSelect, me)); }); this.btnColor.render( $('#control-settings-color-btn')); this.btnColor.setColor('000000'); this.btnColor.menu.items[3].on('click', _.bind(this.addNewColor, this, this.colors, this.btnColor)); $('#control-settings-system-color').on('click', _.bind(this.onSystemColor, this)); this.btnApplyAll = new Common.UI.Button({ el: $('#control-settings-btn-all') }); this.btnApplyAll.on('click', _.bind(this.applyAllClick, this)); this.chLockDelete = new Common.UI.CheckBox({ el: $('#control-settings-chb-lock-delete'), labelText: this.txtLockDelete }); this.chLockEdit = new Common.UI.CheckBox({ el: $('#control-settings-chb-lock-edit'), 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)); // date picker var data = [{ value: 0x042C }, { value: 0x0402 }, { value: 0x0405 }, { value: 0x0407 }, {value: 0x0807}, { value: 0x0408 }, { value: 0x0C09 }, { value: 0x0809 }, { value: 0x0409 }, { value: 0x0C0A }, { value: 0x080A }, { value: 0x040B }, { value: 0x040C }, { value: 0x0410 }, { value: 0x0411 }, { value: 0x0412 }, { value: 0x0426 }, { value: 0x0413 }, { value: 0x0415 }, { value: 0x0416 }, { value: 0x0816 }, { value: 0x0419 }, { value: 0x041B }, { value: 0x0424 }, { value: 0x081D }, { value: 0x041D }, { value: 0x041F }, { value: 0x0422 }, { value: 0x042A }, { value: 0x0804 }]; data.forEach(function(item) { var langinfo = Common.util.LanguageInfo.getLocalLanguageName(item.value); item.displayValue = langinfo[1]; item.langName = langinfo[0]; }); this.cmbLang = new Common.UI.ComboBox({ el : $('#control-settings-lang'), menuStyle : 'min-width: 100%; max-height: 185px;', cls : 'input-group-nr', editable : false, data : data }); this.cmbLang.setValue(0x0409); this.cmbLang.on('selected',function(combo, record) { me.updateFormats(record.value); }); this.listFormats = new Common.UI.ListView({ el: $('#control-settings-format'), store: new Common.UI.DataViewStore(), scrollAlwaysVisible: true }); this.listFormats.on('item:select', _.bind(this.onSelectFormat, this)); this.txtDate = new Common.UI.InputField({ el : $('#control-settings-txt-format'), allowBlank : true, validateOnChange: false, validateOnBlur: false, style : 'width: 100%;', value : '' }); // Check Box this.btnEditChecked = new Common.UI.Button({ el: $('#control-settings-btn-checked-edit'), hint: this.tipChange }); this.btnEditChecked.cmpEl.css({'font-size': '16px', 'line-height': '16px'}); this.btnEditChecked.on('click', _.bind(this.onEditCheckbox, this, true)); this.btnEditUnchecked = new Common.UI.Button({ el: $('#control-settings-btn-unchecked-edit'), hint: this.tipChange }); this.btnEditUnchecked.cmpEl.css({'font-size': '16px', 'line-height': '16px'}); this.btnEditUnchecked.on('click', _.bind(this.onEditCheckbox, this, false)); this.afterRender(); }, onColorsSelect: function(picker, color) { this.btnColor.setColor(color); var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a'); clr_item.hasClass('selected') && clr_item.removeClass('selected'); this.isSystemColor = false; }, updateThemeColors: function() { this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); }, addNewColor: function(picker, btn) { picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color); }, onSystemColor: function(e) { var color = Common.Utils.ThemeColor.getHexColor(220, 220, 220); this.btnColor.setColor(color); this.colors.clearSelection(); var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a'); !clr_item.hasClass('selected') && clr_item.addClass('selected'); this.isSystemColor = true; }, afterRender: function() { this.updateThemeColors(); this._setDefaults(this.props); if (this.storageName) { var value = Common.localStorage.getItem(this.storageName); this.setActiveCategory((value!==null) ? parseInt(value) : 0); } }, show: function() { Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments); }, _setDefaults: function (props) { if (props) { var val = props.get_Alias(); this.txtName.setValue(val ? val : ''); val = props.get_Tag(); this.txtTag.setValue(val ? val : ''); val = props.get_PlaceholderText(); this.txtPlaceholder.setValue(val ? val : ''); val = props.get_Appearance(); (val!==null && val!==undefined) && this.cmbShow.setValue(val); val = props.get_Color(); this.isSystemColor = (val===null); if (val) { val = Common.Utils.ThemeColor.getHexColor(val.get_r(), val.get_g(), val.get_b()); this.colors.selectByRGB(val,true); } else { this.colors.clearSelection(); var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a'); !clr_item.hasClass('selected') && clr_item.addClass('selected'); val = Common.Utils.ThemeColor.getHexColor(220, 220, 220); } this.btnColor.setColor(val); val = props.get_Lock(); (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); var type = props.get_SpecificType(); //for list controls this.btnsCategory[2].setVisible(type == Asc.c_oAscContentControlSpecificType.ComboBox || type == Asc.c_oAscContentControlSpecificType.DropDownList); if (type == Asc.c_oAscContentControlSpecificType.ComboBox || type == Asc.c_oAscContentControlSpecificType.DropDownList) { this.btnsCategory[2].setCaption(type == Asc.c_oAscContentControlSpecificType.ComboBox ? this.textCombobox : this.textDropDown); var 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; 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(); }, updateFormats: function(lang) { if (this.datetime) { var props = this.datetime, formats = props.get_FormatsExamples(), arr = []; for (var i = 0, len = formats.length; i < len; i++) { props.get_String(formats[i], undefined, lang); var rec = new Common.UI.DataViewModel(); rec.set({ format: formats[i], value: props.get_String(formats[i], undefined, lang) }); arr.push(rec); } this.listFormats.store.reset(arr); this.listFormats.selectByIndex(0); var rec = this.listFormats.getSelectedRec(); this.listFormats.scrollToRecord(rec); this.txtDate.setValue(rec.get('format')); } }, onEditCheckbox: function(checked) { if (this.api) { var me = this, props = (checked) ? me.checkedBox : me.uncheckedBox, cmp = (checked) ? me.btnEditChecked : me.btnEditUnchecked, handler = function(dlg, result, settings) { if (result == 'ok') { props.changed = true; props.code = settings.code; props.font = settings.font; props.font && cmp.cmpEl.css('font-family', props.font); settings.symbol && cmp.setCaption(settings.symbol); } }, win = new Common.Views.SymbolTableDialog({ api: me.api, lang: me.options.interfaceLang, modal: true, type: 0, font: props.font, code: props.code, handler: handler }); win.show(); win.on('symbol:dblclick', handler); } }, onSelectFormat: function(lisvView, itemView, record) { if (!record) return; this.txtDate.setValue(record.get('format')); }, textTitle: 'Content Control Settings', textName: 'Title', textTag: 'Tag', txtLockDelete: 'Content control cannot be deleted', txtLockEdit: 'Contents cannot be edited', textLock: 'Locking', textShowAs: 'Show as', textColor: 'Color', textBox: 'Bounding box', textNone: 'None', textNewColor: 'Add New Custom Color', textApplyAll: 'Apply to All', textAppearance: 'Appearance', textSystemColor: 'System', strGeneral: 'General', textAdd: 'Add', textChange: 'Edit', textDelete: 'Delete', textUp: 'Up', textDown: 'Down', textCombobox: 'Combo box', textDropDown: 'Drop-down list', textDisplayName: 'Display name', textValue: 'Value', textDate: 'Date format', textLang: 'Language', textFormat: 'Display the date like this', textCheckbox: 'Check box', textChecked: 'Checked symbol', textUnchecked: 'Unchecked symbol', tipChange: 'Change symbol', textPlaceholder: 'Placeholder' }, DE.Views.ControlSettingsDialog || {})) });