devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
131 lines (130 loc) • 5.06 kB
JavaScript
/**
* DevExtreme (esm/ui/toolbar/ui.toolbar.drop_down_menu.js)
* Version: 22.1.9
* Build date: Tue Apr 18 2023
*
* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import $ from "../../core/renderer";
import domAdapter from "../../core/dom_adapter";
import ToolbarMenu from "./ui.toolbar.menu";
import DropDownMenu from "../drop_down_menu";
import devices from "../../core/devices";
import {
each
} from "../../core/utils/iterator";
import {
compileGetter
} from "../../core/utils/data";
var MENU_INVISIBLE_CLASS = "dx-state-invisible";
var TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS = "dx-toolbar-menu-container";
var POPOVER_BOUNDARY_OFFSET = 10;
class ToolbarDropDownMenu {
constructor(toolbar) {
this._toolbar = toolbar
}
render() {
if (!this._hasVisibleMenuItems()) {
return
}
this._renderMenuButtonContainer();
var $menu = $("<div>").appendTo(this._dropDownMenuContainer());
this._dropDownMenu = this._toolbar._createComponent($menu, DropDownMenu, this._dropDownMenuOptions());
this.renderMenuItems()
}
renderMenuItems() {
if (!this._dropDownMenu) {
this.render()
}
this._dropDownMenu && this._dropDownMenu.option("items", this._getMenuItems());
if (this._dropDownMenu && !this._dropDownMenu.option("items").length) {
this._dropDownMenu.close()
}
}
_renderMenuButtonContainer() {
var $afterSection = this._toolbar._$afterSection;
this._$menuButtonContainer = $("<div>").appendTo($afterSection).addClass(this._toolbar._buttonClass()).addClass(TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS)
}
_getMenuItemTemplate() {
return this._toolbar._getTemplateByOption("menuItemTemplate")
}
_dropDownMenuOptions() {
var itemClickAction = this._toolbar._createActionByOption("onItemClick");
var topAndBottomOffset = 2 * POPOVER_BOUNDARY_OFFSET;
return {
disabled: this._toolbar.option("disabled"),
itemTemplate: this._getMenuItemTemplate.bind(this),
onItemClick: function(e) {
itemClickAction(e)
}.bind(this),
deferRendering: true,
container: this._toolbar.option("menuContainer"),
popupMaxHeight: "android" === devices.current().platform ? domAdapter.getDocumentElement().clientHeight - topAndBottomOffset : void 0,
menuWidget: ToolbarMenu,
onOptionChanged: _ref => {
var {
name: name,
value: value
} = _ref;
if ("opened" === name) {
this._toolbar.option("overflowMenuVisible", value)
}
if ("items" === name) {
this._updateMenuVisibility(value)
}
},
popupPosition: {
at: "bottom right",
my: "top right"
}
}
}
_updateMenuVisibility(menuItems) {
var items = menuItems || this._getMenuItems();
var isMenuVisible = items.length && this._hasVisibleMenuItems(items);
this._toggleMenuVisibility(isMenuVisible)
}
_getMenuItems() {
return this._toolbar._getMenuItems()
}
_hasVisibleMenuItems(items) {
var menuItems = items || this._toolbar.option("items");
var result = false;
var optionGetter = compileGetter("visible");
var overflowGetter = compileGetter("locateInMenu");
each(menuItems, (function(index, item) {
var itemVisible = optionGetter(item, {
functionsAsIs: true
});
var itemOverflow = overflowGetter(item, {
functionsAsIs: true
});
if (false !== itemVisible && ("auto" === itemOverflow || "always" === itemOverflow) || "menu" === item.location) {
result = true
}
}));
return result
}
_toggleMenuVisibility(value) {
if (!this._dropDownMenuContainer()) {
return
}
this._dropDownMenuContainer().toggleClass(MENU_INVISIBLE_CLASS, !value)
}
_dropDownMenuContainer() {
return this._$menuButtonContainer
}
widgetOption(name, value) {
this._dropDownMenu && this._dropDownMenu.option(name, value)
}
itemOption(item, property, value) {
if ("disabled" === property || "options.disabled" === property) {
var _this$_dropDownMenu;
null === (_this$_dropDownMenu = this._dropDownMenu) || void 0 === _this$_dropDownMenu ? void 0 : _this$_dropDownMenu._itemOptionChanged(item, property, value)
} else {
this.renderMenuItems()
}
}
}
export default ToolbarDropDownMenu;