337 lines
15 KiB
JavaScript
337 lines
15 KiB
JavaScript
/*
|
|
* (c) Copyright Ascensio System SIA 2010-2024
|
|
*
|
|
* 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-6 Ernesta Birznieka-Upish
|
|
* 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
|
|
*
|
|
*/
|
|
/**
|
|
* ListView.js
|
|
*
|
|
* Created on 2/27/14
|
|
*
|
|
*/
|
|
|
|
if (Common === undefined)
|
|
var Common = {};
|
|
|
|
define([
|
|
'common/main/lib/component/DataView'
|
|
], function () {
|
|
'use strict';
|
|
|
|
Common.UI.ListView = Common.UI.DataView.extend((function() {
|
|
return {
|
|
options: {
|
|
handleSelect: true,
|
|
enableKeyEvents: true,
|
|
showLast: true,
|
|
simpleAddMode: false,
|
|
headers: [], //{name: 'string', width: 'number'(optional for last), sortType: 'string'(optional), style: 'string'(optional)} ---> example {name:text, width: 100, sortType: name, style: 'margin-left:10px;}
|
|
initSort: null, //{type: 'string', direction: -1 or 1} ---> example {type:name, direction:1}
|
|
keyMoveDirection: 'vertical',
|
|
itemTemplate: _.template('<div id="<%= id %>" class="list-item" style="" role="listitem"><%= value %></div>'),
|
|
cls: ''
|
|
},
|
|
|
|
template: _.template([
|
|
'<div role="list" class="listview inner <%= cls %>" <% if (options.dataHint) { %> data-hint="<%= options.dataHint %>" <% } if (options.dataHintDirection) { %> data-hint-direction="<%= options.dataHintDirection %>" <% } if (options.dataHintOffset) { %> data-hint-offset="<%= options.dataHintOffset %>" <% } %>>',
|
|
'</div>'
|
|
].join('')),
|
|
|
|
initialize : function(options) {
|
|
if(this.options.initSort != null) {
|
|
this.activeSortType = this.options.initSort.type;
|
|
this.sortDirection = this.options.initSort.direction;
|
|
}
|
|
this.headerEl = null;
|
|
this.headerHeight = 0;
|
|
|
|
Common.UI.DataView.prototype.initialize.call(this, options);
|
|
},
|
|
|
|
render: function() {
|
|
(this.options.headers.length > 0) && (this.insertHeaders());
|
|
Common.UI.DataView.prototype.render.call(this);
|
|
},
|
|
|
|
insertHeaders: function() {
|
|
var template = _.template([
|
|
'<div class="listview-table-header-wrapper">',
|
|
'<div class="listview-table-header">',
|
|
'<% _.each(headers, function(header){ %>',
|
|
'<%if (header.sortType) { %>',
|
|
'<div class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>" sort-type="<%=header.sortType%>">',
|
|
'<div class="header-sorted-wrapper">',
|
|
'<span class="header-sorted">',
|
|
'<label><%= header.name %></label>',
|
|
'<span class="sort-direction caret <%if (sortDirection == -1) { %>sort-desc <% } if (activeSortType != header.sortType) { %>caret-hidden<%}%>"></span>',
|
|
'</span>',
|
|
'</div>',
|
|
'</div>',
|
|
'<%} else { %>',
|
|
'<label class="table-header-item" style="<% if (header.width) {%>width: <%=header.width%>px; <%}%> <% if (header.style) { %> <%= header.style %> <%}%>"><%= header.name %></label>',
|
|
'<%}%>',
|
|
'<% }); %>',
|
|
'</div>',
|
|
'</div>'
|
|
].join(''))({
|
|
headers: this.options.headers,
|
|
activeSortType: this.options.initSort ? this.options.initSort.type : null,
|
|
sortDirection: this.options.initSort ? this.options.initSort.direction : null,
|
|
});
|
|
this.$el.before(template);
|
|
|
|
var me = this,
|
|
headerEl = this.$el.prev().children();
|
|
|
|
//Calculating the width of a multiline label in sort header
|
|
for(var i = 0, sortHeaderIndex = 0; i < this.options.headers.length; i++){
|
|
var header = this.options.headers[i];
|
|
if(header.sortType){
|
|
var headerWords = header.name.split(' '),
|
|
labelEl = $(headerEl.find('.table-header-item .header-sorted label')[sortHeaderIndex]),
|
|
tempEl = $('<label>A</label>');
|
|
|
|
me.$el.before(tempEl);
|
|
|
|
if(headerWords.length > 1 && labelEl.height() > Math.ceil(tempEl.height())) {
|
|
var maxWidthWord = 0;
|
|
|
|
headerWords.forEach(function(word) {
|
|
tempEl.text(word);
|
|
(tempEl.width() > maxWidthWord) && (maxWidthWord = tempEl.width());
|
|
});
|
|
(maxWidthWord < labelEl.width()) && labelEl.width(maxWidthWord);
|
|
}
|
|
tempEl.remove();
|
|
sortHeaderIndex++;
|
|
}
|
|
};
|
|
|
|
headerEl.find('.table-header-item .header-sorted').on('click', function(e) {
|
|
var selectedSortType = $(e.currentTarget).parent().parent().attr('sort-type'),
|
|
curCaretEl = $(e.currentTarget).find('.caret');
|
|
|
|
if(me.activeSortType === selectedSortType){
|
|
me.sortDirection = -me.sortDirection
|
|
}
|
|
else {
|
|
me.activeSortType = selectedSortType;
|
|
me.sortDirection = 1;
|
|
}
|
|
|
|
headerEl.find('.caret').addClass('caret-hidden');
|
|
|
|
if(curCaretEl.removeClass('caret-hidden'));
|
|
if(me.sortDirection == -1)
|
|
curCaretEl.addClass('sort-desc');
|
|
else
|
|
curCaretEl.removeClass('sort-desc');
|
|
|
|
|
|
me.trigger('header:click', me.activeSortType, me.sortDirection);
|
|
});
|
|
|
|
if(this.tabindex != 0 && this.handleSelect){
|
|
headerEl.on('click', function(e) {
|
|
me.focus();
|
|
});
|
|
var onMouseDown = function (e) {
|
|
me.$el.find('.inner').addClass('focused');
|
|
$(document).on('mouseup', onMouseUp);
|
|
};
|
|
var onMouseUp = function (e) {
|
|
me.focus();
|
|
me.$el.find('.inner').removeClass('focused');
|
|
$(document).off('mouseup', onMouseUp);
|
|
};
|
|
headerEl.on('mousedown', onMouseDown);
|
|
}
|
|
|
|
this.headerEl = headerEl;
|
|
this.calcOffsetFromHeader()
|
|
},
|
|
|
|
setHeaderName: function(index, name) {
|
|
if(index < 0 || index > this.options.headers.length - 1 || !this.headerEl) return;
|
|
|
|
var labelEl = $(this.headerEl.find('.table-header-item')[index]);
|
|
if(labelEl.attr('sort-type')) {
|
|
labelEl = labelEl.find('label')[0];
|
|
}
|
|
|
|
this.options.headers[index].name = name;
|
|
labelEl.text(name);
|
|
},
|
|
|
|
setHeaderWidth: function(index, width, innerLabel) {
|
|
if(index < 0 || index > this.options.headers.length - 1 || !this.headerEl) return;
|
|
|
|
var labelEl = $(this.headerEl.find('.table-header-item')[index]);
|
|
if(labelEl.attr('sort-type') && innerLabel) {
|
|
labelEl = labelEl.find('label')[0];
|
|
}
|
|
|
|
this.options.headers[index].width = width;
|
|
$(labelEl).width(width);
|
|
},
|
|
|
|
calcOffsetFromHeader: function() {
|
|
if(!this.headerEl) return;
|
|
var headerHeight = Math.floor(this.headerEl.outerHeight());
|
|
this.headerHeight = headerHeight;
|
|
this.scrollYStyle = _.extend({}, this.scrollYStyle, {'margin-top': headerHeight+1 + 'px'});
|
|
},
|
|
|
|
setOffsetFromHeader: function(isCalcNewHeaderHeight) {
|
|
if(!this.headerEl) return;
|
|
|
|
if(isCalcNewHeaderHeight === true){
|
|
this.calcOffsetFromHeader();
|
|
}
|
|
this.$el.find('.listview').css({'padding-top': this.headerHeight + 'px'});
|
|
this.scroller && this.scroller.update(isCalcNewHeaderHeight ? {scrollYStyle: this.scrollYStyle} : undefined);
|
|
},
|
|
|
|
onResetItems : function() {
|
|
this.innerEl = null;
|
|
Common.UI.DataView.prototype.onResetItems.call(this);
|
|
this.trigger('items:reset', this);
|
|
if(this.headerEl) {
|
|
this.setOffsetFromHeader();
|
|
}
|
|
},
|
|
|
|
createNewItem: function(record) {
|
|
return new Common.UI.DataViewItem({
|
|
template: this.itemTemplate,
|
|
model: record,
|
|
tabindex: this.itemTabindex
|
|
});
|
|
},
|
|
|
|
onAddItem: function(record, store, opts) {
|
|
var view = this.createNewItem(record);
|
|
|
|
if (!this.innerEl)
|
|
this.innerEl = $(this.el).find('.inner');
|
|
|
|
if (view && this.innerEl) {
|
|
(this.dataViewItems.length<1) && this.innerEl.find('.empty-text').remove();
|
|
if (this.options.simpleAddMode) {
|
|
this.innerEl.append(view.render().el);
|
|
this.dataViewItems.push(view);
|
|
} else {
|
|
var idx = _.indexOf(this.store.models, record);
|
|
var innerDivs = this.innerEl.find('> .item');
|
|
|
|
if (idx > 0)
|
|
$(innerDivs.get(idx - 1)).after(view.render().el);
|
|
else {
|
|
(innerDivs.length > 0) ? $(innerDivs[idx]).before(view.render().el) : this.innerEl.append(view.render().el);
|
|
}
|
|
this.dataViewItems = this.dataViewItems.slice(0, idx).concat(view).concat(this.dataViewItems.slice(idx));
|
|
}
|
|
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, 'tipchange', this.onChangeTip);
|
|
this.listenTo(view, 'contextmenu', this.onContextMenuItem);
|
|
|
|
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
|
|
});
|
|
}
|
|
|
|
if (!this.isSuspendEvents)
|
|
this.trigger('item:add', this, view, record);
|
|
}
|
|
},
|
|
|
|
focus: function() {
|
|
this.cmpEl && this.cmpEl.find('.listview').focus();
|
|
},
|
|
|
|
scrollToRecord: function (record, force) {
|
|
if (!this._fromKeyDown) {
|
|
Common.UI.DataView.prototype.scrollToRecord.call(this, record, force, this.headerHeight);
|
|
return;
|
|
}
|
|
|
|
if (!record) return;
|
|
var innerEl = $(this.el).find('.inner'),
|
|
innerHeight = innerEl.innerHeight(),
|
|
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 = Common.Utils.getPosition(div).top,
|
|
div_height = div.outerHeight(),
|
|
div_first = this.dataViewItems[0].el,
|
|
div_first_top = div_first ? div_first.offsetTop : 0,
|
|
newpos;
|
|
|
|
if (force || div_top<div_first_top)
|
|
newpos = innerEl.scrollTop() + div_top - div_first_top;
|
|
else if (div_top+div_height>innerHeight)
|
|
newpos = innerEl.scrollTop() + div_top + div_height - innerHeight;
|
|
|
|
if (newpos!==undefined) {
|
|
if (this.scroller && this.allowScrollbar) {
|
|
this.scroller.scrollTop(newpos, 0);
|
|
} else {
|
|
innerEl.scrollTop(newpos);
|
|
}
|
|
}
|
|
},
|
|
|
|
onChangeTip: function(item) {
|
|
var el = item.$el || $(item.el),
|
|
tip = el.data('bs.tooltip'),
|
|
record = item.model;
|
|
if (tip)
|
|
tip.updateTitle(record.get('tip') || '');
|
|
else if (record.get('tip')) {
|
|
el.attr('data-toggle', 'tooltip');
|
|
el.tooltip({
|
|
title : record.get('tip'),
|
|
placement : 'cursor',
|
|
zIndex : this.tipZIndex
|
|
});
|
|
}
|
|
}
|
|
}
|
|
})());
|
|
}); |