devextreme/esm/ui/toolbar/strategy/toolbar.singleline.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/ui/toolbar/strategy/toolbar.singleline.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 {
    getWidth
} from "../../../core/utils/size";
import $ from "../../../core/renderer";
import {
    each
} from "../../../core/utils/iterator";
import {
    grep,
    deferRender
} from "../../../core/utils/common";
import {
    extend
} from "../../../core/utils/extend";
import DropDownMenu from "../internal/ui.toolbar.menu";
import {
    compileGetter
} from "../../../core/utils/data";
var INVISIBLE_STATE_CLASS = "dx-state-invisible";
var TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS = "dx-toolbar-menu-container";
var TOOLBAR_BUTTON_CLASS = "dx-toolbar-button";
var TOOLBAR_AUTO_HIDE_ITEM_CLASS = "dx-toolbar-item-auto-hide";
var TOOLBAR_HIDDEN_ITEM = "dx-toolbar-item-invisible";
export class SingleLineStrategy {
    constructor(toolbar) {
        this._toolbar = toolbar
    }
    _initMarkup() {
        deferRender(() => {
            this._renderOverflowMenu();
            this._renderMenuItems()
        })
    }
    _renderOverflowMenu() {
        if (!this._hasVisibleMenuItems()) {
            return
        }
        this._renderMenuButtonContainer();
        var $menu = $("<div>").appendTo(this._overflowMenuContainer());
        var itemClickAction = this._toolbar._createActionByOption("onItemClick");
        var menuItemTemplate = this._toolbar._getTemplateByOption("menuItemTemplate");
        this._menu = this._toolbar._createComponent($menu, DropDownMenu, {
            disabled: this._toolbar.option("disabled"),
            itemTemplate: () => menuItemTemplate,
            onItemClick: e => {
                itemClickAction(e)
            },
            container: this._toolbar.option("menuContainer"),
            onOptionChanged: _ref => {
                var {
                    name: name,
                    value: value
                } = _ref;
                if ("opened" === name) {
                    this._toolbar.option("overflowMenuVisible", value)
                }
                if ("items" === name) {
                    this._updateMenuVisibility(value)
                }
            }
        })
    }
    renderMenuItems() {
        if (!this._menu) {
            this._renderOverflowMenu()
        }
        this._menu && this._menu.option("items", this._getMenuItems());
        if (this._menu && !this._menu.option("items").length) {
            this._menu.option("opened", false)
        }
    }
    _renderMenuButtonContainer() {
        this._$overflowMenuContainer = $("<div>").appendTo(this._toolbar._$afterSection).addClass(TOOLBAR_BUTTON_CLASS).addClass(TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS)
    }
    _overflowMenuContainer() {
        return this._$overflowMenuContainer
    }
    _updateMenuVisibility(menuItems) {
        var items = null !== menuItems && void 0 !== menuItems ? menuItems : this._getMenuItems();
        var isMenuVisible = items.length && this._hasVisibleMenuItems(items);
        this._toggleMenuVisibility(isMenuVisible)
    }
    _toggleMenuVisibility(value) {
        if (!this._overflowMenuContainer()) {
            return
        }
        this._overflowMenuContainer().toggleClass(INVISIBLE_STATE_CLASS, !value)
    }
    _renderMenuItems() {
        deferRender(() => {
            this.renderMenuItems()
        })
    }
    _dimensionChanged() {
        this.renderMenuItems()
    }
    _getToolbarItems() {
        var _this$_toolbar$option;
        return grep(null !== (_this$_toolbar$option = this._toolbar.option("items")) && void 0 !== _this$_toolbar$option ? _this$_toolbar$option : [], item => !this._toolbar._isMenuItem(item))
    }
    _getHiddenItems() {
        return this._toolbar._itemContainer().children(".".concat(TOOLBAR_AUTO_HIDE_ITEM_CLASS, ".").concat(TOOLBAR_HIDDEN_ITEM)).not(".".concat(INVISIBLE_STATE_CLASS))
    }
    _getMenuItems() {
        var _this$_toolbar$option2, _this$_restoreItems;
        var menuItems = grep(null !== (_this$_toolbar$option2 = this._toolbar.option("items")) && void 0 !== _this$_toolbar$option2 ? _this$_toolbar$option2 : [], item => this._toolbar._isMenuItem(item));
        var $hiddenItems = this._getHiddenItems();
        this._restoreItems = null !== (_this$_restoreItems = this._restoreItems) && void 0 !== _this$_restoreItems ? _this$_restoreItems : [];
        var overflowItems = [].slice.call($hiddenItems).map(hiddenItem => {
            var itemData = this._toolbar._getItemData(hiddenItem);
            var $itemContainer = $(hiddenItem);
            var $itemMarkup = $itemContainer.children();
            return extend({
                menuItemTemplate: () => {
                    this._restoreItems.push({
                        container: $itemContainer,
                        item: $itemMarkup
                    });
                    var $container = $("<div>").addClass(TOOLBAR_AUTO_HIDE_ITEM_CLASS);
                    return $container.append($itemMarkup)
                }
            }, itemData)
        });
        return [...overflowItems, ...menuItems]
    }
    _hasVisibleMenuItems(items) {
        var menuItems = null !== items && void 0 !== items ? 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
    }
    _arrangeItems() {
        var _this$_restoreItems2;
        this._toolbar._$centerSection.css({
            margin: "0 auto",
            float: "none"
        });
        each(null !== (_this$_restoreItems2 = this._restoreItems) && void 0 !== _this$_restoreItems2 ? _this$_restoreItems2 : [], (function(_, obj) {
            $(obj.container).append(obj.item)
        }));
        this._restoreItems = [];
        var elementWidth = getWidth(this._toolbar.$element());
        this._hideOverflowItems(elementWidth);
        return elementWidth
    }
    _hideOverflowItems(elementWidth) {
        var _elementWidth;
        var overflowItems = this._toolbar.$element().find(".".concat(TOOLBAR_AUTO_HIDE_ITEM_CLASS));
        if (!overflowItems.length) {
            return
        }
        elementWidth = null !== (_elementWidth = elementWidth) && void 0 !== _elementWidth ? _elementWidth : getWidth(this._toolbar.$element());
        $(overflowItems).removeClass(TOOLBAR_HIDDEN_ITEM);
        var itemsWidth = this._getItemsWidth();
        while (overflowItems.length && elementWidth < itemsWidth) {
            var $item = overflowItems.eq(-1);
            $item.addClass(TOOLBAR_HIDDEN_ITEM);
            itemsWidth = this._getItemsWidth();
            overflowItems.splice(-1, 1)
        }
    }
    _getItemsWidth() {
        return this._toolbar._getSummaryItemsSize("width", [this._toolbar._$beforeSection, this._toolbar._$centerSection, this._toolbar._$afterSection])
    }
    _itemOptionChanged(item, property, value) {
        if ("disabled" === property || "options.disabled" === property) {
            if (this._toolbar._isMenuItem(item)) {
                var _this$_menu;
                null === (_this$_menu = this._menu) || void 0 === _this$_menu ? void 0 : _this$_menu._itemOptionChanged(item, property, value);
                return
            }
        }
        this.renderMenuItems()
    }
    _renderItem(item, itemElement) {
        if ("auto" === item.locateInMenu) {
            itemElement.addClass(TOOLBAR_AUTO_HIDE_ITEM_CLASS)
        }
    }
    _optionChanged(name, value) {
        var _this$_menu2, _this$_menu3, _this$_menu4, _this$_menu5, _this$_menu6;
        switch (name) {
            case "disabled":
                null === (_this$_menu2 = this._menu) || void 0 === _this$_menu2 ? void 0 : _this$_menu2.option(name, value);
                break;
            case "overflowMenuVisible":
                null === (_this$_menu3 = this._menu) || void 0 === _this$_menu3 ? void 0 : _this$_menu3.option("opened", value);
                break;
            case "onItemClick":
                null === (_this$_menu4 = this._menu) || void 0 === _this$_menu4 ? void 0 : _this$_menu4.option(name, value);
                break;
            case "menuContainer":
                null === (_this$_menu5 = this._menu) || void 0 === _this$_menu5 ? void 0 : _this$_menu5.option("container", value);
                break;
            case "menuItemTemplate":
                null === (_this$_menu6 = this._menu) || void 0 === _this$_menu6 ? void 0 : _this$_menu6.option("itemTemplate", value)
        }
    }
}