diff options
Diffstat (limited to 'js/dist/tab.js')
| -rw-r--r-- | js/dist/tab.js | 442 |
1 files changed, 197 insertions, 245 deletions
diff --git a/js/dist/tab.js b/js/dist/tab.js index c3c24b75c..a4ad95a10 100644 --- a/js/dist/tab.js +++ b/js/dist/tab.js @@ -1,331 +1,283 @@ /*! - * Bootstrap tab.js v5.1.3 (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) + * Bootstrap tab.js v5.3.3 (https://getbootstrap.com/) + * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/event-handler.js'), require('./dom/selector-engine.js'), require('./base-component.js')) : - typeof define === 'function' && define.amd ? define(['./dom/event-handler', './dom/selector-engine', './base-component'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Tab = factory(global.EventHandler, global.SelectorEngine, global.Base)); -})(this, (function (EventHandler, SelectorEngine, BaseComponent) { 'use strict'; - - const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e }; - - const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); - const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); - const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./dom/event-handler.js'), require('./dom/selector-engine.js'), require('./util/index.js')) : + typeof define === 'function' && define.amd ? define(['./base-component', './dom/event-handler', './dom/selector-engine', './util/index'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Tab = factory(global.BaseComponent, global.EventHandler, global.SelectorEngine, global.Index)); +})(this, (function (BaseComponent, EventHandler, SelectorEngine, index_js) { 'use strict'; /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/index.js + * Bootstrap tab.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ - const getSelector = element => { - let selector = element.getAttribute('data-bs-target'); - - if (!selector || selector === '#') { - let hrefAttr = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes, - // so everything starting with `#` or `.`. If a "real" URL is used as the selector, - // `document.querySelector` will rightfully complain it is invalid. - // See https://github.com/twbs/bootstrap/issues/32273 - - if (!hrefAttr || !hrefAttr.includes('#') && !hrefAttr.startsWith('.')) { - return null; - } // Just in case some CMS puts out a full URL with the anchor appended - - - if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) { - hrefAttr = `#${hrefAttr.split('#')[1]}`; - } - - selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null; - } - - return selector; - }; - - const getElementFromSelector = element => { - const selector = getSelector(element); - return selector ? document.querySelector(selector) : null; - }; - - const isDisabled = element => { - if (!element || element.nodeType !== Node.ELEMENT_NODE) { - return true; - } - - if (element.classList.contains('disabled')) { - return true; - } - if (typeof element.disabled !== 'undefined') { - return element.disabled; - } - - return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false'; - }; /** - * Trick to restart an element's animation - * - * @param {HTMLElement} element - * @return void - * - * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation - */ - - - const reflow = element => { - // eslint-disable-next-line no-unused-expressions - element.offsetHeight; - }; - - const getjQuery = () => { - const { - jQuery - } = window; - - if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { - return jQuery; - } - - return null; - }; - - const DOMContentLoadedCallbacks = []; - - const onDOMContentLoaded = callback => { - if (document.readyState === 'loading') { - // add listener on the first call when the document is in loading state - if (!DOMContentLoadedCallbacks.length) { - document.addEventListener('DOMContentLoaded', () => { - DOMContentLoadedCallbacks.forEach(callback => callback()); - }); - } - - DOMContentLoadedCallbacks.push(callback); - } else { - callback(); - } - }; - - const defineJQueryPlugin = plugin => { - onDOMContentLoaded(() => { - const $ = getjQuery(); - /* istanbul ignore if */ - - if ($) { - const name = plugin.NAME; - const JQUERY_NO_CONFLICT = $.fn[name]; - $.fn[name] = plugin.jQueryInterface; - $.fn[name].Constructor = plugin; - - $.fn[name].noConflict = () => { - $.fn[name] = JQUERY_NO_CONFLICT; - return plugin.jQueryInterface; - }; - } - }); - }; - - /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): tab.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- - */ - /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ const NAME = 'tab'; const DATA_KEY = 'bs.tab'; const EVENT_KEY = `.${DATA_KEY}`; - const DATA_API_KEY = '.data-api'; const EVENT_HIDE = `hide${EVENT_KEY}`; const EVENT_HIDDEN = `hidden${EVENT_KEY}`; const EVENT_SHOW = `show${EVENT_KEY}`; const EVENT_SHOWN = `shown${EVENT_KEY}`; - const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`; - const CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu'; + const EVENT_CLICK_DATA_API = `click${EVENT_KEY}`; + const EVENT_KEYDOWN = `keydown${EVENT_KEY}`; + const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`; + const ARROW_LEFT_KEY = 'ArrowLeft'; + const ARROW_RIGHT_KEY = 'ArrowRight'; + const ARROW_UP_KEY = 'ArrowUp'; + const ARROW_DOWN_KEY = 'ArrowDown'; + const HOME_KEY = 'Home'; + const END_KEY = 'End'; const CLASS_NAME_ACTIVE = 'active'; const CLASS_NAME_FADE = 'fade'; const CLASS_NAME_SHOW = 'show'; - const SELECTOR_DROPDOWN = '.dropdown'; - const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'; - const SELECTOR_ACTIVE = '.active'; - const SELECTOR_ACTIVE_UL = ':scope > li > .active'; - const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]'; + const CLASS_DROPDOWN = 'dropdown'; const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'; - const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active'; + const SELECTOR_DROPDOWN_MENU = '.dropdown-menu'; + const NOT_SELECTOR_DROPDOWN_TOGGLE = `:not(${SELECTOR_DROPDOWN_TOGGLE})`; + const SELECTOR_TAB_PANEL = '.list-group, .nav, [role="tablist"]'; + const SELECTOR_OUTER = '.nav-item, .list-group-item'; + const SELECTOR_INNER = `.nav-link${NOT_SELECTOR_DROPDOWN_TOGGLE}, .list-group-item${NOT_SELECTOR_DROPDOWN_TOGGLE}, [role="tab"]${NOT_SELECTOR_DROPDOWN_TOGGLE}`; + const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]'; // TODO: could only be `tab` in v6 + const SELECTOR_INNER_ELEM = `${SELECTOR_INNER}, ${SELECTOR_DATA_TOGGLE}`; + const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-bs-toggle="tab"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="pill"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="list"]`; + /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ - class Tab extends BaseComponent__default.default { + class Tab extends BaseComponent { + constructor(element) { + super(element); + this._parent = this._element.closest(SELECTOR_TAB_PANEL); + if (!this._parent) { + return; + // TODO: should throw exception in v6 + // throw new TypeError(`${element.outerHTML} has not a valid parent ${SELECTOR_INNER_ELEM}`) + } + + // Set up initial aria attributes + this._setInitialAttributes(this._parent, this._getChildren()); + EventHandler.on(this._element, EVENT_KEYDOWN, event => this._keydown(event)); + } + // Getters static get NAME() { return NAME; - } // Public - + } + // Public show() { - if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE)) { + // Shows this elem and deactivate the active sibling if exists + const innerElem = this._element; + if (this._elemIsActive(innerElem)) { return; } - let previous; - const target = getElementFromSelector(this._element); - - const listElement = this._element.closest(SELECTOR_NAV_LIST_GROUP); - - if (listElement) { - const itemSelector = listElement.nodeName === 'UL' || listElement.nodeName === 'OL' ? SELECTOR_ACTIVE_UL : SELECTOR_ACTIVE; - previous = SelectorEngine__default.default.find(itemSelector, listElement); - previous = previous[previous.length - 1]; - } - - const hideEvent = previous ? EventHandler__default.default.trigger(previous, EVENT_HIDE, { - relatedTarget: this._element + // Search for active tab on same parent to deactivate it + const active = this._getActiveElem(); + const hideEvent = active ? EventHandler.trigger(active, EVENT_HIDE, { + relatedTarget: innerElem }) : null; - const showEvent = EventHandler__default.default.trigger(this._element, EVENT_SHOW, { - relatedTarget: previous + const showEvent = EventHandler.trigger(innerElem, EVENT_SHOW, { + relatedTarget: active }); - - if (showEvent.defaultPrevented || hideEvent !== null && hideEvent.defaultPrevented) { + if (showEvent.defaultPrevented || hideEvent && hideEvent.defaultPrevented) { return; } + this._deactivate(active, innerElem); + this._activate(innerElem, active); + } - this._activate(this._element, listElement); + // Private + _activate(element, relatedElem) { + if (!element) { + return; + } + element.classList.add(CLASS_NAME_ACTIVE); + this._activate(SelectorEngine.getElementFromSelector(element)); // Search and activate/show the proper section const complete = () => { - EventHandler__default.default.trigger(previous, EVENT_HIDDEN, { - relatedTarget: this._element - }); - EventHandler__default.default.trigger(this._element, EVENT_SHOWN, { - relatedTarget: previous + if (element.getAttribute('role') !== 'tab') { + element.classList.add(CLASS_NAME_SHOW); + return; + } + element.removeAttribute('tabindex'); + element.setAttribute('aria-selected', true); + this._toggleDropDown(element, true); + EventHandler.trigger(element, EVENT_SHOWN, { + relatedTarget: relatedElem }); }; - - if (target) { - this._activate(target, target.parentNode, complete); - } else { - complete(); + this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE)); + } + _deactivate(element, relatedElem) { + if (!element) { + return; } - } // Private - - - _activate(element, container, callback) { - const activeElements = container && (container.nodeName === 'UL' || container.nodeName === 'OL') ? SelectorEngine__default.default.find(SELECTOR_ACTIVE_UL, container) : SelectorEngine__default.default.children(container, SELECTOR_ACTIVE); - const active = activeElements[0]; - const isTransitioning = callback && active && active.classList.contains(CLASS_NAME_FADE); - - const complete = () => this._transitionComplete(element, active, callback); - - if (active && isTransitioning) { - active.classList.remove(CLASS_NAME_SHOW); + element.classList.remove(CLASS_NAME_ACTIVE); + element.blur(); + this._deactivate(SelectorEngine.getElementFromSelector(element)); // Search and deactivate the shown section too - this._queueCallback(complete, element, true); + const complete = () => { + if (element.getAttribute('role') !== 'tab') { + element.classList.remove(CLASS_NAME_SHOW); + return; + } + element.setAttribute('aria-selected', false); + element.setAttribute('tabindex', '-1'); + this._toggleDropDown(element, false); + EventHandler.trigger(element, EVENT_HIDDEN, { + relatedTarget: relatedElem + }); + }; + this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE)); + } + _keydown(event) { + if (![ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key)) { + return; + } + event.stopPropagation(); // stopPropagation/preventDefault both added to support up/down keys without scrolling the page + event.preventDefault(); + const children = this._getChildren().filter(element => !index_js.isDisabled(element)); + let nextActiveElement; + if ([HOME_KEY, END_KEY].includes(event.key)) { + nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1]; } else { - complete(); + const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key); + nextActiveElement = index_js.getNextActiveElement(children, event.target, isNext, true); + } + if (nextActiveElement) { + nextActiveElement.focus({ + preventScroll: true + }); + Tab.getOrCreateInstance(nextActiveElement).show(); } } - - _transitionComplete(element, active, callback) { - if (active) { - active.classList.remove(CLASS_NAME_ACTIVE); - const dropdownChild = SelectorEngine__default.default.findOne(SELECTOR_DROPDOWN_ACTIVE_CHILD, active.parentNode); - - if (dropdownChild) { - dropdownChild.classList.remove(CLASS_NAME_ACTIVE); - } - - if (active.getAttribute('role') === 'tab') { - active.setAttribute('aria-selected', false); - } + _getChildren() { + // collection of inner elements + return SelectorEngine.find(SELECTOR_INNER_ELEM, this._parent); + } + _getActiveElem() { + return this._getChildren().find(child => this._elemIsActive(child)) || null; + } + _setInitialAttributes(parent, children) { + this._setAttributeIfNotExists(parent, 'role', 'tablist'); + for (const child of children) { + this._setInitialAttributesOnChild(child); } - - element.classList.add(CLASS_NAME_ACTIVE); - - if (element.getAttribute('role') === 'tab') { - element.setAttribute('aria-selected', true); + } + _setInitialAttributesOnChild(child) { + child = this._getInnerElement(child); + const isActive = this._elemIsActive(child); + const outerElem = this._getOuterElement(child); + child.setAttribute('aria-selected', isActive); + if (outerElem !== child) { + this._setAttributeIfNotExists(outerElem, 'role', 'presentation'); } - - reflow(element); - - if (element.classList.contains(CLASS_NAME_FADE)) { - element.classList.add(CLASS_NAME_SHOW); + if (!isActive) { + child.setAttribute('tabindex', '-1'); } + this._setAttributeIfNotExists(child, 'role', 'tab'); - let parent = element.parentNode; - - if (parent && parent.nodeName === 'LI') { - parent = parent.parentNode; + // set attributes to the related panel too + this._setInitialAttributesOnTargetPanel(child); + } + _setInitialAttributesOnTargetPanel(child) { + const target = SelectorEngine.getElementFromSelector(child); + if (!target) { + return; } - - if (parent && parent.classList.contains(CLASS_NAME_DROPDOWN_MENU)) { - const dropdownElement = element.closest(SELECTOR_DROPDOWN); - - if (dropdownElement) { - SelectorEngine__default.default.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement).forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE)); + this._setAttributeIfNotExists(target, 'role', 'tabpanel'); + if (child.id) { + this._setAttributeIfNotExists(target, 'aria-labelledby', `${child.id}`); + } + } + _toggleDropDown(element, open) { + const outerElem = this._getOuterElement(element); + if (!outerElem.classList.contains(CLASS_DROPDOWN)) { + return; + } + const toggle = (selector, className) => { + const element = SelectorEngine.findOne(selector, outerElem); + if (element) { + element.classList.toggle(className, open); } - - element.setAttribute('aria-expanded', true); + }; + toggle(SELECTOR_DROPDOWN_TOGGLE, CLASS_NAME_ACTIVE); + toggle(SELECTOR_DROPDOWN_MENU, CLASS_NAME_SHOW); + outerElem.setAttribute('aria-expanded', open); + } + _setAttributeIfNotExists(element, attribute, value) { + if (!element.hasAttribute(attribute)) { + element.setAttribute(attribute, value); } + } + _elemIsActive(elem) { + return elem.classList.contains(CLASS_NAME_ACTIVE); + } - if (callback) { - callback(); - } - } // Static + // Try to get the inner element (usually the .nav-link) + _getInnerElement(elem) { + return elem.matches(SELECTOR_INNER_ELEM) ? elem : SelectorEngine.findOne(SELECTOR_INNER_ELEM, elem); + } + // Try to get the outer element (usually the .nav-item) + _getOuterElement(elem) { + return elem.closest(SELECTOR_OUTER) || elem; + } + // Static static jQueryInterface(config) { return this.each(function () { const data = Tab.getOrCreateInstance(this); - - if (typeof config === 'string') { - if (typeof data[config] === 'undefined') { - throw new TypeError(`No method named "${config}"`); - } - - data[config](); + if (typeof config !== 'string') { + return; } + if (data[config] === undefined || config.startsWith('_') || config === 'constructor') { + throw new TypeError(`No method named "${config}"`); + } + data[config](); }); } - } + /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ - - EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { + EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { if (['A', 'AREA'].includes(this.tagName)) { event.preventDefault(); } - - if (isDisabled(this)) { + if (index_js.isDisabled(this)) { return; } + Tab.getOrCreateInstance(this).show(); + }); - const data = Tab.getOrCreateInstance(this); - data.show(); + /** + * Initialize on focus + */ + EventHandler.on(window, EVENT_LOAD_DATA_API, () => { + for (const element of SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE)) { + Tab.getOrCreateInstance(element); + } }); /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Tab to jQuery only if jQuery is present */ - defineJQueryPlugin(Tab); + index_js.defineJQueryPlugin(Tab); return Tab; |