diff options
Diffstat (limited to 'js/dist/tab.js')
| -rw-r--r-- | js/dist/tab.js | 312 |
1 files changed, 132 insertions, 180 deletions
diff --git a/js/dist/tab.js b/js/dist/tab.js index b1188075c..51e5d9df4 100644 --- a/js/dist/tab.js +++ b/js/dist/tab.js @@ -1,67 +1,32 @@ /*! - * Bootstrap tab.js v5.0.0-beta2 (https://getbootstrap.com/) + * Bootstrap tab.js v5.1.0 (https://getbootstrap.com/) * Copyright 2011-2021 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/data.js'), require('./dom/event-handler.js'), require('./dom/selector-engine.js'), require('./base-component.js')) : - typeof define === 'function' && define.amd ? define(['./dom/data', './dom/event-handler', './dom/selector-engine', './base-component'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Tab = factory(global.Data, global.EventHandler, global.SelectorEngine, global.Base)); -}(this, (function (Data, EventHandler, SelectorEngine, BaseComponent) { 'use strict'; + 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'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } - var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data); var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); - function _defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - - function _createClass(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties(Constructor.prototype, protoProps); - if (staticProps) _defineProperties(Constructor, staticProps); - return Constructor; - } - - function _inheritsLoose(subClass, superClass) { - subClass.prototype = Object.create(superClass.prototype); - subClass.prototype.constructor = subClass; - - _setPrototypeOf(subClass, superClass); - } - - function _setPrototypeOf(o, p) { - _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { - o.__proto__ = p; - return o; - }; - - return _setPrototypeOf(o, p); - } - /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.0-beta2): util/index.js + * Bootstrap (v5.1.0): util/index.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ - var MILLISECONDS_MULTIPLIER = 1000; - var TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp) - var getSelector = function getSelector(element) { - var selector = element.getAttribute('data-bs-target'); + const getSelector = element => { + let selector = element.getAttribute('data-bs-target'); if (!selector || selector === '#') { - var hrefAttr = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes, + 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 @@ -72,7 +37,7 @@ if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) { - hrefAttr = '#' + hrefAttr.split('#')[1]; + hrefAttr = `#${hrefAttr.split('#')[1]}`; } selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null; @@ -81,63 +46,45 @@ return selector; }; - var getElementFromSelector = function getElementFromSelector(element) { - var selector = getSelector(element); + const getElementFromSelector = element => { + const selector = getSelector(element); return selector ? document.querySelector(selector) : null; }; - var getTransitionDurationFromElement = function getTransitionDurationFromElement(element) { - if (!element) { - return 0; - } // Get transition-duration of the element - - - var _window$getComputedSt = window.getComputedStyle(element), - transitionDuration = _window$getComputedSt.transitionDuration, - transitionDelay = _window$getComputedSt.transitionDelay; - - var floatTransitionDuration = Number.parseFloat(transitionDuration); - var floatTransitionDelay = Number.parseFloat(transitionDelay); // Return 0 if element or transition duration is not found - - if (!floatTransitionDuration && !floatTransitionDelay) { - return 0; - } // If multiple durations are defined, take the first - - - transitionDuration = transitionDuration.split(',')[0]; - transitionDelay = transitionDelay.split(',')[0]; - return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER; - }; - - var triggerTransitionEnd = function triggerTransitionEnd(element) { - element.dispatchEvent(new Event(TRANSITION_END)); - }; + const isDisabled = element => { + if (!element || element.nodeType !== Node.ELEMENT_NODE) { + return true; + } - var emulateTransitionEnd = function emulateTransitionEnd(element, duration) { - var called = false; - var durationPadding = 5; - var emulatedDuration = duration + durationPadding; + if (element.classList.contains('disabled')) { + return true; + } - function listener() { - called = true; - element.removeEventListener(TRANSITION_END, listener); + if (typeof element.disabled !== 'undefined') { + return element.disabled; } - element.addEventListener(TRANSITION_END, listener); - setTimeout(function () { - if (!called) { - triggerTransitionEnd(element); - } - }, emulatedDuration); + 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 + */ + - var reflow = function reflow(element) { - return element.offsetHeight; + const reflow = element => { + // eslint-disable-next-line no-unused-expressions + element.offsetHeight; }; - var getjQuery = function getjQuery() { - var _window = window, - jQuery = _window.jQuery; + const getjQuery = () => { + const { + jQuery + } = window; if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { return jQuery; @@ -146,27 +93,35 @@ return null; }; - var onDOMContentLoaded = function onDOMContentLoaded(callback) { + const DOMContentLoadedCallbacks = []; + + const onDOMContentLoaded = callback => { if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', callback); + // 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(); } }; - document.documentElement.dir === 'rtl'; - - var defineJQueryPlugin = function defineJQueryPlugin(name, plugin) { - onDOMContentLoaded(function () { - var $ = getjQuery(); + const defineJQueryPlugin = plugin => { + onDOMContentLoaded(() => { + const $ = getjQuery(); /* istanbul ignore if */ if ($) { - var JQUERY_NO_CONFLICT = $.fn[name]; + const name = plugin.NAME; + const JQUERY_NO_CONFLICT = $.fn[name]; $.fn[name] = plugin.jQueryInterface; $.fn[name].Constructor = plugin; - $.fn[name].noConflict = function () { + $.fn[name].noConflict = () => { $.fn[name] = JQUERY_NO_CONFLICT; return plugin.jQueryInterface; }; @@ -175,70 +130,70 @@ }; /** + * -------------------------------------------------------------------------- + * Bootstrap (v5.1.0): tab.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ + /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ - var NAME = 'tab'; - var DATA_KEY = 'bs.tab'; - var EVENT_KEY = "." + DATA_KEY; - var DATA_API_KEY = '.data-api'; - var EVENT_HIDE = "hide" + EVENT_KEY; - var EVENT_HIDDEN = "hidden" + EVENT_KEY; - var EVENT_SHOW = "show" + EVENT_KEY; - var EVENT_SHOWN = "shown" + EVENT_KEY; - var EVENT_CLICK_DATA_API = "click" + EVENT_KEY + DATA_API_KEY; - var CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu'; - var CLASS_NAME_ACTIVE = 'active'; - var CLASS_NAME_DISABLED = 'disabled'; - var CLASS_NAME_FADE = 'fade'; - var CLASS_NAME_SHOW = 'show'; - var SELECTOR_DROPDOWN = '.dropdown'; - var SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'; - var SELECTOR_ACTIVE = '.active'; - var SELECTOR_ACTIVE_UL = ':scope > li > .active'; - var SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]'; - var SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'; - var SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active'; + 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 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 SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'; + const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active'; /** * ------------------------------------------------------------------------ * Class Definition * ------------------------------------------------------------------------ */ - var Tab = /*#__PURE__*/function (_BaseComponent) { - _inheritsLoose(Tab, _BaseComponent); - - function Tab() { - return _BaseComponent.apply(this, arguments) || this; - } + class Tab extends BaseComponent__default['default'] { + // Getters + static get NAME() { + return NAME; + } // Public - var _proto = Tab.prototype; - // Public - _proto.show = function show() { - var _this = this; - - if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE) || this._element.classList.contains(CLASS_NAME_DISABLED)) { + show() { + if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE)) { return; } - var previous; - var target = getElementFromSelector(this._element); + let previous; + const target = getElementFromSelector(this._element); - var listElement = this._element.closest(SELECTOR_NAV_LIST_GROUP); + const listElement = this._element.closest(SELECTOR_NAV_LIST_GROUP); if (listElement) { - var itemSelector = listElement.nodeName === 'UL' || listElement.nodeName === 'OL' ? SELECTOR_ACTIVE_UL : SELECTOR_ACTIVE; + 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]; } - var hideEvent = previous ? EventHandler__default['default'].trigger(previous, EVENT_HIDE, { + const hideEvent = previous ? EventHandler__default['default'].trigger(previous, EVENT_HIDE, { relatedTarget: this._element }) : null; - var showEvent = EventHandler__default['default'].trigger(this._element, EVENT_SHOW, { + const showEvent = EventHandler__default['default'].trigger(this._element, EVENT_SHOW, { relatedTarget: previous }); @@ -248,11 +203,11 @@ this._activate(this._element, listElement); - var complete = function complete() { + const complete = () => { EventHandler__default['default'].trigger(previous, EVENT_HIDDEN, { - relatedTarget: _this._element + relatedTarget: this._element }); - EventHandler__default['default'].trigger(_this._element, EVENT_SHOWN, { + EventHandler__default['default'].trigger(this._element, EVENT_SHOWN, { relatedTarget: previous }); }; @@ -263,33 +218,28 @@ complete(); } } // Private - ; - _proto._activate = function _activate(element, container, callback) { - var _this2 = this; - var activeElements = container && (container.nodeName === 'UL' || container.nodeName === 'OL') ? SelectorEngine__default['default'].find(SELECTOR_ACTIVE_UL, container) : SelectorEngine__default['default'].children(container, SELECTOR_ACTIVE); - var active = activeElements[0]; - var isTransitioning = callback && active && active.classList.contains(CLASS_NAME_FADE); + _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); - var complete = function complete() { - return _this2._transitionComplete(element, active, callback); - }; + const complete = () => this._transitionComplete(element, active, callback); if (active && isTransitioning) { - var transitionDuration = getTransitionDurationFromElement(active); active.classList.remove(CLASS_NAME_SHOW); - EventHandler__default['default'].one(active, 'transitionend', complete); - emulateTransitionEnd(active, transitionDuration); + + this._queueCallback(complete, element, true); } else { complete(); } - }; + } - _proto._transitionComplete = function _transitionComplete(element, active, callback) { + _transitionComplete(element, active, callback) { if (active) { active.classList.remove(CLASS_NAME_ACTIVE); - var dropdownChild = SelectorEngine__default['default'].findOne(SELECTOR_DROPDOWN_ACTIVE_CHILD, active.parentNode); + const dropdownChild = SelectorEngine__default['default'].findOne(SELECTOR_DROPDOWN_ACTIVE_CHILD, active.parentNode); if (dropdownChild) { dropdownChild.classList.remove(CLASS_NAME_ACTIVE); @@ -312,13 +262,17 @@ element.classList.add(CLASS_NAME_SHOW); } - if (element.parentNode && element.parentNode.classList.contains(CLASS_NAME_DROPDOWN_MENU)) { - var dropdownElement = element.closest(SELECTOR_DROPDOWN); + let parent = element.parentNode; + + if (parent && parent.nodeName === 'LI') { + parent = parent.parentNode; + } + + if (parent && parent.classList.contains(CLASS_NAME_DROPDOWN_MENU)) { + const dropdownElement = element.closest(SELECTOR_DROPDOWN); if (dropdownElement) { - SelectorEngine__default['default'].find(SELECTOR_DROPDOWN_TOGGLE).forEach(function (dropdown) { - return dropdown.classList.add(CLASS_NAME_ACTIVE); - }); + SelectorEngine__default['default'].find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement).forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE)); } element.setAttribute('aria-expanded', true); @@ -328,32 +282,23 @@ callback(); } } // Static - ; - Tab.jQueryInterface = function jQueryInterface(config) { + + static jQueryInterface(config) { return this.each(function () { - var data = Data__default['default'].getData(this, DATA_KEY) || new Tab(this); + const data = Tab.getOrCreateInstance(this); if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new TypeError("No method named \"" + config + "\""); + throw new TypeError(`No method named "${config}"`); } data[config](); } }); - }; - - _createClass(Tab, null, [{ - key: "DATA_KEY", - get: // Getters - function get() { - return DATA_KEY; - } - }]); + } - return Tab; - }(BaseComponent__default['default']); + } /** * ------------------------------------------------------------------------ * Data Api implementation @@ -362,8 +307,15 @@ EventHandler__default['default'].on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { - event.preventDefault(); - var data = Data__default['default'].getData(this, DATA_KEY) || new Tab(this); + if (['A', 'AREA'].includes(this.tagName)) { + event.preventDefault(); + } + + if (isDisabled(this)) { + return; + } + + const data = Tab.getOrCreateInstance(this); data.show(); }); /** @@ -373,7 +325,7 @@ * add .Tab to jQuery only if jQuery is present */ - defineJQueryPlugin(NAME, Tab); + defineJQueryPlugin(Tab); return Tab; |