You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

303 lines
8.8 KiB

(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"Plugins": {
"HeaderMenu": HeaderMenu
}
}
});
/***
* A plugin to add drop-down menus to column headers.
*
* USAGE:
*
* Add the plugin .js & .css files and register it with the grid.
*
* To specify a menu in a column header, extend the column definition like so:
*
* var columns = [
* {
* id: 'myColumn',
* name: 'My column',
*
* // This is the relevant part
* header: {
* menu: {
* items: [
* {
* // menu item options
* },
* {
* // menu item options
* }
* ]
* }
* }
* }
* ];
*
*
* Available menu options:
* tooltip: Menu button tooltip.
*
*
* Available menu item options:
* title: Menu item text.
* divider: Whether the current item is a divider, not an actual command.
* disabled: Whether the item is disabled.
* tooltip: Item tooltip.
* command: A command identifier to be passed to the onCommand event handlers.
* iconCssClass: A CSS class to be added to the menu item icon.
* iconImage: A url to the icon image.
* minWidth: Minimum width that the drop menu will have
* autoAlign: Auto-align drop menu to the left when not enough viewport space to show on the right
* autoAlignOffset: When drop menu is aligned to the left, it might not be perfectly aligned with the header menu icon, if that is the case you can add an offset (positive/negative number to move right/left)
*
*
* The plugin exposes the following events:
* onBeforeMenuShow: Fired before the menu is shown. You can customize the menu or dismiss it by returning false.
* Event args:
* grid: Reference to the grid.
* column: Column definition.
* menu: Menu options. Note that you can change the menu items here.
*
* onCommand: Fired on menu item click for buttons with 'command' specified.
* Event args:
* grid: Reference to the grid.
* column: Column definition.
* command: Button command identified.
* button: Button options. Note that you can change the button options in your
* event handler, and the column header will be automatically updated to
* reflect them. This is useful if you want to implement something like a
* toggle button.
*
*
* @param options {Object} Options:
* buttonCssClass: an extra CSS class to add to the menu button
* buttonImage: a url to the menu button image (default '../images/down.gif')
* @class Slick.Plugins.HeaderButtons
* @constructor
*/
function HeaderMenu(options) {
var _grid;
var _self = this;
var _handler = new Slick.EventHandler();
var _defaults = {
buttonCssClass: null,
buttonImage: null,
minWidth: 100,
autoAlign: true,
autoAlignOffset: 0
};
var $menu;
var $activeHeaderColumn;
function init(grid) {
options = $.extend(true, {}, _defaults, options);
_grid = grid;
_handler
.subscribe(_grid.onHeaderCellRendered, handleHeaderCellRendered)
.subscribe(_grid.onBeforeHeaderCellDestroy, handleBeforeHeaderCellDestroy);
// Force the grid to re-render the header now that the events are hooked up.
_grid.setColumns(_grid.getColumns());
// Hide the menu on outside click.
$(document.body).on("mousedown", handleBodyMouseDown);
}
function setOptions(newOptions) {
options = $.extend(true, {}, options, newOptions);
}
function destroy() {
_handler.unsubscribeAll();
$(document.body).off("mousedown", handleBodyMouseDown);
}
function handleBodyMouseDown(e) {
if ($menu && $menu[0] != e.target && !$.contains($menu[0], e.target)) {
hideMenu();
}
}
function hideMenu() {
if ($menu) {
$menu.remove();
$menu = null;
$activeHeaderColumn
.removeClass("slick-header-column-active");
}
}
function handleHeaderCellRendered(e, args) {
var column = args.column;
var menu = column.header && column.header.menu;
if (menu) {
var $el = $("<div></div>")
.addClass("slick-header-menubutton")
.data("column", column)
.data("menu", menu);
if (options.buttonCssClass) {
$el.addClass(options.buttonCssClass);
}
if (options.buttonImage) {
$el.css("background-image", "url(" + options.buttonImage + ")");
}
if (menu.tooltip) {
$el.attr("title", menu.tooltip);
}
$el
.on("click", showMenu)
.appendTo(args.node);
}
}
function handleBeforeHeaderCellDestroy(e, args) {
var column = args.column;
if (column.header && column.header.menu) {
$(args.node).find(".slick-header-menubutton").remove();
}
}
function showMenu(e) {
var $menuButton = $(this);
var menu = $menuButton.data("menu");
var columnDef = $menuButton.data("column");
// Let the user modify the menu or cancel altogether,
// or provide alternative menu implementation.
if (_self.onBeforeMenuShow.notify({
"grid": _grid,
"column": columnDef,
"menu": menu
}, e, _self) == false) {
return;
}
if (!$menu) {
$menu = $("<div class='slick-header-menu' style='min-width: " + options.minWidth + "px'></div>")
.appendTo(_grid.getContainerNode());
}
$menu.empty();
// Construct the menu items.
for (var i = 0; i < menu.items.length; i++) {
var item = menu.items[i];
var $li = $("<div class='slick-header-menuitem'></div>")
.data("command", item.command || '')
.data("column", columnDef)
.data("item", item)
.on("click", handleMenuItemClick)
.appendTo($menu);
if (item.disabled) {
$li.addClass("slick-header-menuitem-disabled");
}
if (item.divider) {
$li.addClass("slick-header-menuitem-divider");
continue;
}
if (item.tooltip) {
$li.attr("title", item.tooltip);
}
var $icon = $("<div class='slick-header-menuicon'></div>")
.appendTo($li);
if (item.iconCssClass) {
$icon.addClass(item.iconCssClass);
}
if (item.iconImage) {
$icon.css("background-image", "url(" + item.iconImage + ")");
}
$("<span class='slick-header-menucontent'></span>")
.text(item.title)
.appendTo($li);
}
var leftPos = $(this).offset().left;
// when auto-align is set, it will calculate whether it has enough space in the viewport to show the drop menu on the right (default)
// if there isn't enough space on the right, it will automatically align the drop menu to the left
// to simulate an align left, we actually need to know the width of the drop menu
if (options.autoAlign) {
var gridPos = _grid.getGridPosition();
if ((leftPos + options.minWidth) >= gridPos.width) {
leftPos = leftPos - options.minWidth + options.autoAlignOffset;
}
}
$menu
.offset({ top: $(this).offset().top + $(this).height(), left: leftPos });
// Mark the header as active to keep the highlighting.
$activeHeaderColumn = $menuButton.closest(".slick-header-column");
$activeHeaderColumn
.addClass("slick-header-column-active");
// Stop propagation so that it doesn't register as a header click event.
e.preventDefault();
e.stopPropagation();
}
function handleMenuItemClick(e) {
var command = $(this).data("command");
var columnDef = $(this).data("column");
var item = $(this).data("item");
if (item.disabled || item.divider) {
return;
}
hideMenu();
if (command != null && command != '') {
_self.onCommand.notify({
"grid": _grid,
"column": columnDef,
"command": command,
"item": item
}, e, _self);
}
// Stop propagation so that it doesn't register as a header click event.
e.preventDefault();
e.stopPropagation();
}
$.extend(this, {
"init": init,
"destroy": destroy,
"setOptions": setOptions,
"onBeforeMenuShow": new Slick.Event(),
"onCommand": new Slick.Event()
});
}
})(jQuery);