diff options
| author | XhmikosR <[email protected]> | 2020-03-07 11:31:42 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2020-03-18 12:58:54 +0200 |
| commit | 38333feda548fa973e034de03d34429a1f214089 (patch) | |
| tree | 5626c4eb68f38bc03a4b26498d110ac150a24d2d /js/src/tab.js | |
| parent | cece839fc98caa12e73715a2351845580f74c51b (diff) | |
| download | bootstrap-38333feda548fa973e034de03d34429a1f214089.tar.xz bootstrap-38333feda548fa973e034de03d34429a1f214089.zip | |
Switch to strings constants.
This allows the minifier to mangle the constants. It also allows the linter to find unused strings properly.
While at it, remove a few unused properties.
File Before After Diff
--------------------------------------------------------
bootstrap.bundle.min.js 23.61 kB 22.61 kB -1.00 kB (-4.23 %)
bootstrap.min.js 17.04 kB 16.08 kB -0.96 kB (-5.63 %)
Diffstat (limited to 'js/src/tab.js')
| -rw-r--r-- | js/src/tab.js | 90 |
1 files changed, 42 insertions, 48 deletions
diff --git a/js/src/tab.js b/js/src/tab.js index d9bd1fc05..f7ec29946 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -30,31 +30,25 @@ const DATA_KEY = 'bs.tab' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' -const Event = { - HIDE: `hide${EVENT_KEY}`, - HIDDEN: `hidden${EVENT_KEY}`, - SHOW: `show${EVENT_KEY}`, - SHOWN: `shown${EVENT_KEY}`, - CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}` -} - -const ClassName = { - DROPDOWN_MENU: 'dropdown-menu', - ACTIVE: 'active', - DISABLED: 'disabled', - FADE: 'fade', - SHOW: 'show' -} - -const Selector = { - DROPDOWN: '.dropdown', - NAV_LIST_GROUP: '.nav, .list-group', - ACTIVE: '.active', - ACTIVE_UL: ':scope > li > .active', - DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]', - DROPDOWN_TOGGLE: '.dropdown-toggle', - DROPDOWN_ACTIVE_CHILD: ':scope > .dropdown-menu .active' -} +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_DISABLED = 'disabled' +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-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]' +const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle' +const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active' /** * ------------------------------------------------------------------------ @@ -80,17 +74,17 @@ class Tab { show() { if ((this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && - this._element.classList.contains(ClassName.ACTIVE)) || - this._element.classList.contains(ClassName.DISABLED)) { + this._element.classList.contains(CLASS_NAME_ACTIVE)) || + this._element.classList.contains(CLASS_NAME_DISABLED)) { return } let previous const target = getElementFromSelector(this._element) - const listElement = SelectorEngine.closest(this._element, Selector.NAV_LIST_GROUP) + const listElement = SelectorEngine.closest(this._element, SELECTOR_NAV_LIST_GROUP) if (listElement) { - const 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 = makeArray(SelectorEngine.find(itemSelector, listElement)) previous = previous[previous.length - 1] } @@ -98,12 +92,12 @@ class Tab { let hideEvent = null if (previous) { - hideEvent = EventHandler.trigger(previous, Event.HIDE, { + hideEvent = EventHandler.trigger(previous, EVENT_HIDE, { relatedTarget: this._element }) } - const showEvent = EventHandler.trigger(this._element, Event.SHOW, { + const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget: previous }) @@ -118,10 +112,10 @@ class Tab { ) const complete = () => { - EventHandler.trigger(previous, Event.HIDDEN, { + EventHandler.trigger(previous, EVENT_HIDDEN, { relatedTarget: this._element }) - EventHandler.trigger(this._element, Event.SHOWN, { + EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget: previous }) } @@ -142,12 +136,12 @@ class Tab { _activate(element, container, callback) { const activeElements = container && (container.nodeName === 'UL' || container.nodeName === 'OL') ? - SelectorEngine.find(Selector.ACTIVE_UL, container) : - SelectorEngine.children(container, Selector.ACTIVE) + SelectorEngine.find(SELECTOR_ACTIVE_UL, container) : + SelectorEngine.children(container, SELECTOR_ACTIVE) const active = activeElements[0] const isTransitioning = callback && - (active && active.classList.contains(ClassName.FADE)) + (active && active.classList.contains(CLASS_NAME_FADE)) const complete = () => this._transitionComplete( element, @@ -157,7 +151,7 @@ class Tab { if (active && isTransitioning) { const transitionDuration = getTransitionDurationFromElement(active) - active.classList.remove(ClassName.SHOW) + active.classList.remove(CLASS_NAME_SHOW) EventHandler.one(active, TRANSITION_END, complete) emulateTransitionEnd(active, transitionDuration) @@ -168,12 +162,12 @@ class Tab { _transitionComplete(element, active, callback) { if (active) { - active.classList.remove(ClassName.ACTIVE) + active.classList.remove(CLASS_NAME_ACTIVE) - const dropdownChild = SelectorEngine.findOne(Selector.DROPDOWN_ACTIVE_CHILD, active.parentNode) + const dropdownChild = SelectorEngine.findOne(SELECTOR_DROPDOWN_ACTIVE_CHILD, active.parentNode) if (dropdownChild) { - dropdownChild.classList.remove(ClassName.ACTIVE) + dropdownChild.classList.remove(CLASS_NAME_ACTIVE) } if (active.getAttribute('role') === 'tab') { @@ -181,23 +175,23 @@ class Tab { } } - element.classList.add(ClassName.ACTIVE) + element.classList.add(CLASS_NAME_ACTIVE) if (element.getAttribute('role') === 'tab') { element.setAttribute('aria-selected', true) } reflow(element) - if (element.classList.contains(ClassName.FADE)) { - element.classList.add(ClassName.SHOW) + if (element.classList.contains(CLASS_NAME_FADE)) { + element.classList.add(CLASS_NAME_SHOW) } - if (element.parentNode && element.parentNode.classList.contains(ClassName.DROPDOWN_MENU)) { - const dropdownElement = SelectorEngine.closest(element, Selector.DROPDOWN) + if (element.parentNode && element.parentNode.classList.contains(CLASS_NAME_DROPDOWN_MENU)) { + const dropdownElement = SelectorEngine.closest(element, SELECTOR_DROPDOWN) if (dropdownElement) { - makeArray(SelectorEngine.find(Selector.DROPDOWN_TOGGLE)) - .forEach(dropdown => dropdown.classList.add(ClassName.ACTIVE)) + makeArray(SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE)) + .forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE)) } element.setAttribute('aria-expanded', true) @@ -235,7 +229,7 @@ class Tab { * ------------------------------------------------------------------------ */ -EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { +EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { event.preventDefault() const data = Data.getData(this, DATA_KEY) || new Tab(this) |
