devextreme/cjs/ui/toolbar/ui.toolbar.drop_down_menu.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/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/
 */
"use strict";
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _dom_adapter = _interopRequireDefault(require("../../core/dom_adapter"));
var _uiToolbar = _interopRequireDefault(require("./ui.toolbar.menu"));
var _drop_down_menu = _interopRequireDefault(require("../drop_down_menu"));
var _devices = _interopRequireDefault(require("../../core/devices"));
var _iterator = require("../../core/utils/iterator");
var _data = require("../../core/utils/data");

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    }
}
var MENU_INVISIBLE_CLASS = "dx-state-invisible";
var TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS = "dx-toolbar-menu-container";
var POPOVER_BOUNDARY_OFFSET = 10;
var ToolbarDropDownMenu = function() {
    function ToolbarDropDownMenu(toolbar) {
        this._toolbar = toolbar
    }
    var _proto = ToolbarDropDownMenu.prototype;
    _proto.render = function() {
        if (!this._hasVisibleMenuItems()) {
            return
        }
        this._renderMenuButtonContainer();
        var $menu = (0, _renderer.default)("<div>").appendTo(this._dropDownMenuContainer());
        this._dropDownMenu = this._toolbar._createComponent($menu, _drop_down_menu.default, this._dropDownMenuOptions());
        this.renderMenuItems()
    };
    _proto.renderMenuItems = function() {
        if (!this._dropDownMenu) {
            this.render()
        }
        this._dropDownMenu && this._dropDownMenu.option("items", this._getMenuItems());
        if (this._dropDownMenu && !this._dropDownMenu.option("items").length) {
            this._dropDownMenu.close()
        }
    };
    _proto._renderMenuButtonContainer = function() {
        var $afterSection = this._toolbar._$afterSection;
        this._$menuButtonContainer = (0, _renderer.default)("<div>").appendTo($afterSection).addClass(this._toolbar._buttonClass()).addClass(TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS)
    };
    _proto._getMenuItemTemplate = function() {
        return this._toolbar._getTemplateByOption("menuItemTemplate")
    };
    _proto._dropDownMenuOptions = function() {
        var _this = this;
        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.default.current().platform ? _dom_adapter.default.getDocumentElement().clientHeight - topAndBottomOffset : void 0,
            menuWidget: _uiToolbar.default,
            onOptionChanged: function(_ref) {
                var name = _ref.name,
                    value = _ref.value;
                if ("opened" === name) {
                    _this._toolbar.option("overflowMenuVisible", value)
                }
                if ("items" === name) {
                    _this._updateMenuVisibility(value)
                }
            },
            popupPosition: {
                at: "bottom right",
                my: "top right"
            }
        }
    };
    _proto._updateMenuVisibility = function(menuItems) {
        var items = menuItems || this._getMenuItems();
        var isMenuVisible = items.length && this._hasVisibleMenuItems(items);
        this._toggleMenuVisibility(isMenuVisible)
    };
    _proto._getMenuItems = function() {
        return this._toolbar._getMenuItems()
    };
    _proto._hasVisibleMenuItems = function(items) {
        var menuItems = items || this._toolbar.option("items");
        var result = false;
        var optionGetter = (0, _data.compileGetter)("visible");
        var overflowGetter = (0, _data.compileGetter)("locateInMenu");
        (0, _iterator.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
    };
    _proto._toggleMenuVisibility = function(value) {
        if (!this._dropDownMenuContainer()) {
            return
        }
        this._dropDownMenuContainer().toggleClass(MENU_INVISIBLE_CLASS, !value)
    };
    _proto._dropDownMenuContainer = function() {
        return this._$menuButtonContainer
    };
    _proto.widgetOption = function(name, value) {
        this._dropDownMenu && this._dropDownMenu.option(name, value)
    };
    _proto.itemOption = function(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()
        }
    };
    return ToolbarDropDownMenu
}();
var _default = ToolbarDropDownMenu;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;