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/dropdown.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/dropdown.js')
| -rw-r--r-- | js/src/dropdown.js | 162 |
1 files changed, 77 insertions, 85 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 82a24405a..9d6f8a329 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -31,54 +31,46 @@ const VERSION = '4.3.1' const DATA_KEY = 'bs.dropdown' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' + const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key const SPACE_KEYCODE = 32 // KeyboardEvent.which value for space key const TAB_KEYCODE = 9 // KeyboardEvent.which value for tab key const ARROW_UP_KEYCODE = 38 // KeyboardEvent.which value for up arrow key const ARROW_DOWN_KEYCODE = 40 // KeyboardEvent.which value for down arrow key const RIGHT_MOUSE_BUTTON_WHICH = 3 // MouseEvent.which value for the right button (assuming a right-handed mouse) -const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}`) -const Event = { - HIDE: `hide${EVENT_KEY}`, - HIDDEN: `hidden${EVENT_KEY}`, - SHOW: `show${EVENT_KEY}`, - SHOWN: `shown${EVENT_KEY}`, - CLICK: `click${EVENT_KEY}`, - CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`, - KEYDOWN_DATA_API: `keydown${EVENT_KEY}${DATA_API_KEY}`, - KEYUP_DATA_API: `keyup${EVENT_KEY}${DATA_API_KEY}` -} - -const ClassName = { - DISABLED: 'disabled', - SHOW: 'show', - DROPUP: 'dropup', - DROPRIGHT: 'dropright', - DROPLEFT: 'dropleft', - MENURIGHT: 'dropdown-menu-right', - NAVBAR: 'navbar', - POSITION_STATIC: 'position-static' -} - -const Selector = { - DATA_TOGGLE: '[data-toggle="dropdown"]', - FORM_CHILD: '.dropdown form', - MENU: '.dropdown-menu', - NAVBAR_NAV: '.navbar-nav', - VISIBLE_ITEMS: '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)' -} +const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}`) -const AttachmentMap = { - TOP: 'top-start', - TOPEND: 'top-end', - BOTTOM: 'bottom-start', - BOTTOMEND: 'bottom-end', - RIGHT: 'right-start', - RIGHTEND: 'right-end', - LEFT: 'left-start', - LEFTEND: 'left-end' -} +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 = `click${EVENT_KEY}` +const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` +const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}` +const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}` + +const CLASS_NAME_DISABLED = 'disabled' +const CLASS_NAME_SHOW = 'show' +const CLASS_NAME_DROPUP = 'dropup' +const CLASS_NAME_DROPRIGHT = 'dropright' +const CLASS_NAME_DROPLEFT = 'dropleft' +const CLASS_NAME_MENURIGHT = 'dropdown-menu-right' +const CLASS_NAME_NAVBAR = 'navbar' +const CLASS_NAME_POSITION_STATIC = 'position-static' + +const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]' +const SELECTOR_FORM_CHILD = '.dropdown form' +const SELECTOR_MENU = '.dropdown-menu' +const SELECTOR_NAVBAR_NAV = '.navbar-nav' +const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)' + +const PLACEMENT_TOP = 'top-start' +const PLACEMENT_TOPEND = 'top-end' +const PLACEMENT_BOTTOM = 'bottom-start' +const PLACEMENT_BOTTOMEND = 'bottom-end' +const PLACEMENT_RIGHT = 'right-start' +const PLACEMENT_LEFT = 'left-start' const Default = { offset: 0, @@ -133,11 +125,11 @@ class Dropdown { // Public toggle() { - if (this._element.disabled || this._element.classList.contains(ClassName.DISABLED)) { + if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED)) { return } - const isActive = this._menu.classList.contains(ClassName.SHOW) + const isActive = this._menu.classList.contains(CLASS_NAME_SHOW) Dropdown.clearMenus() @@ -149,7 +141,7 @@ class Dropdown { } show() { - if (this._element.disabled || this._element.classList.contains(ClassName.DISABLED) || this._menu.classList.contains(ClassName.SHOW)) { + if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || this._menu.classList.contains(CLASS_NAME_SHOW)) { return } @@ -158,7 +150,7 @@ class Dropdown { relatedTarget: this._element } - const showEvent = EventHandler.trigger(parent, Event.SHOW, relatedTarget) + const showEvent = EventHandler.trigger(parent, EVENT_SHOW, relatedTarget) if (showEvent.defaultPrevented) { return @@ -187,7 +179,7 @@ class Dropdown { // to allow the menu to "escape" the scroll parent's boundaries // https://github.com/twbs/bootstrap/issues/24251 if (this._config.boundary !== 'scrollParent') { - parent.classList.add(ClassName.POSITION_STATIC) + parent.classList.add(CLASS_NAME_POSITION_STATIC) } this._popper = new Popper(referenceElement, this._menu, this._getPopperConfig()) @@ -198,7 +190,7 @@ class Dropdown { // 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 && - !makeArray(SelectorEngine.closest(parent, Selector.NAVBAR_NAV)).length) { + !makeArray(SelectorEngine.closest(parent, SELECTOR_NAVBAR_NAV)).length) { makeArray(document.body.children) .forEach(elem => EventHandler.on(elem, 'mouseover', null, noop())) } @@ -206,13 +198,13 @@ class Dropdown { this._element.focus() this._element.setAttribute('aria-expanded', true) - Manipulator.toggleClass(this._menu, ClassName.SHOW) - Manipulator.toggleClass(parent, ClassName.SHOW) - EventHandler.trigger(parent, Event.SHOWN, relatedTarget) + Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW) + Manipulator.toggleClass(parent, CLASS_NAME_SHOW) + EventHandler.trigger(parent, EVENT_SHOWN, relatedTarget) } hide() { - if (this._element.disabled || this._element.classList.contains(ClassName.DISABLED) || !this._menu.classList.contains(ClassName.SHOW)) { + if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || !this._menu.classList.contains(CLASS_NAME_SHOW)) { return } @@ -221,7 +213,7 @@ class Dropdown { relatedTarget: this._element } - const hideEvent = EventHandler.trigger(parent, Event.HIDE, relatedTarget) + const hideEvent = EventHandler.trigger(parent, EVENT_HIDE, relatedTarget) if (hideEvent.defaultPrevented) { return @@ -231,9 +223,9 @@ class Dropdown { this._popper.destroy() } - Manipulator.toggleClass(this._menu, ClassName.SHOW) - Manipulator.toggleClass(parent, ClassName.SHOW) - EventHandler.trigger(parent, Event.HIDDEN, relatedTarget) + Manipulator.toggleClass(this._menu, CLASS_NAME_SHOW) + Manipulator.toggleClass(parent, CLASS_NAME_SHOW) + EventHandler.trigger(parent, EVENT_HIDDEN, relatedTarget) } dispose() { @@ -257,7 +249,7 @@ class Dropdown { // Private _addEventListeners() { - EventHandler.on(this._element, Event.CLICK, event => { + EventHandler.on(this._element, EVENT_CLICK, event => { event.preventDefault() event.stopPropagation() this.toggle() @@ -283,32 +275,32 @@ class Dropdown { _getMenuElement() { const parent = Dropdown.getParentFromElement(this._element) - return SelectorEngine.findOne(Selector.MENU, parent) + return SelectorEngine.findOne(SELECTOR_MENU, parent) } _getPlacement() { const parentDropdown = this._element.parentNode - let placement = AttachmentMap.BOTTOM + let placement = PLACEMENT_BOTTOM // Handle dropup - if (parentDropdown.classList.contains(ClassName.DROPUP)) { - placement = AttachmentMap.TOP - if (this._menu.classList.contains(ClassName.MENURIGHT)) { - placement = AttachmentMap.TOPEND + if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) { + placement = PLACEMENT_TOP + if (this._menu.classList.contains(CLASS_NAME_MENURIGHT)) { + placement = PLACEMENT_TOPEND } - } else if (parentDropdown.classList.contains(ClassName.DROPRIGHT)) { - placement = AttachmentMap.RIGHT - } else if (parentDropdown.classList.contains(ClassName.DROPLEFT)) { - placement = AttachmentMap.LEFT - } else if (this._menu.classList.contains(ClassName.MENURIGHT)) { - placement = AttachmentMap.BOTTOMEND + } else if (parentDropdown.classList.contains(CLASS_NAME_DROPRIGHT)) { + placement = PLACEMENT_RIGHT + } else if (parentDropdown.classList.contains(CLASS_NAME_DROPLEFT)) { + placement = PLACEMENT_LEFT + } else if (this._menu.classList.contains(CLASS_NAME_MENURIGHT)) { + placement = PLACEMENT_BOTTOMEND } return placement } _detectNavbar() { - return Boolean(SelectorEngine.closest(this._element, `.${ClassName.NAVBAR}`)) + return Boolean(SelectorEngine.closest(this._element, `.${CLASS_NAME_NAVBAR}`)) } _getOffset() { @@ -388,7 +380,7 @@ class Dropdown { return } - const toggles = makeArray(SelectorEngine.find(Selector.DATA_TOGGLE)) + const toggles = makeArray(SelectorEngine.find(SELECTOR_DATA_TOGGLE)) for (let i = 0, len = toggles.length; i < len; i++) { const parent = Dropdown.getParentFromElement(toggles[i]) const context = Data.getData(toggles[i], DATA_KEY) @@ -405,7 +397,7 @@ class Dropdown { } const dropdownMenu = context._menu - if (!parent.classList.contains(ClassName.SHOW)) { + if (!parent.classList.contains(CLASS_NAME_SHOW)) { continue } @@ -416,7 +408,7 @@ class Dropdown { continue } - const hideEvent = EventHandler.trigger(parent, Event.HIDE, relatedTarget) + const hideEvent = EventHandler.trigger(parent, EVENT_HIDE, relatedTarget) if (hideEvent.defaultPrevented) { continue } @@ -434,9 +426,9 @@ class Dropdown { context._popper.destroy() } - dropdownMenu.classList.remove(ClassName.SHOW) - parent.classList.remove(ClassName.SHOW) - EventHandler.trigger(parent, Event.HIDDEN, relatedTarget) + dropdownMenu.classList.remove(CLASS_NAME_SHOW) + parent.classList.remove(CLASS_NAME_SHOW) + EventHandler.trigger(parent, EVENT_HIDDEN, relatedTarget) } } @@ -455,7 +447,7 @@ class Dropdown { if (/input|textarea/i.test(event.target.tagName) ? event.which === SPACE_KEYCODE || (event.which !== ESCAPE_KEYCODE && ((event.which !== ARROW_DOWN_KEYCODE && event.which !== ARROW_UP_KEYCODE) || - SelectorEngine.closest(event.target, Selector.MENU))) : + SelectorEngine.closest(event.target, SELECTOR_MENU))) : !REGEXP_KEYDOWN.test(event.which)) { return } @@ -463,23 +455,23 @@ class Dropdown { event.preventDefault() event.stopPropagation() - if (this.disabled || this.classList.contains(ClassName.DISABLED)) { + if (this.disabled || this.classList.contains(CLASS_NAME_DISABLED)) { return } const parent = Dropdown.getParentFromElement(this) - const isActive = parent.classList.contains(ClassName.SHOW) + const isActive = parent.classList.contains(CLASS_NAME_SHOW) if (!isActive || (isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE))) { if (event.which === ESCAPE_KEYCODE) { - SelectorEngine.findOne(Selector.DATA_TOGGLE, parent).focus() + SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, parent).focus() } Dropdown.clearMenus() return } - const items = makeArray(SelectorEngine.find(Selector.VISIBLE_ITEMS, parent)) + const items = makeArray(SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, parent)) .filter(isVisible) if (!items.length) { @@ -514,17 +506,17 @@ class Dropdown { * ------------------------------------------------------------------------ */ -EventHandler.on(document, Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown.dataApiKeydownHandler) -EventHandler.on(document, Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown.dataApiKeydownHandler) -EventHandler.on(document, Event.CLICK_DATA_API, Dropdown.clearMenus) -EventHandler.on(document, Event.KEYUP_DATA_API, Dropdown.clearMenus) -EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { +EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler) +EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler) +EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus) +EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus) +EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { event.preventDefault() event.stopPropagation() Dropdown.dropdownInterface(this, 'toggle') }) EventHandler - .on(document, Event.CLICK_DATA_API, Selector.FORM_CHILD, e => e.stopPropagation()) + .on(document, EVENT_CLICK_DATA_API, SELECTOR_FORM_CHILD, e => e.stopPropagation()) const $ = getjQuery() |
