@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
1,534 lines (1,214 loc) • 89.1 kB
JavaScript
import './kendo.data.js';
import './kendo.treelist.js';
import './kendo.core.js';
import './kendo.html.button.js';
import './kendo.menu.js';
import './kendo.dialog.js';
import './kendo.form.js';
import './kendo.upload.js';
import './kendo.window.js';
import './kendo.data.odata.js';
import './kendo.licensing.js';
import '@progress/kendo-licensing';
import './kendo.data.xml.js';
import './kendo.dom.js';
import './kendo.columnsorter.js';
import './kendo.icons.js';
import './kendo.html.icon.js';
import './kendo.html.base.js';
import '@progress/kendo-svg-icons';
import './kendo.editable.js';
import './kendo.checkbox.js';
import './kendo.toggleinputbase.js';
import './kendo.html.input.js';
import './kendo.dropdownlist.js';
import './kendo.list.js';
import './kendo.popup.js';
import './kendo.label.js';
import './kendo.floatinglabel.js';
import './kendo.actionsheet.js';
import './dropdowns-loader-00xUvouJ.js';
import './kendo.mobile.scroller.js';
import './kendo.fx.js';
import './kendo.draganddrop.js';
import './kendo.userevents.js';
import './kendo.virtuallist.js';
import './valueMapper-CXgI6HWc.js';
import './kendo.datepicker.js';
import './kendo.calendar.js';
import './kendo.selectable.js';
import './kendo.dateinput.js';
import '@progress/kendo-dateinputs-common';
import './kendo.numerictextbox.js';
import './prefix-suffix-containers-B9VRe3lS.js';
import './kendo.textbox.js';
import './kendo.validator.js';
import './kendo.binder.js';
import './kendo.otpinput.js';
import './kendo.filtermenu.js';
import './kendo.buttongroup.js';
import './kendo.togglebutton.js';
import './kendo.button.js';
import './kendo.badge.js';
import './kendo.pane.js';
import './kendo.view.js';
import './kendo.columnmenu.js';
import './kendo.tabstrip.js';
import './kendo.sortable.js';
import './kendo.expansionpanel.js';
import './kendo.resizable.js';
import './kendo.treeview.draganddrop.js';
import './kendo.pager.js';
import './kendo.filtercell.js';
import './kendo.autocomplete.js';
import './kendo.combobox.js';
import './kendo.toolbar.js';
import './kendo.splitbutton.js';
import './kendo.button.menu.js';
import './kendo.dropdownbutton.js';
import './kendo.reorderable.js';
import './mixins-C63N9J7p.js';
import '@progress/kendo-ooxml';
import './kendo.ooxml.js';
import './html-DIrOxn6k.js';
import '@progress/kendo-drawing';
import './kendo.color.js';
import './mixins-pM1BXjp5.js';
import './kendo.progressbar.js';
(function($, undefined$1) {
var extend = $.extend,
data = kendo.data,
Query = data.Query,
DataSource = data.DataSource,
TreeListDataSource = data.TreeListDataSource,
Model = data.Model,
ObservableArray = data.ObservableArray;
var OrgChartModel = Model.define({
id: "id",
parentId: "parentId",
fields: {
id: { type: "number", editable: false },
parentId: { type: "number", nullable: true },
name: { type: "string", validation: { required: true } },
title: { type: "string" },
avatar: { type: "string" }
},
init: function(value) {
Model.fn.init.call(this, value);
this._loaded = false;
if (!this.parentIdField) {
this.parentIdField = "parentId";
}
if (!this.nameField) {
this.nameField = "name";
}
if (!this.titleField) {
this.titleField = "title";
}
if (!this.avatarField) {
this.avatarField = "avatar";
}
this.parentId = this.get(this.parentIdField);
this.name = this.get(this.nameField);
this.title = this.get(this.titleField);
this.avatar = this.get(this.avatarField);
},
accept: function(data) {
Model.fn.accept.call(this, data);
this.parentId = this.get(this.parentIdField);
this.name = this.get(this.nameField);
this.title = this.get(this.titleField);
this.avatar = this.get(this.avatarField);
},
set: function(field, value, initiator) {
if (field == "parentId" && this.nameField != "parentId") {
this[this.parentIdField] = value;
}
if (field == "name" && this.nameField != "name") {
this[this.nameField] = value;
}
if (field == "title" && this.titleField != "title") {
this[this.titleField] = value;
}
if (field == "avatar" && this.avatarField != "avatar") {
this[this.avatarField] = value;
}
Model.fn.set.call(this, field, value, initiator);
if (field == this.parentIdField) {
this.parentId = this.get(this.parentIdField);
}
if (field == this.nameField) {
this.name = this.get(this.nameField);
}
if (field == this.titleField) {
this.title = this.get(this.titleField);
}
if (field == this.avatarField) {
this.avatar = this.get(this.avatarField);
}
},
loaded: function(value) {
if (value !== undefined$1) {
this._loaded = value;
} else {
return this._loaded;
}
},
shouldSerialize: function(field) {
return Model.fn.shouldSerialize.call(this, field) && field !== "_loaded" && field != "_error" && field != "_edit" && !(this.parentIdField !== "parentId" && field === "parentId");
}
});
OrgChartModel.parentIdField = "parentId";
OrgChartModel.nameField = "name";
OrgChartModel.titleField = "title";
OrgChartModel.avatarField = "avatar";
OrgChartModel.define = function(base, options) {
if (options === undefined$1) {
options = base;
base = OrgChartModel;
}
var parentId = options.parentId || "parentId";
var name = options.name || "name";
var title = options.title || "title";
var avatar = options.avatar || "avatar";
options.parentIdField = parentId;
options.nameField = name;
options.titleField = title;
options.avatarField = avatar;
var model = Model.define(base, options);
{
model.parentIdField = parentId;
}
{
model.nameField = name;
}
{
model.titleField = title;
}
{
model.avatarField = avatar;
}
return model;
};
var OrgChartDataSource = TreeListDataSource.extend({
init: function(options) {
TreeListDataSource.fn.init.call(this, extend(true, {}, {
schema: {
modelBase: OrgChartModel,
model: OrgChartModel
}
}, options));
},
groupedItemsTree: function(field) {
var map = this._childrenMap(this.view()),
defaultParentId = this._defaultParentId(),
currentChildren = map[defaultParentId] || [],
grouped = new Query(currentChildren).group({ field: field }).toArray();
return this._innerGroupedItemsTree(field, grouped, map);
},
itemChildren: function(item, fromView) {
var filter = {
field: "parentId",
operator: "eq",
value: null
};
var order = (this._sort && this._sort.length) ? this._sort : {};
var itemId, data;
if (fromView) {
data = this.view();
} else {
data = this.data();
}
if (!!item) {
itemId = item.get("id");
if (itemId === undefined$1 || itemId === null || itemId === "") {
return [];
}
filter.value = itemId;
}
data = new Query(data).filter(filter).sort(order).toArray();
return data;
},
itemsTree: function(item, field) {
var data = [],
current,
items = this.itemChildren(item, true),
children, i;
for (i = 0; i < items.length; i++) {
current = items[i];
if (current.get("expanded")) {
children = this.itemsTree(current, field);
current = extend(true, {}, current);
current.children = children;
}
current = extend(true, {}, current);
data.push(current);
}
if (field !== null && field !== undefined$1) {
data = new Query(data).group({ field: field }).toArray();
}
return data;
},
prospectParents: function(skippedItem, item) {
var data = [],
current,
items = this.itemChildren(item, false),
children, i;
for (i = 0; i < items.length; i++) {
current = items[i];
if (current.get("id") === skippedItem.get("id")) {
continue;
}
data.push(current);
if (current.get("hasChildren")) {
children = this.prospectParents(skippedItem, current);
data = data.concat(children);
}
}
return data;
},
read: function(data) {
return DataSource.fn.read.call(this, data).then(this._loadExpanded.bind(this, data));
},
toggleChildren: function(item, expand) {
var defaultPromise = $.Deferred().resolve().promise(),
loaded = item.loaded();
// reset error state
if (item._error) {
item.expanded = false;
item._error = undefined$1;
}
// toggle expanded state
if (typeof expand == "undefined") {
expand = !item.expanded;
}
item.expanded = expand;
if (!loaded) {
defaultPromise = this.load(item);
}
return defaultPromise;
},
_innerGroupedItemsTree: function(field, grouped, map) {
var group, i, j, itemId, innerGrouped, children, current;
for (i = 0; i < grouped.length; i++) {
group = grouped[i];
children = [];
for (j = 0; j < group.items.length; j++) {
current = group.items[j];
if (!group.hasChildren && current.hasChildren) {
group.hasChildren = true;
}
if (current.expanded) {
group.expanded = true;
}
itemId = group.items[j].get("id");
children = children.concat(map[itemId]);
}
if (group.expanded) {
innerGrouped = new Query(children).group({ field: field }).toArray();
group.children = this._innerGroupedItemsTree(field, innerGrouped, map);
}
if (!group.hasChildren && children.length > 0) {
group.hasChildren = true;
}
}
return grouped;
},
_loadExpanded: function(data) {
var items, i, current;
if (!data) {
return;
}
if (data.id !== null && data.id !== undefined$1) {
items = this._byParentId(data.id);
} else {
items = this._byParentId(this._defaultParentId());
}
for (i = 0; i < items.length; i++) {
current = items[i];
if (current.expanded && !current.loaded()) {
this.toggleChildren(current, true);
}
}
}
});
OrgChartDataSource.create = function(options) {
if (Array.isArray(options)) {
options = { data: options };
} else if (options instanceof ObservableArray) {
options = { data: options.toJSON() };
}
if (!(options instanceof OrgChartDataSource) && options instanceof DataSource) {
throw new Error("Incorrect DataSource type. Only OrgChartDataSource instances are supported");
}
return options instanceof OrgChartDataSource ? options : new OrgChartDataSource(options);
};
extend(true, kendo.data, {
OrgChartModel: OrgChartModel,
OrgChartDataSource: OrgChartDataSource
});
})(window.kendo.jQuery);
(function($, undefined$1) {
var kendo = window.kendo,
keys = kendo.keys,
encode = kendo.htmlEncode,
extend = $.extend,
NS = ".kendoOrgChartView",
BLUR = "blur",
CLICK = "click",
COLLAPSE = "collapse",
EXPAND = "expand",
FOCUS = "focus",
KEYDOWN = "keydown",
MENU = "menu",
SELECT = "select",
DOT = ".",
SPACE = " ",
COMMA = ",",
HASH = "#",
STRING = "string",
TABINDEX = "tabindex",
ID = "id",
UID = "uid",
PX = "px",
PLUS = "plus",
MINUS = "minus",
ARIA_OWNS = "aria-owns",
ARIA_SELECTED = "aria-selected";
var ORGCHART_STYLES = {
wrapper: "k-orgchart",
line: "k-orgchart-line",
lineVertical: "k-orgchart-line-v",
lineHorizontal: "k-orgchart-line-h",
lineVerticalTop: "k-orgchart-line-v-top",
group: "k-orgchart-group",
groupVertical: "k-orgchart-group-v",
groupHorizontal: "k-orgchart-group-h",
nodesGroup: "k-orgchart-node-group",
nodesGroupContainer: "k-orgchart-node-group-container",
nodeContainer: "k-orgchart-node-container",
node: "k-orgchart-node",
card: "k-orgchart-card",
cardMenu: "k-orgchart-card-menu",
button: "k-orgchart-button",
focused: "k-focus",
plusIconSelector: ".k-i-plus,.k-svg-i-plus",
vstack: "k-vstack",
hstack: "k-hstack"
};
var ROOT_TEMPLATE = ({ label }) => `<div role="tree" aria-orientation="horizontal" aria-label="${encode(label)}" class="k-orgchart-group k-orgchart-level-1 k-pos-absolute k-hstack k-justify-content-center"></div>`;
var GROUP_TEMPLATE = ({ guid, level }) => `<div role="group" id="${encode(guid)}" class="k-orgchart-level-${encode(level)} k-orgchart-group k-pos-absolute k-justify-content-around"></div>`;
var NODE_GROUP_CONTAINER = ({ hasChildren, guid, expanded, level }) => {
var result = '<div role="treeitem" ';
if (hasChildren && guid) {
result += `aria-owns=${encode(guid)} `;
if (!!expanded) {
result += 'aria-expanded="true" ';
} else {
result += 'aria-expanded="false" ';
}
}
result += `aria-keyshortcuts="Enter" aria-level="${encode(level)}" aria-selected="false" class="k-orgchart-node-group-container">`;
return result;
};
var NODE_CONTAINER = '<div class="k-orgchart-node-container k-justify-content-around"></div>';
var NODE_CONTAINER_GROUPED = '<div role="group" class="k-orgchart-node-container k-justify-content-around k-hstack"></div>';
var ITEM_TEMPLATE = '<div class="k-orgchart-node k-vstack k-align-items-center"></div>';
var BUTTON_TEMPLATE = ({ label, buttonSign }) => kendo.html.renderButton(`<button aria-label="${encode(label)}" tabindex="-1" class="k-orgchart-button"></button>`, {
icon: encode(buttonSign)
});
var CARD_TEMPLATE = ({ color, avatar, name, title, editable, menuLabel }) => {
var result = `<div class="k-card-body k-hstack" ${kendo.attr("style-border-color")}="${encode(color)}">`;
if (!!avatar) {
result += '<div class="k-avatar k-avatar-solid-primary k-avatar-solid k-avatar-lg k-rounded-full">' +
'<span class="k-avatar-image">' +
`<img alt="${encode(name)}" src="${encode(avatar)}">` +
'</span>' +
'</div>';
}
result += '<div class="k-vstack k-card-title-wrap">' +
`<div class="k-card-title k-text-ellipsis">${encode(name)}</div>`;
if (title) {
result += '<span class="k-spacer"></span>' +
`<div class="k-card-subtitle k-text-ellipsis">${encode(title)}</div>`;
}
result += '</div>';
if (editable) {
result += '<span class="k-spacer"></span>' +
'<div class="k-card-body-actions">' +
kendo.html.renderButton(`<button class="k-orgchart-card-menu" role="button" aria-label="${encode(menuLabel)}" tabindex="-1"></button>`, {
icon: 'more-vertical',
fillMode: "flat"
}) +
'</div>';
}
result += '</div>';
return result;
};
var CARD_WRAPPER = ({ uid, guid, hasChildren, expanded, cssClass, level }) => {
var result = `<div role="treeitem" data-uid="${encode(uid)}" `;
if (hasChildren && guid) {
result += `aria-owns=${encode(guid)} `;
if (!!expanded) {
result += 'aria-expanded="true" ';
} else {
result += 'aria-expanded="false" ';
}
}
result += 'class="k-orgchart-card k-card ';
if (!!cssClass) {
result += `${encode(cssClass)}`;
}
result += `" aria-keyshortcuts="Enter" aria-level="${encode(level)}" aria-selected="false"></div>`;
return result;
};
var GROUPED_CARD_WRAPPER = ({ uid, level, cssClass }) => `<div role="treeitem" data-uid="${encode(uid)}" aria-level="${encode(level)}" aria-selected="false" aria-keyshortcuts="Enter" ` +
'class="k-orgchart-card k-card ' +
`${cssClass ? encode(cssClass) : ''}` +
'"></div>';
var View = kendo.Observable.extend({
init: function(element, options) {
this.element = element;
this.options = options || {};
kendo.Observable.fn.init.call(this);
this._attachEvents();
},
events: [
COLLAPSE,
EXPAND,
SELECT,
MENU
],
destroy: function() {
kendo.ui.Widget.fn.destroy.call(this);
this.element.off(NS);
},
collapse: function() {
return false;
},
expand: function() {
return false;
},
jqueryGroupElement: function(group) {
if (!group) {
return;
}
var jQueryElement = this._processItem(group);
if (!jQueryElement.hasClass(ORGCHART_STYLES.nodesGroupContainer)) {
jQueryElement = jQueryElement.closest(DOT + ORGCHART_STYLES.nodesGroupContainer);
}
return jQueryElement && jQueryElement.length ? jQueryElement : null;
},
jqueryItemElement: function(item) {
if (!item) {
return;
}
var jQueryElement = this._processItem(item);
if (!jQueryElement.hasClass(ORGCHART_STYLES.card)) {
jQueryElement = jQueryElement.closest(DOT + ORGCHART_STYLES.card);
}
return jQueryElement && jQueryElement.length ? jQueryElement : null;
},
refresh: function() {
this._cacheFocused();
this._clearContent();
this._generateItemsTree();
this._calculateLevels();
this._render();
},
select: function(item) {
var $item = this._getToSelect(item),
previousSelection = this.element.find("[tabindex=0]");
if (!$item) {
return;
}
previousSelection.removeAttr(TABINDEX)
.removeClass(ORGCHART_STYLES.focused)
.attr(ARIA_SELECTED, false);
$item.attr(TABINDEX, "0")
.addClass(ORGCHART_STYLES.focused)
.trigger("focus")
.attr(ARIA_SELECTED, true);
},
_attachEvents: function() {
var itemsSelector = DOT + ORGCHART_STYLES.card + COMMA + DOT + ORGCHART_STYLES.nodesGroupContainer;
this.element.on(KEYDOWN + NS, itemsSelector, this._onKeyDown.bind(this))
.on(CLICK + NS, itemsSelector, this._onSelect.bind(this))
.on(CLICK + NS, DOT + ORGCHART_STYLES.button, this._onButtonClick.bind(this))
.on(FOCUS + NS, itemsSelector, this._onFocus.bind(this))
.on(BLUR + NS, DOT + ORGCHART_STYLES.focused, this._onBlur.bind(this));
},
_cacheFocused: function() {
var focusableItem = this.element.find("[tabindex='0']"),
focusableDataItem = this._dataItems(focusableItem);
if (!focusableItem.length || !focusableDataItem || !focusableDataItem.length || !!this._idTabIndex) {
return;
}
this._idTabIndex = focusableDataItem[0].get(ID);
if (focusableItem.hasClass(ORGCHART_STYLES.focused)) {
this._shouldRestoreSelection = true;
} else {
this._shouldRestoreSelection = false;
}
},
_calculateDimensions: function() {
var itemElement = this.element.find(DOT + this._selector).first();
if (!this._buttonHeight) {
this._buttonHeight = this.element.find(DOT + ORGCHART_STYLES.button).first().outerHeight();
}
if (!this._spacing) {
this._spacing = this.element.find(DOT + ORGCHART_STYLES.lineVertical).first().outerHeight();
}
if (!this._itemWidth) {
this._itemWidth = this._calculateItemWidth();
}
if (!this._itemHeight) {
this._itemHeight = itemElement.outerHeight(true);
}
},
_calculateItemWidth: function() {
return false;
},
_calculateLevel: function() {
return false;
},
_calculateLevels: function() {
return false;
},
_clearContent: function() {
this.element.empty();
},
_dataItem: function(item) {
var $item = this.jqueryItemElement(item);
if (!$item || !$item.data(UID)) {
return;
}
return this.dataSource.getByUid($item.data(UID));
},
_dataItems: function() {
return false;
},
_generateItemsTree: function() {
return false;
},
_getToSelect: function() {
return false;
},
_groupIsVertical: function() {
return false;
},
_keyCollapse: function() {
return false;
},
_keyExpand: function() {
return false;
},
_keyNext: function() {
return false;
},
_keyPrev: function() {
return false;
},
_keyEnter: function() {
return false;
},
_keyEscape: function() {
return false;
},
_keyEnd: function() {
var target = this.element.find(DOT + ORGCHART_STYLES.card).last(),
previous = this.element.find("[tabindex=0]");
if (previous[0] === target[0]) {
return;
}
this.trigger(SELECT, {
item: target,
dataItems: [this._dataItem(target)]
});
},
_keyHome: function() {
var target = this.element.find(DOT + ORGCHART_STYLES.card).first(),
previous = this.element.find("[tabindex=0]");
if (previous[0] === target[0]) {
return;
}
this.trigger(SELECT, {
item: target,
dataItems: [this._dataItem(target)]
});
},
_onBlur: function() {
this.element.find(DOT + ORGCHART_STYLES.focused).removeClass(ORGCHART_STYLES.focused);
},
_onKeyDown: function(e) {
var key = e.keyCode,
focused = this.element.find("[tabindex=0]"),
isRtl = kendo.support.isRtl(this.element),
nextKey = isRtl ? [ keys.LEFT ] : [ keys.RIGHT ],
prevKey = isRtl ? [ keys.RIGHT ] : [ keys.LEFT ],
expandKey = keys.DOWN,
collapseKey = keys.UP,
groupIsVertical;
if (!focused) {
return;
}
groupIsVertical = this._groupIsVertical(focused);
if (groupIsVertical) {
nextKey.push(keys.DOWN);
prevKey.push(keys.UP);
}
if (key === keys.HOME) {
this._keyHome();
} else if (key === keys.END) {
this._keyEnd();
} else if (nextKey.indexOf(key) > -1) {
e.preventDefault();
e.stopPropagation();
this._keyNext(focused);
} else if (prevKey.indexOf(key) > -1) {
e.preventDefault();
e.stopPropagation();
this._keyPrev(focused);
} else if (key === expandKey) {
e.preventDefault();
e.stopPropagation();
this._keyExpand(focused);
} else if (key === collapseKey) {
e.preventDefault();
e.stopPropagation();
this._keyCollapse(focused);
} else if (key === keys.ENTER) {
this._keyEnter(focused);
} else if (key === keys.ESC) {
this._keyEscape(focused);
}
},
_onButtonClick: function(e) {
var that = this,
target = $(e.currentTarget),
shouldExpand = target.find(ORGCHART_STYLES.plusIconSelector).length > 0 ? true : false,
el = target.siblings(DOT + this._selector),
items = this._dataItems(el),
i;
if (shouldExpand) {
if (that.trigger(EXPAND, { item: el, dataItems: items })) {
return;
}
} else {
if (that.trigger(COLLAPSE, { item: el, dataItems: items })) {
return;
}
}
for (i = 0; i < items.length; i++) {
that.dataSource.toggleChildren(items[i], shouldExpand).then(this.refresh.bind(this));
}
},
_onFocus: function() {
return false;
},
_onSelect: function() {
return false;
},
_orientation: function() {
return false;
},
_processItem: function(el) {
var jQueryElement;
if (kendo.type(el) === STRING) {
jQueryElement = this.element.find(el);
} else if (kendo.isElement(el)) {
jQueryElement = $(el);
} else if (el instanceof jQuery) {
jQueryElement = el;
}
return jQueryElement;
},
_render: function() {
var items = this._itemsTree,
root = $(kendo.template(ROOT_TEMPLATE)({ label: this.options.messages.label })),
wrapperContainer = this.element,
total = this._total,
widgetPadding = wrapperContainer.closest(DOT + ORGCHART_STYLES.wrapper).css("padding-left"),
totalWidth;
wrapperContainer.append(root);
this._renderGroup(root, items, 1, this._total, 0);
totalWidth = total * this._itemWidth + (total - 1) * this._spacing;
root.width(totalWidth);
wrapperContainer.width(totalWidth + Number(widgetPadding.split(PX)[0]));
this._setHeight();
this._restoreSelection();
},
_renderNode: function(cardWrapperTemplate, contentTemplate, item, level, guid) {
var messages = this.options.messages,
borderColors = this.options.cardsColors || kendo.getSeriesColors(),
node = $(ITEM_TEMPLATE),
content, cardWrapper;
cardWrapper = $(cardWrapperTemplate(extend(true, {}, item, {
menuLabel: messages.menuLabel,
level: level,
guid: guid,
editable: !!this.options.editable,
color: borderColors[level - 1] || borderColors[0]
})));
if (item.attributes) {
cardWrapper.attr(JSON.parse(JSON.stringify(item.attributes)));
}
content = $(contentTemplate(extend(true, {}, item, {
menuLabel: messages.menuLabel,
level: level,
guid: guid,
editable: !!this.options.editable,
color: borderColors[level - 1] || borderColors[0]
})));
cardWrapper.append(content);
node.append(cardWrapper);
kendo.applyStylesFromKendoAttributes(node, ["border-color"]);
return node;
},
_renderGroup: function() {
return false;
},
_restoreSelection: function() {
var toFocusItem, toFocus;
if (!this._idTabIndex) {
toFocus = this.element.find(DOT + this._selector).first();
toFocus.attr(TABINDEX, "0");
} else {
toFocusItem = this.dataSource.get(this._idTabIndex);
toFocus = toFocusItem ? this._getToFocus(toFocusItem) : this.element.find(DOT + this._selector).first();
toFocus.attr(TABINDEX, "0");
this._idTabIndex = null;
}
if (this._shouldRestoreSelection) {
this._shouldRestoreSelection = false;
this._preventTriggerSelect = true;
toFocus.trigger("focus");
toFocus.addClass(ORGCHART_STYLES.focused);
}
},
_setHeight: function() {
var selector = this._selector,
elements = this.element.find(DOT + ORGCHART_STYLES.button + COMMA + DOT + selector),
min = Number.MAX_VALUE, max = 0,
buttonHeight;
this._calculateDimensions();
buttonHeight = this._buttonHeight;
this.element.find(DOT + ORGCHART_STYLES.lineVerticalTop).height(this._spacing + buttonHeight / 2);
elements.each(function(i, el) {
var top = $(el).offset().top,
bottom = top + $(el).outerHeight(true);
if (top < min) {
min = top;
}
if (bottom > max) {
max = bottom;
}
});
this.element.height(max - min);
}
});
var SingleView = View.extend({
init: function(element, options) {
View.fn.init.call(this, element, options);
this._selector = ORGCHART_STYLES.card;
},
collapse: function(item) {
var $item = this.jqueryItemElement(item);
if (!$item) {
return;
}
this.dataSource.toggleChildren(this._dataItem($item), false).then(this.refresh.bind(this));
},
expand: function(item) {
var $item = this.jqueryItemElement(item);
if (!$item) {
return;
}
this.dataSource.toggleChildren(this._dataItem($item), true).then(this.refresh.bind(this));
},
_calculateItemWidth: function() {
return this.element.find(DOT + this._selector).first().outerWidth(true);
},
_calculateLevel: function(items, level) {
var itemsLength = items.length,
maxColumnsPerLevel = this._maxColumnsPerLevel,
nestedChildren = false,
shouldReset = false,
previousMax, i, item;
if (!maxColumnsPerLevel[level] || maxColumnsPerLevel[level] < itemsLength) {
previousMax = maxColumnsPerLevel[level];
shouldReset = true;
maxColumnsPerLevel[level] = itemsLength;
}
for (i = 0; i < itemsLength; i++) {
item = items[i];
if (item.hasChildren) {
nestedChildren = true;
if (item.expanded) {
this._calculateLevel(item.children, level + 1);
}
}
}
if (!nestedChildren && shouldReset && level > 0) {
shouldReset = false;
maxColumnsPerLevel[level] = previousMax || 1;
}
},
_calculateLevels: function() {
var items = this._itemsTree,
maxColumnsPerLevel = this._maxColumnsPerLevel = [],
total = 1,
i;
this._calculateLevel(items, 0);
for (i = 0; i < maxColumnsPerLevel.length; i++) {
total = total * maxColumnsPerLevel[i];
}
this._total = total;
},
_dataItems: function(container) {
var item = this.dataSource.getByUid(container.data(UID));
if (item) {
return [item];
} else {
return null;
}
},
_generateItemsTree: function() {
this._itemsTree = this.dataSource.itemsTree();
},
_getToFocus: function(item) {
return this.element.find("[data-uid='" + item.get(UID) + "']");
},
_getToSelect: function(el) {
return this.jqueryItemElement(el);
},
_groupIsVertical: function(focused) {
var itemGroup = focused.closest(DOT + ORGCHART_STYLES.group);
return itemGroup.hasClass(ORGCHART_STYLES.groupVertical);
},
_keyCollapse: function(focused) {
var dataItem = this._dataItem(focused),
parentUid, parentItem;
if (dataItem.expanded) {
if (!this.trigger(COLLAPSE, { item: focused, dataItems: [dataItem] })) {
this.collapse(focused);
}
} else if (dataItem.parentId) {
parentUid = this.dataSource.get(dataItem.parentId).get(UID);
parentItem = this.element.find("[data-uid='" + parentUid + "']");
this.trigger(SELECT, {
item: parentItem,
dataItems: [this._dataItem(parentItem)]
});
}
},
_keyEnter: function(focused) {
if (focused.find(DOT + ORGCHART_STYLES.cardMenu).length > 0) {
this.trigger(MENU, focused);
}
},
_keyExpand: function(focused) {
var dataItem = this._dataItem(focused),
ownedGroup = this.element.find(HASH + focused.attr(ARIA_OWNS)),
childItem;
if (!dataItem.hasChildren) {
return;
}
if (!dataItem.expanded) {
if (!this.trigger(EXPAND, { item: focused, dataItems: [dataItem] })) {
this.expand(focused);
}
} else {
childItem = ownedGroup.find(DOT + this._selector).first();
this.trigger(SELECT, {
item: childItem,
dataItems: [this._dataItem(childItem)]
});
}
},
_keyNext: function(focused) {
var dataItem = this._dataItem(focused),
next = focused.parent().next(DOT + ORGCHART_STYLES.node).find(DOT + ORGCHART_STYLES.card),
ownedGroup = this.element.find(HASH + focused.attr(ARIA_OWNS));
if (!next.length && dataItem.hasChildren && dataItem.expanded) {
next = ownedGroup.find(DOT + ORGCHART_STYLES.card).first();
}
if (next.length === 0 || next.hasClass(ORGCHART_STYLES.focused)) {
return;
}
this.trigger(SELECT, {
item: next,
dataItems: [this._dataItem(next)]
});
},
_keyPrev: function(focused) {
var dataItem = this._dataItem(focused),
prev = focused.parent().prev(DOT + ORGCHART_STYLES.node).find(DOT + ORGCHART_STYLES.card),
parentUid;
if (!prev.length && dataItem.parentId) {
parentUid = this.dataSource.get(dataItem.parentId).get(UID);
prev = this.element.find("[data-uid='" + parentUid + "']");
}
if (prev.length === 0 || prev.hasClass(ORGCHART_STYLES.focused)) {
return;
}
this.trigger(SELECT, {
item: prev,
dataItems: [this._dataItem(prev)]
});
},
_onFocus: function(e) {
var currentTarget = $(e.currentTarget),
target = $(e.target);
if (this._preventTriggerSelect) {
e.stopPropagation();
this._preventTriggerSelect = false;
return;
}
if (target.hasClass(ORGCHART_STYLES.cardMenu)) {
if (target.closest("[tabindex='0']").length > 0) {
e.stopPropagation();
return;
} else {
this._preventTriggerSelect = true;
}
}
if (!currentTarget.hasClass(ORGCHART_STYLES.card)) {
currentTarget = currentTarget.closest(DOT + ORGCHART_STYLES.card);
}
if (!currentTarget.hasClass(ORGCHART_STYLES.focused)) {
this.trigger(SELECT, {
item: currentTarget,
dataItems: [this._dataItem(currentTarget)]
});
}
},
_onSelect: function(e) {
var target = $(e.currentTarget),
item = target.hasClass(ORGCHART_STYLES.card) ? target : target.closest(DOT + ORGCHART_STYLES.card),
menuButtonTarget = $(e.target).hasClass(ORGCHART_STYLES.cardMenu) ? $(e.target) : $(e.target).closest(DOT + ORGCHART_STYLES.cardMenu);
if (menuButtonTarget.length > 0) {
return;
}
if (!target.hasClass(ORGCHART_STYLES.focused)) {
this.trigger(SELECT, {
item: item,
dataItems: [this._dataItem(item)]
});
}
},
_orientation: function(group, level, vertical) {
var vLine = $("<div>").addClass(ORGCHART_STYLES.line + SPACE + ORGCHART_STYLES.lineVertical);
if (vertical && level > 1) {
group.addClass(ORGCHART_STYLES.groupVertical + SPACE + ORGCHART_STYLES.vstack);
group.find(DOT + ORGCHART_STYLES.nodeContainer).addClass(ORGCHART_STYLES.vstack);
if (group.find(DOT + ORGCHART_STYLES.button).length === 0 || group.find(DOT + ORGCHART_STYLES.card).length === 1) {
group.find(DOT + ORGCHART_STYLES.card).before(vLine.clone());
group.find(DOT + ORGCHART_STYLES.node).first().find(DOT + ORGCHART_STYLES.lineVertical).addClass(ORGCHART_STYLES.lineVerticalTop);
} else if (level > 1) {
group.find(DOT + ORGCHART_STYLES.card).first().before(vLine.clone());
}
} else {
group.addClass(ORGCHART_STYLES.groupHorizontal + SPACE + ORGCHART_STYLES.hstack);
group.find(DOT + ORGCHART_STYLES.nodeContainer).addClass(ORGCHART_STYLES.hstack);
if (level > 1) {
group.find(DOT + ORGCHART_STYLES.card).before(vLine.clone().addClass(ORGCHART_STYLES.lineVerticalTop));
}
}
},
_renderGroup: function(group, items, level, parentColumns, parentLeft) {
var vertical = true,
nodeContainer;
nodeContainer = $(NODE_CONTAINER).css("width", "100%");
group.append(nodeContainer);
vertical = this._renderInner(nodeContainer, items, level, parentColumns, parentLeft);
this._orientation(group, level, vertical);
},
_renderInner: function(nodeContainer, items, level, parentColumns, parentLeft) {
var buttonTemplate = kendo.template(BUTTON_TEMPLATE),
cardWrapperTemplate = kendo.template(CARD_WRAPPER),
numberOfColumns = parentColumns / items.length,
vertical = true,
vLine = $("<div>").addClass(ORGCHART_STYLES.line + SPACE + ORGCHART_STYLES.lineVertical),
hLine = $("<div>").addClass(ORGCHART_STYLES.line + SPACE + ORGCHART_STYLES.lineHorizontal),
messages = this.options.messages,
i, item, guid, node, button, innerGroup, itemWidth, spacing, contentTemplate;
if (!this.options.template) {
contentTemplate = kendo.template(CARD_TEMPLATE);
} else if (typeof this.options.template === "function") {
contentTemplate = this.options.template;
} else {
contentTemplate = kendo.template(this.options.template);
}
for (i = 0; i < items.length; i++) {
item = items[i];
guid = kendo.guid();
node = this._renderNode(cardWrapperTemplate, contentTemplate, item, level, guid);
if (item.hasChildren) {
node.append(vLine.clone());
button = $(buttonTemplate({ buttonSign: item.expanded ? MINUS : PLUS, label: item.expanded ? messages.collapse : messages.expand }));
node.append(button);
}
nodeContainer.append(node);
this._calculateDimensions();
itemWidth = this._itemWidth;
spacing = this._spacing;
if (item.hasChildren) {
vertical = false;
if (item.expanded) {
innerGroup = this._renderInnerGroup(item, numberOfColumns, parentLeft, i, level, guid);
}
}
if (!!innerGroup && innerGroup.hasClass(ORGCHART_STYLES.groupHorizontal) && item.expanded && !!item.children && item.children.length > 1) {
button.after(hLine.clone().css({
width: (numberOfColumns - numberOfColumns / item.children.length) * (itemWidth + spacing) + PX,
"margin-top": this._buttonHeight / -2 + PX
}));
}
}
if (numberOfColumns > 1 && !vertical) {
nodeContainer.find(DOT + ORGCHART_STYLES.node).width((numberOfColumns - 1) * (spacing + itemWidth));
}
return vertical;
},
_renderInnerGroup: function(item, numberOfColumns, parentLeft, i, level, guid) {
var itemWidth = this._itemWidth,
spacing = this._spacing,
width = numberOfColumns * itemWidth + (numberOfColumns - 1) * spacing,
left = (i * numberOfColumns * itemWidth) + parentLeft,
groupTemplate = kendo.template(GROUP_TEMPLATE),
offsetDirection = kendo.support.isRtl(this.element) ? "right" : "left",
top = level * (this._itemHeight + this._buttonHeight + spacing) + spacing * (level - 1) - this._buttonHeight / 2,
innerGroup;
if (i > 0) {
left += (i * numberOfColumns * spacing);
}
innerGroup = $(groupTemplate({
guid: guid,
level: level + 1
}));
innerGroup.css({
width: width + PX,
top: top + PX
});
innerGroup.css(offsetDirection, left + PX);
this.element.append(innerGroup);
this._renderGroup(innerGroup, item.children, level + 1, numberOfColumns, left);
return innerGroup;
}
});
var GroupedView = View.extend({
init: function(element, options) {
View.fn.init.call(this, element, options);
this._selector = ORGCHART_STYLES.nodesGroupContainer;
},
collapse: function(group) {
var $group = this.jqueryGroupElement(group),
dataItems, i;
if (!$group) {
return;
}
dataItems = this._dataItems($group);
for (i = 0; i < dataItems.length; i++) {
this.dataSource.toggleChildren(dataItems[i], false).then(this.refresh.bind(this));
}
},
expand: function(group) {
var $group = this.jqueryGroupElement(group),
dataItems, i;
if (!$group) {
return;
}
dataItems = this._dataItems($group);
for (i = 0; i < dataItems.length; i++) {
this.dataSource.toggleChildren(dataItems[i], true).then(this.refresh.bind(this));
}
},
_dataItems: function(container) {
var ds = this.dataSource,
dataItems = [],
items, item, current;
if (container.hasClass(ORGCHART_STYLES.card)) {
item = ds.getByUid(container.data(UID));
if (item) {
dataItems.push(item);
}
} else if (container.hasClass(ORGCHART_STYLES.nodesGroupContainer)) {
this._groupFocused = true;
items = container.find(DOT + ORGCHART_STYLES.card);
items.each(function(i, item) {
current = ds.getByUid(item.getAttribute("data-uid"));
if (current) {
dataItems.push(current);
}
});
}
return dataItems;
},
_calculateItemWidth: function() {
var itemElement = this.element.find(DOT + this._selector).first(),
cardWidth = this.element.find(DOT + ORGCHART_STYLES.card).first().outerWidth(true),
padding = Number(itemElement.css("padding-left").split(PX)[0]),
border = Number(itemElement.css("border-left").split(PX)[0]);
return cardWidth + 2 * padding + 2 * border;
},
_calculateLevel: function(groups, level) {
var groupsLength = groups.length,
nestedChildren = false,
maxColumns = 0,
currentLength, i, group;
this._maxColumnsPerLevel[level] = this._maxColumnsPerLevel[level] || 0;
this._maxGroups[level] = this._maxGroups[level] || 0;
for (i = 0; i < groupsLength; i++) {
group = groups[i];
currentLength = group.items.length;
if (currentLength > maxColumns) {
maxColumns = currentLength;
}
group = groups[i];
if (group.hasChildren) {
nestedChildren = true;
if (group.expanded) {
this._calculateLevel(group.children, level + 1);
}
}
}
if (groupsLength > this._maxGroups[level]) {
this._maxGroups[level] = groupsLength;
}
if (!nestedChildren) {
maxColumns = 1;
}
if (maxColumns > this._maxColumnsPerLevel[level]) {
this._maxColumnsPerLevel[level] = maxColumns;
}
},
_calculateLevels: function() {
var items = this._itemsTree,
maxColumnsPerLevel = this._maxColumnsPerLevel = [],
maxGroups = this._maxGroups = [],
total = 1,
i, currentTotal;
this._calculateLevel(items, 0);
for (i = maxColumnsPerLevel.length - 1; i >= 0; i--) {
currentTotal = maxColumnsPerLevel[i] * maxGroups[i];
if (total > maxColumnsPerLevel[i]) {
total = total * maxGroups[i];
} else if (total < currentTotal) {
total = currentTotal;
}
}
this._total = total;
},
_generateItemsTree: function() {
this._itemsTree = this.dataSource.groupedItemsTree(this.options.groupField);
},
_getToFocus: function(item) {
if (!this._groupFocused) {
return this.element.find("[data-uid='" + item.get(UID) + "']");
} else {
this._groupFocused = false;
return this.element.find("[data-uid='" + item.get(UID) + "']").closest(DOT + ORGCHART_STYLES.nodesGroupContainer);
}
},
_getToSelect: function(el) {