devextreme/esm/ui/toolbar/internal/ui.toolbar.menu.list.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/ui/toolbar/internal/ui.toolbar.menu.list.js)
 * Version: 23.2.6
 * Build date: Wed May 01 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import $ from "../../../core/renderer";
import {
    each
} from "../../../core/utils/iterator";
import {
    ListBase
} from "../../list/ui.list.base";
var TOOLBAR_MENU_ACTION_CLASS = "dx-toolbar-menu-action";
var TOOLBAR_HIDDEN_BUTTON_CLASS = "dx-toolbar-hidden-button";
var TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS = "dx-toolbar-hidden-button-group";
var TOOLBAR_MENU_SECTION_CLASS = "dx-toolbar-menu-section";
var TOOLBAR_MENU_CUSTOM_CLASS = "dx-toolbar-menu-custom";
var TOOLBAR_MENU_LAST_SECTION_CLASS = "dx-toolbar-menu-last-section";
var SCROLLVIEW_CONTENT_CLASS = "dx-scrollview-content";
export default class ToolbarMenuList extends ListBase {
    _init() {
        super._init();
        this._activeStateUnit = ".".concat(TOOLBAR_MENU_ACTION_CLASS, ":not(.").concat(TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS, ")")
    }
    _initMarkup() {
        this._renderSections();
        super._initMarkup();
        this._setMenuRole()
    }
    _getSections() {
        return this._itemContainer().children()
    }
    _itemElements() {
        return this._getSections().children(this._itemSelector())
    }
    _renderSections() {
        var $container = this._itemContainer();
        each(["before", "center", "after", "menu"], (_, section) => {
            var sectionName = "_$".concat(section, "Section");
            if (!this[sectionName]) {
                this[sectionName] = $("<div>").addClass(TOOLBAR_MENU_SECTION_CLASS)
            }
            this[sectionName].appendTo($container)
        })
    }
    _renderItems() {
        super._renderItems.apply(this, arguments);
        this._updateSections()
    }
    _setMenuRole() {
        var $menuContainer = this.$element().find(".".concat(SCROLLVIEW_CONTENT_CLASS));
        $menuContainer.attr("role", "menu")
    }
    _updateSections() {
        var $sections = this.$element().find(".".concat(TOOLBAR_MENU_SECTION_CLASS));
        $sections.removeClass(TOOLBAR_MENU_LAST_SECTION_CLASS);
        $sections.not(":empty").eq(-1).addClass(TOOLBAR_MENU_LAST_SECTION_CLASS)
    }
    _renderItem(index, item, itemContainer, $after) {
        var _item$location;
        var location = null !== (_item$location = item.location) && void 0 !== _item$location ? _item$location : "menu";
        var $container = this["_$".concat(location, "Section")];
        var itemElement = super._renderItem(index, item, $container, $after);
        if (this._getItemTemplateName({
                itemData: item
            })) {
            itemElement.addClass(TOOLBAR_MENU_CUSTOM_CLASS)
        }
        if ("menu" === location || "dxButton" === item.widget || "dxButtonGroup" === item.widget || item.isAction) {
            itemElement.addClass(TOOLBAR_MENU_ACTION_CLASS)
        }
        if ("dxButton" === item.widget) {
            itemElement.addClass(TOOLBAR_HIDDEN_BUTTON_CLASS)
        }
        if ("dxButtonGroup" === item.widget) {
            itemElement.addClass(TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS)
        }
        itemElement.addClass(item.cssClass);
        return itemElement
    }
    _getItemTemplateName(args) {
        var template = super._getItemTemplateName(args);
        var data = args.itemData;
        var menuTemplate = data && data.menuItemTemplate;
        return menuTemplate || template
    }
    _dataSourceOptions() {
        return {
            paginate: false
        }
    }
    _itemClickHandler(e, args, config) {
        if ($(e.target).closest(".".concat(TOOLBAR_MENU_ACTION_CLASS)).length) {
            super._itemClickHandler(e, args, config)
        }
    }
    _clean() {
        this._getSections().empty();
        super._clean()
    }
}