@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
469 lines (349 loc) • 14 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1090);
/***/ }),
/***/ 3:
/***/ (function(module, exports) {
module.exports = function() { throw new Error("define cannot be used indirect"); };
/***/ }),
/***/ 1051:
/***/ (function(module, exports) {
module.exports = require("./kendo.core");
/***/ }),
/***/ 1052:
/***/ (function(module, exports) {
module.exports = require("./kendo.popup");
/***/ }),
/***/ 1090:
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function(f, define) {
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1051), __webpack_require__(1052)], __WEBPACK_AMD_DEFINE_FACTORY__ = (f), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
})(function() {
var __meta__ = { // jshint ignore:line
id: "button.menu",
name: "ButtonMenu",
category: "web",
description: "The popup Menu list part of the SplitButton and the DropDownButton",
depends: ["core", "popup"]
};
(function($, undefined) {
var kendo = window.kendo,
Widget = kendo.ui.Widget,
NS = ".kendoButtonMenu",
ui = kendo.ui,
keys = kendo.keys,
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";
var cssClasses = {
popup: "k-menu-popup",
list: "k-group k-menu-group k-reset",
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 = "#if(imageUrl){#<img alt=\"icon\" class=\"" + cssClasses.image + "\" src=\"#:imageUrl#\" />#}#";
var SPRITE_TEMPLATE = "#if(spriteCssClass){#<span class=\"" + cssClasses.sprite + " #:spriteCssClass#\"></span>#}#";
var ICON_TEMPLATE = "#if(icon){#<span class=\"" + cssClasses.icon + " k-i-#:icon#\"></span>#}#";
var TEXT_TEMPLATE = "#if(text){#<span class=\"" + cssClasses.itemText + "\">#:text#</span>#}#";
var ITEM_TEMPLATE = "<span class=\"" + cssClasses.item + "\">" + IMAGE_TEMPLATE + SPRITE_TEMPLATE + ICON_TEMPLATE + TEXT_TEMPLATE + "</span>";
var LINK_TEMPLATE = "<a href=\"#:url#\" class=\"" + cssClasses.item + "\">" + IMAGE_TEMPLATE + SPRITE_TEMPLATE + ICON_TEMPLATE + TEXT_TEMPLATE + "</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",
element: null,
items: [],
size: "medium",
},
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));
},
_renderListItem: function(item) {
var that = this,
id, menuItem;
item = extend({}, baseItem, item, {
enabled: item.enable && item.enabled // backward compatibility: support both enable and enabled options.
});
id = item.id || 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) {
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;
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)
}));
},
_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.addClass("k-split-wrapper");
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._popup.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._popup.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: id, target: 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);
},
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);
return window.kendo;
}, __webpack_require__(3));
/***/ })
/******/ });