429 lines
19 KiB
JavaScript
429 lines
19 KiB
JavaScript
/*
|
|
* (c) Copyright Ascensio System SIA 2010-2015
|
|
*
|
|
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
|
* EU, LV-1021.
|
|
*
|
|
* 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
|
|
*
|
|
*/
|
|
if (Common === undefined) {
|
|
var Common = {};
|
|
}
|
|
define(["common/main/lib/component/BaseView", "common/main/lib/component/Scroller"], function () {
|
|
Common.UI.ComboBoxModel = Backbone.Model.extend({
|
|
defaults: function () {
|
|
return {
|
|
id: Common.UI.getId(),
|
|
value: null,
|
|
displayValue: null
|
|
};
|
|
}
|
|
});
|
|
Common.UI.ComboBoxStore = Backbone.Collection.extend({
|
|
model: Common.UI.ComboBoxModel
|
|
});
|
|
Common.UI.ComboBox = Common.UI.BaseView.extend((function () {
|
|
return {
|
|
options: {
|
|
id: null,
|
|
cls: "",
|
|
style: "",
|
|
hint: false,
|
|
editable: true,
|
|
disabled: false,
|
|
menuCls: "",
|
|
menuStyle: "",
|
|
displayField: "displayValue",
|
|
valueField: "value"
|
|
},
|
|
template: _.template(['<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">', '<input type="text" class="form-control">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', "<% _.each(items, function(item) { %>", '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>', "<% }); %>", "</ul>", "</span>"].join("")),
|
|
initialize: function (options) {
|
|
Common.UI.BaseView.prototype.initialize.call(this, options);
|
|
var me = this,
|
|
el = $(this.el);
|
|
this.id = me.options.id || Common.UI.getId();
|
|
this.cls = me.options.cls;
|
|
this.style = me.options.style;
|
|
this.menuCls = me.options.menuCls;
|
|
this.menuStyle = me.options.menuStyle;
|
|
this.template = me.options.template || me.template;
|
|
this.hint = me.options.hint;
|
|
this.editable = me.options.editable;
|
|
this.disabled = me.options.disabled;
|
|
this.store = me.options.store || new Common.UI.ComboBoxStore();
|
|
this.displayField = me.options.displayField;
|
|
this.valueField = me.options.valueField;
|
|
me.rendered = me.options.rendered || false;
|
|
this.lastValue = null;
|
|
me.store.add(me.options.data);
|
|
if (me.options.el) {
|
|
me.render();
|
|
}
|
|
},
|
|
render: function (parentEl) {
|
|
var me = this;
|
|
if (!me.rendered) {
|
|
this.cmpEl = $(this.template({
|
|
id: this.id,
|
|
cls: this.cls,
|
|
style: this.style,
|
|
menuCls: this.menuCls,
|
|
menuStyle: this.menuStyle,
|
|
items: this.store.toJSON(),
|
|
scope: me
|
|
}));
|
|
if (parentEl) {
|
|
this.setElement(parentEl, false);
|
|
parentEl.html(this.cmpEl);
|
|
} else {
|
|
$(this.el).html(this.cmpEl);
|
|
}
|
|
} else {
|
|
this.cmpEl = $(this.el);
|
|
}
|
|
if (!me.rendered) {
|
|
var el = this.cmpEl;
|
|
this._input = el.find("input");
|
|
this._button = el.find(".btn");
|
|
el.on("click", "a", _.bind(this.itemClicked, this));
|
|
el.on("mousedown", "a", _.bind(this.itemMouseDown, this));
|
|
if (this.editable) {
|
|
el.on("change", "input", _.bind(this.onInputChanged, this));
|
|
el.on("keydown", "input", _.bind(this.onInputKeyDown, this));
|
|
el.on("click", ".form-control", _.bind(this.onEditableInputClick, this));
|
|
} else {
|
|
el.on("click", ".form-control", _.bind(this.onInputClick, this));
|
|
this._input.attr("readonly", "readonly");
|
|
this._input.attr("data-can-copy", false);
|
|
}
|
|
if (me.options.hint) {
|
|
el.attr("data-toggle", "tooltip");
|
|
el.tooltip({
|
|
title: me.options.hint,
|
|
placement: me.options.hintAnchor || "cursor"
|
|
});
|
|
}
|
|
el.on("show.bs.dropdown", _.bind(me.onBeforeShowMenu, me));
|
|
el.on("shown.bs.dropdown", _.bind(me.onAfterShowMenu, me));
|
|
el.on("hide.bs.dropdown", _.bind(me.onBeforeHideMenu, me));
|
|
el.on("hidden.bs.dropdown", _.bind(me.onAfterHideMenu, me));
|
|
el.on("keydown.after.bs.dropdown", _.bind(me.onAfterKeydownMenu, me));
|
|
Common.NotificationCenter.on("menumanager:hideall", _.bind(me.closeMenu, me));
|
|
this.scroller = new Common.UI.Scroller({
|
|
el: $(".dropdown-menu", me.cmpEl),
|
|
minScrollbarLength: 40,
|
|
scrollYMarginOffset: 30,
|
|
includePadding: true
|
|
});
|
|
this.setDefaultSelection();
|
|
this.listenTo(this.store, "reset", this.onResetItems);
|
|
}
|
|
me.rendered = true;
|
|
if (me.disabled) {
|
|
me.setDisabled(me.disabled);
|
|
}
|
|
return this;
|
|
},
|
|
setData: function (data) {
|
|
this.store.reset([]);
|
|
this.store.add(data);
|
|
this.setRawValue("");
|
|
this.onResetItems();
|
|
},
|
|
openMenu: function (delay) {
|
|
var me = this;
|
|
_.delay(function () {
|
|
me.cmpEl.addClass("open");
|
|
},
|
|
delay || 0);
|
|
},
|
|
closeMenu: function () {
|
|
this.cmpEl.removeClass("open");
|
|
},
|
|
isMenuOpen: function () {
|
|
return this.cmpEl.hasClass("open");
|
|
},
|
|
onBeforeShowMenu: function (e) {
|
|
this.trigger("show:before", this, e);
|
|
if (this.options.hint) {
|
|
var tip = this.cmpEl.data("bs.tooltip");
|
|
if (tip) {
|
|
if (tip.dontShow === undefined) {
|
|
tip.dontShow = true;
|
|
}
|
|
tip.hide();
|
|
}
|
|
}
|
|
},
|
|
onAfterShowMenu: function (e) {
|
|
var $list = $(this.el).find("ul"),
|
|
$selected = $list.find("> li.selected");
|
|
if ($selected.length) {
|
|
var itemTop = $selected.position().top,
|
|
itemHeight = $selected.height(),
|
|
listHeight = $list.height();
|
|
if (itemTop < 0 || itemTop + itemHeight > listHeight) {
|
|
$list.scrollTop($list.scrollTop() + itemTop + itemHeight - (listHeight / 2));
|
|
}
|
|
}
|
|
if (this.scroller) {
|
|
this.scroller.update();
|
|
}
|
|
this.trigger("show:after", this, e);
|
|
},
|
|
onBeforeHideMenu: function (e) {
|
|
this.trigger("hide:before", this, e);
|
|
if (Common.UI.Scroller.isMouseCapture()) {
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
onAfterHideMenu: function (e) {
|
|
this.cmpEl.find(".dropdown-toggle").blur();
|
|
this.trigger("hide:after", this, e);
|
|
},
|
|
onAfterKeydownMenu: function (e) {
|
|
if (e.keyCode == Common.UI.Keys.RETURN) {
|
|
$(e.target).click();
|
|
var me = this;
|
|
if (this.rendered) {
|
|
if (Common.Utils.isIE) {
|
|
this._input.trigger("change", {
|
|
onkeydown: true
|
|
});
|
|
} else {
|
|
this._input.blur();
|
|
}
|
|
}
|
|
return false;
|
|
} else {
|
|
if (e.keyCode == Common.UI.Keys.ESC && this.isMenuOpen()) {
|
|
this.closeMenu();
|
|
this.onAfterHideMenu(e);
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
onInputKeyDown: function (e) {
|
|
var me = this;
|
|
if (e.keyCode == Common.UI.Keys.ESC) {
|
|
this.closeMenu();
|
|
this.onAfterHideMenu(e);
|
|
} else {
|
|
if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
|
|
if (!this.isMenuOpen()) {
|
|
this.openMenu();
|
|
}
|
|
_.delay(function () {
|
|
me._skipInputChange = true;
|
|
me.cmpEl.find("ul li:first a").focus();
|
|
},
|
|
10);
|
|
} else {
|
|
me._skipInputChange = false;
|
|
}
|
|
}
|
|
},
|
|
onInputChanged: function (e, extra) {
|
|
if (extra && extra.synthetic) {
|
|
return;
|
|
}
|
|
if (this._skipInputChange) {
|
|
this._skipInputChange = false;
|
|
return;
|
|
}
|
|
var val = $(e.target).val(),
|
|
record = {};
|
|
if (this.lastValue === val) {
|
|
if (extra && extra.onkeydown) {
|
|
this.trigger("combo:blur", this, e);
|
|
}
|
|
return;
|
|
}
|
|
record[this.valueField] = val;
|
|
this.trigger("changed:before", this, record, e);
|
|
if (e.isDefaultPrevented()) {
|
|
return;
|
|
}
|
|
var obj;
|
|
this._selectedItem = this.store.findWhere((obj = {},
|
|
obj[this.displayField] = val, obj));
|
|
if (this._selectedItem) {
|
|
record = this._selectedItem.toJSON();
|
|
$(".selected", $(this.el)).removeClass("selected");
|
|
$("#" + this._selectedItem.get("id"), $(this.el)).addClass("selected");
|
|
}
|
|
this.trigger("changed:after", this, record, e);
|
|
},
|
|
onInputClick: function (e) {
|
|
if (this._button) {
|
|
this._button.dropdown("toggle");
|
|
}
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
},
|
|
onEditableInputClick: function (e) {
|
|
if (this.options.hint) {
|
|
var tip = this.cmpEl.data("bs.tooltip");
|
|
if (tip) {
|
|
if (tip.dontShow === undefined) {
|
|
tip.dontShow = true;
|
|
}
|
|
tip.hide();
|
|
}
|
|
}
|
|
if (this.isMenuOpen() && e.which == 1) {
|
|
e.stopPropagation();
|
|
}
|
|
},
|
|
setDefaultSelection: function () {
|
|
if (!this.rendered) {
|
|
return;
|
|
}
|
|
var val = this._input.val(),
|
|
obj;
|
|
if (val) {
|
|
this._selectedItem = this.store.findWhere((obj = {},
|
|
obj[this.displayField] = val, obj));
|
|
if (this._selectedItem) {
|
|
$(".selected", $(this.el)).removeClass("selected");
|
|
$("#" + this._selectedItem.get("id"), $(this.el)).addClass("selected");
|
|
}
|
|
}
|
|
},
|
|
setDisabled: function (disabled) {
|
|
this.disabled = disabled;
|
|
if (!this.rendered) {
|
|
return;
|
|
}
|
|
disabled ? this._input.attr("disabled", true) : this._input.removeAttr("disabled");
|
|
this.cmpEl.toggleClass("disabled", disabled);
|
|
this._button.toggleClass("disabled", disabled);
|
|
},
|
|
isDisabled: function () {
|
|
return this.disabled;
|
|
},
|
|
setRawValue: function (value) {
|
|
if (this.rendered) {
|
|
this._input.val(value).trigger("change", {
|
|
synthetic: true
|
|
});
|
|
this.lastValue = (value !== null && value !== undefined) ? value.toString() : value;
|
|
}
|
|
},
|
|
getRawValue: function () {
|
|
return this.rendered ? this._input.val() : null;
|
|
},
|
|
setValue: function (value) {
|
|
if (!this.rendered) {
|
|
return;
|
|
}
|
|
var obj;
|
|
this._selectedItem = this.store.findWhere((obj = {},
|
|
obj[this.valueField] = value, obj));
|
|
$(".selected", $(this.el)).removeClass("selected");
|
|
if (this._selectedItem) {
|
|
this.setRawValue(this._selectedItem.get(this.displayField));
|
|
$("#" + this._selectedItem.get("id"), $(this.el)).addClass("selected");
|
|
} else {
|
|
this.setRawValue(value);
|
|
}
|
|
},
|
|
getValue: function () {
|
|
if (!this.rendered) {
|
|
return null;
|
|
}
|
|
if (this._selectedItem && !_.isUndefined(this._selectedItem.get(this.valueField))) {
|
|
return this._selectedItem.get(this.valueField);
|
|
}
|
|
return this._input.val();
|
|
},
|
|
getDisplayValue: function (record) {
|
|
return Common.Utils.String.htmlEncode(record[this.displayField]);
|
|
},
|
|
getSelectedRecord: function () {
|
|
if (!this.rendered) {
|
|
return null;
|
|
}
|
|
if (this._selectedItem && !_.isUndefined(this._selectedItem.get(this.valueField))) {
|
|
return _.extend({},
|
|
this._selectedItem.toJSON());
|
|
}
|
|
return null;
|
|
},
|
|
selectRecord: function (record) {
|
|
if (!this.rendered || !record) {
|
|
return;
|
|
}
|
|
this._selectedItem = record;
|
|
$(".selected", $(this.el)).removeClass("selected");
|
|
this.setRawValue(this._selectedItem.get(this.displayField));
|
|
$("#" + this._selectedItem.get("id"), $(this.el)).addClass("selected");
|
|
},
|
|
itemClicked: function (e) {
|
|
var el = $(e.target).closest("li");
|
|
this._selectedItem = this.store.findWhere({
|
|
id: el.attr("id")
|
|
});
|
|
if (this._selectedItem) {
|
|
this.lastValue = this._selectedItem.get(this.displayField);
|
|
this._input.val(this.lastValue).trigger("change", {
|
|
synthetic: true
|
|
});
|
|
$(".selected", $(this.el)).removeClass("selected");
|
|
el.addClass("selected");
|
|
this.trigger("selected", this, _.extend({},
|
|
this._selectedItem.toJSON()), e);
|
|
e.preventDefault();
|
|
}
|
|
this._isMouseDownMenu = false;
|
|
},
|
|
itemMouseDown: function (e) {
|
|
if (e.which != 1) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
return false;
|
|
}
|
|
this._isMouseDownMenu = true;
|
|
},
|
|
onResetItems: function () {
|
|
$(this.el).find("ul").html(_.template(["<% _.each(items, function(item) { %>", '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>', "<% }); %>"].join(""), {
|
|
items: this.store.toJSON(),
|
|
scope: this
|
|
}));
|
|
if (!_.isUndefined(this.scroller)) {
|
|
this.scroller.destroy();
|
|
delete this.scroller;
|
|
}
|
|
this.scroller = new Common.UI.Scroller({
|
|
el: $(".dropdown-menu", this.cmpEl),
|
|
minScrollbarLength: 40,
|
|
scrollYMarginOffset: 30,
|
|
includePadding: true
|
|
});
|
|
}
|
|
};
|
|
})());
|
|
}); |