Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] Add settings for combobox and dropdown list controls

Browse source
This commit is contained in:
Julia Radzhabova 2019-11-06 13:24:04 +03:00
parent d2abb4c455
commit 8803f6e1d6
3 changed files with 349 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
apps/documenteditor/main/app/template/ControlSettingsDialog.template
View file

@ -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>

165
apps/documenteditor/main/app/view/ControlSettingsDialog.js
View file

@ -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 || {}))
});

162
apps/documenteditor/main/app/view/EditListItemDialog.js Normal file
View file

@ -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 || {}));
});