diff options
Diffstat (limited to 'vendor/twbs/bootstrap/js/src/dropdown.js')
| -rw-r--r-- | vendor/twbs/bootstrap/js/src/dropdown.js | 222 |
1 files changed, 84 insertions, 138 deletions
diff --git a/vendor/twbs/bootstrap/js/src/dropdown.js b/vendor/twbs/bootstrap/js/src/dropdown.js index 6fafdb116..601792953 100644 --- a/vendor/twbs/bootstrap/js/src/dropdown.js +++ b/vendor/twbs/bootstrap/js/src/dropdown.js @@ -1,23 +1,20 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): dropdown.js + * Bootstrap (v5.2.0): dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ import * as Popper from '@popperjs/core' - import { defineJQueryPlugin, getElement, - getElementFromSelector, getNextActiveElement, isDisabled, isElement, isRTL, isVisible, - noop, - typeCheckConfig + noop } from './util/index' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' @@ -25,9 +22,7 @@ import SelectorEngine from './dom/selector-engine' import BaseComponent from './base-component' /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ const NAME = 'dropdown' @@ -36,14 +31,11 @@ const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' const ESCAPE_KEY = 'Escape' -const SPACE_KEY = 'Space' const TAB_KEY = 'Tab' const ARROW_UP_KEY = 'ArrowUp' const ARROW_DOWN_KEY = 'ArrowDown' const RIGHT_MOUSE_BUTTON = 2 // MouseEvent.button value for the secondary button, usually the right button -const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEY}|${ARROW_DOWN_KEY}|${ESCAPE_KEY}`) - const EVENT_HIDE = `hide${EVENT_KEY}` const EVENT_HIDDEN = `hidden${EVENT_KEY}` const EVENT_SHOW = `show${EVENT_KEY}` @@ -56,10 +48,13 @@ const CLASS_NAME_SHOW = 'show' const CLASS_NAME_DROPUP = 'dropup' const CLASS_NAME_DROPEND = 'dropend' const CLASS_NAME_DROPSTART = 'dropstart' -const CLASS_NAME_NAVBAR = 'navbar' +const CLASS_NAME_DROPUP_CENTER = 'dropup-center' +const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center' -const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)' +const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}` const SELECTOR_MENU = '.dropdown-menu' +const SELECTOR_NAVBAR = '.navbar' const SELECTOR_NAVBAR_NAV = '.navbar-nav' const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)' @@ -69,43 +64,42 @@ const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start' const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end' const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start' const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start' +const PLACEMENT_TOPCENTER = 'top' +const PLACEMENT_BOTTOMCENTER = 'bottom' const Default = { - offset: [0, 2], + autoClose: true, boundary: 'clippingParents', - reference: 'toggle', display: 'dynamic', + offset: [0, 2], popperConfig: null, - autoClose: true + reference: 'toggle' } const DefaultType = { - offset: '(array|string|function)', + autoClose: '(boolean|string)', boundary: '(string|element)', - reference: '(string|element|object)', display: 'string', + offset: '(array|string|function)', popperConfig: '(null|object|function)', - autoClose: '(boolean|string)' + reference: '(string|element|object)' } /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Dropdown extends BaseComponent { constructor(element, config) { - super(element) + super(element, config) this._popper = null - this._config = this._getConfig(config) - this._menu = this._getMenuElement() + this._parent = this._element.parentNode // dropdown wrapper + this._menu = SelectorEngine.findOne(SELECTOR_MENU, this._parent) this._inNavbar = this._detectNavbar() } // Getters - static get Default() { return Default } @@ -119,13 +113,12 @@ class Dropdown extends BaseComponent { } // Public - toggle() { return this._isShown() ? this.hide() : this.show() } show() { - if (isDisabled(this._element) || this._isShown(this._menu)) { + if (isDisabled(this._element) || this._isShown()) { return } @@ -139,22 +132,16 @@ class Dropdown extends BaseComponent { return } - const parent = Dropdown.getParentFromElement(this._element) - // Totally disable Popper for Dropdowns in Navbar - if (this._inNavbar) { - Manipulator.setDataAttribute(this._menu, 'popper', 'none') - } else { - this._createPopper(parent) - } + this._createPopper() // If this is a touch-enabled device we add extra // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - if ('ontouchstart' in document.documentElement && - !parent.closest(SELECTOR_NAVBAR_NAV)) { - [].concat(...document.body.children) - .forEach(elem => EventHandler.on(elem, 'mouseover', noop)) + if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) { + for (const element of [].concat(...document.body.children)) { + EventHandler.on(element, 'mouseover', noop) + } } this._element.focus() @@ -166,7 +153,7 @@ class Dropdown extends BaseComponent { } hide() { - if (isDisabled(this._element) || !this._isShown(this._menu)) { + if (isDisabled(this._element) || !this._isShown()) { return } @@ -193,7 +180,6 @@ class Dropdown extends BaseComponent { } // Private - _completeHide(relatedTarget) { const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget) if (hideEvent.defaultPrevented) { @@ -203,8 +189,9 @@ class Dropdown extends BaseComponent { // If this is a touch-enabled device we remove the extra // empty mouseover listeners we added for iOS support if ('ontouchstart' in document.documentElement) { - [].concat(...document.body.children) - .forEach(elem => EventHandler.off(elem, 'mouseover', noop)) + for (const element of [].concat(...document.body.children)) { + EventHandler.off(element, 'mouseover', noop) + } } if (this._popper) { @@ -219,13 +206,7 @@ class Dropdown extends BaseComponent { } _getConfig(config) { - config = { - ...this.constructor.Default, - ...Manipulator.getDataAttributes(this._element), - ...config - } - - typeCheckConfig(NAME, config, this.constructor.DefaultType) + config = super._getConfig(config) if (typeof config.reference === 'object' && !isElement(config.reference) && typeof config.reference.getBoundingClientRect !== 'function' @@ -237,7 +218,7 @@ class Dropdown extends BaseComponent { return config } - _createPopper(parent) { + _createPopper() { if (typeof Popper === 'undefined') { throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)') } @@ -245,7 +226,7 @@ class Dropdown extends BaseComponent { let referenceElement = this._element if (this._config.reference === 'parent') { - referenceElement = parent + referenceElement = this._parent } else if (isElement(this._config.reference)) { referenceElement = getElement(this._config.reference) } else if (typeof this._config.reference === 'object') { @@ -253,25 +234,15 @@ class Dropdown extends BaseComponent { } const popperConfig = this._getPopperConfig() - const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false) - this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig) - - if (isDisplayStatic) { - Manipulator.setDataAttribute(this._menu, 'popper', 'static') - } } - _isShown(element = this._element) { - return element.classList.contains(CLASS_NAME_SHOW) - } - - _getMenuElement() { - return SelectorEngine.next(this._element, SELECTOR_MENU)[0] + _isShown() { + return this._menu.classList.contains(CLASS_NAME_SHOW) } _getPlacement() { - const parentDropdown = this._element.parentNode + const parentDropdown = this._parent if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) { return PLACEMENT_RIGHT @@ -281,6 +252,14 @@ class Dropdown extends BaseComponent { return PLACEMENT_LEFT } + if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) { + return PLACEMENT_TOPCENTER + } + + if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) { + return PLACEMENT_BOTTOMCENTER + } + // We need to trim the value because custom properties can also include spaces const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end' @@ -292,14 +271,14 @@ class Dropdown extends BaseComponent { } _detectNavbar() { - return this._element.closest(`.${CLASS_NAME_NAVBAR}`) !== null + return this._element.closest(SELECTOR_NAVBAR) !== null } _getOffset() { const { offset } = this._config if (typeof offset === 'string') { - return offset.split(',').map(val => Number.parseInt(val, 10)) + return offset.split(',').map(value => Number.parseInt(value, 10)) } if (typeof offset === 'function') { @@ -326,8 +305,9 @@ class Dropdown extends BaseComponent { }] } - // Disable Popper if we have a static display - if (this._config.display === 'static') { + // Disable Popper if we have a static display or Dropdown is in Navbar + if (this._inNavbar || this._config.display === 'static') { + Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove defaultBsPopperConfig.modifiers = [{ name: 'applyStyles', enabled: false @@ -341,7 +321,7 @@ class Dropdown extends BaseComponent { } _selectMenuItem({ key, target }) { - const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(isVisible) + const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(element => isVisible(element)) if (!items.length) { return @@ -353,7 +333,6 @@ class Dropdown extends BaseComponent { } // Static - static jQueryInterface(config) { return this.each(function () { const data = Dropdown.getOrCreateInstance(this, config) @@ -371,111 +350,81 @@ class Dropdown extends BaseComponent { } static clearMenus(event) { - if (event && (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY))) { + if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) { return } - const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE) + const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN) - for (let i = 0, len = toggles.length; i < len; i++) { - const context = Dropdown.getInstance(toggles[i]) + for (const toggle of openToggles) { + const context = Dropdown.getInstance(toggle) if (!context || context._config.autoClose === false) { continue } - if (!context._isShown()) { + const composedPath = event.composedPath() + const isMenuTarget = composedPath.includes(context._menu) + if ( + composedPath.includes(context._element) || + (context._config.autoClose === 'inside' && !isMenuTarget) || + (context._config.autoClose === 'outside' && isMenuTarget) + ) { continue } - const relatedTarget = { - relatedTarget: context._element + // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu + if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) { + continue } - if (event) { - const composedPath = event.composedPath() - const isMenuTarget = composedPath.includes(context._menu) - if ( - composedPath.includes(context._element) || - (context._config.autoClose === 'inside' && !isMenuTarget) || - (context._config.autoClose === 'outside' && isMenuTarget) - ) { - continue - } - - // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu - if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) { - continue - } + const relatedTarget = { relatedTarget: context._element } - if (event.type === 'click') { - relatedTarget.clickEvent = event - } + if (event.type === 'click') { + relatedTarget.clickEvent = event } context._completeHide(relatedTarget) } } - static getParentFromElement(element) { - return getElementFromSelector(element) || element.parentNode - } - static dataApiKeydownHandler(event) { - // If not input/textarea: - // - And not a key in REGEXP_KEYDOWN => not a dropdown command - // If input/textarea: - // - If space key => not a dropdown command - // - If key is other than escape - // - If key is not up or down => not a dropdown command - // - If trigger inside the menu => not a dropdown command - if (/input|textarea/i.test(event.target.tagName) ? - event.key === SPACE_KEY || (event.key !== ESCAPE_KEY && - ((event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY) || - event.target.closest(SELECTOR_MENU))) : - !REGEXP_KEYDOWN.test(event.key)) { - return - } + // If not an UP | DOWN | ESCAPE key => not a dropdown command + // If input/textarea && if key is other than ESCAPE => not a dropdown command - const isActive = this.classList.contains(CLASS_NAME_SHOW) + const isInput = /input|textarea/i.test(event.target.tagName) + const isEscapeEvent = event.key === ESCAPE_KEY + const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key) - if (!isActive && event.key === ESCAPE_KEY) { + if (!isUpOrDownEvent && !isEscapeEvent) { return } - event.preventDefault() - event.stopPropagation() - - if (isDisabled(this)) { + if (isInput && !isEscapeEvent) { return } - const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] - const instance = Dropdown.getOrCreateInstance(getToggleButton) - - if (event.key === ESCAPE_KEY) { - instance.hide() - return - } + event.preventDefault() - if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) { - if (!isActive) { - instance.show() - } + const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode) + const instance = Dropdown.getOrCreateInstance(getToggleButton) + if (isUpOrDownEvent) { + event.stopPropagation() + instance.show() instance._selectMenuItem(event) return } - if (!isActive || event.key === SPACE_KEY) { - Dropdown.clearMenus() + if (instance._isShown()) { // else is escape and we check if it is shown + event.stopPropagation() + instance.hide() + getToggleButton.focus() } } } /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler) @@ -488,10 +437,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( }) /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Dropdown to jQuery only if jQuery is present */ defineJQueryPlugin(Dropdown) |