Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/bootstrap.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorXhmikosR <xhmikosr@gmail.com>2020-03-07 12:31:42 +0300
committerXhmikosR <xhmikosr@gmail.com>2020-03-18 13:58:54 +0300
commit38333feda548fa973e034de03d34429a1f214089 (patch)
tree5626c4eb68f38bc03a4b26498d110ac150a24d2d /js
parentcece839fc98caa12e73715a2351845580f74c51b (diff)
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')
-rw-r--r--js/src/alert.js32
-rw-r--r--js/src/button.js68
-rw-r--r--js/src/carousel.js178
-rw-r--r--js/src/collapse.js98
-rw-r--r--js/src/dropdown.js162
-rw-r--r--js/src/modal.js156
-rw-r--r--js/src/popover.js24
-rw-r--r--js/src/scrollspy.js82
-rw-r--r--js/src/tab.js90
-rw-r--r--js/src/toast.js60
-rw-r--r--js/src/tooltip.js88
11 files changed, 482 insertions, 556 deletions
diff --git a/js/src/alert.js b/js/src/alert.js
index dbd931b52e..6de3fa7f87 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -28,21 +28,15 @@ const DATA_KEY = 'bs.alert'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
-const Selector = {
- DISMISS: '[data-dismiss="alert"]'
-}
+const SELECTOR_DISMISS = '[data-dismiss="alert"]'
-const Event = {
- CLOSE: `close${EVENT_KEY}`,
- CLOSED: `closed${EVENT_KEY}`,
- CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
-}
+const EVENT_CLOSE = `close${EVENT_KEY}`
+const EVENT_CLOSED = `closed${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
-const ClassName = {
- ALERT: 'alert',
- FADE: 'fade',
- SHOW: 'show'
-}
+const CLASSNAME_ALERT = 'alert'
+const CLASSNAME_FADE = 'fade'
+const CLASSNAME_SHOW = 'show'
/**
* ------------------------------------------------------------------------
@@ -93,20 +87,20 @@ class Alert {
let parent = getElementFromSelector(element)
if (!parent) {
- parent = SelectorEngine.closest(element, `.${ClassName.ALERT}`)
+ parent = SelectorEngine.closest(element, `.${CLASSNAME_ALERT}`)
}
return parent
}
_triggerCloseEvent(element) {
- return EventHandler.trigger(element, Event.CLOSE)
+ return EventHandler.trigger(element, EVENT_CLOSE)
}
_removeElement(element) {
- element.classList.remove(ClassName.SHOW)
+ element.classList.remove(CLASSNAME_SHOW)
- if (!element.classList.contains(ClassName.FADE)) {
+ if (!element.classList.contains(CLASSNAME_FADE)) {
this._destroyElement(element)
return
}
@@ -123,7 +117,7 @@ class Alert {
element.parentNode.removeChild(element)
}
- EventHandler.trigger(element, Event.CLOSED)
+ EventHandler.trigger(element, EVENT_CLOSED)
}
// Static
@@ -163,7 +157,7 @@ class Alert {
* ------------------------------------------------------------------------
*/
EventHandler
- .on(document, Event.CLICK_DATA_API, Selector.DISMISS, Alert.handleDismiss(new Alert()))
+ .on(document, EVENT_CLICK_DATA_API, SELECTOR_DISMISS, Alert.handleDismiss(new Alert()))
const $ = getjQuery()
diff --git a/js/src/button.js b/js/src/button.js
index 314d2a22a0..9c68862b21 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -22,26 +22,20 @@ const DATA_KEY = 'bs.button'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
-const ClassName = {
- ACTIVE: 'active',
- BUTTON: 'btn',
- DISABLED: 'disabled',
- FOCUS: 'focus'
-}
+const CLASS_NAME_ACTIVE = 'active'
+const CLASS_NAME_BUTTON = 'btn'
+const CLASS_NAME_DISABLED = 'disabled'
+const CLASS_NAME_FOCUS = 'focus'
-const Selector = {
- DATA_TOGGLE_CARROT: '[data-toggle^="button"]',
- DATA_TOGGLE: '[data-toggle="buttons"]',
- INPUT: 'input:not([type="hidden"])',
- ACTIVE: '.active',
- BUTTON: '.btn'
-}
+const SELECTOR_DATA_TOGGLE_CARROT = '[data-toggle^="button"]'
+const SELECTOR_DATA_TOGGLE = '[data-toggle="buttons"]'
+const SELECTOR_INPUT = 'input:not([type="hidden"])'
+const SELECTOR_ACTIVE = '.active'
+const SELECTOR_BUTTON = '.btn'
-const Event = {
- CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`,
- FOCUS_DATA_API: `focus${EVENT_KEY}${DATA_API_KEY}`,
- BLUR_DATA_API: `blur${EVENT_KEY}${DATA_API_KEY}`
-}
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_FOCUS_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_BLUR_DATA_API = `blur${EVENT_KEY}${DATA_API_KEY}`
/**
* ------------------------------------------------------------------------
@@ -69,33 +63,33 @@ class Button {
const rootElement = SelectorEngine.closest(
this._element,
- Selector.DATA_TOGGLE
+ SELECTOR_DATA_TOGGLE
)
if (rootElement) {
- const input = SelectorEngine.findOne(Selector.INPUT, this._element)
+ const input = SelectorEngine.findOne(SELECTOR_INPUT, this._element)
if (input && input.type === 'radio') {
if (input.checked &&
- this._element.classList.contains(ClassName.ACTIVE)) {
+ this._element.classList.contains(CLASS_NAME_ACTIVE)) {
triggerChangeEvent = false
} else {
- const activeElement = SelectorEngine.findOne(Selector.ACTIVE, rootElement)
+ const activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE, rootElement)
if (activeElement) {
- activeElement.classList.remove(ClassName.ACTIVE)
+ activeElement.classList.remove(CLASS_NAME_ACTIVE)
}
}
if (triggerChangeEvent) {
if (input.hasAttribute('disabled') ||
rootElement.hasAttribute('disabled') ||
- input.classList.contains(ClassName.DISABLED) ||
- rootElement.classList.contains(ClassName.DISABLED)) {
+ input.classList.contains(CLASS_NAME_DISABLED) ||
+ rootElement.classList.contains(CLASS_NAME_DISABLED)) {
return
}
- input.checked = !this._element.classList.contains(ClassName.ACTIVE)
+ input.checked = !this._element.classList.contains(CLASS_NAME_ACTIVE)
EventHandler.trigger(input, 'change')
}
@@ -106,11 +100,11 @@ class Button {
if (addAriaPressed) {
this._element.setAttribute('aria-pressed',
- !this._element.classList.contains(ClassName.ACTIVE))
+ !this._element.classList.contains(CLASS_NAME_ACTIVE))
}
if (triggerChangeEvent) {
- this._element.classList.toggle(ClassName.ACTIVE)
+ this._element.classList.toggle(CLASS_NAME_ACTIVE)
}
}
@@ -146,12 +140,12 @@ class Button {
* ------------------------------------------------------------------------
*/
-EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, event => {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
event.preventDefault()
let button = event.target
- if (!button.classList.contains(ClassName.BUTTON)) {
- button = SelectorEngine.closest(button, Selector.BUTTON)
+ if (!button.classList.contains(CLASS_NAME_BUTTON)) {
+ button = SelectorEngine.closest(button, SELECTOR_BUTTON)
}
let data = Data.getData(button, DATA_KEY)
@@ -162,19 +156,19 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, eve
data.toggle()
})
-EventHandler.on(document, Event.FOCUS_DATA_API, Selector.DATA_TOGGLE_CARROT, event => {
- const button = SelectorEngine.closest(event.target, Selector.BUTTON)
+EventHandler.on(document, EVENT_FOCUS_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
+ const button = SelectorEngine.closest(event.target, SELECTOR_BUTTON)
if (button) {
- button.classList.add(ClassName.FOCUS)
+ button.classList.add(CLASS_NAME_FOCUS)
}
})
-EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, event => {
- const button = SelectorEngine.closest(event.target, Selector.BUTTON)
+EventHandler.on(document, EVENT_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, event => {
+ const button = SelectorEngine.closest(event.target, SELECTOR_BUTTON)
if (button) {
- button.classList.remove(ClassName.FOCUS)
+ button.classList.remove(CLASS_NAME_FOCUS)
}
})
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 5034f17984..7230d5aaf7 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -33,6 +33,7 @@ const VERSION = '4.3.1'
const DATA_KEY = 'bs.carousel'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
+
const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key
const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key
const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch
@@ -56,51 +57,42 @@ const DefaultType = {
touch: 'boolean'
}
-const Direction = {
- NEXT: 'next',
- PREV: 'prev',
- LEFT: 'left',
- RIGHT: 'right'
-}
-
-const Event = {
- SLIDE: `slide${EVENT_KEY}`,
- SLID: `slid${EVENT_KEY}`,
- KEYDOWN: `keydown${EVENT_KEY}`,
- MOUSEENTER: `mouseenter${EVENT_KEY}`,
- MOUSELEAVE: `mouseleave${EVENT_KEY}`,
- TOUCHSTART: `touchstart${EVENT_KEY}`,
- TOUCHMOVE: `touchmove${EVENT_KEY}`,
- TOUCHEND: `touchend${EVENT_KEY}`,
- POINTERDOWN: `pointerdown${EVENT_KEY}`,
- POINTERUP: `pointerup${EVENT_KEY}`,
- DRAG_START: `dragstart${EVENT_KEY}`,
- LOAD_DATA_API: `load${EVENT_KEY}${DATA_API_KEY}`,
- CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
-}
-
-const ClassName = {
- CAROUSEL: 'carousel',
- ACTIVE: 'active',
- SLIDE: 'slide',
- RIGHT: 'carousel-item-right',
- LEFT: 'carousel-item-left',
- NEXT: 'carousel-item-next',
- PREV: 'carousel-item-prev',
- ITEM: 'carousel-item',
- POINTER_EVENT: 'pointer-event'
-}
-
-const Selector = {
- ACTIVE: '.active',
- ACTIVE_ITEM: '.active.carousel-item',
- ITEM: '.carousel-item',
- ITEM_IMG: '.carousel-item img',
- NEXT_PREV: '.carousel-item-next, .carousel-item-prev',
- INDICATORS: '.carousel-indicators',
- DATA_SLIDE: '[data-slide], [data-slide-to]',
- DATA_RIDE: '[data-ride="carousel"]'
-}
+const DIRECTION_NEXT = 'next'
+const DIRECTION_PREV = 'prev'
+const DIRECTION_LEFT = 'left'
+const DIRECTION_RIGHT = 'right'
+
+const EVENT_SLIDE = `slide${EVENT_KEY}`
+const EVENT_SLID = `slid${EVENT_KEY}`
+const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
+const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`
+const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`
+const EVENT_TOUCHSTART = `touchstart${EVENT_KEY}`
+const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY}`
+const EVENT_TOUCHEND = `touchend${EVENT_KEY}`
+const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY}`
+const EVENT_POINTERUP = `pointerup${EVENT_KEY}`
+const EVENT_DRAG_START = `dragstart${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_CAROUSEL = 'carousel'
+const CLASS_NAME_ACTIVE = 'active'
+const CLASS_NAME_SLIDE = 'slide'
+const CLASS_NAME_RIGHT = 'carousel-item-right'
+const CLASS_NAME_LEFT = 'carousel-item-left'
+const CLASS_NAME_NEXT = 'carousel-item-next'
+const CLASS_NAME_PREV = 'carousel-item-prev'
+const CLASS_NAME_POINTER_EVENT = 'pointer-event'
+
+const SELECTOR_ACTIVE = '.active'
+const SELECTOR_ACTIVE_ITEM = '.active.carousel-item'
+const SELECTOR_ITEM = '.carousel-item'
+const SELECTOR_ITEM_IMG = '.carousel-item img'
+const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev'
+const SELECTOR_INDICATORS = '.carousel-indicators'
+const SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]'
+const SELECTOR_DATA_RIDE = '[data-ride="carousel"]'
const PointerType = {
TOUCH: 'touch',
@@ -125,7 +117,7 @@ class Carousel {
this._config = this._getConfig(config)
this._element = element
- this._indicatorsElement = SelectorEngine.findOne(Selector.INDICATORS, this._element)
+ this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
this._pointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent)
@@ -147,7 +139,7 @@ class Carousel {
next() {
if (!this._isSliding) {
- this._slide(Direction.NEXT)
+ this._slide(DIRECTION_NEXT)
}
}
@@ -161,7 +153,7 @@ class Carousel {
prev() {
if (!this._isSliding) {
- this._slide(Direction.PREV)
+ this._slide(DIRECTION_PREV)
}
}
@@ -170,7 +162,7 @@ class Carousel {
this._isPaused = true
}
- if (SelectorEngine.findOne(Selector.NEXT_PREV, this._element)) {
+ if (SelectorEngine.findOne(SELECTOR_NEXT_PREV, this._element)) {
triggerTransitionEnd(this._element)
this.cycle(true)
}
@@ -198,7 +190,7 @@ class Carousel {
}
to(index) {
- this._activeElement = SelectorEngine.findOne(Selector.ACTIVE_ITEM, this._element)
+ this._activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
const activeIndex = this._getItemIndex(this._activeElement)
if (index > this._items.length - 1 || index < 0) {
@@ -206,7 +198,7 @@ class Carousel {
}
if (this._isSliding) {
- EventHandler.one(this._element, Event.SLID, () => this.to(index))
+ EventHandler.one(this._element, EVENT_SLID, () => this.to(index))
return
}
@@ -217,8 +209,8 @@ class Carousel {
}
const direction = index > activeIndex ?
- Direction.NEXT :
- Direction.PREV
+ DIRECTION_NEXT :
+ DIRECTION_PREV
this._slide(direction, this._items[index])
}
@@ -273,14 +265,14 @@ class Carousel {
_addEventListeners() {
if (this._config.keyboard) {
EventHandler
- .on(this._element, Event.KEYDOWN, event => this._keydown(event))
+ .on(this._element, EVENT_KEYDOWN, event => this._keydown(event))
}
if (this._config.pause === 'hover') {
EventHandler
- .on(this._element, Event.MOUSEENTER, event => this.pause(event))
+ .on(this._element, EVENT_MOUSEENTER, event => this.pause(event))
EventHandler
- .on(this._element, Event.MOUSELEAVE, event => this.cycle(event))
+ .on(this._element, EVENT_MOUSELEAVE, event => this.cycle(event))
}
if (this._config.touch && this._touchSupported) {
@@ -330,19 +322,19 @@ class Carousel {
}
}
- makeArray(SelectorEngine.find(Selector.ITEM_IMG, this._element)).forEach(itemImg => {
- EventHandler.on(itemImg, Event.DRAG_START, e => e.preventDefault())
+ makeArray(SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)).forEach(itemImg => {
+ EventHandler.on(itemImg, EVENT_DRAG_START, e => e.preventDefault())
})
if (this._pointerEvent) {
- EventHandler.on(this._element, Event.POINTERDOWN, event => start(event))
- EventHandler.on(this._element, Event.POINTERUP, event => end(event))
+ EventHandler.on(this._element, EVENT_POINTERDOWN, event => start(event))
+ EventHandler.on(this._element, EVENT_POINTERUP, event => end(event))
- this._element.classList.add(ClassName.POINTER_EVENT)
+ this._element.classList.add(CLASS_NAME_POINTER_EVENT)
} else {
- EventHandler.on(this._element, Event.TOUCHSTART, event => start(event))
- EventHandler.on(this._element, Event.TOUCHMOVE, event => move(event))
- EventHandler.on(this._element, Event.TOUCHEND, event => end(event))
+ EventHandler.on(this._element, EVENT_TOUCHSTART, event => start(event))
+ EventHandler.on(this._element, EVENT_TOUCHMOVE, event => move(event))
+ EventHandler.on(this._element, EVENT_TOUCHEND, event => end(event))
}
}
@@ -366,15 +358,15 @@ class Carousel {
_getItemIndex(element) {
this._items = element && element.parentNode ?
- makeArray(SelectorEngine.find(Selector.ITEM, element.parentNode)) :
+ makeArray(SelectorEngine.find(SELECTOR_ITEM, element.parentNode)) :
[]
return this._items.indexOf(element)
}
_getItemByDirection(direction, activeElement) {
- const isNextDirection = direction === Direction.NEXT
- const isPrevDirection = direction === Direction.PREV
+ const isNextDirection = direction === DIRECTION_NEXT
+ const isPrevDirection = direction === DIRECTION_PREV
const activeIndex = this._getItemIndex(activeElement)
const lastItemIndex = this._items.length - 1
const isGoingToWrap = (isPrevDirection && activeIndex === 0) ||
@@ -384,7 +376,7 @@ class Carousel {
return activeElement
}
- const delta = direction === Direction.PREV ? -1 : 1
+ const delta = direction === DIRECTION_PREV ? -1 : 1
const itemIndex = (activeIndex + delta) % this._items.length
return itemIndex === -1 ?
@@ -394,9 +386,9 @@ class Carousel {
_triggerSlideEvent(relatedTarget, eventDirectionName) {
const targetIndex = this._getItemIndex(relatedTarget)
- const fromIndex = this._getItemIndex(SelectorEngine.findOne(Selector.ACTIVE_ITEM, this._element))
+ const fromIndex = this._getItemIndex(SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element))
- return EventHandler.trigger(this._element, Event.SLIDE, {
+ return EventHandler.trigger(this._element, EVENT_SLIDE, {
relatedTarget,
direction: eventDirectionName,
from: fromIndex,
@@ -406,9 +398,9 @@ class Carousel {
_setActiveIndicatorElement(element) {
if (this._indicatorsElement) {
- const indicators = SelectorEngine.find(Selector.ACTIVE, this._indicatorsElement)
+ const indicators = SelectorEngine.find(SELECTOR_ACTIVE, this._indicatorsElement)
for (let i = 0; i < indicators.length; i++) {
- indicators[i].classList.remove(ClassName.ACTIVE)
+ indicators[i].classList.remove(CLASS_NAME_ACTIVE)
}
const nextIndicator = this._indicatorsElement.children[
@@ -416,13 +408,13 @@ class Carousel {
]
if (nextIndicator) {
- nextIndicator.classList.add(ClassName.ACTIVE)
+ nextIndicator.classList.add(CLASS_NAME_ACTIVE)
}
}
}
_slide(direction, element) {
- const activeElement = SelectorEngine.findOne(Selector.ACTIVE_ITEM, this._element)
+ const activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
const activeElementIndex = this._getItemIndex(activeElement)
const nextElement = element || (activeElement &&
this._getItemByDirection(direction, activeElement))
@@ -434,17 +426,17 @@ class Carousel {
let orderClassName
let eventDirectionName
- if (direction === Direction.NEXT) {
- directionalClassName = ClassName.LEFT
- orderClassName = ClassName.NEXT
- eventDirectionName = Direction.LEFT
+ if (direction === DIRECTION_NEXT) {
+ directionalClassName = CLASS_NAME_LEFT
+ orderClassName = CLASS_NAME_NEXT
+ eventDirectionName = DIRECTION_LEFT
} else {
- directionalClassName = ClassName.RIGHT
- orderClassName = ClassName.PREV
- eventDirectionName = Direction.RIGHT
+ directionalClassName = CLASS_NAME_RIGHT
+ orderClassName = CLASS_NAME_PREV
+ eventDirectionName = DIRECTION_RIGHT
}
- if (nextElement && nextElement.classList.contains(ClassName.ACTIVE)) {
+ if (nextElement && nextElement.classList.contains(CLASS_NAME_ACTIVE)) {
this._isSliding = false
return
}
@@ -467,7 +459,7 @@ class Carousel {
this._setActiveIndicatorElement(nextElement)
- if (this._element.classList.contains(ClassName.SLIDE)) {
+ if (this._element.classList.contains(CLASS_NAME_SLIDE)) {
nextElement.classList.add(orderClassName)
reflow(nextElement)
@@ -489,16 +481,16 @@ class Carousel {
.one(activeElement, TRANSITION_END, () => {
nextElement.classList.remove(directionalClassName)
nextElement.classList.remove(orderClassName)
- nextElement.classList.add(ClassName.ACTIVE)
+ nextElement.classList.add(CLASS_NAME_ACTIVE)
- activeElement.classList.remove(ClassName.ACTIVE)
+ activeElement.classList.remove(CLASS_NAME_ACTIVE)
activeElement.classList.remove(orderClassName)
activeElement.classList.remove(directionalClassName)
this._isSliding = false
setTimeout(() => {
- EventHandler.trigger(this._element, Event.SLID, {
+ EventHandler.trigger(this._element, EVENT_SLID, {
relatedTarget: nextElement,
direction: eventDirectionName,
from: activeElementIndex,
@@ -509,11 +501,11 @@ class Carousel {
emulateTransitionEnd(activeElement, transitionDuration)
} else {
- activeElement.classList.remove(ClassName.ACTIVE)
- nextElement.classList.add(ClassName.ACTIVE)
+ activeElement.classList.remove(CLASS_NAME_ACTIVE)
+ nextElement.classList.add(CLASS_NAME_ACTIVE)
this._isSliding = false
- EventHandler.trigger(this._element, Event.SLID, {
+ EventHandler.trigger(this._element, EVENT_SLID, {
relatedTarget: nextElement,
direction: eventDirectionName,
from: activeElementIndex,
@@ -571,7 +563,7 @@ class Carousel {
static dataApiClickHandler(event) {
const target = getElementFromSelector(this)
- if (!target || !target.classList.contains(ClassName.CAROUSEL)) {
+ if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) {
return
}
@@ -606,10 +598,10 @@ class Carousel {
*/
EventHandler
- .on(document, Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel.dataApiClickHandler)
+ .on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler)
-EventHandler.on(window, Event.LOAD_DATA_API, () => {
- const carousels = makeArray(SelectorEngine.find(Selector.DATA_RIDE))
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+ const carousels = makeArray(SelectorEngine.find(SELECTOR_DATA_RIDE))
for (let i = 0, len = carousels.length; i < len; i++) {
Carousel.carouselInterface(carousels[i], Data.getData(carousels[i], DATA_KEY))
}
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 27eef4ef72..3b78c5cdb3 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -44,30 +44,22 @@ const DefaultType = {
parent: '(string|element)'
}
-const Event = {
- SHOW: `show${EVENT_KEY}`,
- SHOWN: `shown${EVENT_KEY}`,
- HIDE: `hide${EVENT_KEY}`,
- HIDDEN: `hidden${EVENT_KEY}`,
- CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
-}
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
-const ClassName = {
- SHOW: 'show',
- COLLAPSE: 'collapse',
- COLLAPSING: 'collapsing',
- COLLAPSED: 'collapsed'
-}
+const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_COLLAPSE = 'collapse'
+const CLASS_NAME_COLLAPSING = 'collapsing'
+const CLASS_NAME_COLLAPSED = 'collapsed'
-const Dimension = {
- WIDTH: 'width',
- HEIGHT: 'height'
-}
+const WIDTH = 'width'
+const HEIGHT = 'height'
-const Selector = {
- ACTIVES: '.show, .collapsing',
- DATA_TOGGLE: '[data-toggle="collapse"]'
-}
+const SELECTOR_ACTIVES = '.show, .collapsing'
+const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]'
/**
* ------------------------------------------------------------------------
@@ -81,11 +73,11 @@ class Collapse {
this._element = element
this._config = this._getConfig(config)
this._triggerArray = makeArray(SelectorEngine.find(
- `${Selector.DATA_TOGGLE}[href="#${element.id}"],` +
- `${Selector.DATA_TOGGLE}[data-target="#${element.id}"]`
+ `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
+ `${SELECTOR_DATA_TOGGLE}[data-target="#${element.id}"]`
))
- const toggleList = makeArray(SelectorEngine.find(Selector.DATA_TOGGLE))
+ const toggleList = makeArray(SelectorEngine.find(SELECTOR_DATA_TOGGLE))
for (let i = 0, len = toggleList.length; i < len; i++) {
const elem = toggleList[i]
const selector = getSelectorFromElement(elem)
@@ -124,7 +116,7 @@ class Collapse {
// Public
toggle() {
- if (this._element.classList.contains(ClassName.SHOW)) {
+ if (this._element.classList.contains(CLASS_NAME_SHOW)) {
this.hide()
} else {
this.show()
@@ -133,7 +125,7 @@ class Collapse {
show() {
if (this._isTransitioning ||
- this._element.classList.contains(ClassName.SHOW)) {
+ this._element.classList.contains(CLASS_NAME_SHOW)) {
return
}
@@ -141,13 +133,13 @@ class Collapse {
let activesData
if (this._parent) {
- actives = makeArray(SelectorEngine.find(Selector.ACTIVES, this._parent))
+ actives = makeArray(SelectorEngine.find(SELECTOR_ACTIVES, this._parent))
.filter(elem => {
if (typeof this._config.parent === 'string') {
return elem.getAttribute('data-parent') === this._config.parent
}
- return elem.classList.contains(ClassName.COLLAPSE)
+ return elem.classList.contains(CLASS_NAME_COLLAPSE)
})
if (actives.length === 0) {
@@ -165,7 +157,7 @@ class Collapse {
}
}
- const startEvent = EventHandler.trigger(this._element, Event.SHOW)
+ const startEvent = EventHandler.trigger(this._element, EVENT_SHOW)
if (startEvent.defaultPrevented) {
return
}
@@ -184,14 +176,14 @@ class Collapse {
const dimension = this._getDimension()
- this._element.classList.remove(ClassName.COLLAPSE)
- this._element.classList.add(ClassName.COLLAPSING)
+ this._element.classList.remove(CLASS_NAME_COLLAPSE)
+ this._element.classList.add(CLASS_NAME_COLLAPSING)
this._element.style[dimension] = 0
if (this._triggerArray.length) {
this._triggerArray.forEach(element => {
- element.classList.remove(ClassName.COLLAPSED)
+ element.classList.remove(CLASS_NAME_COLLAPSED)
element.setAttribute('aria-expanded', true)
})
}
@@ -199,15 +191,15 @@ class Collapse {
this.setTransitioning(true)
const complete = () => {
- this._element.classList.remove(ClassName.COLLAPSING)
- this._element.classList.add(ClassName.COLLAPSE)
- this._element.classList.add(ClassName.SHOW)
+ this._element.classList.remove(CLASS_NAME_COLLAPSING)
+ this._element.classList.add(CLASS_NAME_COLLAPSE)
+ this._element.classList.add(CLASS_NAME_SHOW)
this._element.style[dimension] = ''
this.setTransitioning(false)
- EventHandler.trigger(this._element, Event.SHOWN)
+ EventHandler.trigger(this._element, EVENT_SHOWN)
}
const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
@@ -222,11 +214,11 @@ class Collapse {
hide() {
if (this._isTransitioning ||
- !this._element.classList.contains(ClassName.SHOW)) {
+ !this._element.classList.contains(CLASS_NAME_SHOW)) {
return
}
- const startEvent = EventHandler.trigger(this._element, Event.HIDE)
+ const startEvent = EventHandler.trigger(this._element, EVENT_HIDE)
if (startEvent.defaultPrevented) {
return
}
@@ -237,9 +229,9 @@ class Collapse {
reflow(this._element)
- this._element.classList.add(ClassName.COLLAPSING)
- this._element.classList.remove(ClassName.COLLAPSE)
- this._element.classList.remove(ClassName.SHOW)
+ this._element.classList.add(CLASS_NAME_COLLAPSING)
+ this._element.classList.remove(CLASS_NAME_COLLAPSE)
+ this._element.classList.remove(CLASS_NAME_SHOW)
const triggerArrayLength = this._triggerArray.length
if (triggerArrayLength > 0) {
@@ -247,8 +239,8 @@ class Collapse {
const trigger = this._triggerArray[i]
const elem = getElementFromSelector(trigger)
- if (elem && !elem.classList.contains(ClassName.SHOW)) {
- trigger.classList.add(ClassName.COLLAPSED)
+ if (elem && !elem.classList.contains(CLASS_NAME_SHOW)) {
+ trigger.classList.add(CLASS_NAME_COLLAPSED)
trigger.setAttribute('aria-expanded', false)
}
}
@@ -258,9 +250,9 @@ class Collapse {
const complete = () => {
this.setTransitioning(false)
- this._element.classList.remove(ClassName.COLLAPSING)
- this._element.classList.add(ClassName.COLLAPSE)
- EventHandler.trigger(this._element, Event.HIDDEN)
+ this._element.classList.remove(CLASS_NAME_COLLAPSING)
+ this._element.classList.add(CLASS_NAME_COLLAPSE)
+ EventHandler.trigger(this._element, EVENT_HIDDEN)
}
this._element.style[dimension] = ''
@@ -297,8 +289,8 @@ class Collapse {
}
_getDimension() {
- const hasWidth = this._element.classList.contains(Dimension.WIDTH)
- return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT
+ const hasWidth = this._element.classList.contains(WIDTH)
+ return hasWidth ? WIDTH : HEIGHT
}
_getParent() {
@@ -313,7 +305,7 @@ class Collapse {
parent = SelectorEngine.findOne(parent)
}
- const selector = `${Selector.DATA_TOGGLE}[data-parent="${parent}"]`
+ const selector = `${SELECTOR_DATA_TOGGLE}[data-parent="${parent}"]`
makeArray(SelectorEngine.find(selector, parent))
.forEach(element => {
@@ -330,14 +322,14 @@ class Collapse {
_addAriaAndCollapsedClass(element, triggerArray) {
if (element) {
- const isOpen = element.classList.contains(ClassName.SHOW)
+ const isOpen = element.classList.contains(CLASS_NAME_SHOW)
if (triggerArray.length) {
triggerArray.forEach(elem => {
if (isOpen) {
- elem.classList.remove(ClassName.COLLAPSED)
+ elem.classList.remove(CLASS_NAME_COLLAPSED)
} else {
- elem.classList.add(ClassName.COLLAPSED)
+ elem.classList.add(CLASS_NAME_COLLAPSED)
}
elem.setAttribute('aria-expanded', isOpen)
@@ -390,7 +382,7 @@ class Collapse {
* ------------------------------------------------------------------------
*/
-EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
if (event.target.tagName === 'A') {
event.preventDefault()
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 82a24405aa..9d6f8a3296 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()
diff --git a/js/src/modal.js b/js/src/modal.js
index 48ff5b8540..bcf13454fe 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -48,39 +48,33 @@ const DefaultType = {
show: 'boolean'
}
-const Event = {
- HIDE: `hide${EVENT_KEY}`,
- HIDE_PREVENTED: `hidePrevented${EVENT_KEY}`,
- HIDDEN: `hidden${EVENT_KEY}`,
- SHOW: `show${EVENT_KEY}`,
- SHOWN: `shown${EVENT_KEY}`,
- FOCUSIN: `focusin${EVENT_KEY}`,
- RESIZE: `resize${EVENT_KEY}`,
- CLICK_DISMISS: `click.dismiss${EVENT_KEY}`,
- KEYDOWN_DISMISS: `keydown.dismiss${EVENT_KEY}`,
- MOUSEUP_DISMISS: `mouseup.dismiss${EVENT_KEY}`,
- MOUSEDOWN_DISMISS: `mousedown.dismiss${EVENT_KEY}`,
- CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
-}
-
-const ClassName = {
- SCROLLABLE: 'modal-dialog-scrollable',
- SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
- BACKDROP: 'modal-backdrop',
- OPEN: 'modal-open',
- FADE: 'fade',
- SHOW: 'show',
- STATIC: 'modal-static'
-}
-
-const Selector = {
- DIALOG: '.modal-dialog',
- MODAL_BODY: '.modal-body',
- DATA_TOGGLE: '[data-toggle="modal"]',
- DATA_DISMISS: '[data-dismiss="modal"]',
- FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
- STICKY_CONTENT: '.sticky-top'
-}
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
+const EVENT_RESIZE = `resize${EVENT_KEY}`
+const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
+const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
+const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`
+const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_SCROLLABLE = 'modal-dialog-scrollable'
+const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure'
+const CLASS_NAME_BACKDROP = 'modal-backdrop'
+const CLASS_NAME_OPEN = 'modal-open'
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_STATIC = 'modal-static'
+
+const SELECTOR_DIALOG = '.modal-dialog'
+const SELECTOR_MODAL_BODY = '.modal-body'
+const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]'
+const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]'
+const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
+const SELECTOR_STICKY_CONTENT = '.sticky-top'
/**
* ------------------------------------------------------------------------
@@ -92,7 +86,7 @@ class Modal {
constructor(element, config) {
this._config = this._getConfig(config)
this._element = element
- this._dialog = SelectorEngine.findOne(Selector.DIALOG, element)
+ this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, element)
this._backdrop = null
this._isShown = false
this._isBodyOverflowing = false
@@ -123,11 +117,11 @@ class Modal {
return
}
- if (this._element.classList.contains(ClassName.FADE)) {
+ if (this._element.classList.contains(CLASS_NAME_FADE)) {
this._isTransitioning = true
}
- const showEvent = EventHandler.trigger(this._element, Event.SHOW, {
+ const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
relatedTarget
})
@@ -146,13 +140,13 @@ class Modal {
this._setResizeEvent()
EventHandler.on(this._element,
- Event.CLICK_DISMISS,
- Selector.DATA_DISMISS,
+ EVENT_CLICK_DISMISS,
+ SELECTOR_DATA_DISMISS,
event => this.hide(event)
)
- EventHandler.on(this._dialog, Event.MOUSEDOWN_DISMISS, () => {
- EventHandler.one(this._element, Event.MOUSEUP_DISMISS, event => {
+ EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
+ EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, event => {
if (event.target === this._element) {
this._ignoreBackdropClick = true
}
@@ -171,14 +165,14 @@ class Modal {
return
}
- const hideEvent = EventHandler.trigger(this._element, Event.HIDE)
+ const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
if (hideEvent.defaultPrevented) {
return
}
this._isShown = false
- const transition = this._element.classList.contains(ClassName.FADE)
+ const transition = this._element.classList.contains(CLASS_NAME_FADE)
if (transition) {
this._isTransitioning = true
@@ -187,12 +181,12 @@ class Modal {
this._setEscapeEvent()
this._setResizeEvent()
- EventHandler.off(document, Event.FOCUSIN)
+ EventHandler.off(document, EVENT_FOCUSIN)
- this._element.classList.remove(ClassName.SHOW)
+ this._element.classList.remove(CLASS_NAME_SHOW)
- EventHandler.off(this._element, Event.CLICK_DISMISS)
- EventHandler.off(this._dialog, Event.MOUSEDOWN_DISMISS)
+ EventHandler.off(this._element, EVENT_CLICK_DISMISS)
+ EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS)
if (transition) {
const transitionDuration = getTransitionDurationFromElement(this._element)
@@ -209,11 +203,11 @@ class Modal {
.forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY))
/**
- * `document` has 2 events `Event.FOCUSIN` and `Event.CLICK_DATA_API`
+ * `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
* Do not move `document` in `htmlElements` array
- * It will remove `Event.CLICK_DATA_API` event that should remain
+ * It will remove `EVENT_CLICK_DATA_API` event that should remain
*/
- EventHandler.off(document, Event.FOCUSIN)
+ EventHandler.off(document, EVENT_FOCUSIN)
Data.removeData(this._element, DATA_KEY)
@@ -244,8 +238,8 @@ class Modal {
}
_showElement(relatedTarget) {
- const transition = this._element.classList.contains(ClassName.FADE)
- const modalBody = SelectorEngine.findOne(Selector.MODAL_BODY, this._dialog)
+ const transition = this._element.classList.contains(CLASS_NAME_FADE)
+ const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
if (!this._element.parentNode ||
this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
@@ -257,7 +251,7 @@ class Modal {
this._element.removeAttribute('aria-hidden')
this._element.setAttribute('aria-modal', true)
- if (this._dialog.classList.contains(ClassName.SCROLLABLE) && modalBody) {
+ if (this._dialog.classList.contains(CLASS_NAME_SCROLLABLE) && modalBody) {
modalBody.scrollTop = 0
} else {
this._element.scrollTop = 0
@@ -267,7 +261,7 @@ class Modal {
reflow(this._element)
}
- this._element.classList.add(ClassName.SHOW)
+ this._element.classList.add(CLASS_NAME_SHOW)
if (this._config.focus) {
this._enforceFocus()
@@ -279,7 +273,7 @@ class Modal {
}
this._isTransitioning = false
- EventHandler.trigger(this._element, Event.SHOWN, {
+ EventHandler.trigger(this._element, EVENT_SHOWN, {
relatedTarget
})
}
@@ -295,8 +289,8 @@ class Modal {
}
_enforceFocus() {
- EventHandler.off(document, Event.FOCUSIN) // guard against infinite focus loop
- EventHandler.on(document, Event.FOCUSIN, event => {
+ EventHandler.off(document, EVENT_FOCUSIN) // guard against infinite focus loop
+ EventHandler.on(document, EVENT_FOCUSIN, event => {
if (document !== event.target &&
this._element !== event.target &&
!this._element.contains(event.target)) {
@@ -307,7 +301,7 @@ class Modal {
_setEscapeEvent() {
if (this._isShown) {
- EventHandler.on(this._element, Event.KEYDOWN_DISMISS, event => {
+ EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
if (this._config.keyboard && event.which === ESCAPE_KEYCODE) {
event.preventDefault()
this.hide()
@@ -316,15 +310,15 @@ class Modal {
}
})
} else {
- EventHandler.off(this._element, Event.KEYDOWN_DISMISS)
+ EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS)
}
}
_setResizeEvent() {
if (this._isShown) {
- EventHandler.on(window, Event.RESIZE, () => this._adjustDialog())
+ EventHandler.on(window, EVENT_RESIZE, () => this._adjustDialog())
} else {
- EventHandler.off(window, Event.RESIZE)
+ EventHandler.off(window, EVENT_RESIZE)
}
}
@@ -334,10 +328,10 @@ class Modal {
this._element.removeAttribute('aria-modal')
this._isTransitioning = false
this._showBackdrop(() => {
- document.body.classList.remove(ClassName.OPEN)
+ document.body.classList.remove(CLASS_NAME_OPEN)
this._resetAdjustments()
this._resetScrollbar()
- EventHandler.trigger(this._element, Event.HIDDEN)
+ EventHandler.trigger(this._element, EVENT_HIDDEN)
})
}
@@ -347,13 +341,13 @@ class Modal {
}
_showBackdrop(callback) {
- const animate = this._element.classList.contains(ClassName.FADE) ?
- ClassName.FADE :
+ const animate = this._element.classList.contains(CLASS_NAME_FADE) ?
+ CLASS_NAME_FADE :
''
if (this._isShown && this._config.backdrop) {
this._backdrop = document.createElement('div')
- this._backdrop.className = ClassName.BACKDROP
+ this._backdrop.className = CLASS_NAME_BACKDROP
if (animate) {
this._backdrop.classList.add(animate)
@@ -361,7 +355,7 @@ class Modal {
document.body.appendChild(this._backdrop)
- EventHandler.on(this._element, Event.CLICK_DISMISS, event => {
+ EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => {
if (this._ignoreBackdropClick) {
this._ignoreBackdropClick = false
return
@@ -378,7 +372,7 @@ class Modal {
reflow(this._backdrop)
}
- this._backdrop.classList.add(ClassName.SHOW)
+ this._backdrop.classList.add(CLASS_NAME_SHOW)
if (!animate) {
callback()
@@ -390,14 +384,14 @@ class Modal {
EventHandler.one(this._backdrop, TRANSITION_END, callback)
emulateTransitionEnd(this._backdrop, backdropTransitionDuration)
} else if (!this._isShown && this._backdrop) {
- this._backdrop.classList.remove(ClassName.SHOW)
+ this._backdrop.classList.remove(CLASS_NAME_SHOW)
const callbackRemove = () => {
this._removeBackdrop()
callback()
}
- if (this._element.classList.contains(ClassName.FADE)) {
+ if (this._element.classList.contains(CLASS_NAME_FADE)) {
const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop)
EventHandler.one(this._backdrop, TRANSITION_END, callbackRemove)
emulateTransitionEnd(this._backdrop, backdropTransitionDuration)
@@ -411,15 +405,15 @@ class Modal {
_triggerBackdropTransition() {
if (this._config.backdrop === 'static') {
- const hideEvent = EventHandler.trigger(this._element, Event.HIDE_PREVENTED)
+ const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
if (hideEvent.defaultPrevented) {
return
}
- this._element.classList.add(ClassName.STATIC)
+ this._element.classList.add(CLASS_NAME_STATIC)
const modalTransitionDuration = getTransitionDurationFromElement(this._element)
EventHandler.one(this._element, TRANSITION_END, () => {
- this._element.classList.remove(ClassName.STATIC)
+ this._element.classList.remove(CLASS_NAME_STATIC)
})
emulateTransitionEnd(this._element, modalTransitionDuration)
this._element.focus()
@@ -462,7 +456,7 @@ class Modal {
// while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set
// Adjust fixed content padding
- makeArray(SelectorEngine.find(Selector.FIXED_CONTENT))
+ makeArray(SelectorEngine.find(SELECTOR_FIXED_CONTENT))
.forEach(element => {
const actualPadding = element.style.paddingRight
const calculatedPadding = window.getComputedStyle(element)['padding-right']
@@ -471,7 +465,7 @@ class Modal {
})
// Adjust sticky content margin
- makeArray(SelectorEngine.find(Selector.STICKY_CONTENT))
+ makeArray(SelectorEngine.find(SELECTOR_STICKY_CONTENT))
.forEach(element => {
const actualMargin = element.style.marginRight
const calculatedMargin = window.getComputedStyle(element)['margin-right']
@@ -487,12 +481,12 @@ class Modal {
document.body.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`
}
- document.body.classList.add(ClassName.OPEN)
+ document.body.classList.add(CLASS_NAME_OPEN)
}
_resetScrollbar() {
// Restore fixed content padding
- makeArray(SelectorEngine.find(Selector.FIXED_CONTENT))
+ makeArray(SelectorEngine.find(SELECTOR_FIXED_CONTENT))
.forEach(element => {
const padding = Manipulator.getDataAttribute(element, 'padding-right')
if (typeof padding !== 'undefined') {
@@ -502,7 +496,7 @@ class Modal {
})
// Restore sticky content and navbar-toggler margin
- makeArray(SelectorEngine.find(`${Selector.STICKY_CONTENT}`))
+ makeArray(SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`))
.forEach(element => {
const margin = Manipulator.getDataAttribute(element, 'margin-right')
if (typeof margin !== 'undefined') {
@@ -523,7 +517,7 @@ class Modal {
_getScrollbarWidth() { // thx d.walsh
const scrollDiv = document.createElement('div')
- scrollDiv.className = ClassName.SCROLLBAR_MEASURER
+ scrollDiv.className = CLASS_NAME_SCROLLBAR_MEASURER
document.body.appendChild(scrollDiv)
const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth
document.body.removeChild(scrollDiv)
@@ -568,20 +562,20 @@ class Modal {
* ------------------------------------------------------------------------
*/
-EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
const target = getElementFromSelector(this)
if (this.tagName === 'A' || this.tagName === 'AREA') {
event.preventDefault()
}
- EventHandler.one(target, Event.SHOW, showEvent => {
+ EventHandler.one(target, EVENT_SHOW, showEvent => {
if (showEvent.defaultPrevented) {
// only register focus restorer if modal will actually get shown
return
}
- EventHandler.one(target, Event.HIDDEN, () => {
+ EventHandler.one(target, EVENT_HIDDEN, () => {
if (isVisible(this)) {
this.focus()
}
diff --git a/js/src/popover.js b/js/src/popover.js
index d71a78236c..2d423f0dd5 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -39,16 +39,6 @@ const DefaultType = {
content: '(string|element|function)'
}
-const ClassName = {
- FADE: 'fade',
- SHOW: 'show'
-}
-
-const Selector = {
- TITLE: '.popover-header',
- CONTENT: '.popover-body'
-}
-
const Event = {
HIDE: `hide${EVENT_KEY}`,
HIDDEN: `hidden${EVENT_KEY}`,
@@ -62,6 +52,12 @@ const Event = {
MOUSELEAVE: `mouseleave${EVENT_KEY}`
}
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+
+const SELECTOR_TITLE = '.popover-header'
+const SELECTOR_CONTENT = '.popover-body'
+
/**
* ------------------------------------------------------------------------
* Class Definition
@@ -109,16 +105,16 @@ class Popover extends Tooltip {
const tip = this.getTipElement()
// we use append for html objects to maintain js events
- this.setElementContent(SelectorEngine.findOne(Selector.TITLE, tip), this.getTitle())
+ this.setElementContent(SelectorEngine.findOne(SELECTOR_TITLE, tip), this.getTitle())
let content = this._getContent()
if (typeof content === 'function') {
content = content.call(this.element)
}
- this.setElementContent(SelectorEngine.findOne(Selector.CONTENT, tip), content)
+ this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content)
- tip.classList.remove(ClassName.FADE)
- tip.classList.remove(ClassName.SHOW)
+ tip.classList.remove(CLASS_NAME_FADE)
+ tip.classList.remove(CLASS_NAME_SHOW)
}
_addAttachmentClass(attachment) {
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index c379c62235..dd68ed386e 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -41,31 +41,23 @@ const DefaultType = {
target: '(string|element)'
}
-const Event = {
- ACTIVATE: `activate${EVENT_KEY}`,
- SCROLL: `scroll${EVENT_KEY}`,
- LOAD_DATA_API: `load${EVENT_KEY}${DATA_API_KEY}`
-}
+const EVENT_ACTIVATE = `activate${EVENT_KEY}`
+const EVENT_SCROLL = `scroll${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
-const ClassName = {
- DROPDOWN_ITEM: 'dropdown-item',
- ACTIVE: 'active'
-}
+const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
+const CLASS_NAME_ACTIVE = 'active'
-const Selector = {
- DATA_SPY: '[data-spy="scroll"]',
- NAV_LIST_GROUP: '.nav, .list-group',
- NAV_LINKS: '.nav-link',
- NAV_ITEMS: '.nav-item',
- LIST_ITEMS: '.list-group-item',
- DROPDOWN: '.dropdown',
- DROPDOWN_TOGGLE: '.dropdown-toggle'
-}
+const SELECTOR_DATA_SPY = '[data-spy="scroll"]'
+const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
+const SELECTOR_NAV_LINKS = '.nav-link'
+const SELECTOR_NAV_ITEMS = '.nav-item'
+const SELECTOR_LIST_ITEMS = '.list-group-item'
+const SELECTOR_DROPDOWN = '.dropdown'
+const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
-const OffsetMethod = {
- OFFSET: 'offset',
- POSITION: 'position'
-}
+const METHOD_OFFSET = 'offset'
+const METHOD_POSITION = 'position'
/**
* ------------------------------------------------------------------------
@@ -78,15 +70,15 @@ class ScrollSpy {
this._element = element
this._scrollElement = element.tagName === 'BODY' ? window : element
this._config = this._getConfig(config)
- this._selector = `${this._config.target} ${Selector.NAV_LINKS},` +
- `${this._config.target} ${Selector.LIST_ITEMS},` +
- `${this._config.target} .${ClassName.DROPDOWN_ITEM}`
+ this._selector = `${this._config.target} ${SELECTOR_NAV_LINKS},` +
+ `${this._config.target} ${SELECTOR_LIST_ITEMS},` +
+ `${this._config.target} .${CLASS_NAME_DROPDOWN_ITEM}`
this._offsets = []
this._targets = []
this._activeTarget = null
this._scrollHeight = 0
- EventHandler.on(this._scrollElement, Event.SCROLL, event => this._process(event))
+ EventHandler.on(this._scrollElement, EVENT_SCROLL, event => this._process(event))
this.refresh()
this._process()
@@ -108,14 +100,14 @@ class ScrollSpy {
refresh() {
const autoMethod = this._scrollElement === this._scrollElement.window ?
- OffsetMethod.OFFSET :
- OffsetMethod.POSITION
+ METHOD_OFFSET :
+ METHOD_POSITION
const offsetMethod = this._config.method === 'auto' ?
autoMethod :
this._config.method
- const offsetBase = offsetMethod === OffsetMethod.POSITION ?
+ const offsetBase = offsetMethod === METHOD_POSITION ?
this._getScrollTop() :
0
@@ -261,42 +253,42 @@ class ScrollSpy {
const link = SelectorEngine.findOne(queries.join(','))
- if (link.classList.contains(ClassName.DROPDOWN_ITEM)) {
+ if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
SelectorEngine
- .findOne(Selector.DROPDOWN_TOGGLE, SelectorEngine.closest(link, Selector.DROPDOWN))
- .classList.add(ClassName.ACTIVE)
+ .findOne(SELECTOR_DROPDOWN_TOGGLE, SelectorEngine.closest(link, SELECTOR_DROPDOWN))
+ .classList.add(CLASS_NAME_ACTIVE)
- link.classList.add(ClassName.ACTIVE)
+ link.classList.add(CLASS_NAME_ACTIVE)
} else {
// Set triggered link as active
- link.classList.add(ClassName.ACTIVE)
+ link.classList.add(CLASS_NAME_ACTIVE)
SelectorEngine
- .parents(link, Selector.NAV_LIST_GROUP)
+ .parents(link, SELECTOR_NAV_LIST_GROUP)
.forEach(listGroup => {
// Set triggered links parents as active
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
- SelectorEngine.prev(listGroup, `${Selector.NAV_LINKS}, ${Selector.LIST_ITEMS}`)
- .forEach(item => item.classList.add(ClassName.ACTIVE))
+ SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)
+ .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
// Handle special case when .nav-link is inside .nav-item
- SelectorEngine.prev(listGroup, Selector.NAV_ITEMS)
+ SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)
.forEach(navItem => {
- SelectorEngine.children(navItem, Selector.NAV_LINKS)
- .forEach(item => item.classList.add(ClassName.ACTIVE))
+ SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)
+ .forEach(item => item.classList.add(CLASS_NAME_ACTIVE))
})
})
}
- EventHandler.trigger(this._scrollElement, Event.ACTIVATE, {
+ EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
relatedTarget: target
})
}
_clear() {
makeArray(SelectorEngine.find(this._selector))
- .filter(node => node.classList.contains(ClassName.ACTIVE))
- .forEach(node => node.classList.remove(ClassName.ACTIVE))
+ .filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
+ .forEach(node => node.classList.remove(CLASS_NAME_ACTIVE))
}
// Static
@@ -331,8 +323,8 @@ class ScrollSpy {
* ------------------------------------------------------------------------
*/
-EventHandler.on(window, Event.LOAD_DATA_API, () => {
- makeArray(SelectorEngine.find(Selector.DATA_SPY))
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+ makeArray(SelectorEngine.find(SELECTOR_DATA_SPY))
.forEach(spy => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)))
})
diff --git a/js/src/tab.js b/js/src/tab.js
index d9bd1fc050..f7ec299466 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)
diff --git a/js/src/toast.js b/js/src/toast.js
index e0d2a8b3f2..abb0ffd341 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -28,20 +28,16 @@ const VERSION = '4.3.1'
const DATA_KEY = 'bs.toast'
const EVENT_KEY = `.${DATA_KEY}`
-const Event = {
- CLICK_DISMISS: `click.dismiss${EVENT_KEY}`,
- HIDE: `hide${EVENT_KEY}`,
- HIDDEN: `hidden${EVENT_KEY}`,
- SHOW: `show${EVENT_KEY}`,
- SHOWN: `shown${EVENT_KEY}`
-}
+const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
+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 ClassName = {
- FADE: 'fade',
- HIDE: 'hide',
- SHOW: 'show',
- SHOWING: 'showing'
-}
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_HIDE = 'hide'
+const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_SHOWING = 'showing'
const DefaultType = {
animation: 'boolean',
@@ -55,9 +51,7 @@ const Default = {
delay: 500
}
-const Selector = {
- DATA_DISMISS: '[data-dismiss="toast"]'
-}
+const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]'
/**
* ------------------------------------------------------------------------
@@ -91,21 +85,21 @@ class Toast {
// Public
show() {
- const showEvent = EventHandler.trigger(this._element, Event.SHOW)
+ const showEvent = EventHandler.trigger(this._element, EVENT_SHOW)
if (showEvent.defaultPrevented) {
return
}
if (this._config.animation) {
- this._element.classList.add(ClassName.FADE)
+ this._element.classList.add(CLASS_NAME_FADE)
}
const complete = () => {
- this._element.classList.remove(ClassName.SHOWING)
- this._element.classList.add(ClassName.SHOW)
+ this._element.classList.remove(CLASS_NAME_SHOWING)
+ this._element.classList.add(CLASS_NAME_SHOW)
- EventHandler.trigger(this._element, Event.SHOWN)
+ EventHandler.trigger(this._element, EVENT_SHOWN)
if (this._config.autohide) {
this._timeout = setTimeout(() => {
@@ -114,9 +108,9 @@ class Toast {
}
}
- this._element.classList.remove(ClassName.HIDE)
+ this._element.classList.remove(CLASS_NAME_HIDE)
reflow(this._element)
- this._element.classList.add(ClassName.SHOWING)
+ this._element.classList.add(CLASS_NAME_SHOWING)
if (this._config.animation) {
const transitionDuration = getTransitionDurationFromElement(this._element)
@@ -128,22 +122,22 @@ class Toast {
}
hide() {
- if (!this._element.classList.contains(ClassName.SHOW)) {
+ if (!this._element.classList.contains(CLASS_NAME_SHOW)) {
return
}
- const hideEvent = EventHandler.trigger(this._element, Event.HIDE)
+ const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
if (hideEvent.defaultPrevented) {
return
}
const complete = () => {
- this._element.classList.add(ClassName.HIDE)
- EventHandler.trigger(this._element, Event.HIDDEN)
+ this._element.classList.add(CLASS_NAME_HIDE)
+ EventHandler.trigger(this._element, EVENT_HIDDEN)
}
- this._element.classList.remove(ClassName.SHOW)
+ this._element.classList.remove(CLASS_NAME_SHOW)
if (this._config.animation) {
const transitionDuration = getTransitionDurationFromElement(this._element)
@@ -158,11 +152,11 @@ class Toast {
clearTimeout(this._timeout)
this._timeout = null
- if (this._element.classList.contains(ClassName.SHOW)) {
- this._element.classList.remove(ClassName.SHOW)
+ if (this._element.classList.contains(CLASS_NAME_SHOW)) {
+ this._element.classList.remove(CLASS_NAME_SHOW)
}
- EventHandler.off(this._element, Event.CLICK_DISMISS)
+ EventHandler.off(this._element, EVENT_CLICK_DISMISS)
Data.removeData(this._element, DATA_KEY)
this._element = null
@@ -190,8 +184,8 @@ class Toast {
_setListeners() {
EventHandler.on(
this._element,
- Event.CLICK_DISMISS,
- Selector.DATA_DISMISS,
+ EVENT_CLICK_DISMISS,
+ SELECTOR_DATA_DISMISS,
() => this.hide()
)
}
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 9b2ae6f61e..b723b1ba83 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -89,11 +89,6 @@ const Default = {
popperConfig: null
}
-const HoverState = {
- SHOW: 'show',
- OUT: 'out'
-}
-
const Event = {
HIDE: `hide${EVENT_KEY}`,
HIDDEN: `hidden${EVENT_KEY}`,
@@ -107,22 +102,19 @@ const Event = {
MOUSELEAVE: `mouseleave${EVENT_KEY}`
}
-const ClassName = {
- FADE: 'fade',
- MODAL: 'modal',
- SHOW: 'show'
-}
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_MODAL = 'modal'
+const CLASS_NAME_SHOW = 'show'
-const Selector = {
- TOOLTIP_INNER: '.tooltip-inner'
-}
+const HOVER_STATE_SHOW = 'show'
+const HOVER_STATE_OUT = 'out'
-const Trigger = {
- HOVER: 'hover',
- FOCUS: 'focus',
- CLICK: 'click',
- MANUAL: 'manual'
-}
+const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'
+
+const TRIGGER_HOVER = 'hover'
+const TRIGGER_FOCUS = 'focus'
+const TRIGGER_CLICK = 'click'
+const TRIGGER_MANUAL = 'manual'
/**
* ------------------------------------------------------------------------
@@ -221,7 +213,7 @@ class Tooltip {
context._leave(null, context)
}
} else {
- if (this.getTipElement().classList.contains(ClassName.SHOW)) {
+ if (this.getTipElement().classList.contains(CLASS_NAME_SHOW)) {
this._leave(null, this)
return
}
@@ -236,7 +228,7 @@ class Tooltip {
Data.removeData(this.element, this.constructor.DATA_KEY)
EventHandler.off(this.element, this.constructor.EVENT_KEY)
- EventHandler.off(SelectorEngine.closest(this.element, `.${ClassName.MODAL}`), 'hide.bs.modal', this._hideModalHandler)
+ EventHandler.off(SelectorEngine.closest(this.element, `.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
if (this.tip) {
this.tip.parentNode.removeChild(this.tip)
@@ -281,7 +273,7 @@ class Tooltip {
this.setContent()
if (this.config.animation) {
- tip.classList.add(ClassName.FADE)
+ tip.classList.add(CLASS_NAME_FADE)
}
const placement = typeof this.config.placement === 'function' ?
@@ -302,7 +294,7 @@ class Tooltip {
this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
- tip.classList.add(ClassName.SHOW)
+ tip.classList.add(CLASS_NAME_SHOW)
// If this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children;
@@ -324,12 +316,12 @@ class Tooltip {
EventHandler.trigger(this.element, this.constructor.Event.SHOWN)
- if (prevHoverState === HoverState.OUT) {
+ if (prevHoverState === HOVER_STATE_OUT) {
this._leave(null, this)
}
}
- if (this.tip.classList.contains(ClassName.FADE)) {
+ if (this.tip.classList.contains(CLASS_NAME_FADE)) {
const transitionDuration = getTransitionDurationFromElement(this.tip)
EventHandler.one(this.tip, TRANSITION_END, complete)
emulateTransitionEnd(this.tip, transitionDuration)
@@ -342,7 +334,7 @@ class Tooltip {
hide() {
const tip = this.getTipElement()
const complete = () => {
- if (this._hoverState !== HoverState.SHOW && tip.parentNode) {
+ if (this._hoverState !== HOVER_STATE_SHOW && tip.parentNode) {
tip.parentNode.removeChild(tip)
}
@@ -357,7 +349,7 @@ class Tooltip {
return
}
- tip.classList.remove(ClassName.SHOW)
+ tip.classList.remove(CLASS_NAME_SHOW)
// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
@@ -366,11 +358,11 @@ class Tooltip {
.forEach(element => EventHandler.off(element, 'mouseover', noop))
}
- this._activeTrigger[Trigger.CLICK] = false
- this._activeTrigger[Trigger.FOCUS] = false
- this._activeTrigger[Trigger.HOVER] = false
+ this._activeTrigger[TRIGGER_CLICK] = false
+ this._activeTrigger[TRIGGER_FOCUS] = false
+ this._activeTrigger[TRIGGER_HOVER] = false
- if (this.tip.classList.contains(ClassName.FADE)) {
+ if (this.tip.classList.contains(CLASS_NAME_FADE)) {
const transitionDuration = getTransitionDurationFromElement(tip)
EventHandler.one(tip, TRANSITION_END, complete)
@@ -408,9 +400,9 @@ class Tooltip {
setContent() {
const tip = this.getTipElement()
- this.setElementContent(SelectorEngine.findOne(Selector.TOOLTIP_INNER, tip), this.getTitle())
- tip.classList.remove(ClassName.FADE)
- tip.classList.remove(ClassName.SHOW)
+ this.setElementContent(SelectorEngine.findOne(SELECTOR_TOOLTIP_INNER, tip), this.getTitle())
+ tip.classList.remove(CLASS_NAME_FADE)
+ tip.classList.remove(CLASS_NAME_SHOW)
}
setElementContent(element, content) {
@@ -539,11 +531,11 @@ class Tooltip {
this.config.selector,
event => this.toggle(event)
)
- } else if (trigger !== Trigger.MANUAL) {
- const eventIn = trigger === Trigger.HOVER ?
+ } else if (trigger !== TRIGGER_MANUAL) {
+ const eventIn = trigger === TRIGGER_HOVER ?
this.constructor.Event.MOUSEENTER :
this.constructor.Event.FOCUSIN
- const eventOut = trigger === Trigger.HOVER ?
+ const eventOut = trigger === TRIGGER_HOVER ?
this.constructor.Event.MOUSELEAVE :
this.constructor.Event.FOCUSOUT
@@ -566,7 +558,7 @@ class Tooltip {
}
}
- EventHandler.on(SelectorEngine.closest(this.element, `.${ClassName.MODAL}`),
+ EventHandler.on(SelectorEngine.closest(this.element, `.${CLASS_NAME_MODAL}`),
'hide.bs.modal',
this._hideModalHandler
)
@@ -609,19 +601,19 @@ class Tooltip {
if (event) {
context._activeTrigger[
- event.type === 'focusin' ? Trigger.FOCUS : Trigger.HOVER
+ event.type === 'focusin' ? TRIGGER_FOCUS : TRIGGER_HOVER
] = true
}
- if (context.getTipElement().classList.contains(ClassName.SHOW) ||
- context._hoverState === HoverState.SHOW) {
- context._hoverState = HoverState.SHOW
+ if (context.getTipElement().classList.contains(CLASS_NAME_SHOW) ||
+ context._hoverState === HOVER_STATE_SHOW) {
+ context._hoverState = HOVER_STATE_SHOW
return
}
clearTimeout(context._timeout)
- context._hoverState = HoverState.SHOW
+ context._hoverState = HOVER_STATE_SHOW
if (!context.config.delay || !context.config.delay.show) {
context.show()
@@ -629,7 +621,7 @@ class Tooltip {
}
context._timeout = setTimeout(() => {
- if (context._hoverState === HoverState.SHOW) {
+ if (context._hoverState === HOVER_STATE_SHOW) {
context.show()
}
}, context.config.delay.show)
@@ -649,7 +641,7 @@ class Tooltip {
if (event) {
context._activeTrigger[
- event.type === 'focusout' ? Trigger.FOCUS : Trigger.HOVER
+ event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER
] = false
}
@@ -659,7 +651,7 @@ class Tooltip {
clearTimeout(context._timeout)
- context._hoverState = HoverState.OUT
+ context._hoverState = HOVER_STATE_OUT
if (!context.config.delay || !context.config.delay.hide) {
context.hide()
@@ -667,7 +659,7 @@ class Tooltip {
}
context._timeout = setTimeout(() => {
- if (context._hoverState === HoverState.OUT) {
+ if (context._hoverState === HOVER_STATE_OUT) {
context.hide()
}
}, context.config.delay.hide)
@@ -768,7 +760,7 @@ class Tooltip {
return
}
- tip.classList.remove(ClassName.FADE)
+ tip.classList.remove(CLASS_NAME_FADE)
this.config.animation = false
this.hide()
this.show()