@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
1,438 lines (1,160 loc) • 65.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
require('./kendo.core.js');
require('./kendo.splitbutton.js');
require('./kendo.dropdownbutton.js');
require('./kendo.buttongroup.js');
require('./kendo.menu.js');
require('./kendo.icons.js');
require('./kendo.html.button.js');
require('./kendo.html.base.js');
require('./kendo.html.icon.js');
require('@progress/kendo-svg-icons');
require('./kendo.button.menu.js');
require('./kendo.popup.js');
require('./kendo.togglebutton.js');
require('./kendo.button.js');
require('./kendo.badge.js');
require('./kendo.data.js');
require('./kendo.data.odata.js');
require('./kendo.data.xml.js');
const __meta__ = {
id: "toolbar",
name: "ToolBar",
category: "web",
description: "The ToolBar widget displays one or more command buttons divided into groups.",
depends: [ "core", "splitbutton", "dropdownbutton", "buttongroup", "menu", "icons" ]
};
(function($, undefined$1) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
isFunction = kendo.isFunction,
keys = kendo.keys,
outerWidth = kendo._outerWidth,
ns = ".kendoToolBar",
TOOLBAR = "toolbar",
KTOOLBAR = "k-toolbar",
KBUTTON = "k-button",
BUTTON_GROUP = "k-button-group",
SPLIT_BUTTON = "k-split-button",
MENU_BUTTON = "k-menu-button",
POPUP_BUTTON = "k-popup-button",
KSEPARATOR = "k-separator",
SPACER_CLASS = "k-spacer",
UPLOAD_BUTTON = "k-upload-button",
POPUP = "k-popup",
RESIZABLE_TOOLBAR = "k-toolbar-resizable",
STATE_SELECTED = "k-selected",
STATE_DISABLED = "k-disabled",
STATE_HIDDEN = "k-hidden",
FORCE_HIDDEN = "k-force-hidden",
GROUP_START = "k-group-start",
GROUP_END = "k-group-end",
MENU_LINK = "k-menu-link",
MENU_ITEM = "k-menu-item",
OVERFLOW_ANCHOR = "k-toolbar-overflow-button",
TEMPLATE_ITEM = "k-toolbar-item",
MENU_LINK_TOGGLE = "k-menu-link-toggle",
DROPDOWNLIST = "k-dropdownlist",
INPUT_BUTTON = "k-input-button",
MENU_POPUP = "k-menu-popup",
KFOCUS = "k-focus",
SINGLE = "single",
MULTIPLE = "multiple",
NONE = "none",
TABINDEX_MINUS_1 = "[tabindex=-1]",
TOOLBAR_TOOL = "toolbar-tool",
ARIA_DISABLED = "aria-disabled",
ARIA_CHECKED = "aria-checked",
ARIA_LABEL = "aria-label",
CHANGE = "change",
CLICK = "click",
TOGGLE = "toggle",
OPEN = "open",
CLOSE = "close",
FOCUS = "focus",
FOCUSIN = "focusin",
FOCUSOUT = "focusout",
KEYDOWN = "keydown",
SPACER = "spacer",
PRIMARY = "primary",
ROLE = "role",
ITEM_REF = "ref-",
SEPARATOR = "separator",
OVERFLOW = "overflow",
TABINDEX = "tabindex",
INPUT = "input",
SELECT = "select",
HIDDEN = "hidden",
GROUP = "group",
DATA_UID = "data-uid",
DATA_PARENTUID = "data-parentuid",
DATA_ROLE_SELECTOR = "[data-role]",
DATA_TOGGLE_SELECTOR = "[data-toggle]",
DATA_ROLE_BUTTONMENU = "[data-role=buttonmenu]",
ITEM_REF_SELECTOR = "[ref-toolbar-tool]",
KENDO_FOCUSABLE = ":kendoFocusable:not([class*='pager'])",
OVERFLOW_OPEN = "overflowOpen",
OVERFLOW_CLOSE = "overflowClose",
OVERFLOW_NEVER = "never",
OVERFLOW_AUTO = "auto",
OVERFLOW_ALWAYS = "always",
KENDO_UID_ATTR = kendo.attr("uid"),
NOTHING = "",
DASH = "_",
EMPTY = " ",
DOT = ".",
COMMA = ",",
ID = "id",
UID = "uid",
NBSP = " ",
K_DROP_DOWN_BUTTON = "kendoDropDownButton",
K_SPLIT_BUTTON = "kendoSplitButton",
K_TOGGLE_BUTTON = "kendoToggleButton",
K_BUTTON_GROUP = "kendoButtonGroup";
kendo.toolbar = {};
var WIDGET_TYPES = {
button: "Button",
splitButton: "SplitButton",
dropDownButton: "DropDownButton",
buttonGroup: "ButtonGroup",
popupButton: "Button",
open: "Button"
};
var TOOLBAR_TOOLS_CLASSES = {
Button: "k-toolbar-button",
ToggleButton: "k-toolbar-toggle-button",
SplitButton: "k-toolbar-split-button",
DropDownButton: "k-toolbar-menu-button",
ButtonGroup: "k-toolbar-button-group",
ColorPicker: "k-toolbar-color-picker",
Switch: "k-toolbar-switch"
};
var SAFE_COMPONENTS = [ "Button", "SplitButton", "DropDownButton", "ButtonGroup", "Switch", "ColorPicker" ];
var POPUP_BUTTON_TEMPLATE = `<button class="k-popup-button"><span class="k-button-icon k-icon"></span><span class="k-button-text">${kendo.ui.icon("caret-alt-down")}</span></button>`;
var TEMPLATE_WRAPPER = "<div class='k-toolbar-item' aria-keyshortcuts='Enter'></div>";
var CUSTOM_WIDGET_WRAP = "<span class='k-toolbar-item' tabindex='0' ref-toolbar-tool >";
var SEPARATOR_OVERFLOW_EL = "<li role='separator' class='k-separator k-menu-separator k-hidden'></li>";
var SEPARATOR_EL = '<div role="separator"> </div>';
var SPACER_EL = '<div> </div>';
var ToolBar = Widget.extend({
init: function(element, options) {
Widget.fn.init.call(this, element, options);
options = this.options;
this._isRtl = kendo.support.isRtl(element);
this.uid = kendo.guid();
element = this.wrapper = this.element;
element.attr(KENDO_UID_ATTR, this.uid);
element.addClass(KTOOLBAR);
element.attr(ROLE, TOOLBAR);
if (options.resizable) {
this._resizable();
}
if (options.tools && options.tools.length > 0) {
options.items = this._extendToolsOptions();
}
if (options.items && options.items.length) {
this._items();
}
this._attachEvents();
this._tabIndex();
this._applyCssClasses();
if (options.resizable) {
this._shrink(this.element.innerWidth());
this.overflowAnchor.appendTo(this.wrapper);
this._toggleOverflowAnchor();
}
kendo.notify(this);
},
events: [
CLICK,
TOGGLE,
OPEN,
CLOSE,
OVERFLOW_OPEN,
OVERFLOW_CLOSE,
CHANGE
],
options: {
name: "ToolBar",
items: [],
resizable: true,
navigateOnTab: false,
evaluateTemplates: false,
size: "medium",
fillMode: "solid"
},
destroy: function() {
var that = this;
if (that.options.resizable) {
kendo.unbindResize(that._resizeHandler);
that.overflowMenu.destroy();
}
that.element.find(DOT + POPUP_BUTTON).each((i, el) => {
var button = $(el).getKendoButton(),
popup, popupWrapper, chooser;
if (button) {
chooser = button.chooser;
popup = button.popup;
popupWrapper = popup.wrapper;
chooser.destroy();
popup.destroy();
popupWrapper.remove();
}
});
kendo.destroy(that.element.children());
Widget.fn.destroy.call(that);
},
add: function(options) {
this._add(options);
if (this.options.resizable) {
this.resize(true);
}
},
enable: function(candidate, enable) {
var that = this,
uid = this._getUid(candidate),
item = this._getItem(candidate, uid),
component = item.component,
buttonPopup, children, focused, wrapper;
if (typeof enable == "undefined") {
enable = true;
}
if (item.component) {
wrapper = component.wrapper;
focused = wrapper.hasClass(KFOCUS) || wrapper.is(":focus");
component.enable(enable);
wrapper.find("[disabled]").removeAttr("disabled");
wrapper.removeAttr("disabled");
if (focused) {
wrapper.addClass(KFOCUS).trigger(FOCUS);
}
} else if (item.buttonsPopupItem.length > 0) {
buttonPopup = kendo.widgetInstance(item.buttonsPopupItem.closest(DOT + MENU_POPUP));
buttonPopup.enable(enable, item.buttonsPopupItem);
}
if (this.overflowMenu) {
this.overflowMenu.enable(item.menuItem, enable);
children = this.overflowMenu.element
.find("[data-parentuid=" + uid + "]");
children.each((i, el) => {
that.overflowMenu.enable($(el), enable);
});
}
},
getSelectedFromGroup: function(groupName) {
return this.element.find("[data-group='" + groupName + "']").filter(DOT + STATE_SELECTED);
},
hide: function(candidate) {
var that = this,
uid = this._getUid(candidate),
item = that._getItem(candidate, uid),
elements, parentButtonGroup, children, parentGroupEl;
if (!item) {
return;
}
elements = item.templateEl.add(item.toolbarEl).add(item.buttonsPopupItem).add(item.menuItem);
elements.addClass(STATE_HIDDEN);
elements.addClass(FORCE_HIDDEN);
if (this.overflowMenu) {
children = this.overflowMenu.element
.find("[data-parentuid=" + uid + "]");
children.each((i, el) => {
$(el).addClass(FORCE_HIDDEN);
$(el).addClass(STATE_HIDDEN);
});
}
parentGroupEl = item.toolbarEl.parent().closest(DOT + BUTTON_GROUP);
parentButtonGroup = parentGroupEl.data(K_BUTTON_GROUP);
if (parentButtonGroup) {
if (parentGroupEl.children(":not(.k-hidden)").length === 0) {
that.hide(parentGroupEl);
} else {
that._groupVisibleButtons(parentGroupEl);
}
}
if (elements.find("[tabindex=0]").addBack("[tabindex=0]").length > 0) {
this._resetTabIndex(that._getAllItems().first());
}
if (this.options.resizable) {
this.resize(true);
}
},
remove: function(candidate) {
var that = this,
uid = this._getUid(candidate),
item = this._getItem(candidate, uid),
buttonGroup, children;
if (!item) {
return;
}
if (item.component) {
buttonGroup = item.toolbarEl.closest('[data-role="buttongroup"]');
if (buttonGroup.length > 0 && item.toolbarEl.siblings().length === 0) {
buttonGroup.data(K_BUTTON_GROUP).destroy();
buttonGroup.remove();
item.toolbarEl = $(NOTHING);
} else {
item.component.destroy();
}
}
if (item.templateEl.length > 0) {
item.templateEl.remove();
} else if (item.toolbarEl.length > 0) {
item.toolbarEl.remove();
}
if (item.buttonsPopupItem.length > 0) {
item.buttonsPopupItem.remove();
}
if (this.overflowMenu) {
this.overflowMenu.remove(item.menuItem);
children = this.overflowMenu.element
.find("[data-parentuid=" + uid + "]");
children.each((i, el) => {
that.overflowMenu.remove($(el));
});
}
if (this.options.resizable) {
this.resize(true);
}
},
show: function(candidate) {
var that = this,
uid = this._getUid(candidate),
item = this._getItem(candidate, uid),
elements, parentButtonGroup, children, parentGroupEl;
if (!item) {
return;
}
elements = item.templateEl.add(item.toolbarEl).add(item.buttonsPopupItem);
elements.removeClass(FORCE_HIDDEN);
elements.removeClass(STATE_HIDDEN);
item.menuItem.removeClass(FORCE_HIDDEN);
if (this.overflowMenu) {
children = this.overflowMenu.element
.find("[data-parentuid=" + uid + "]");
children.each((i, el) => {
$(el).removeClass(FORCE_HIDDEN);
});
}
parentGroupEl = item.toolbarEl.parent().closest(DOT + BUTTON_GROUP);
parentButtonGroup = parentGroupEl.data(K_BUTTON_GROUP);
if (parentButtonGroup) {
if (parentGroupEl.hasClass("k-hidden") && parentGroupEl.children(":not(.k-hidden)").length > 0) {
that.show(parentGroupEl);
} else {
that._groupVisibleButtons(parentGroupEl);
}
}
if (this.options.resizable) {
this.resize(true);
}
},
toggle: function(candidate, checked) {
var item = this._getItem(candidate),
element = item.toolbarEl,
menuItem = item.menuItem,
button, parentGroup, group, groupButtons;
if (checked === undefined$1) {
checked = true;
}
button = element.data(K_TOGGLE_BUTTON);
if (!item.component && menuItem.find(DOT + MENU_LINK_TOGGLE).length === 0) {
return;
}
group = element.data(GROUP);
if (item.component) {
parentGroup = element.closest(DOT + BUTTON_GROUP).data(K_BUTTON_GROUP);
if (parentGroup) {
if (element.hasClass(STATE_SELECTED) !== checked) {
parentGroup._toggleIndex(element.index());
}
}
button.toggle(checked);
if (checked) {
groupButtons = this.element.find("[data-group=" + group + "]");
groupButtons.each((i, el) => {
if (el !== element[0]) {
$(el).data(K_TOGGLE_BUTTON).toggle(false);
}
});
}
}
if (menuItem) {
menuItem
.attr(ARIA_CHECKED, checked)
.find(DOT + MENU_LINK_TOGGLE)
.toggleClass(STATE_SELECTED, checked);
if (checked && this.overflowMenu) {
groupButtons = this.overflowMenu.element.find("[data-group=" + group + "]");
groupButtons.each((i, el) => {
if (el !== menuItem[0]) {
$(el)
.attr(ARIA_CHECKED, false)
.find(DOT + MENU_LINK_TOGGLE)
.removeClass(STATE_SELECTED);
}
});
}
}
},
toggleTools: function(conditions) {
var that = this,
tools = that.element.find(DATA_TOGGLE_SELECTOR),
focusable = that.element.find(KENDO_FOCUSABLE).not(TABINDEX_MINUS_1);
tools.each(function(index, elm) {
var tool = $(elm),
widget = null,
condition = tool.data(TOGGLE),
toToggle = conditions && conditions[condition];
if (tool.is(DATA_ROLE_SELECTOR)) {
widget = kendo.widgetInstance(tool);
}
if (widget && widget.enable) {
widget.enable(toToggle || false);
} else {
that.enable(tool, toToggle);
}
});
that.element.find(DATA_TOGGLE_SELECTOR + "[disabled]").removeAttr("disabled");
that.element.find(KENDO_FOCUSABLE).not(TABINDEX_MINUS_1).attr("tabindex", -1);
focusable.attr(TABINDEX, 0);
},
_add: function(options) {
var processed = this._processOptions(options),
template = processed.template,
overflowTemplate = processed.overflowTemplate,
type = WIDGET_TYPES[processed.type],
element;
if (template || overflowTemplate) {
element = this._addTemplate(processed);
} else if (kendo.ui[processed.component]) {
element = this._addCustomWidget(processed);
} else if (type) {
element = this._addDefaultTool(type, processed);
} else if (processed.type === SPACER) {
this._addSpacer();
} else if (processed.type === SEPARATOR) {
this._addSeparator(processed);
}
if (element) {
if (this.overflowAnchor) {
element.insertBefore(this.overflowAnchor);
} else {
element.appendTo(this.element);
}
element.find("[disabled]").removeAttr("disabled");
if (element.is("[disabled]")) {
element.removeAttr("disabled");
}
}
},
_addAttributes: function(options, element) {
var attributes = options.attributes,
classes = NOTHING;
if (!attributes) {
attributes = {};
}
if (options.hidden) {
classes = STATE_HIDDEN + EMPTY + FORCE_HIDDEN;
}
if (options.align) {
classes = classes + " k-align-" + options.align;
}
if (attributes) {
if (attributes.class) {
classes = classes + EMPTY + attributes.class;
delete attributes.class;
}
element.attr(attributes);
}
element.addClass(classes);
element.attr(KENDO_UID_ATTR, options.uid);
if (options.id) {
element.attr(ID, options.id);
}
if (options.overflow === OVERFLOW_NEVER) {
element.attr("data-overflow", OVERFLOW_NEVER);
}
if (options.items) {
options.items.forEach(item => {
if (item && item.groupClass && !element.hasClass(item.groupClass)) {
element.addClass(item.groupClass);
}
});
}
},
_addCustomWidget: function(options) {
var element = $(options.element || "<input>"),
widget, result, classes;
if (options.overflowComponent) {
this._addMenuItem(options.overflowComponent.type, $.extend({}, options, options.overflowComponent));
}
if (options.attributes) {
classes = options.attributes.class;
delete options.attributes["class"];
element.attr(options.attributes);
delete options.attributes[ARIA_LABEL];
}
if (!options.componentOptions) {
options.componentOptions = {};
}
options.componentOptions.size = this.options.size;
widget = new kendo.ui[options.component](element, options.componentOptions);
if (SAFE_COMPONENTS.indexOf(options.component) > -1) {
widget.wrapper.addClass(TOOLBAR_TOOLS_CLASSES[options.component]).attr(ITEM_REF + TOOLBAR_TOOL, '');
result = widget.wrapper;
} else {
result = (widget.wrapper || widget.element).wrap(CUSTOM_WIDGET_WRAP).parent();
}
if (options.attributes) {
options.attributes.class = classes;
}
this._addAttributes(options, result);
return result;
},
_addDefaultTool: function(component, options) {
var element, op;
if (options.overflow !== OVERFLOW_ALWAYS) {
element = this._addToolbarTool(component, $.extend(true, {}, options));
}
if (this.overflowMenu && options.overflow !== OVERFLOW_NEVER) {
if (options.overflowComponent) {
op = $.extend(true, {}, options, options.overflowComponent);
delete op["data-command"];
this._addMenuItem("Button", op);
} else {
this._addMenuItem(component, $.extend(true, {}, options));
}
}
return element;
},
_addMenuItem: function(component, options) {
var that = this,
selected = options.selected,
menuitem;
delete options.selected;
if (options.id) {
options.id = options.id + DASH + OVERFLOW;
}
if (options.showIcon === TOOLBAR) {
delete options.imageUrl;
delete options.icon;
}
if (options.showText === TOOLBAR) {
if (!options.attributes) {
options.attributes = {};
}
options.attributes[ARIA_LABEL] = options.text;
options.text = NOTHING;
} else if (options.text === undefined$1 || options.text === NOTHING) {
options.text = NBSP;
options.encoded = false;
}
that.overflowMenu.append(options);
menuitem = that.overflowMenu.element.find(DOT + MENU_ITEM).last();
if (options.icon) {
menuitem.find(DOT + MENU_LINK).prepend(kendo.ui.icon(options.icon));
}
if (component === "ToggleButton" || (component === "Button" && options.togglable === true)) {
menuitem.find(DOT + MENU_LINK).addClass(MENU_LINK_TOGGLE);
if (selected) {
menuitem.find(DOT + MENU_LINK).addClass(STATE_SELECTED);
}
if (options.group) {
menuitem.attr("data-group", options.group);
}
} else if (options.menuButtons) {
options.menuButtons.forEach((i) => {
i.overflow = options.overflow;
that._addMenuItem(null, i);
});
} else if (options.buttons) {
menuitem.remove();
menuitem = null;
options.buttons.forEach((i) => {
var attributes = i.attributes;
i.overflow = options.overflow;
i.attributes = $.extend(attributes, options.attributes);
that._addMenuItem("Button", i);
});
}
if (component === "DropDownButton") {
menuitem.addClass(STATE_DISABLED);
menuitem.attr(ARIA_DISABLED, true);
}
if (menuitem) {
that._addAttributes(options, menuitem);
if (options.overflow === OVERFLOW_AUTO) {
menuitem.addClass(STATE_HIDDEN);
}
if (options.click || options.toggle) {
that.overflowMenu.bind(SELECT, (e) => {
if (e.item === menuitem[0]) {
this._onMenuItemSelect(e, options.click, options.toggle);
}
});
}
}
return menuitem;
},
_addPopupButton: function(options) {
var that = this,
widgetElement = $(POPUP_BUTTON_TEMPLATE),
component = options.popupComponent,
popup, chooser;
widgetElement.attr(ARIA_LABEL, options.text);
popup = $("<div/>").appendTo($("<body>")).kendoPopup({
anchor: widgetElement
}).data("kendoPopup");
widgetElement.on(CLICK + " touchend", (e) => {
popup.toggle();
e.preventDefault();
});
chooser = new component(popup.element);
chooser.bind(options.commandOn, (e) => {
that.trigger(CHANGE, { target: widgetElement, value: e.value || e });
popup.close();
});
return { widgetElement, chooser, popup };
},
_addSeparator: function(options) {
var separator = $(SEPARATOR_EL),
overflowSeparator = $(SEPARATOR_OVERFLOW_EL);
separator.addClass(KSEPARATOR);
separator.attr(ROLE, SEPARATOR);
if (this.overflowAnchor) {
separator.insertBefore(this.overflowAnchor);
} else {
separator.appendTo(this.element);
}
this._addAttributes(options, separator);
if (options.id) {
options.id = options.id + DASH + OVERFLOW;
}
this._addAttributes(options, overflowSeparator);
if (this.overflowMenu) {
this.overflowMenu.element.append(overflowSeparator);
}
},
_addSpacer: function() {
var spacer = $(SPACER_EL);
spacer.addClass(SPACER_CLASS);
if (this.overflowAnchor) {
spacer.insertBefore(this.overflowAnchor);
} else {
spacer.appendTo(this.element);
}
},
_addTemplate: function(options) {
var template = options.template,
overflowTemplate = options.overflowTemplate,
element, menuitem, inputsInTemplate = $(NOTHING);
if (overflowTemplate && this.overflowMenu && options.overflow !== OVERFLOW_NEVER) {
overflowTemplate = isFunction(overflowTemplate) ? overflowTemplate(options)[0] : overflowTemplate;
this.overflowMenu.append({});
menuitem = this.overflowMenu.element
.find(DOT + MENU_ITEM)
.last()
.find(DOT + MENU_LINK)
.html(overflowTemplate)
.parent();
}
if (template && options.overflow !== OVERFLOW_ALWAYS) {
if (this.options.evaluateTemplates) {
template = kendo.template(template);
}
template = isFunction(template) ? template(options) : template;
element = $(TEMPLATE_WRAPPER);
element.html(template);
if (menuitem) {
menuitem.addClass(STATE_HIDDEN);
}
}
if (element) {
inputsInTemplate = element.find(INPUT + COMMA + SELECT);
this._addAttributes(options, element);
}
if (menuitem) {
inputsInTemplate.add(menuitem.find(INPUT + COMMA + SELECT));
this._addAttributes(options, menuitem);
}
if (!this.options.navigateOnTab && inputsInTemplate.length > 0) {
element.attr(TABINDEX, 0);
element.attr(ITEM_REF + TOOLBAR_TOOL, '');
inputsInTemplate.attr(TABINDEX, -1);
}
return element;
},
_addToolbarTool: function(component, options) {
var widgetElement = $("<button>"),
hasButtons = false,
widget, element, popupRef;
if (options.primary === true) {
options.themeColor = PRIMARY;
}
if (options.url) {
widgetElement = $("<a href='" + options.url + "'>");
}
if (options.showIcon === OVERFLOW) {
delete options.imageUrl;
delete options.icon;
}
if (options.showText !== OVERFLOW) {
widgetElement.text(options.text);
} else {
widgetElement.attr(ARIA_LABEL, options.text);
}
if (options.type === "popupButton") {
popupRef = this._addPopupButton(options);
widgetElement = popupRef.widgetElement;
} else if (component === "Button" && options.togglable === true) {
component = "ToggleButton";
} else if (options.menuButtons) {
options.items = options.menuButtons;
delete options.menuButtons;
if (options.attributes && options.attributes.class) {
widgetElement.addClass(options.attributes.class);
}
widgetElement.attr(DATA_UID, options.uid);
delete options.uid;
} else if (options.buttons) {
widgetElement = $("<span></span>");
hasButtons = true;
options.items = options.buttons;
delete options.buttons;
options.preventKeyNav = true;
options.items.forEach(i => {
if (i.showIcon === OVERFLOW) {
delete i.imageUrl;
delete i.icon;
}
if (i.showText === OVERFLOW) {
if (!i.attributes) {
i.attributes = {};
}
i.attributes[ARIA_LABEL] = i.text;
delete i.text;
}
});
}
if (options.id) {
widgetElement.attr(ID, options.id);
delete options.id;
}
// Remove the name property. Otherwise the default component name will be overriden.
// This will cause us to init an element with data-role=${name} instead of the correct data-role of the component.
if (options.name) {
delete options.name;
}
options.size = this.options.size;
widget = new kendo.ui[component]($(widgetElement), options);
element = widget.wrapper || widget.element;
element.addClass(TOOLBAR_TOOLS_CLASSES[component]);
this._addAttributes(options, element);
if (options.url) {
widgetElement.removeAttr(ROLE);
}
if (hasButtons) {
element.find(DOT + KBUTTON).attr(ITEM_REF + TOOLBAR_TOOL, '');
this._groupVisibleButtons(element);
} else {
widget.element.attr(ITEM_REF + TOOLBAR_TOOL, '');
}
if (options.type !== "popupButton" && options.type !== "open") {
this._attachWidgetEvents(widget);
} else if (options.type === "open") {
widgetElement.addClass(UPLOAD_BUTTON);
this._resetOpen(widgetElement, options.extensions);
element = widgetElement.parent();
} else {
widget.chooser = popupRef.chooser;
widget.popup = popupRef.popup;
}
return element;
},
_attachEvents: function() {
var that = this;
that.element.on(KEYDOWN + ns, that._keydown.bind(that))
.on(FOCUSIN + ns, that._focusIn.bind(that))
.on(FOCUSOUT + ns, that._focusOut.bind(that));
},
_attachWidgetEvents: function(widget) {
var that = this;
widget.bind(CLICK, that._onClick.bind(that));
widget.bind(TOGGLE, that._onToggle.bind(that));
widget.bind(SELECT, that._onSelect.bind(that));
widget.bind(OPEN, that._onOpen.bind(that));
widget.bind(CLOSE, that._onClose.bind(that));
widget.wrapper.find(DOT + KBUTTON).each((i, el) => {
var $el = $(el);
if ($el.data("kendoButton")) {
$el.data("kendoButton").bind(CLICK, (e) => {
that.trigger(CLICK, { id: e.id, target: e.target, originalEvent: e.originalEvent || e.event });
});
}
});
},
_childrenWidth: function() {
var gap = parseInt(this.element.css('gap'), 10) || 0;
var childrenWidth = gap;
this.element.children(":visible:not(" + DOT + SPACER_CLASS + ")").each(function() {
childrenWidth += outerWidth($(this), false) + gap;
});
return Math.ceil(childrenWidth);
},
_extendToolsOptions: function() {
var options = this.options,
items = options.tools.flatMap((tool) => this._mapTool(tool, options.parentMessages, options.defaultTools));
this.options.items = items;
return items;
},
_focusIn: function(e) {
var target = $(e.target),
button = target.closest(DOT + KBUTTON);
if (button.length > 0) {
this._resetTabIndex(button);
button.addClass(KFOCUS);
}
},
_focusOut: function(e) {
this.wrapper.find(DOT + KBUTTON + DOT + KFOCUS).removeClass(KFOCUS);
},
_getAllItems: function() {
return this.wrapper.find(ITEM_REF_SELECTOR)
.filter(":visible")
.filter((i, el) => {
if (el.style.visibility === HIDDEN) {
return false;
}
return true;
});
},
_getItem: function(candidate, knownUid) {
var uid = knownUid || this._getUid(candidate),
buttonsPopups = $(DATA_ROLE_BUTTONMENU),
uidSelector, toolbarEl;
if (!uid) {
return {
toolbarEl: this.element.find(candidate),
templateEl: $(NOTHING),
menuItem: this.overflowMenu ? this.overflowMenu.element.find(candidate) : $(NOTHING),
buttonsPopupItem: $(NOTHING)
};
}
uidSelector = "[data-uid=" + uid + "]";
toolbarEl = this.element.find(uidSelector);
return {
toolbarEl: toolbarEl,
templateEl: toolbarEl.closest(DOT + TEMPLATE_ITEM + COMMA + DOT + SPLIT_BUTTON),
component: kendo.widgetInstance(toolbarEl),
menuItem: this.overflowMenu ? this.overflowMenu.element.find(uidSelector) : $(NOTHING),
buttonsPopupItem: buttonsPopups.find(uidSelector)
};
},
_getNextElement: function(item, direction) {
var items = this._getAllItems(),
itemIndex = items.index(item) === -1 ? items.index(item.parentElement) : items.index(item),
focusableItem = items[itemIndex + direction];
if (!focusableItem) {
if (direction === -1) {
focusableItem = items.last();
} else {
focusableItem = items.first();
}
}
return focusableItem;
},
_getUid: function(candidate) {
var element;
// find toolbar item by jQuery selector
element = this.element.find(candidate);
// if not found find in in the DropDown-/SplitButton popups
if (!element.length) {
element = $(DATA_ROLE_BUTTONMENU).find(candidate);
}
// if not, find it in the OverflowMenu
if (!element.length && this.overflowMenu) {
element = this.overflowMenu.element.find(candidate);
}
if (!element.length) {
return null;
} else {
return element.data(UID) || element.closest(ITEM_REF_SELECTOR).data(UID);
}
},
_groupVisibleButtons: function(el) {
var buttons = el.children(),
visibleBtns;
buttons.removeClass(GROUP_END).removeClass(GROUP_START);
visibleBtns = buttons.filter(":not('." + STATE_HIDDEN + "')");
visibleBtns.first().addClass(GROUP_START);
visibleBtns.last().addClass(GROUP_END);
},
_hideItem: function(item) {
var that = this,
widget;
item.addClass(STATE_HIDDEN);
if (that.overflowMenu) {
if (item.hasClass(SPLIT_BUTTON) || item.hasClass(MENU_BUTTON)) {
if (item.hasClass(SPLIT_BUTTON)) {
item = item.children().eq(0);
widget = item.data(K_SPLIT_BUTTON);
} else {
widget = item.data(K_DROP_DOWN_BUTTON);
}
widget.menu.list.children().each((i, el) => {
that._showMenuItem($(el));
});
that._showMenuItem(item);
} else if (item.hasClass(BUTTON_GROUP)) {
item.children().each((i, el) => {
that._showMenuItem($(el));
});
} else {
that._showMenuItem(item);
}
}
},
_hideMenuItem: function(item) {
this.overflowMenu.element
.find(">li[data-uid='" + item.data(UID) + "']")
.addClass(STATE_HIDDEN);
},
_items: function() {
let options = this.options;
for (var i = 0; i < options.items.length; i++) {
this._add(options.items[i]);
}
},
_keydown: function(e) {
var target = $(e.target),
keyCode = e.keyCode,
templateItem = target.closest(DOT + TEMPLATE_ITEM),
isOverflowAnchor = target.is(DOT + OVERFLOW_ANCHOR);
if (!this.options.navigateOnTab && !target.is(ITEM_REF_SELECTOR) && keyCode === keys.ESC && templateItem.length > 0) {
e.stopPropagation();
this._keyDeactivateTemplate(templateItem);
return;
}
if (!target.is(ITEM_REF_SELECTOR)) {
return;
}
if (!this.options.navigateOnTab && keyCode === keys.ENTER && target.hasClass(TEMPLATE_ITEM)) {
this._keyActivateTemplate(target);
} else if (isOverflowAnchor && (e.altKey && keyCode === keys.DOWN || keyCode === keys.SPACEBAR)) {
this._keyOpenOverflow(e, keyCode);
} else if (keyCode === keys.HOME) {
this._keyFocusFirst(target, e);
} else if (keyCode === keys.END) {
this._keyFocusLast(target, e);
} else if (!this.options.navigateOnTab && (keyCode === keys.RIGHT || keyCode === keys.LEFT)) {
this._keyFocusNext(keyCode, e);
}
},
_keyActivateTemplate: function(target) {
var innerFocusable = target.find(KENDO_FOCUSABLE + ":not('" + DOT + INPUT_BUTTON + "')" + COMMA + DOT + DROPDOWNLIST);
const pagerTool = target.find('.k-pager');
if (pagerTool.length > 0) {
pagerTool.trigger(FOCUS);
} else if (innerFocusable.length > 0) {
target.attr(TABINDEX, -1);
innerFocusable.attr(TABINDEX, 0);
innerFocusable.first().trigger(FOCUS);
}
},
_keyDeactivateTemplate: function(templateItem) {
var innerWidget = templateItem.find(DATA_ROLE_SELECTOR),
innerFocusable = templateItem.find(KENDO_FOCUSABLE + ":not('" + DOT + INPUT_BUTTON + "')" + COMMA + DOT + DROPDOWNLIST),
widgetInstance;
if (innerWidget.length > 0) {
widgetInstance = kendo.widgetInstance(innerWidget);
if (widgetInstance) {
if (widgetInstance.overflowMenu && widgetInstance.overflowMenu.visible()) {
return;
} else {
templateItem.attr(TABINDEX, 0);
templateItem.trigger(FOCUS);
templateItem.find(KENDO_FOCUSABLE).attr(TABINDEX, -1);
}
}
}
if (innerFocusable.length > 0) {
templateItem.attr(TABINDEX, 0);
templateItem.trigger(FOCUS);
innerFocusable.attr(TABINDEX, -1);
}
},
_keyFocusFirst: function(target, e) {
var items = this._getAllItems();
if (target.is(DOT + DROPDOWNLIST) || target.is(INPUT)) {
return;
}
this._resetTabIndex(items.first());
items.first().trigger(FOCUS);
e.preventDefault();
},
_keyFocusLast: function(target, e) {
var items = this._getAllItems(),
last;
if (target.is(DOT + DROPDOWNLIST) || target.is(INPUT)) {
return;
}
last = items.last();
if (last.width() === 0) {
last = items.eq(items.length - 2);
}
this._resetTabIndex(last);
last.trigger(FOCUS);
e.preventDefault();
},
_keyFocusNext: function(keyCode, e) {
var direction = this._isRtl ? -1 : 1,
next;
if (keyCode === keys.LEFT) {
direction = -1 * direction;
}
next = $(this._getNextElement(e.target, direction));
this._resetTabIndex(next);
next.trigger(FOCUS);
e.preventDefault();
},
_keyOpenOverflow: function(e, keyCode) {
if (keyCode === keys.SPACEBAR) {
e.preventDefault();
}
this.overflowMenu.open();
},
_mapAttributes: function(toolOptions, messages) {
return {
"aria-label": messages[toolOptions.name || toolOptions.property],
"title": messages[toolOptions.name || toolOptions.property],
"data-command": toolOptions.command,
"data-options": toolOptions.options,
"data-dialog": toolOptions.dialog,
"data-property": toolOptions.property,
"data-value": toolOptions.value,
"data-toggle": toolOptions.toggleCondition
};
},
_mapComponent: function(component, messages) {
var that = this,
componentOptions = component.componentOptions,
componentMessages = componentOptions.messages,
componentPlaceholder = componentOptions.placeholder,
attributes = $.extend({}, that._mapAttributes(component, messages), component.attributes),
options;
if (component.overflowComponent) {
options = component.options || {};
if (component.componentOptions.dataSource) {
options.options = component.componentOptions.dataSource;
}
if (component.componentOptions.value) {
options.default = component.componentOptions.value;
}
if (Object.keys(options).length > 0) {
component.overflowComponent.options = JSON.stringify(options);
}
component.overflowComponent = that._mapTool(component.overflowComponent, messages);
}
if (componentMessages) {
Object.keys(componentMessages).forEach((key) => {
component.componentOptions.messages[key] = messages[componentMessages[key]] || componentMessages[key];
});
}
if (componentPlaceholder) {
component.componentOptions.placeholder = messages[componentPlaceholder] || componentPlaceholder;
}
Object.keys(componentOptions).forEach((key) => {
if (key === "commandOn") {
component.componentOptions[componentOptions[key]] = (ev) => {
that.trigger(CHANGE, { target: ev.target || ev.sender.element });
};
}
});
if (componentOptions.dataSource && componentOptions.dataSource.length) {
component.componentOptions.dataSource = componentOptions.dataSource.map(i => {
if (i.name && messages[i.name]) {
i.text = messages[i.name];
}
return i;
});
}
component.attributes = attributes;
return component;
},
_mapTool: function(tool, messages, defaultTools) {
let that = this,
isArray = Array.isArray(tool),
isPlainObjectTool = $.isPlainObject(tool),
toolKeysCount = isPlainObjectTool && Object.keys(tool).length,
isBuiltInTool, toolOptions, attributes, originalTool;
if (isArray) {
return {
type: "buttonGroup",
buttons: tool.map(t => that._mapTool(t, messages, defaultTools))
};
}
isBuiltInTool = isPlainObjectTool && (toolKeysCount === 1 || toolKeysCount === 2) && tool.name;
originalTool = isBuiltInTool ? tool : {};
tool = isBuiltInTool ? tool.name : tool;
toolOptions = $.isPlainObject(tool) ? tool : $.extend({}, defaultTools[tool]);
attributes = $.extend({}, that._mapAttributes(toolOptions, messages), toolOptions.attributes);
kendo.deepExtend(toolOptions, {
text: originalTool.text || messages[toolOptions.name || toolOptions.property],
attributes: attributes,
});
if (toolOptions.type === "component") {
if (toolOptions.items) {
return toolOptions.items.map(t => that._mapComponent(t, messages));
} else {
return that._mapComponent(toolOptions, messages);
}
} else if (toolOptions.type === "buttonGroup") {
delete toolOptions.attributes[ARIA_LABEL];
toolOptions.buttons = toolOptions.buttons.map(t => that._mapTool(t, messages, defaultTools));
} else if (toolOptions.type === "splitButton") {
delete toolOptions.attributes[ARIA_LABEL];
toolOptions.menuButtons = toolOptions.menuButtons.flatMap(t => that._mapTool(t, messages, defaultTools));
} else if (toolOptions.type === "popupButton" && toolOptions.overflowComponent) {
toolOptions.overflowComponent = that._mapTool(toolOptions.overflowComponent, messages);
}
delete toolOptions.name;
return toolOptions;
},
_menuItemSelect: function(e) {
var item = $(e.item),
id = item.attr(ID),
togglable = item.find(DOT + MENU_LINK_TOGGLE),
groupName = item.data(GROUP),
shouldSelect, twin, group;
if (id && id.indexOf(DASH + OVERFLOW) > -1) {
id = id.replace(DASH + OVERFLOW, NOTHING);
}
if (togglable.length) {
if (groupName) {
this.overflowMenu.element.find("[data-group=" + groupName + "]").each((i, el) => {
var current = $(el);
current.attr(ARIA_CHECKED, false);
current.find(DOT + MENU_LINK_TOGGLE).removeClass(STATE_SELECTED);
});
}
shouldSelect = groupName ? true : !togglable.hasClass(STATE_SELECTED);
togglable.toggleClass(STATE_SELECTED, shouldSelect);
item.attr(ARIA_CHECKED, shouldSelect);
twin = this.element.find("[data-uid=" + item.data(UID) + "]");
if (twin.length) {
if (twin.closest(DOT + BUTTON_GROUP).length) {
group = twin.closest(DOT + BUTTON_GROUP).data(K_BUTTON_GROUP);
group.select(twin);
} else {
if (groupName) {
this.element.find("[data-group=" + groupName + "]").each((i, el) => {
$(el).data(K_TOGGLE_BUTTON).toggle(false);
});
}
twin.data(K_TOGGLE_BUTTON).toggle(true);
}
}
t