2016-04-01 13:17:09 +00:00
|
|
|
/*
|
|
|
|
*
|
2019-01-17 13:05:03 +00:00
|
|
|
* (c) Copyright Ascensio System SIA 2010-2019
|
2016-04-01 13:17:09 +00:00
|
|
|
*
|
|
|
|
* 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
|
|
|
|
*
|
2019-01-17 13:00:34 +00:00
|
|
|
* You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
|
|
|
|
* street, Riga, Latvia, EU, LV-1050.
|
2016-04-01 13:17:09 +00:00
|
|
|
*
|
|
|
|
* 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
|
|
|
|
*
|
|
|
|
*/
|
2016-03-11 00:48:53 +00:00
|
|
|
/**
|
|
|
|
* DataView.js
|
|
|
|
*
|
|
|
|
* A mechanism for displaying data using custom layout templates and formatting.
|
|
|
|
*
|
|
|
|
* Created by Alexander Yuzhin on 1/24/14
|
2018-03-01 12:16:38 +00:00
|
|
|
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
|
2016-03-11 00:48:53 +00:00
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The View uses an template as its internal templating mechanism, and is bound to an
|
|
|
|
* {@link Common.UI.DataViewStore} so that as the data in the store changes the view is automatically updated
|
|
|
|
* to reflect the changes.
|
|
|
|
*
|
|
|
|
* The example below binds a View to a {@link Common.UI.DataViewStore} and renders it into an el.
|
|
|
|
*
|
|
|
|
* new Common.UI.DataView({
|
|
|
|
* el: $('#id'),
|
|
|
|
* store: new Common.UI.DataViewStore([{value: 1, value: 2}]),
|
|
|
|
* itemTemplate: _.template(['<li id="<%= id %>"><a href="#"><%= value %></a></li>'].join(''))
|
|
|
|
* });
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* @property {Object} el
|
|
|
|
* Backbone el
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* @property {Object} store
|
|
|
|
* The Store class encapsulates a client side cache of Model objects.
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* @property {String} emptyText
|
|
|
|
* The text to display in the view when there is no data to display.
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* @cfg {Object} itemTemplate
|
|
|
|
* The inner portion of the item template to be rendered.
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
if (Common === undefined)
|
|
|
|
var Common = {};
|
|
|
|
|
|
|
|
define([
|
|
|
|
'common/main/lib/component/BaseView',
|
|
|
|
'common/main/lib/component/Scroller'
|
|
|
|
], function () {
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
Common.UI.DataViewGroupModel = Backbone.Model.extend({
|
|
|
|
defaults: function() {
|
|
|
|
return {
|
|
|
|
id: Common.UI.getId(),
|
2016-12-16 08:37:57 +00:00
|
|
|
caption: '',
|
|
|
|
inline: false,
|
|
|
|
headername: undefined
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
Common.UI.DataViewGroupStore = Backbone.Collection.extend({
|
|
|
|
model: Common.UI.DataViewGroupModel
|
|
|
|
});
|
|
|
|
|
|
|
|
Common.UI.DataViewModel = Backbone.Model.extend({
|
|
|
|
defaults: function() {
|
|
|
|
return {
|
|
|
|
id: Common.UI.getId(),
|
|
|
|
selected: false,
|
|
|
|
allowSelected: true,
|
2016-12-28 11:28:27 +00:00
|
|
|
value: null,
|
|
|
|
disabled: false
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
Common.UI.DataViewStore = Backbone.Collection.extend({
|
|
|
|
model: Common.UI.DataViewModel
|
|
|
|
});
|
|
|
|
|
|
|
|
Common.UI.DataViewItem = Common.UI.BaseView.extend({
|
|
|
|
options : {
|
|
|
|
},
|
|
|
|
|
|
|
|
template: _.template([
|
|
|
|
'<div id="<%= id %>"><%= value %></div>'
|
|
|
|
].join('')),
|
|
|
|
|
|
|
|
initialize : function(options) {
|
|
|
|
Common.UI.BaseView.prototype.initialize.call(this, options);
|
|
|
|
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
me.template = me.options.template || me.template;
|
|
|
|
|
|
|
|
me.listenTo(me.model, 'change', me.render);
|
|
|
|
me.listenTo(me.model, 'change:selected', me.onSelectChange);
|
|
|
|
me.listenTo(me.model, 'remove', me.remove);
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function () {
|
|
|
|
if (_.isUndefined(this.model.id))
|
|
|
|
return this;
|
|
|
|
|
2019-07-29 11:24:20 +00:00
|
|
|
var el = this.$el || $(this.el);
|
2016-03-11 00:48:53 +00:00
|
|
|
|
|
|
|
el.html(this.template(this.model.toJSON()));
|
|
|
|
el.addClass('item');
|
|
|
|
el.toggleClass('selected', this.model.get('selected') && this.model.get('allowSelected'));
|
2018-03-21 11:28:52 +00:00
|
|
|
el.off('click dblclick contextmenu');
|
|
|
|
el.on({ 'click': _.bind(this.onClick, this),
|
|
|
|
'dblclick': _.bind(this.onDblClick, this),
|
|
|
|
'contextmenu': _.bind(this.onContextMenu, this) });
|
2017-12-19 13:30:58 +00:00
|
|
|
el.toggleClass('disabled', !!this.model.get('disabled'));
|
2016-03-11 00:48:53 +00:00
|
|
|
|
|
|
|
if (!_.isUndefined(this.model.get('cls')))
|
|
|
|
el.addClass(this.model.get('cls'));
|
|
|
|
|
2017-12-20 11:12:26 +00:00
|
|
|
var tip = el.data('bs.tooltip');
|
|
|
|
if (tip) {
|
2019-06-10 13:02:36 +00:00
|
|
|
if (tip.dontShow===undefined && el.is(':hover'))
|
2017-12-20 11:12:26 +00:00
|
|
|
tip.dontShow = true;
|
|
|
|
}
|
|
|
|
|
2016-03-11 00:48:53 +00:00
|
|
|
this.trigger('change', this, this.model);
|
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
remove: function() {
|
|
|
|
this.stopListening(this.model);
|
|
|
|
this.trigger('remove', this, this.model);
|
|
|
|
|
|
|
|
Common.UI.BaseView.prototype.remove.call(this);
|
|
|
|
},
|
|
|
|
|
|
|
|
onClick: function(e) {
|
2016-12-28 11:28:27 +00:00
|
|
|
if (this.model.get('disabled')) return false;
|
|
|
|
|
2016-03-11 00:48:53 +00:00
|
|
|
this.trigger('click', this, this.model, e);
|
|
|
|
},
|
|
|
|
|
|
|
|
onDblClick: function(e) {
|
2016-12-28 11:28:27 +00:00
|
|
|
if (this.model.get('disabled')) return false;
|
|
|
|
|
2016-03-11 00:48:53 +00:00
|
|
|
this.trigger('dblclick', this, this.model, e);
|
|
|
|
},
|
|
|
|
|
|
|
|
onContextMenu: function(e) {
|
|
|
|
this.trigger('contextmenu', this, this.model, e);
|
|
|
|
},
|
|
|
|
|
|
|
|
onSelectChange: function(model, selected) {
|
|
|
|
this.trigger('select', this, model, selected);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
Common.UI.DataView = Common.UI.BaseView.extend({
|
|
|
|
options : {
|
|
|
|
multiSelect: false,
|
|
|
|
handleSelect: true,
|
|
|
|
enableKeyEvents: true,
|
|
|
|
keyMoveDirection: 'both', // 'vertical', 'horizontal'
|
|
|
|
restoreHeight: 0,
|
|
|
|
emptyText: '',
|
|
|
|
listenStoreEvents: true,
|
|
|
|
allowScrollbar: true,
|
2018-03-16 10:07:18 +00:00
|
|
|
scrollAlwaysVisible: false,
|
2016-03-11 00:48:53 +00:00
|
|
|
showLast: true,
|
2020-12-04 08:27:27 +00:00
|
|
|
useBSKeydown: false,
|
|
|
|
cls: ''
|
2016-03-11 00:48:53 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
template: _.template([
|
2020-12-04 08:27:27 +00:00
|
|
|
'<div class="dataview inner <%= cls %>" style="<%= style %>">',
|
2016-03-11 00:48:53 +00:00
|
|
|
'<% _.each(groups, function(group) { %>',
|
2016-12-16 08:37:57 +00:00
|
|
|
'<% if (group.headername !== undefined) { %>',
|
|
|
|
'<div class="header-name"><%= group.headername %></div>',
|
|
|
|
'<% } %>',
|
|
|
|
'<div class="grouped-data <% if (group.inline) { %> inline <% } %> <% if (!_.isEmpty(group.caption)) { %> margin <% } %>" id="<%= group.id %>">',
|
|
|
|
'<% if (!_.isEmpty(group.caption)) { %>',
|
|
|
|
'<div class="group-description">',
|
|
|
|
'<span><%= group.caption %></span>',
|
|
|
|
'</div>',
|
|
|
|
'<% } %>',
|
2016-03-11 00:48:53 +00:00
|
|
|
'<div class="group-items-container">',
|
|
|
|
'</div>',
|
|
|
|
'</div>',
|
|
|
|
'<% }); %>',
|
|
|
|
'</div>'
|
|
|
|
].join('')),
|
|
|
|
|
|
|
|
initialize : function(options) {
|
|
|
|
Common.UI.BaseView.prototype.initialize.call(this, options);
|
|
|
|
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
me.template = me.options.template || me.template;
|
|
|
|
me.store = me.options.store || new Common.UI.DataViewStore();
|
|
|
|
me.groups = me.options.groups || null;
|
|
|
|
me.itemTemplate = me.options.itemTemplate || null;
|
|
|
|
me.multiSelect = me.options.multiSelect;
|
|
|
|
me.handleSelect = me.options.handleSelect;
|
|
|
|
me.parentMenu = me.options.parentMenu;
|
|
|
|
me.enableKeyEvents= me.options.enableKeyEvents;
|
|
|
|
me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu
|
|
|
|
me.showLast = me.options.showLast;
|
|
|
|
me.style = me.options.style || '';
|
2020-12-04 08:27:27 +00:00
|
|
|
me.cls = me.options.cls || '';
|
2016-03-11 00:48:53 +00:00
|
|
|
me.emptyText = me.options.emptyText || '';
|
|
|
|
me.listenStoreEvents= (me.options.listenStoreEvents!==undefined) ? me.options.listenStoreEvents : true;
|
|
|
|
me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true;
|
2018-03-16 10:07:18 +00:00
|
|
|
me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false;
|
2020-09-25 11:44:15 +00:00
|
|
|
me.tabindex = me.options.tabindex || 0;
|
2017-09-15 10:31:59 +00:00
|
|
|
if (me.parentMenu)
|
|
|
|
me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0);
|
2016-03-11 00:48:53 +00:00
|
|
|
me.rendered = false;
|
|
|
|
me.dataViewItems = [];
|
|
|
|
if (me.options.keyMoveDirection=='vertical')
|
|
|
|
me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN];
|
|
|
|
else if (me.options.keyMoveDirection=='horizontal')
|
|
|
|
me.moveKeys = [Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
|
|
|
|
else
|
|
|
|
me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN, Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
|
|
|
|
|
|
|
|
if (me.options.el)
|
|
|
|
me.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function (parentEl) {
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
this.trigger('render:before', this);
|
|
|
|
|
|
|
|
if (parentEl) {
|
|
|
|
this.setElement(parentEl, false);
|
|
|
|
this.cmpEl = $(this.template({
|
|
|
|
groups: me.groups ? me.groups.toJSON() : null,
|
2020-12-04 08:27:27 +00:00
|
|
|
style: me.style,
|
|
|
|
cls: me.cls
|
2016-03-11 00:48:53 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
parentEl.html(this.cmpEl);
|
|
|
|
} else {
|
2019-07-29 11:24:20 +00:00
|
|
|
this.cmpEl = me.$el || $(this.el);
|
2016-03-11 00:48:53 +00:00
|
|
|
this.cmpEl.html(this.template({
|
|
|
|
groups: me.groups ? me.groups.toJSON() : null,
|
2020-12-04 08:27:27 +00:00
|
|
|
style: me.style,
|
|
|
|
cls: me.cls
|
2016-03-11 00:48:53 +00:00
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2018-04-09 11:23:44 +00:00
|
|
|
var modalParents = this.cmpEl.closest('.asc-window');
|
|
|
|
if (modalParents.length < 1)
|
|
|
|
modalParents = this.cmpEl.closest('[id^="menu-container-"]'); // context menu
|
|
|
|
if (modalParents.length > 0) {
|
|
|
|
this.tipZIndex = parseInt(modalParents.css('z-index')) + 10;
|
|
|
|
}
|
|
|
|
|
2016-03-11 00:48:53 +00:00
|
|
|
if (!this.rendered) {
|
|
|
|
if (this.listenStoreEvents) {
|
|
|
|
this.listenTo(this.store, 'add', this.onAddItem);
|
|
|
|
this.listenTo(this.store, 'reset', this.onResetItems);
|
|
|
|
}
|
|
|
|
this.onResetItems();
|
|
|
|
|
|
|
|
if (this.parentMenu) {
|
|
|
|
this.cmpEl.closest('li').css('height', '100%');
|
|
|
|
this.cmpEl.css('height', '100%');
|
|
|
|
this.parentMenu.on('show:after', _.bind(this.alignPosition, this));
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.enableKeyEvents && this.parentMenu && this.handleSelect) {
|
|
|
|
if (!me.showLast)
|
|
|
|
this.parentMenu.on('show:before', function(menu) { me.deselectAll(); });
|
|
|
|
this.parentMenu.on('show:after', function(menu) {
|
|
|
|
if (me.showLast) me.showLastSelected();
|
|
|
|
Common.NotificationCenter.trigger('dataview:focus');
|
|
|
|
_.delay(function() {
|
|
|
|
menu.cmpEl.find('.dataview').focus();
|
|
|
|
}, 10);
|
|
|
|
}).on('hide:after', function() {
|
|
|
|
Common.NotificationCenter.trigger('dataview:blur');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (_.isUndefined(this.scroller) && this.allowScrollbar) {
|
|
|
|
this.scroller = new Common.UI.Scroller({
|
2017-04-21 08:20:40 +00:00
|
|
|
el: $(this.el).find('.inner').addBack().filter('.inner'),
|
2016-03-11 00:48:53 +00:00
|
|
|
useKeyboard: this.enableKeyEvents && !this.handleSelect,
|
|
|
|
minScrollbarLength : 40,
|
2018-03-16 10:07:18 +00:00
|
|
|
wheelSpeed: 10,
|
|
|
|
alwaysVisibleY: this.scrollAlwaysVisible
|
2016-03-11 00:48:53 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.rendered = true;
|
|
|
|
|
|
|
|
this.cmpEl.on('click', function(e){
|
|
|
|
if (/dataview/.test(e.target.className)) return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.trigger('render:after', this);
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
setStore: function(store) {
|
|
|
|
if (store) {
|
|
|
|
this.stopListening(this.store);
|
|
|
|
|
|
|
|
this.store = store;
|
|
|
|
|
|
|
|
if (this.listenStoreEvents) {
|
|
|
|
this.listenTo(this.store, 'add', this.onAddItem);
|
|
|
|
this.listenTo(this.store, 'reset', this.onResetItems);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
selectRecord: function(record, suspendEvents) {
|
|
|
|
if (!this.handleSelect)
|
|
|
|
return;
|
|
|
|
|
|
|
|
if (suspendEvents)
|
|
|
|
this.suspendEvents();
|
|
|
|
|
|
|
|
if (!this.multiSelect) {
|
|
|
|
_.each(this.store.where({selected: true}), function(rec){
|
|
|
|
rec.set({selected: false});
|
|
|
|
});
|
|
|
|
|
|
|
|
if (record)
|
|
|
|
record.set({selected: true});
|
|
|
|
} else {
|
|
|
|
if (record)
|
|
|
|
record.set({selected: !record.get('selected')});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (suspendEvents)
|
|
|
|
this.resumeEvents();
|
2018-03-16 10:07:18 +00:00
|
|
|
return record;
|
2016-03-11 00:48:53 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
selectByIndex: function(index, suspendEvents) {
|
|
|
|
if (this.store.length > 0 && index > -1 && index < this.store.length) {
|
2018-03-16 10:07:18 +00:00
|
|
|
return this.selectRecord(this.store.at(index), suspendEvents);
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
deselectAll: function(suspendEvents) {
|
|
|
|
if (suspendEvents)
|
|
|
|
this.suspendEvents();
|
|
|
|
|
|
|
|
_.each(this.store.where({selected: true}), function(record){
|
|
|
|
record.set({selected: false});
|
|
|
|
});
|
|
|
|
|
|
|
|
if (suspendEvents)
|
|
|
|
this.resumeEvents();
|
|
|
|
},
|
|
|
|
|
|
|
|
getSelectedRec: function() {
|
2019-06-27 11:18:01 +00:00
|
|
|
return (this.multiSelect) ? this.store.where({selected: true}) : this.store.findWhere({selected: true});
|
2016-03-11 00:48:53 +00:00
|
|
|
},
|
|
|
|
|
2018-01-11 08:32:23 +00:00
|
|
|
onAddItem: function(record, store, opts) {
|
2016-03-11 00:48:53 +00:00
|
|
|
var view = new Common.UI.DataViewItem({
|
|
|
|
template: this.itemTemplate,
|
|
|
|
model: record
|
|
|
|
});
|
|
|
|
|
|
|
|
if (view) {
|
2017-04-21 08:20:40 +00:00
|
|
|
var innerEl = $(this.el).find('.inner').addBack().filter('.inner');
|
2016-03-11 00:48:53 +00:00
|
|
|
|
|
|
|
if (this.groups && this.groups.length > 0) {
|
|
|
|
var group = this.groups.findWhere({id: record.get('group')});
|
|
|
|
|
|
|
|
if (group) {
|
|
|
|
innerEl = innerEl.find('#' + group.id + ' ' + '.group-items-container');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (innerEl) {
|
|
|
|
if (opts && opts.at == 0)
|
|
|
|
innerEl.prepend(view.render().el); else
|
|
|
|
innerEl.append(view.render().el);
|
|
|
|
|
2018-09-18 13:22:30 +00:00
|
|
|
(this.dataViewItems.length<1) && innerEl.find('.empty-text').remove();
|
2018-01-11 08:32:23 +00:00
|
|
|
var idx = _.indexOf(this.store.models, record);
|
|
|
|
this.dataViewItems = this.dataViewItems.slice(0, idx).concat(view).concat(this.dataViewItems.slice(idx));
|
2016-03-11 00:48:53 +00:00
|
|
|
|
|
|
|
if (record.get('tip')) {
|
|
|
|
var view_el = $(view.el);
|
|
|
|
view_el.attr('data-toggle', 'tooltip');
|
|
|
|
view_el.tooltip({
|
|
|
|
title : record.get('tip'),
|
|
|
|
placement : 'cursor',
|
|
|
|
zIndex : this.tipZIndex
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.listenTo(view, 'change', this.onChangeItem);
|
|
|
|
this.listenTo(view, 'remove', this.onRemoveItem);
|
|
|
|
this.listenTo(view, 'click', this.onClickItem);
|
|
|
|
this.listenTo(view, 'dblclick', this.onDblClickItem);
|
|
|
|
this.listenTo(view, 'select', this.onSelectItem);
|
|
|
|
this.listenTo(view, 'contextmenu', this.onContextMenuItem);
|
|
|
|
|
|
|
|
if (!this.isSuspendEvents)
|
|
|
|
this.trigger('item:add', this, view, record);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onResetItems: function() {
|
|
|
|
_.each(this.dataViewItems, function(item) {
|
|
|
|
var tip = item.$el.data('bs.tooltip');
|
2017-12-21 12:21:23 +00:00
|
|
|
if (tip) {
|
|
|
|
if (tip.dontShow===undefined)
|
|
|
|
tip.dontShow = true;
|
|
|
|
(tip.tip()).remove();
|
|
|
|
}
|
2016-03-11 00:48:53 +00:00
|
|
|
}, this);
|
|
|
|
|
|
|
|
$(this.el).html(this.template({
|
|
|
|
groups: this.groups ? this.groups.toJSON() : null,
|
2020-12-04 08:27:27 +00:00
|
|
|
style: this.style,
|
|
|
|
cls: this.cls
|
2016-03-11 00:48:53 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
if (!_.isUndefined(this.scroller)) {
|
|
|
|
this.scroller.destroy();
|
|
|
|
delete this.scroller;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.store.length < 1 && this.emptyText.length > 0)
|
2017-04-21 08:20:40 +00:00
|
|
|
$(this.el).find('.inner').addBack().filter('.inner').append('<table cellpadding="10" class="empty-text"><tr><td>' + this.emptyText + '</td></tr></table>');
|
2016-03-11 00:48:53 +00:00
|
|
|
|
|
|
|
_.each(this.dataViewItems, function(item) {
|
|
|
|
this.stopListening(item);
|
|
|
|
item.stopListening(item.model);
|
|
|
|
}, this);
|
|
|
|
this.dataViewItems = [];
|
|
|
|
|
2021-07-14 16:47:47 +00:00
|
|
|
var me = this;
|
|
|
|
this.store.each(function(item){
|
|
|
|
me.onAddItem(item, me.store);
|
|
|
|
}, this);
|
2016-03-11 00:48:53 +00:00
|
|
|
|
|
|
|
if (this.allowScrollbar) {
|
|
|
|
this.scroller = new Common.UI.Scroller({
|
2017-04-21 08:20:40 +00:00
|
|
|
el: $(this.el).find('.inner').addBack().filter('.inner'),
|
2016-03-11 00:48:53 +00:00
|
|
|
useKeyboard: this.enableKeyEvents && !this.handleSelect,
|
|
|
|
minScrollbarLength : 40,
|
2018-03-16 10:07:18 +00:00
|
|
|
wheelSpeed: 10,
|
|
|
|
alwaysVisibleY: this.scrollAlwaysVisible
|
2016-03-11 00:48:53 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-10-11 12:21:31 +00:00
|
|
|
if (this.disabled)
|
|
|
|
this.setDisabled(this.disabled);
|
|
|
|
|
2016-03-11 00:48:53 +00:00
|
|
|
this.attachKeyEvents();
|
|
|
|
this.lastSelectedRec = null;
|
|
|
|
this._layoutParams = undefined;
|
|
|
|
},
|
|
|
|
|
|
|
|
onChangeItem: function(view, record) {
|
|
|
|
if (!this.isSuspendEvents) {
|
|
|
|
this.trigger('item:change', this, view, record);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onRemoveItem: function(view, record) {
|
2018-01-11 08:32:23 +00:00
|
|
|
var tip = view.$el.data('bs.tooltip');
|
|
|
|
if (tip) {
|
|
|
|
if (tip.dontShow===undefined)
|
|
|
|
tip.dontShow = true;
|
|
|
|
(tip.tip()).remove();
|
|
|
|
}
|
2016-03-11 00:48:53 +00:00
|
|
|
this.stopListening(view);
|
|
|
|
view.stopListening();
|
|
|
|
|
|
|
|
if (this.store.length < 1 && this.emptyText.length > 0) {
|
2017-04-21 08:20:40 +00:00
|
|
|
var el = $(this.el).find('.inner').addBack().filter('.inner');
|
2016-03-11 00:48:53 +00:00
|
|
|
if ( el.find('.empty-text').length<=0 )
|
|
|
|
el.append('<table cellpadding="10" class="empty-text"><tr><td>' + this.emptyText + '</td></tr></table>');
|
|
|
|
}
|
|
|
|
|
|
|
|
for (var i=0; i < this.dataViewItems.length; i++) {
|
|
|
|
if (_.isEqual(view, this.dataViewItems[i]) ) {
|
|
|
|
this.dataViewItems.splice(i, 1);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.isSuspendEvents) {
|
|
|
|
this.trigger('item:remove', this, view, record);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onClickItem: function(view, record, e) {
|
|
|
|
if ( this.disabled ) return;
|
|
|
|
|
|
|
|
window._event = e; // for FireFox only
|
|
|
|
|
|
|
|
if (this.showLast) this.selectRecord(record);
|
|
|
|
this.lastSelectedRec = null;
|
|
|
|
|
|
|
|
var tip = view.$el.data('bs.tooltip');
|
|
|
|
if (tip) (tip.tip()).remove();
|
|
|
|
|
|
|
|
if (!this.isSuspendEvents) {
|
|
|
|
this.trigger('item:click', this, view, record, e);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onDblClickItem: function(view, record, e) {
|
|
|
|
if ( this.disabled ) return;
|
|
|
|
|
|
|
|
window._event = e; // for FireFox only
|
|
|
|
|
2018-03-23 09:09:09 +00:00
|
|
|
if (this.showLast) this.selectRecord(record);
|
2016-03-11 00:48:53 +00:00
|
|
|
this.lastSelectedRec = null;
|
|
|
|
|
|
|
|
if (!this.isSuspendEvents) {
|
|
|
|
this.trigger('item:dblclick', this, view, record, e);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onSelectItem: function(view, record, selected) {
|
|
|
|
if (!this.isSuspendEvents) {
|
|
|
|
this.trigger(selected ? 'item:select' : 'item:deselect', this, view, record, this._fromKeyDown);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onContextMenuItem: function(view, record, e) {
|
|
|
|
if (!this.isSuspendEvents) {
|
|
|
|
this.trigger('item:contextmenu', this, view, record, e);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-07-23 16:14:28 +00:00
|
|
|
scrollToRecord: function (record, force) {
|
2018-03-16 10:07:18 +00:00
|
|
|
if (!record) return;
|
2016-03-11 00:48:53 +00:00
|
|
|
var innerEl = $(this.el).find('.inner'),
|
|
|
|
inner_top = innerEl.offset().top,
|
|
|
|
idx = _.indexOf(this.store.models, record),
|
2016-08-18 08:39:21 +00:00
|
|
|
div = (idx>=0 && this.dataViewItems.length>idx) ? $(this.dataViewItems[idx].el) : innerEl.find('#' + record.get('id'));
|
2016-03-11 00:48:53 +00:00
|
|
|
if (div.length<=0) return;
|
|
|
|
|
2018-03-16 08:53:33 +00:00
|
|
|
var div_top = div.offset().top,
|
|
|
|
div_first = $(this.dataViewItems[0].el),
|
2020-04-09 13:29:04 +00:00
|
|
|
div_first_top = (div_first.length>0) ? div_first[0].clientTop : 0;
|
2020-07-23 16:14:28 +00:00
|
|
|
if (force || div_top < inner_top + div_first_top || div_top+div.outerHeight()*0.9 > inner_top + div_first_top + innerEl.height()) {
|
2016-03-11 00:48:53 +00:00
|
|
|
if (this.scroller && this.allowScrollbar) {
|
2018-03-16 08:53:33 +00:00
|
|
|
this.scroller.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top, 0);
|
2016-03-11 00:48:53 +00:00
|
|
|
} else {
|
2018-03-16 08:53:33 +00:00
|
|
|
innerEl.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top);
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onKeyDown: function (e, data) {
|
|
|
|
if ( this.disabled ) return;
|
|
|
|
if (data===undefined) data = e;
|
|
|
|
if (_.indexOf(this.moveKeys, data.keyCode)>-1 || data.keyCode==Common.UI.Keys.RETURN) {
|
|
|
|
data.preventDefault();
|
|
|
|
data.stopPropagation();
|
2019-06-27 11:18:01 +00:00
|
|
|
var rec = this.getSelectedRec();
|
2016-03-11 00:48:53 +00:00
|
|
|
if (this.lastSelectedRec===null)
|
|
|
|
this.lastSelectedRec = rec;
|
|
|
|
if (data.keyCode==Common.UI.Keys.RETURN) {
|
|
|
|
this.lastSelectedRec = null;
|
|
|
|
if (this.selectedBeforeHideRec) // only for ComboDataView menuPicker
|
|
|
|
rec = this.selectedBeforeHideRec;
|
|
|
|
this.trigger('item:click', this, this, rec, e);
|
|
|
|
this.trigger('item:select', this, this, rec, e);
|
|
|
|
this.trigger('entervalue', this, rec, e);
|
|
|
|
if (this.parentMenu)
|
|
|
|
this.parentMenu.hide();
|
|
|
|
} else {
|
|
|
|
var idx = _.indexOf(this.store.models, rec);
|
|
|
|
if (idx<0) {
|
|
|
|
if (data.keyCode==Common.UI.Keys.LEFT) {
|
|
|
|
var target = $(e.target).closest('.dropdown-submenu.over');
|
|
|
|
if (target.length>0) {
|
|
|
|
target.removeClass('over');
|
|
|
|
target.find('> a').focus();
|
|
|
|
} else
|
|
|
|
idx = 0;
|
|
|
|
} else
|
|
|
|
idx = 0;
|
|
|
|
} else if (this.options.keyMoveDirection == 'both') {
|
|
|
|
if (this._layoutParams === undefined)
|
|
|
|
this.fillIndexesArray();
|
|
|
|
var topIdx = this.dataViewItems[idx].topIdx,
|
|
|
|
leftIdx = this.dataViewItems[idx].leftIdx;
|
|
|
|
|
|
|
|
idx = undefined;
|
|
|
|
if (data.keyCode==Common.UI.Keys.LEFT) {
|
|
|
|
while (idx===undefined) {
|
|
|
|
leftIdx--;
|
|
|
|
if (leftIdx<0) {
|
|
|
|
var target = $(e.target).closest('.dropdown-submenu.over');
|
|
|
|
if (target.length>0) {
|
|
|
|
target.removeClass('over');
|
|
|
|
target.find('> a').focus();
|
|
|
|
break;
|
|
|
|
} else
|
|
|
|
leftIdx = this._layoutParams.columns-1;
|
|
|
|
}
|
|
|
|
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
|
|
|
|
}
|
|
|
|
} else if (data.keyCode==Common.UI.Keys.RIGHT) {
|
|
|
|
while (idx===undefined) {
|
|
|
|
leftIdx++;
|
|
|
|
if (leftIdx>this._layoutParams.columns-1) leftIdx = 0;
|
|
|
|
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
|
|
|
|
}
|
|
|
|
} else if (data.keyCode==Common.UI.Keys.UP) {
|
|
|
|
while (idx===undefined) {
|
|
|
|
topIdx--;
|
|
|
|
if (topIdx<0) topIdx = this._layoutParams.rows-1;
|
|
|
|
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
while (idx===undefined) {
|
|
|
|
topIdx++;
|
|
|
|
if (topIdx>this._layoutParams.rows-1) topIdx = 0;
|
|
|
|
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT)
|
|
|
|
? Math.max(0, idx-1)
|
|
|
|
: Math.min(this.store.length - 1, idx + 1) ;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (idx !== undefined && idx>=0) rec = this.store.at(idx);
|
|
|
|
if (rec) {
|
|
|
|
this._fromKeyDown = true;
|
|
|
|
this.selectRecord(rec);
|
|
|
|
this.scrollToRecord(rec);
|
2021-02-18 17:38:46 +00:00
|
|
|
this._fromKeyDown = false;
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.trigger('item:keydown', this, rec, e);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
attachKeyEvents: function() {
|
|
|
|
if (this.enableKeyEvents && this.handleSelect) {
|
2017-04-21 08:20:40 +00:00
|
|
|
var el = $(this.el).find('.inner').addBack().filter('.inner');
|
2016-03-11 00:48:53 +00:00
|
|
|
el.addClass('canfocused');
|
2020-09-25 11:44:15 +00:00
|
|
|
el.attr('tabindex', this.tabindex.toString());
|
2016-03-11 00:48:53 +00:00
|
|
|
el.on((this.parentMenu && this.useBSKeydown) ? 'dataview:keydown' : 'keydown', _.bind(this.onKeyDown, this));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
showLastSelected: function() {
|
|
|
|
if ( this.lastSelectedRec) {
|
|
|
|
this.selectRecord(this.lastSelectedRec, true);
|
|
|
|
this.scrollToRecord(this.lastSelectedRec);
|
|
|
|
this.lastSelectedRec = null;
|
|
|
|
} else {
|
2019-06-27 11:18:01 +00:00
|
|
|
this.scrollToRecord(this.getSelectedRec());
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
setDisabled: function(disabled) {
|
|
|
|
this.disabled = disabled;
|
2017-04-21 08:20:40 +00:00
|
|
|
$(this.el).find('.inner').addBack().filter('.inner').toggleClass('disabled', disabled);
|
2016-03-11 00:48:53 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
isDisabled: function() {
|
|
|
|
return this.disabled;
|
|
|
|
},
|
|
|
|
|
|
|
|
setEmptyText: function(emptyText) {
|
|
|
|
this.emptyText = emptyText;
|
|
|
|
},
|
|
|
|
|
|
|
|
alignPosition: function() {
|
|
|
|
var menuRoot = (this.parentMenu.cmpEl.attr('role') === 'menu')
|
|
|
|
? this.parentMenu.cmpEl
|
|
|
|
: this.parentMenu.cmpEl.find('[role=menu]'),
|
2017-09-15 10:31:59 +00:00
|
|
|
docH = Common.Utils.innerHeight()-10,
|
2017-04-21 08:20:40 +00:00
|
|
|
innerEl = $(this.el).find('.inner').addBack().filter('.inner'),
|
2017-09-15 10:31:59 +00:00
|
|
|
parent = innerEl.parent(),
|
|
|
|
margins = parseInt(parent.css('margin-top')) + parseInt(parent.css('margin-bottom')) + parseInt(menuRoot.css('margin-top')),
|
|
|
|
paddings = parseInt(menuRoot.css('padding-top')) + parseInt(menuRoot.css('padding-bottom')),
|
2016-03-11 00:48:53 +00:00
|
|
|
menuH = menuRoot.outerHeight(),
|
2018-03-16 10:07:18 +00:00
|
|
|
top = parseInt(menuRoot.css('top')),
|
|
|
|
props = {minScrollbarLength : 40};
|
|
|
|
this.scrollAlwaysVisible && (props.alwaysVisibleY = this.scrollAlwaysVisible);
|
2016-03-11 00:48:53 +00:00
|
|
|
|
2017-09-15 10:31:59 +00:00
|
|
|
if (top + menuH > docH ) {
|
|
|
|
innerEl.css('max-height', (docH - top - paddings - margins) + 'px');
|
2018-03-16 10:07:18 +00:00
|
|
|
if (this.allowScrollbar) this.scroller.update(props);
|
2017-09-15 10:31:59 +00:00
|
|
|
} else if ( top + menuH < docH && innerEl.height() < this.options.restoreHeight ) {
|
|
|
|
innerEl.css('max-height', (Math.min(docH - top - paddings - margins, this.options.restoreHeight)) + 'px');
|
2018-03-16 10:07:18 +00:00
|
|
|
if (this.allowScrollbar) this.scroller.update(props);
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
fillIndexesArray: function() {
|
|
|
|
if (this.dataViewItems.length<=0) return;
|
|
|
|
|
|
|
|
this._layoutParams = {
|
|
|
|
itemsIndexes: [],
|
|
|
|
columns: 0,
|
|
|
|
rows: 0
|
|
|
|
};
|
|
|
|
|
2016-12-16 08:37:57 +00:00
|
|
|
var el = $(this.dataViewItems[0].el),
|
|
|
|
itemW = el.outerWidth() + parseInt(el.css('margin-left')) + parseInt(el.css('margin-right')),
|
|
|
|
offsetLeft = this.$el.offset().left,
|
2017-11-09 08:39:11 +00:00
|
|
|
offsetTop = el.offset().top,
|
2016-12-16 08:37:57 +00:00
|
|
|
prevtop = -1, topIdx = 0, leftIdx = 0;
|
|
|
|
|
2016-03-11 00:48:53 +00:00
|
|
|
for (var i=0; i<this.dataViewItems.length; i++) {
|
2017-11-09 08:39:11 +00:00
|
|
|
var top = $(this.dataViewItems[i].el).offset().top - offsetTop;
|
2016-12-16 08:37:57 +00:00
|
|
|
leftIdx = Math.floor(($(this.dataViewItems[i].el).offset().left - offsetLeft)/itemW);
|
|
|
|
if (top>prevtop) {
|
|
|
|
prevtop = top;
|
2016-03-11 00:48:53 +00:00
|
|
|
this._layoutParams.itemsIndexes.push([]);
|
2016-12-16 08:37:57 +00:00
|
|
|
topIdx = this._layoutParams.itemsIndexes.length-1;
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
2016-12-16 08:37:57 +00:00
|
|
|
this._layoutParams.itemsIndexes[topIdx][leftIdx] = i;
|
|
|
|
this.dataViewItems[i].topIdx = topIdx;
|
|
|
|
this.dataViewItems[i].leftIdx = leftIdx;
|
2019-08-15 11:33:50 +00:00
|
|
|
if (this._layoutParams.columns<leftIdx) this._layoutParams.columns = leftIdx;
|
|
|
|
}
|
|
|
|
this._layoutParams.rows = this._layoutParams.itemsIndexes.length;
|
|
|
|
this._layoutParams.columns++;
|
|
|
|
},
|
|
|
|
|
|
|
|
onResize: function() {
|
|
|
|
this._layoutParams = undefined;
|
2020-09-26 17:16:29 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
focus: function() {
|
|
|
|
this.cmpEl && this.cmpEl.find('.dataview').focus();
|
2019-08-15 11:33:50 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
Common.UI.DataViewSimple = Common.UI.BaseView.extend({
|
|
|
|
options : {
|
|
|
|
handleSelect: true,
|
|
|
|
enableKeyEvents: true,
|
|
|
|
keyMoveDirection: 'both', // 'vertical', 'horizontal'
|
|
|
|
restoreHeight: 0,
|
|
|
|
scrollAlwaysVisible: false,
|
|
|
|
useBSKeydown: false
|
|
|
|
},
|
|
|
|
|
|
|
|
template: _.template([
|
|
|
|
'<div class="dataview inner" style="<%= style %>">',
|
|
|
|
'<% _.each(items, function(item) { %>',
|
|
|
|
'<% if (!item.id) item.id = Common.UI.getId(); %>',
|
|
|
|
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
|
|
|
|
'<% }) %>',
|
|
|
|
'</div>'
|
|
|
|
].join('')),
|
|
|
|
|
|
|
|
initialize : function(options) {
|
|
|
|
Common.UI.BaseView.prototype.initialize.call(this, options);
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
me.template = me.options.template || me.template;
|
|
|
|
me.store = me.options.store || new Common.UI.DataViewStore();
|
|
|
|
me.itemTemplate = me.options.itemTemplate || null;
|
|
|
|
me.handleSelect = me.options.handleSelect;
|
|
|
|
me.parentMenu = me.options.parentMenu;
|
|
|
|
me.enableKeyEvents= me.options.enableKeyEvents;
|
|
|
|
me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu
|
|
|
|
me.style = me.options.style || '';
|
|
|
|
me.scrollAlwaysVisible = me.options.scrollAlwaysVisible || false;
|
2020-10-02 09:43:03 +00:00
|
|
|
me.tabindex = me.options.tabindex || 0;
|
|
|
|
|
2019-08-15 11:33:50 +00:00
|
|
|
if (me.parentMenu)
|
|
|
|
me.parentMenu.options.restoreHeight = (me.options.restoreHeight>0);
|
|
|
|
me.rendered = false;
|
|
|
|
if (me.options.keyMoveDirection=='vertical')
|
|
|
|
me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN];
|
|
|
|
else if (me.options.keyMoveDirection=='horizontal')
|
|
|
|
me.moveKeys = [Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
|
|
|
|
else
|
|
|
|
me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN, Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
|
|
|
|
if (me.options.el)
|
|
|
|
me.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function (parentEl) {
|
|
|
|
var me = this;
|
|
|
|
this.trigger('render:before', this);
|
|
|
|
if (parentEl) {
|
|
|
|
this.setElement(parentEl, false);
|
|
|
|
this.cmpEl = $(this.template({
|
|
|
|
items: me.store.toJSON(),
|
|
|
|
itemTemplate: me.itemTemplate,
|
|
|
|
style: me.style
|
|
|
|
}));
|
|
|
|
|
|
|
|
parentEl.html(this.cmpEl);
|
|
|
|
} else {
|
|
|
|
this.cmpEl = me.$el || $(this.el);
|
|
|
|
this.cmpEl.html(this.template({
|
|
|
|
items: me.store.toJSON(),
|
|
|
|
itemTemplate: me.itemTemplate,
|
|
|
|
style: me.style
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
var modalParents = this.cmpEl.closest('.asc-window');
|
|
|
|
if (modalParents.length < 1)
|
|
|
|
modalParents = this.cmpEl.closest('[id^="menu-container-"]'); // context menu
|
|
|
|
if (modalParents.length > 0) {
|
|
|
|
this.tipZIndex = parseInt(modalParents.css('z-index')) + 10;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.rendered) {
|
|
|
|
if (this.parentMenu) {
|
|
|
|
this.cmpEl.closest('li').css('height', '100%');
|
|
|
|
this.cmpEl.css('height', '100%');
|
|
|
|
this.parentMenu.on('show:after', _.bind(this.alignPosition, this));
|
|
|
|
this.parentMenu.on('show:after', _.bind(this.onAfterShowMenu, this));
|
|
|
|
} else if (this.store.length>0)
|
|
|
|
this.onAfterShowMenu();
|
|
|
|
|
|
|
|
if (this.enableKeyEvents && this.parentMenu && this.handleSelect) {
|
|
|
|
this.parentMenu.on('show:before', function(menu) { me.deselectAll(); });
|
|
|
|
this.parentMenu.on('show:after', function(menu) {
|
|
|
|
Common.NotificationCenter.trigger('dataview:focus');
|
|
|
|
_.delay(function() {
|
|
|
|
menu.cmpEl.find('.dataview').focus();
|
|
|
|
}, 10);
|
|
|
|
}).on('hide:after', function() {
|
|
|
|
Common.NotificationCenter.trigger('dataview:blur');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
this.attachKeyEvents();
|
|
|
|
this.cmpEl.on( "click", "div.item", _.bind(me.onClickItem, me));
|
|
|
|
}
|
2019-08-15 12:54:53 +00:00
|
|
|
if (_.isUndefined(this.scroller)) {
|
2019-08-15 11:33:50 +00:00
|
|
|
this.scroller = new Common.UI.Scroller({
|
|
|
|
el: $(this.el).find('.inner').addBack().filter('.inner'),
|
|
|
|
useKeyboard: this.enableKeyEvents && !this.handleSelect,
|
|
|
|
minScrollbarLength : 40,
|
|
|
|
wheelSpeed: 10,
|
|
|
|
alwaysVisibleY: this.scrollAlwaysVisible
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.rendered = true;
|
|
|
|
|
|
|
|
this.cmpEl.on('click', function(e){
|
|
|
|
if (/dataview/.test(e.target.className)) return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.trigger('render:after', this);
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
selectRecord: function(record, suspendEvents) {
|
|
|
|
if (!this.handleSelect)
|
|
|
|
return;
|
|
|
|
|
|
|
|
if (suspendEvents)
|
|
|
|
this.suspendEvents();
|
|
|
|
|
|
|
|
this.deselectAll(suspendEvents);
|
|
|
|
|
|
|
|
if (record) {
|
|
|
|
record.set({selected: true});
|
|
|
|
var idx = _.indexOf(this.store.models, record);
|
2019-09-03 14:37:05 +00:00
|
|
|
if (idx>=0 && this.dataViewItems && this.dataViewItems.length>idx) {
|
2019-08-15 11:33:50 +00:00
|
|
|
this.dataViewItems[idx].el.addClass('selected');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (suspendEvents)
|
|
|
|
this.resumeEvents();
|
|
|
|
return record;
|
|
|
|
},
|
|
|
|
|
|
|
|
selectByIndex: function(index, suspendEvents) {
|
|
|
|
if (this.store.length > 0 && index > -1 && index < this.store.length) {
|
|
|
|
return this.selectRecord(this.store.at(index), suspendEvents);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
deselectAll: function(suspendEvents) {
|
|
|
|
if (suspendEvents)
|
|
|
|
this.suspendEvents();
|
|
|
|
|
|
|
|
_.each(this.store.where({selected: true}), function(record){
|
|
|
|
record.set({selected: false});
|
|
|
|
});
|
|
|
|
this.cmpEl.find('.item.selected').removeClass('selected');
|
|
|
|
|
|
|
|
if (suspendEvents)
|
|
|
|
this.resumeEvents();
|
|
|
|
},
|
|
|
|
|
|
|
|
getSelectedRec: function() {
|
|
|
|
return this.store.findWhere({selected: true});
|
|
|
|
},
|
|
|
|
|
|
|
|
onResetItems: function() {
|
|
|
|
this.dataViewItems && _.each(this.dataViewItems, function(item) {
|
|
|
|
var tip = item.el.data('bs.tooltip');
|
|
|
|
if (tip) {
|
|
|
|
if (tip.dontShow===undefined)
|
|
|
|
tip.dontShow = true;
|
|
|
|
(tip.tip()).remove();
|
|
|
|
}
|
|
|
|
}, this);
|
|
|
|
this.dataViewItems = null;
|
|
|
|
|
|
|
|
var template = _.template([
|
|
|
|
'<% _.each(items, function(item) { %>',
|
|
|
|
'<% if (!item.id) item.id = Common.UI.getId(); %>',
|
|
|
|
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
|
|
|
|
'<% }) %>'
|
|
|
|
].join(''));
|
2019-08-15 12:54:53 +00:00
|
|
|
this.cmpEl && this.cmpEl.find('.inner').html(template({
|
2019-08-15 11:33:50 +00:00
|
|
|
items: this.store.toJSON(),
|
|
|
|
itemTemplate: this.itemTemplate,
|
|
|
|
style : this.style
|
|
|
|
}));
|
|
|
|
|
|
|
|
if (!_.isUndefined(this.scroller)) {
|
|
|
|
this.scroller.destroy();
|
|
|
|
delete this.scroller;
|
|
|
|
}
|
|
|
|
|
2019-08-15 12:54:53 +00:00
|
|
|
this.scroller = new Common.UI.Scroller({
|
|
|
|
el: $(this.el).find('.inner').addBack().filter('.inner'),
|
|
|
|
useKeyboard: this.enableKeyEvents && !this.handleSelect,
|
|
|
|
minScrollbarLength : 40,
|
|
|
|
wheelSpeed: 10,
|
|
|
|
alwaysVisibleY: this.scrollAlwaysVisible
|
|
|
|
});
|
2019-08-15 11:33:50 +00:00
|
|
|
|
2019-08-15 12:54:53 +00:00
|
|
|
if (!this.parentMenu && this.store.length>0)
|
2019-08-15 11:33:50 +00:00
|
|
|
this.onAfterShowMenu();
|
|
|
|
this._layoutParams = undefined;
|
|
|
|
},
|
|
|
|
|
|
|
|
setStore: function(store) {
|
|
|
|
if (store) {
|
|
|
|
this.store = store;
|
|
|
|
this.onResetItems();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onClickItem: function(e) {
|
|
|
|
if ( this.disabled ) return;
|
|
|
|
|
|
|
|
window._event = e; // for FireFox only
|
|
|
|
|
|
|
|
var index = $(e.currentTarget).closest('div.item').index(),
|
|
|
|
record = (index>=0) ? this.store.at(index) : null,
|
|
|
|
view = (index>=0) ? this.dataViewItems[index] : null;
|
|
|
|
if (!record || !view) return;
|
|
|
|
|
|
|
|
record.set({selected: true});
|
|
|
|
var tip = view.el.data('bs.tooltip');
|
|
|
|
if (tip) (tip.tip()).remove();
|
|
|
|
|
|
|
|
if (!this.isSuspendEvents) {
|
|
|
|
this.trigger('item:click', this, view.el, record, e);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onAfterShowMenu: function(e) {
|
|
|
|
if (!this.dataViewItems) {
|
|
|
|
var me = this;
|
|
|
|
this.dataViewItems = [];
|
|
|
|
_.each(this.cmpEl.find('div.item'), function(item, index) {
|
|
|
|
var $item = $(item),
|
|
|
|
rec = me.store.at(index);
|
|
|
|
me.dataViewItems.push({el: $item});
|
|
|
|
if (rec.get('tip')) {
|
|
|
|
$item.tooltip({
|
|
|
|
title : rec.get('tip'),
|
|
|
|
placement : 'cursor',
|
|
|
|
zIndex : me.tipZIndex
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
scrollToRecord: function (record) {
|
|
|
|
if (!record) return;
|
|
|
|
var innerEl = $(this.el).find('.inner'),
|
|
|
|
inner_top = innerEl.offset().top,
|
|
|
|
idx = _.indexOf(this.store.models, record),
|
|
|
|
div = (idx>=0 && this.dataViewItems.length>idx) ? this.dataViewItems[idx].el : innerEl.find('#' + record.get('id'));
|
|
|
|
if (div.length<=0) return;
|
|
|
|
|
|
|
|
var div_top = div.offset().top,
|
|
|
|
div_first = this.dataViewItems[0].el,
|
|
|
|
div_first_top = (div_first.length>0) ? div_first[0].offsetTop : 0;
|
|
|
|
if (div_top < inner_top + div_first_top || div_top+div.outerHeight() > inner_top + innerEl.height()) {
|
2019-08-15 12:54:53 +00:00
|
|
|
if (this.scroller) {
|
2019-08-15 11:33:50 +00:00
|
|
|
this.scroller.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top, 0);
|
|
|
|
} else {
|
|
|
|
innerEl.scrollTop(innerEl.scrollTop() + div_top - inner_top - div_first_top);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onKeyDown: function (e, data) {
|
|
|
|
if ( this.disabled ) return;
|
|
|
|
if (data===undefined) data = e;
|
|
|
|
if (_.indexOf(this.moveKeys, data.keyCode)>-1 || data.keyCode==Common.UI.Keys.RETURN) {
|
|
|
|
data.preventDefault();
|
|
|
|
data.stopPropagation();
|
|
|
|
var rec = this.getSelectedRec();
|
|
|
|
if (data.keyCode==Common.UI.Keys.RETURN) {
|
|
|
|
if (this.selectedBeforeHideRec) // only for ComboDataView menuPicker
|
|
|
|
rec = this.selectedBeforeHideRec;
|
|
|
|
this.trigger('item:click', this, this, rec, e);
|
|
|
|
if (this.parentMenu)
|
|
|
|
this.parentMenu.hide();
|
|
|
|
} else {
|
|
|
|
var idx = _.indexOf(this.store.models, rec);
|
|
|
|
if (idx<0) {
|
|
|
|
if (data.keyCode==Common.UI.Keys.LEFT) {
|
|
|
|
var target = $(e.target).closest('.dropdown-submenu.over');
|
|
|
|
if (target.length>0) {
|
|
|
|
target.removeClass('over');
|
|
|
|
target.find('> a').focus();
|
|
|
|
} else
|
|
|
|
idx = 0;
|
|
|
|
} else
|
|
|
|
idx = 0;
|
|
|
|
} else if (this.options.keyMoveDirection == 'both') {
|
|
|
|
if (this._layoutParams === undefined)
|
|
|
|
this.fillIndexesArray();
|
|
|
|
var topIdx = this.dataViewItems[idx].topIdx,
|
|
|
|
leftIdx = this.dataViewItems[idx].leftIdx;
|
|
|
|
|
|
|
|
idx = undefined;
|
|
|
|
if (data.keyCode==Common.UI.Keys.LEFT) {
|
|
|
|
while (idx===undefined) {
|
|
|
|
leftIdx--;
|
|
|
|
if (leftIdx<0) {
|
|
|
|
var target = $(e.target).closest('.dropdown-submenu.over');
|
|
|
|
if (target.length>0) {
|
|
|
|
target.removeClass('over');
|
|
|
|
target.find('> a').focus();
|
|
|
|
break;
|
|
|
|
} else
|
|
|
|
leftIdx = this._layoutParams.columns-1;
|
|
|
|
}
|
|
|
|
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
|
|
|
|
}
|
|
|
|
} else if (data.keyCode==Common.UI.Keys.RIGHT) {
|
|
|
|
while (idx===undefined) {
|
|
|
|
leftIdx++;
|
|
|
|
if (leftIdx>this._layoutParams.columns-1) leftIdx = 0;
|
|
|
|
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
|
|
|
|
}
|
|
|
|
} else if (data.keyCode==Common.UI.Keys.UP) {
|
|
|
|
while (idx===undefined) {
|
|
|
|
topIdx--;
|
|
|
|
if (topIdx<0) topIdx = this._layoutParams.rows-1;
|
|
|
|
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
while (idx===undefined) {
|
|
|
|
topIdx++;
|
|
|
|
if (topIdx>this._layoutParams.rows-1) topIdx = 0;
|
|
|
|
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT)
|
|
|
|
? Math.max(0, idx-1)
|
|
|
|
: Math.min(this.store.length - 1, idx + 1) ;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (idx !== undefined && idx>=0) rec = this.store.at(idx);
|
|
|
|
if (rec) {
|
|
|
|
this._fromKeyDown = true;
|
|
|
|
this.selectRecord(rec);
|
|
|
|
this.scrollToRecord(rec);
|
2021-02-18 17:38:46 +00:00
|
|
|
this._fromKeyDown = false;
|
2019-08-15 11:33:50 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.trigger('item:keydown', this, rec, e);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
attachKeyEvents: function() {
|
|
|
|
if (this.enableKeyEvents && this.handleSelect) {
|
|
|
|
var el = $(this.el).find('.inner').addBack().filter('.inner');
|
|
|
|
el.addClass('canfocused');
|
2020-09-25 11:44:15 +00:00
|
|
|
el.attr('tabindex', this.tabindex.toString());
|
2019-08-15 11:33:50 +00:00
|
|
|
el.on((this.parentMenu && this.useBSKeydown) ? 'dataview:keydown' : 'keydown', _.bind(this.onKeyDown, this));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
setDisabled: function(disabled) {
|
|
|
|
this.disabled = disabled;
|
|
|
|
$(this.el).find('.inner').addBack().filter('.inner').toggleClass('disabled', disabled);
|
|
|
|
},
|
|
|
|
|
|
|
|
isDisabled: function() {
|
|
|
|
return this.disabled;
|
|
|
|
},
|
|
|
|
|
|
|
|
alignPosition: function() {
|
|
|
|
var menuRoot = (this.parentMenu.cmpEl.attr('role') === 'menu')
|
|
|
|
? this.parentMenu.cmpEl
|
|
|
|
: this.parentMenu.cmpEl.find('[role=menu]'),
|
|
|
|
docH = Common.Utils.innerHeight()-10,
|
|
|
|
innerEl = $(this.el).find('.inner').addBack().filter('.inner'),
|
|
|
|
parent = innerEl.parent(),
|
|
|
|
margins = parseInt(parent.css('margin-top')) + parseInt(parent.css('margin-bottom')) + parseInt(menuRoot.css('margin-top')),
|
|
|
|
paddings = parseInt(menuRoot.css('padding-top')) + parseInt(menuRoot.css('padding-bottom')),
|
|
|
|
menuH = menuRoot.outerHeight(),
|
|
|
|
top = parseInt(menuRoot.css('top')),
|
|
|
|
props = {minScrollbarLength : 40};
|
|
|
|
this.scrollAlwaysVisible && (props.alwaysVisibleY = this.scrollAlwaysVisible);
|
|
|
|
|
|
|
|
if (top + menuH > docH ) {
|
|
|
|
innerEl.css('max-height', (docH - top - paddings - margins) + 'px');
|
2019-08-15 12:54:53 +00:00
|
|
|
this.scroller.update(props);
|
2019-08-15 11:33:50 +00:00
|
|
|
} else if ( top + menuH < docH && innerEl.height() < this.options.restoreHeight ) {
|
|
|
|
innerEl.css('max-height', (Math.min(docH - top - paddings - margins, this.options.restoreHeight)) + 'px');
|
2019-08-15 12:54:53 +00:00
|
|
|
this.scroller.update(props);
|
2019-08-15 11:33:50 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
fillIndexesArray: function() {
|
|
|
|
if (this.dataViewItems.length<=0) return;
|
|
|
|
|
|
|
|
this._layoutParams = {
|
|
|
|
itemsIndexes: [],
|
|
|
|
columns: 0,
|
|
|
|
rows: 0
|
|
|
|
};
|
|
|
|
|
|
|
|
var el = this.dataViewItems[0].el,
|
|
|
|
itemW = el.outerWidth() + parseInt(el.css('margin-left')) + parseInt(el.css('margin-right')),
|
|
|
|
offsetLeft = this.$el.offset().left,
|
|
|
|
offsetTop = el.offset().top,
|
|
|
|
prevtop = -1, topIdx = 0, leftIdx = 0;
|
|
|
|
|
|
|
|
for (var i=0; i<this.dataViewItems.length; i++) {
|
|
|
|
var item = this.dataViewItems[i];
|
|
|
|
var top = item.el.offset().top - offsetTop;
|
|
|
|
leftIdx = Math.floor((item.el.offset().left - offsetLeft)/itemW);
|
|
|
|
if (top>prevtop) {
|
|
|
|
prevtop = top;
|
|
|
|
this._layoutParams.itemsIndexes.push([]);
|
|
|
|
topIdx = this._layoutParams.itemsIndexes.length-1;
|
|
|
|
}
|
|
|
|
this._layoutParams.itemsIndexes[topIdx][leftIdx] = i;
|
|
|
|
item.topIdx = topIdx;
|
|
|
|
item.leftIdx = leftIdx;
|
2016-12-16 08:37:57 +00:00
|
|
|
if (this._layoutParams.columns<leftIdx) this._layoutParams.columns = leftIdx;
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
|
|
|
this._layoutParams.rows = this._layoutParams.itemsIndexes.length;
|
|
|
|
this._layoutParams.columns++;
|
|
|
|
},
|
|
|
|
|
|
|
|
onResize: function() {
|
|
|
|
this._layoutParams = undefined;
|
2020-09-26 17:16:29 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
focus: function() {
|
|
|
|
this.cmpEl && this.cmpEl.find('.dataview').focus();
|
2016-03-11 00:48:53 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$(document).on('keydown.dataview', '[data-toggle=dropdown], [role=menu]', function(e) {
|
|
|
|
if (e.keyCode !== Common.UI.Keys.UP && e.keyCode !== Common.UI.Keys.DOWN && e.keyCode !== Common.UI.Keys.LEFT && e.keyCode !== Common.UI.Keys.RIGHT && e.keyCode !== Common.UI.Keys.RETURN) return;
|
|
|
|
|
|
|
|
_.defer(function(){
|
|
|
|
var target = $(e.target).closest('.dropdown-toggle');
|
|
|
|
if (target.length)
|
|
|
|
target.parent().find('.inner.canfocused').trigger('dataview:keydown', e);
|
|
|
|
else {
|
|
|
|
$(e.target).closest('.dropdown-submenu').find('.inner.canfocused').trigger('dataview:keydown', e);
|
|
|
|
}
|
|
|
|
}, 100);
|
|
|
|
});
|
|
|
|
});
|