devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
178 lines (173 loc) • 6.72 kB
JavaScript
/**
* DevExtreme (cjs/ui/toolbar/ui.toolbar.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/
*/
"use strict";
exports.default = void 0;
var _component_registrator = _interopRequireDefault(require("../../core/component_registrator"));
var _extend = require("../../core/utils/extend");
var _uiToolbar = _interopRequireDefault(require("./ui.toolbar.base"));
var _uiToolbar2 = require("./ui.toolbar.utils");
var _toolbar = require("./strategy/toolbar.multiline");
var _toolbar2 = require("./strategy/toolbar.singleline");
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass)
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
o.__proto__ = p;
return o
};
return _setPrototypeOf(o, p)
}
const TOOLBAR_MULTILINE_CLASS = "dx-toolbar-multiline";
const TOOLBAR_AUTO_HIDE_TEXT_CLASS = "dx-toolbar-text-auto-hide";
let Toolbar = function(_ToolbarBase) {
_inheritsLoose(Toolbar, _ToolbarBase);
function Toolbar() {
return _ToolbarBase.apply(this, arguments) || this
}
var _proto = Toolbar.prototype;
_proto._getDefaultOptions = function() {
return (0, _extend.extend)(_ToolbarBase.prototype._getDefaultOptions.call(this), {
menuItemTemplate: "menuItem",
menuContainer: void 0,
overflowMenuVisible: false,
multiline: false
})
};
_proto._isMultiline = function() {
return this.option("multiline")
};
_proto._dimensionChanged = function(dimension) {
if ("height" === dimension) {
return
}
_ToolbarBase.prototype._dimensionChanged.call(this);
this._layoutStrategy._dimensionChanged()
};
_proto._initMarkup = function() {
_ToolbarBase.prototype._initMarkup.call(this);
this._updateFocusableItemsTabIndex();
this._layoutStrategy._initMarkup()
};
_proto._renderToolbar = function() {
_ToolbarBase.prototype._renderToolbar.call(this);
this._renderLayoutStrategy()
};
_proto._itemContainer = function() {
if (this._isMultiline()) {
return this._$toolbarItemsContainer
}
return _ToolbarBase.prototype._itemContainer.call(this)
};
_proto._renderLayoutStrategy = function() {
this.$element().toggleClass("dx-toolbar-multiline", this._isMultiline());
this._layoutStrategy = this._isMultiline() ? new _toolbar.MultiLineStrategy(this) : new _toolbar2.SingleLineStrategy(this)
};
_proto._renderSections = function() {
if (this._isMultiline()) {
return
}
return _ToolbarBase.prototype._renderSections.call(this)
};
_proto._postProcessRenderItems = function() {
this._layoutStrategy._hideOverflowItems();
this._layoutStrategy._updateMenuVisibility();
_ToolbarBase.prototype._postProcessRenderItems.call(this);
this._layoutStrategy._renderMenuItems()
};
_proto._renderItem = function(index, item, itemContainer, $after) {
const itemElement = _ToolbarBase.prototype._renderItem.call(this, index, item, itemContainer, $after);
this._layoutStrategy._renderItem(item, itemElement);
const {
widget: widget,
showText: showText
} = item;
if ("dxButton" === widget && "inMenu" === showText) {
itemElement.toggleClass("dx-toolbar-text-auto-hide")
}
return itemElement
};
_proto._getItemsWidth = function() {
return this._layoutStrategy._getItemsWidth()
};
_proto._getMenuItems = function() {
return this._layoutStrategy._getMenuItems()
};
_proto._getToolbarItems = function() {
return this._layoutStrategy._getToolbarItems()
};
_proto._arrangeItems = function() {
if (this.$element().is(":hidden")) {
return
}
const elementWidth = this._layoutStrategy._arrangeItems();
if (!this._isMultiline()) {
_ToolbarBase.prototype._arrangeItems.call(this, elementWidth)
}
};
_proto._itemOptionChanged = function(item, property, value) {
if (!this._isMenuItem(item)) {
_ToolbarBase.prototype._itemOptionChanged.call(this, item, property, value)
}
this._layoutStrategy._itemOptionChanged(item, property, value);
if ("disabled" === property || "options.disabled" === property) {
(0, _uiToolbar2.toggleItemFocusableElementTabIndex)(this, item)
}
if ("location" === property) {
this.repaint()
}
};
_proto._updateFocusableItemsTabIndex = function() {
this._getToolbarItems().forEach(item => (0, _uiToolbar2.toggleItemFocusableElementTabIndex)(this, item))
};
_proto._isMenuItem = function(itemData) {
return "menu" === itemData.location || "always" === itemData.locateInMenu
};
_proto._isToolbarItem = function(itemData) {
return void 0 === itemData.location || "never" === itemData.locateInMenu
};
_proto._optionChanged = function(_ref) {
let {
name: name,
value: value
} = _ref;
this._layoutStrategy._optionChanged(name, value);
switch (name) {
case "menuContainer":
case "menuItemTemplate":
case "overflowMenuVisible":
break;
case "multiline":
this._invalidate();
break;
case "disabled":
_ToolbarBase.prototype._optionChanged.apply(this, arguments);
this._updateFocusableItemsTabIndex();
break;
default:
_ToolbarBase.prototype._optionChanged.apply(this, arguments)
}
};
_proto.updateDimensions = function() {
this._dimensionChanged()
};
return Toolbar
}(_uiToolbar.default);
(0, _component_registrator.default)("dxToolbar", Toolbar);
var _default = Toolbar;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;