@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
300 lines (298 loc) • 10.1 kB
JavaScript
//#region ../src/kendo.button.menu.js
const __meta__ = {
id: "button.menu",
name: "ButtonMenu",
category: "web",
description: "The popup Menu list part of the SplitButton and the DropDownButton",
depends: [
"core",
"popup",
"icons"
]
};
(function($, undefined) {
var kendo = window.kendo, Widget = kendo.ui.Widget, NS = ".kendoButtonMenu", ui = kendo.ui, keys = kendo.keys, encode = kendo.htmlEncode, sanitizeLink = kendo.sanitizeLink, extend = $.extend, DOT = ".", ID = "id", NEXT = "next", PREV = "prev", DISABLEDSTATE = "k-disabled", HIDDEN = "k-hidden", ARIA_DISABLED = "aria-disabled", ROLE_MENU = "menu", ROLE_MENU_ITEM = "menuitem", TABINDEX = "tabindex", CLICK = "click", MENU_CLICK = "menuClick", OPEN = "menuOpen", CLOSE = "menuClose", KEYDOWN = "keydown", FOCUS = "focus", DIRECTIONS = {
"down": {
origin: "bottom left",
position: "top left"
},
"up": {
origin: "top left",
position: "bottom left"
}
};
var cssClasses = {
popup: "k-menu-popup",
list: "k-menu-group",
listItem: "k-item k-menu-item",
menuItem: "k-menu-item",
itemText: "k-menu-link-text",
item: "k-link k-menu-link",
sprite: "k-sprite",
image: "k-image",
icon: "k-icon"
};
var baseItem = {
text: null,
icon: null,
url: null,
attributes: null,
enabled: true,
hidden: false,
id: null,
imageUrl: null,
spriteCssClass: null
};
var IMAGE_TEMPLATE = ({ imageUrl }) => `${imageUrl ? `<img alt="icon" class="${cssClasses.image}" src="${encode(imageUrl)}" />` : ""}`;
var SPRITE_TEMPLATE = ({ spriteCssClass }) => `${spriteCssClass ? `<span class="${cssClasses.sprite} ${encode(spriteCssClass)}"></span>` : ""}`;
var ICON_TEMPLATE = ({ icon }) => `${icon ? kendo.ui.icon(encode(icon)) : ""}`;
var TEXT_TEMPLATE = ({ text }) => `${text ? `<span class="${cssClasses.itemText}">${encode(text)}</span>` : ""}`;
var ITEM_TEMPLATE = ({ imageUrl, spriteCssClass, icon, text }) => `<span class="${cssClasses.item}">` + `${IMAGE_TEMPLATE({ imageUrl })}` + `${SPRITE_TEMPLATE({ spriteCssClass })}` + `${ICON_TEMPLATE({ icon })}` + `${TEXT_TEMPLATE({ text })}` + `</span>`;
var LINK_TEMPLATE = ({ url, imageUrl, spriteCssClass, icon, text, attributes }) => `<a href="${sanitizeLink(url)}" ${attributes && attributes.target ? `target="${attributes.target}"` : ""} class="${cssClasses.item}">` + `${IMAGE_TEMPLATE({ imageUrl })}` + `${SPRITE_TEMPLATE({ spriteCssClass })}` + `${ICON_TEMPLATE({ icon })}` + `${TEXT_TEMPLATE({ text })}` + `</a>`;
function findFocusableSibling(element, dir) {
var getSibling = dir === NEXT ? $.fn.next : $.fn.prev;
var getter = dir === NEXT ? $.fn.first : $.fn.last;
var candidate = getSibling.call(element);
var focusable = ":kendoFocusable";
if (!candidate.length) {
candidate = getter.call(element.parent().find(DOT + cssClasses.menuItem));
}
if (candidate.is(focusable) || !candidate.length) {
return candidate;
}
if (candidate.find(focusable).length) {
return getter.call(candidate.find(focusable));
}
return findFocusableSibling(candidate, dir);
}
var ButtonMenu = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
that.mainButton = options.mainButton;
that._clickHandlers = {};
that._renderList();
that._initPopup();
that._attachEvents();
that._applyCssClasses(that.list);
},
options: {
name: "ButtonMenu",
direction: "down",
element: null,
items: [],
size: undefined
},
events: [
MENU_CLICK,
OPEN,
CLOSE
],
_renderList: function() {
var that = this, items = that.options.items, popup = that.element.addClass(cssClasses.popup), id = that.mainButton.attr(ID) || kendo.guid(), list = $("<ul role=\"" + ROLE_MENU + "\"></ul>").addClass(cssClasses.list);
that.list = list.appendTo(popup);
that.list.attr(ID, id + "_buttonmenu");
items.forEach(that._renderListItem.bind(that));
that.list.find(DOT + cssClasses.menuItem + ":first-child").addClass("k-first");
that.list.find(DOT + cssClasses.menuItem + ":last-child").addClass("k-last");
},
_renderListItem: function(item) {
var that = this, attributesId = item.attributes ? item.attributes.id : null, id, menuItem;
item = extend({}, baseItem, item, { enabled: item.enable && item.enabled });
id = item.id || attributesId || kendo.guid();
menuItem = $("<li id=\"" + id + "\" role=\"" + ROLE_MENU_ITEM + "\" class=\"" + cssClasses.listItem + "\">" + that._renderItemButton(item) + "</li>");
if (item.click) {
that._clickHandlers[id] = item.click;
}
if (item.attributes) {
delete item.attributes.target;
if (item.attributes.class) {
menuItem.addClass(item.attributes.class);
delete item.attributes.class;
}
menuItem.attr(item.attributes);
}
if (item.data && kendo.isFunction(item.data)) {
menuItem.data(item.data(item));
}
that.list.append(menuItem);
that.enable(item.enabled, menuItem);
that._hide(item.hidden, menuItem);
},
_renderItemButton: function(item) {
var that = this, options = that.options;
if (options.itemTemplate) {
return kendo.template(options.itemTemplate)(item);
}
if (item.url) {
return kendo.template(LINK_TEMPLATE)(item);
} else {
return kendo.template(ITEM_TEMPLATE)(item);
}
},
_initPopup: function() {
var that = this, options = that.options, direction = options.direction || "down";
that._popup = new ui.Popup(that.element, extend({}, options.popup, {
anchor: that.mainButton,
isRtl: that._isRtl,
toggleTarget: options.toggleTarget,
copyAnchorStyles: false,
animation: options.animation,
open: that._popupOpenHandler.bind(that),
close: that._popupCloseHandler.bind(that),
activate: that._popupExpandHandler.bind(that)
}, DIRECTIONS[direction]));
},
_popupOpenHandler: function(ev) {
var that = this;
var isDefaultPrevented = that.trigger(OPEN);
if (isDefaultPrevented) {
ev.preventDefault();
return;
}
that.list.find(DOT + cssClasses.menuItem).attr(TABINDEX, 0);
},
_popupCloseHandler: function(ev) {
var that = this, isDefaultPrevented = that.trigger(CLOSE);
if (isDefaultPrevented) {
ev.preventDefault();
}
that.list.find(DOT + cssClasses.menuItem).attr(TABINDEX, -1);
},
_popupExpandHandler: function() {
var that = this;
that.list.find(":kendoFocusable").first().trigger(FOCUS);
},
adjustPopupWidth: function(width) {
var that = this;
that.element.css({ "min-width": width });
},
_attachEvents: function() {
var that = this;
that.list.on(CLICK + NS, DOT + cssClasses.menuItem, that._click.bind(that)).on(KEYDOWN + NS, DOT + cssClasses.menuItem, that.listItemKeydown.bind(that));
that.mainButton.on(KEYDOWN + NS, that._keydown.bind(that));
},
_keydown: function(ev) {
var that = this;
if ($(ev.target).is(DOT + DISABLEDSTATE) || $(ev.target).parents(DOT + DISABLEDSTATE).length) {
return;
}
if (ev.altKey && ev.keyCode === keys.DOWN) {
that.open();
ev.preventDefault();
return;
}
},
listItemKeydown: function(ev) {
var that = this, li = $(ev.target);
ev.preventDefault();
if (ev.keyCode === keys.ESC || ev.keyCode === keys.TAB || ev.altKey && ev.keyCode === keys.UP) {
that.close();
that.mainButton.trigger(FOCUS);
} else if (ev.keyCode === keys.DOWN) {
findFocusableSibling(li, NEXT).trigger(FOCUS);
} else if (ev.keyCode === keys.UP) {
findFocusableSibling(li, PREV).trigger(FOCUS);
} else if (!li.is(DOT + DISABLEDSTATE) && (ev.keyCode === keys.SPACEBAR || ev.keyCode === keys.ENTER)) {
li.trigger(CLICK);
} else if (ev.keyCode === keys.HOME) {
that.list.find(":kendoFocusable").filter(DOT + cssClasses.menuItem).first().trigger(FOCUS);
} else if (ev.keyCode === keys.END) {
that.list.find(":kendoFocusable").filter(DOT + cssClasses.menuItem).last().trigger(FOCUS);
}
},
_click: function(ev) {
var that = this, target = $(ev.target).closest(DOT + cssClasses.menuItem), id = target.attr(ID);
if (that._clickHandlers[id]) {
that._clickHandlers[id](ev);
}
that.trigger(MENU_CLICK, {
id,
target,
type: "menu-click",
originalEvent: ev
});
},
toggle: function() {
this._popup.toggle();
},
enable: function(enable, items) {
var that = this;
if (!items || !items.length) {
items = that.items();
} else {
items = that.list.find(items);
}
items.toggleClass(DISABLEDSTATE, !enable);
if (enable) {
items.removeAttr(ARIA_DISABLED);
} else {
items.attr(ARIA_DISABLED, !enable);
}
},
_hide: function(hidden, items) {
var that = this;
if (!items || !items.length) {
items = that.items();
} else {
items = that.list.find(items);
}
items.toggleClass(HIDDEN, hidden);
},
hide: function(items) {
this._hide(true, items);
},
show: function(items) {
this._hide(false, items);
},
open: function() {
if (this.items().length === 0) {
return;
}
var visibleItems = this.items().filter(`:not(.${HIDDEN})`);
if (visibleItems.length === 0) {
return;
}
this._popup.open();
},
close: function() {
this._popup.close();
},
items: function() {
return this.list.children(DOT + cssClasses.menuItem);
},
destroyPopup: function() {
var that = this;
if (that._popup) {
that._popup.destroy();
that._popup = null;
that.list.off(NS);
that.list.remove();
that.list = null;
}
},
destroy: function() {
var that = this;
delete that._clickHandlers;
that.destroyPopup();
that.mainButton.off(NS);
Widget.fn.destroy.call(that);
}
});
kendo.cssProperties.registerPrefix("ButtonMenu", "k-menu-group-");
ui.plugin(ButtonMenu);
})(window.kendo.jQuery);
var kendo_button_menu_default = kendo;
//#endregion
Object.defineProperty(exports, '__meta__', {
enumerable: true,
get: function () {
return __meta__;
}
});
Object.defineProperty(exports, 'kendo_button_menu_default', {
enumerable: true,
get: function () {
return kendo_button_menu_default;
}
});