1 | /**
|
---|
2 | * --------------------------------------------------------------------------
|
---|
3 | * Bootstrap (v5.1.3): dropdown.js
|
---|
4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
---|
5 | * --------------------------------------------------------------------------
|
---|
6 | */
|
---|
7 |
|
---|
8 | import * as Popper from '@popperjs/core'
|
---|
9 |
|
---|
10 | import {
|
---|
11 | defineJQueryPlugin,
|
---|
12 | getElement,
|
---|
13 | getElementFromSelector,
|
---|
14 | getNextActiveElement,
|
---|
15 | isDisabled,
|
---|
16 | isElement,
|
---|
17 | isRTL,
|
---|
18 | isVisible,
|
---|
19 | noop,
|
---|
20 | typeCheckConfig
|
---|
21 | } from './util/index'
|
---|
22 | import EventHandler from './dom/event-handler'
|
---|
23 | import Manipulator from './dom/manipulator'
|
---|
24 | import SelectorEngine from './dom/selector-engine'
|
---|
25 | import BaseComponent from './base-component'
|
---|
26 |
|
---|
27 | /**
|
---|
28 | * ------------------------------------------------------------------------
|
---|
29 | * Constants
|
---|
30 | * ------------------------------------------------------------------------
|
---|
31 | */
|
---|
32 |
|
---|
33 | const NAME = 'dropdown'
|
---|
34 | const DATA_KEY = 'bs.dropdown'
|
---|
35 | const EVENT_KEY = `.${DATA_KEY}`
|
---|
36 | const DATA_API_KEY = '.data-api'
|
---|
37 |
|
---|
38 | const ESCAPE_KEY = 'Escape'
|
---|
39 | const SPACE_KEY = 'Space'
|
---|
40 | const TAB_KEY = 'Tab'
|
---|
41 | const ARROW_UP_KEY = 'ArrowUp'
|
---|
42 | const ARROW_DOWN_KEY = 'ArrowDown'
|
---|
43 | const RIGHT_MOUSE_BUTTON = 2 // MouseEvent.button value for the secondary button, usually the right button
|
---|
44 |
|
---|
45 | const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEY}|${ARROW_DOWN_KEY}|${ESCAPE_KEY}`)
|
---|
46 |
|
---|
47 | const EVENT_HIDE = `hide${EVENT_KEY}`
|
---|
48 | const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
---|
49 | const EVENT_SHOW = `show${EVENT_KEY}`
|
---|
50 | const EVENT_SHOWN = `shown${EVENT_KEY}`
|
---|
51 | const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
---|
52 | const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`
|
---|
53 | const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
|
---|
54 |
|
---|
55 | const CLASS_NAME_SHOW = 'show'
|
---|
56 | const CLASS_NAME_DROPUP = 'dropup'
|
---|
57 | const CLASS_NAME_DROPEND = 'dropend'
|
---|
58 | const CLASS_NAME_DROPSTART = 'dropstart'
|
---|
59 | const CLASS_NAME_NAVBAR = 'navbar'
|
---|
60 |
|
---|
61 | const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
|
---|
62 | const SELECTOR_MENU = '.dropdown-menu'
|
---|
63 | const SELECTOR_NAVBAR_NAV = '.navbar-nav'
|
---|
64 | const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
|
---|
65 |
|
---|
66 | const PLACEMENT_TOP = isRTL() ? 'top-end' : 'top-start'
|
---|
67 | const PLACEMENT_TOPEND = isRTL() ? 'top-start' : 'top-end'
|
---|
68 | const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start'
|
---|
69 | const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
|
---|
70 | const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
|
---|
71 | const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
|
---|
72 |
|
---|
73 | const Default = {
|
---|
74 | offset: [0, 2],
|
---|
75 | boundary: 'clippingParents',
|
---|
76 | reference: 'toggle',
|
---|
77 | display: 'dynamic',
|
---|
78 | popperConfig: null,
|
---|
79 | autoClose: true
|
---|
80 | }
|
---|
81 |
|
---|
82 | const DefaultType = {
|
---|
83 | offset: '(array|string|function)',
|
---|
84 | boundary: '(string|element)',
|
---|
85 | reference: '(string|element|object)',
|
---|
86 | display: 'string',
|
---|
87 | popperConfig: '(null|object|function)',
|
---|
88 | autoClose: '(boolean|string)'
|
---|
89 | }
|
---|
90 |
|
---|
91 | /**
|
---|
92 | * ------------------------------------------------------------------------
|
---|
93 | * Class Definition
|
---|
94 | * ------------------------------------------------------------------------
|
---|
95 | */
|
---|
96 |
|
---|
97 | class Dropdown extends BaseComponent {
|
---|
98 | constructor(element, config) {
|
---|
99 | super(element)
|
---|
100 |
|
---|
101 | this._popper = null
|
---|
102 | this._config = this._getConfig(config)
|
---|
103 | this._menu = this._getMenuElement()
|
---|
104 | this._inNavbar = this._detectNavbar()
|
---|
105 | }
|
---|
106 |
|
---|
107 | // Getters
|
---|
108 |
|
---|
109 | static get Default() {
|
---|
110 | return Default
|
---|
111 | }
|
---|
112 |
|
---|
113 | static get DefaultType() {
|
---|
114 | return DefaultType
|
---|
115 | }
|
---|
116 |
|
---|
117 | static get NAME() {
|
---|
118 | return NAME
|
---|
119 | }
|
---|
120 |
|
---|
121 | // Public
|
---|
122 |
|
---|
123 | toggle() {
|
---|
124 | return this._isShown() ? this.hide() : this.show()
|
---|
125 | }
|
---|
126 |
|
---|
127 | show() {
|
---|
128 | if (isDisabled(this._element) || this._isShown(this._menu)) {
|
---|
129 | return
|
---|
130 | }
|
---|
131 |
|
---|
132 | const relatedTarget = {
|
---|
133 | relatedTarget: this._element
|
---|
134 | }
|
---|
135 |
|
---|
136 | const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, relatedTarget)
|
---|
137 |
|
---|
138 | if (showEvent.defaultPrevented) {
|
---|
139 | return
|
---|
140 | }
|
---|
141 |
|
---|
142 | const parent = Dropdown.getParentFromElement(this._element)
|
---|
143 | // Totally disable Popper for Dropdowns in Navbar
|
---|
144 | if (this._inNavbar) {
|
---|
145 | Manipulator.setDataAttribute(this._menu, 'popper', 'none')
|
---|
146 | } else {
|
---|
147 | this._createPopper(parent)
|
---|
148 | }
|
---|
149 |
|
---|
150 | // If this is a touch-enabled device we add extra
|
---|
151 | // empty mouseover listeners to the body's immediate children;
|
---|
152 | // only needed because of broken event delegation on iOS
|
---|
153 | // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
---|
154 | if ('ontouchstart' in document.documentElement &&
|
---|
155 | !parent.closest(SELECTOR_NAVBAR_NAV)) {
|
---|
156 | [].concat(...document.body.children)
|
---|
157 | .forEach(elem => EventHandler.on(elem, 'mouseover', noop))
|
---|
158 | }
|
---|
159 |
|
---|
160 | this._element.focus()
|
---|
161 | this._element.setAttribute('aria-expanded', true)
|
---|
162 |
|
---|
163 | this._menu.classList.add(CLASS_NAME_SHOW)
|
---|
164 | this._element.classList.add(CLASS_NAME_SHOW)
|
---|
165 | EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget)
|
---|
166 | }
|
---|
167 |
|
---|
168 | hide() {
|
---|
169 | if (isDisabled(this._element) || !this._isShown(this._menu)) {
|
---|
170 | return
|
---|
171 | }
|
---|
172 |
|
---|
173 | const relatedTarget = {
|
---|
174 | relatedTarget: this._element
|
---|
175 | }
|
---|
176 |
|
---|
177 | this._completeHide(relatedTarget)
|
---|
178 | }
|
---|
179 |
|
---|
180 | dispose() {
|
---|
181 | if (this._popper) {
|
---|
182 | this._popper.destroy()
|
---|
183 | }
|
---|
184 |
|
---|
185 | super.dispose()
|
---|
186 | }
|
---|
187 |
|
---|
188 | update() {
|
---|
189 | this._inNavbar = this._detectNavbar()
|
---|
190 | if (this._popper) {
|
---|
191 | this._popper.update()
|
---|
192 | }
|
---|
193 | }
|
---|
194 |
|
---|
195 | // Private
|
---|
196 |
|
---|
197 | _completeHide(relatedTarget) {
|
---|
198 | const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget)
|
---|
199 | if (hideEvent.defaultPrevented) {
|
---|
200 | return
|
---|
201 | }
|
---|
202 |
|
---|
203 | // If this is a touch-enabled device we remove the extra
|
---|
204 | // empty mouseover listeners we added for iOS support
|
---|
205 | if ('ontouchstart' in document.documentElement) {
|
---|
206 | [].concat(...document.body.children)
|
---|
207 | .forEach(elem => EventHandler.off(elem, 'mouseover', noop))
|
---|
208 | }
|
---|
209 |
|
---|
210 | if (this._popper) {
|
---|
211 | this._popper.destroy()
|
---|
212 | }
|
---|
213 |
|
---|
214 | this._menu.classList.remove(CLASS_NAME_SHOW)
|
---|
215 | this._element.classList.remove(CLASS_NAME_SHOW)
|
---|
216 | this._element.setAttribute('aria-expanded', 'false')
|
---|
217 | Manipulator.removeDataAttribute(this._menu, 'popper')
|
---|
218 | EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
|
---|
219 | }
|
---|
220 |
|
---|
221 | _getConfig(config) {
|
---|
222 | config = {
|
---|
223 | ...this.constructor.Default,
|
---|
224 | ...Manipulator.getDataAttributes(this._element),
|
---|
225 | ...config
|
---|
226 | }
|
---|
227 |
|
---|
228 | typeCheckConfig(NAME, config, this.constructor.DefaultType)
|
---|
229 |
|
---|
230 | if (typeof config.reference === 'object' && !isElement(config.reference) &&
|
---|
231 | typeof config.reference.getBoundingClientRect !== 'function'
|
---|
232 | ) {
|
---|
233 | // Popper virtual elements require a getBoundingClientRect method
|
---|
234 | throw new TypeError(`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
|
---|
235 | }
|
---|
236 |
|
---|
237 | return config
|
---|
238 | }
|
---|
239 |
|
---|
240 | _createPopper(parent) {
|
---|
241 | if (typeof Popper === 'undefined') {
|
---|
242 | throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
|
---|
243 | }
|
---|
244 |
|
---|
245 | let referenceElement = this._element
|
---|
246 |
|
---|
247 | if (this._config.reference === 'parent') {
|
---|
248 | referenceElement = parent
|
---|
249 | } else if (isElement(this._config.reference)) {
|
---|
250 | referenceElement = getElement(this._config.reference)
|
---|
251 | } else if (typeof this._config.reference === 'object') {
|
---|
252 | referenceElement = this._config.reference
|
---|
253 | }
|
---|
254 |
|
---|
255 | const popperConfig = this._getPopperConfig()
|
---|
256 | const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
|
---|
257 |
|
---|
258 | this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
|
---|
259 |
|
---|
260 | if (isDisplayStatic) {
|
---|
261 | Manipulator.setDataAttribute(this._menu, 'popper', 'static')
|
---|
262 | }
|
---|
263 | }
|
---|
264 |
|
---|
265 | _isShown(element = this._element) {
|
---|
266 | return element.classList.contains(CLASS_NAME_SHOW)
|
---|
267 | }
|
---|
268 |
|
---|
269 | _getMenuElement() {
|
---|
270 | return SelectorEngine.next(this._element, SELECTOR_MENU)[0]
|
---|
271 | }
|
---|
272 |
|
---|
273 | _getPlacement() {
|
---|
274 | const parentDropdown = this._element.parentNode
|
---|
275 |
|
---|
276 | if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) {
|
---|
277 | return PLACEMENT_RIGHT
|
---|
278 | }
|
---|
279 |
|
---|
280 | if (parentDropdown.classList.contains(CLASS_NAME_DROPSTART)) {
|
---|
281 | return PLACEMENT_LEFT
|
---|
282 | }
|
---|
283 |
|
---|
284 | // We need to trim the value because custom properties can also include spaces
|
---|
285 | const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'
|
---|
286 |
|
---|
287 | if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
|
---|
288 | return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP
|
---|
289 | }
|
---|
290 |
|
---|
291 | return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM
|
---|
292 | }
|
---|
293 |
|
---|
294 | _detectNavbar() {
|
---|
295 | return this._element.closest(`.${CLASS_NAME_NAVBAR}`) !== null
|
---|
296 | }
|
---|
297 |
|
---|
298 | _getOffset() {
|
---|
299 | const { offset } = this._config
|
---|
300 |
|
---|
301 | if (typeof offset === 'string') {
|
---|
302 | return offset.split(',').map(val => Number.parseInt(val, 10))
|
---|
303 | }
|
---|
304 |
|
---|
305 | if (typeof offset === 'function') {
|
---|
306 | return popperData => offset(popperData, this._element)
|
---|
307 | }
|
---|
308 |
|
---|
309 | return offset
|
---|
310 | }
|
---|
311 |
|
---|
312 | _getPopperConfig() {
|
---|
313 | const defaultBsPopperConfig = {
|
---|
314 | placement: this._getPlacement(),
|
---|
315 | modifiers: [{
|
---|
316 | name: 'preventOverflow',
|
---|
317 | options: {
|
---|
318 | boundary: this._config.boundary
|
---|
319 | }
|
---|
320 | },
|
---|
321 | {
|
---|
322 | name: 'offset',
|
---|
323 | options: {
|
---|
324 | offset: this._getOffset()
|
---|
325 | }
|
---|
326 | }]
|
---|
327 | }
|
---|
328 |
|
---|
329 | // Disable Popper if we have a static display
|
---|
330 | if (this._config.display === 'static') {
|
---|
331 | defaultBsPopperConfig.modifiers = [{
|
---|
332 | name: 'applyStyles',
|
---|
333 | enabled: false
|
---|
334 | }]
|
---|
335 | }
|
---|
336 |
|
---|
337 | return {
|
---|
338 | ...defaultBsPopperConfig,
|
---|
339 | ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
|
---|
340 | }
|
---|
341 | }
|
---|
342 |
|
---|
343 | _selectMenuItem({ key, target }) {
|
---|
344 | const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(isVisible)
|
---|
345 |
|
---|
346 | if (!items.length) {
|
---|
347 | return
|
---|
348 | }
|
---|
349 |
|
---|
350 | // if target isn't included in items (e.g. when expanding the dropdown)
|
---|
351 | // allow cycling to get the last item in case key equals ARROW_UP_KEY
|
---|
352 | getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus()
|
---|
353 | }
|
---|
354 |
|
---|
355 | // Static
|
---|
356 |
|
---|
357 | static jQueryInterface(config) {
|
---|
358 | return this.each(function () {
|
---|
359 | const data = Dropdown.getOrCreateInstance(this, config)
|
---|
360 |
|
---|
361 | if (typeof config !== 'string') {
|
---|
362 | return
|
---|
363 | }
|
---|
364 |
|
---|
365 | if (typeof data[config] === 'undefined') {
|
---|
366 | throw new TypeError(`No method named "${config}"`)
|
---|
367 | }
|
---|
368 |
|
---|
369 | data[config]()
|
---|
370 | })
|
---|
371 | }
|
---|
372 |
|
---|
373 | static clearMenus(event) {
|
---|
374 | if (event && (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY))) {
|
---|
375 | return
|
---|
376 | }
|
---|
377 |
|
---|
378 | const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
|
---|
379 |
|
---|
380 | for (let i = 0, len = toggles.length; i < len; i++) {
|
---|
381 | const context = Dropdown.getInstance(toggles[i])
|
---|
382 | if (!context || context._config.autoClose === false) {
|
---|
383 | continue
|
---|
384 | }
|
---|
385 |
|
---|
386 | if (!context._isShown()) {
|
---|
387 | continue
|
---|
388 | }
|
---|
389 |
|
---|
390 | const relatedTarget = {
|
---|
391 | relatedTarget: context._element
|
---|
392 | }
|
---|
393 |
|
---|
394 | if (event) {
|
---|
395 | const composedPath = event.composedPath()
|
---|
396 | const isMenuTarget = composedPath.includes(context._menu)
|
---|
397 | if (
|
---|
398 | composedPath.includes(context._element) ||
|
---|
399 | (context._config.autoClose === 'inside' && !isMenuTarget) ||
|
---|
400 | (context._config.autoClose === 'outside' && isMenuTarget)
|
---|
401 | ) {
|
---|
402 | continue
|
---|
403 | }
|
---|
404 |
|
---|
405 | // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu
|
---|
406 | if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) {
|
---|
407 | continue
|
---|
408 | }
|
---|
409 |
|
---|
410 | if (event.type === 'click') {
|
---|
411 | relatedTarget.clickEvent = event
|
---|
412 | }
|
---|
413 | }
|
---|
414 |
|
---|
415 | context._completeHide(relatedTarget)
|
---|
416 | }
|
---|
417 | }
|
---|
418 |
|
---|
419 | static getParentFromElement(element) {
|
---|
420 | return getElementFromSelector(element) || element.parentNode
|
---|
421 | }
|
---|
422 |
|
---|
423 | static dataApiKeydownHandler(event) {
|
---|
424 | // If not input/textarea:
|
---|
425 | // - And not a key in REGEXP_KEYDOWN => not a dropdown command
|
---|
426 | // If input/textarea:
|
---|
427 | // - If space key => not a dropdown command
|
---|
428 | // - If key is other than escape
|
---|
429 | // - If key is not up or down => not a dropdown command
|
---|
430 | // - If trigger inside the menu => not a dropdown command
|
---|
431 | if (/input|textarea/i.test(event.target.tagName) ?
|
---|
432 | event.key === SPACE_KEY || (event.key !== ESCAPE_KEY &&
|
---|
433 | ((event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY) ||
|
---|
434 | event.target.closest(SELECTOR_MENU))) :
|
---|
435 | !REGEXP_KEYDOWN.test(event.key)) {
|
---|
436 | return
|
---|
437 | }
|
---|
438 |
|
---|
439 | const isActive = this.classList.contains(CLASS_NAME_SHOW)
|
---|
440 |
|
---|
441 | if (!isActive && event.key === ESCAPE_KEY) {
|
---|
442 | return
|
---|
443 | }
|
---|
444 |
|
---|
445 | event.preventDefault()
|
---|
446 | event.stopPropagation()
|
---|
447 |
|
---|
448 | if (isDisabled(this)) {
|
---|
449 | return
|
---|
450 | }
|
---|
451 |
|
---|
452 | const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
|
---|
453 | const instance = Dropdown.getOrCreateInstance(getToggleButton)
|
---|
454 |
|
---|
455 | if (event.key === ESCAPE_KEY) {
|
---|
456 | instance.hide()
|
---|
457 | return
|
---|
458 | }
|
---|
459 |
|
---|
460 | if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) {
|
---|
461 | if (!isActive) {
|
---|
462 | instance.show()
|
---|
463 | }
|
---|
464 |
|
---|
465 | instance._selectMenuItem(event)
|
---|
466 | return
|
---|
467 | }
|
---|
468 |
|
---|
469 | if (!isActive || event.key === SPACE_KEY) {
|
---|
470 | Dropdown.clearMenus()
|
---|
471 | }
|
---|
472 | }
|
---|
473 | }
|
---|
474 |
|
---|
475 | /**
|
---|
476 | * ------------------------------------------------------------------------
|
---|
477 | * Data Api implementation
|
---|
478 | * ------------------------------------------------------------------------
|
---|
479 | */
|
---|
480 |
|
---|
481 | EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler)
|
---|
482 | EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler)
|
---|
483 | EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus)
|
---|
484 | EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus)
|
---|
485 | EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
---|
486 | event.preventDefault()
|
---|
487 | Dropdown.getOrCreateInstance(this).toggle()
|
---|
488 | })
|
---|
489 |
|
---|
490 | /**
|
---|
491 | * ------------------------------------------------------------------------
|
---|
492 | * jQuery
|
---|
493 | * ------------------------------------------------------------------------
|
---|
494 | * add .Dropdown to jQuery only if jQuery is present
|
---|
495 | */
|
---|
496 |
|
---|
497 | defineJQueryPlugin(Dropdown)
|
---|
498 |
|
---|
499 | export default Dropdown
|
---|