rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Switch to strings constants.

Browse Source 
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 %)
This commit is contained in:
XhmikosR 2020-03-07 11:31:42 +02:00
parent cece839fc9
commit 38333feda5
11 changed files with 472 additions and 546 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
js/src/alert.js
View File

@ -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()

68
js/src/button.js
View File

@ -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)
}
})

172
js/src/carousel.js
View File

@ -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 DIRECTION_NEXT = 'next'
const DIRECTION_PREV = 'prev'
const DIRECTION_LEFT = 'left'
const DIRECTION_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 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 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 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',
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 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))
}

98
js/src/collapse.js
View File

@ -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()

156
js/src/dropdown.js
View File

@ -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 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 ClassName = {
DISABLED: 'disabled',
SHOW: 'show',
DROPUP: 'dropup',
DROPRIGHT: 'dropright',
DROPLEFT: 'dropleft',
MENURIGHT: 'dropdown-menu-right',
NAVBAR: 'navbar',
POSITION_STATIC: 'position-static'
}
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"]',
FORM_CHILD: '.dropdown form',
MENU: '.dropdown-menu',
NAVBAR_NAV: '.navbar-nav',
VISIBLE_ITEMS: '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
}
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 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 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()

152
js/src/modal.js
View File

@ -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 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 ClassName = {
SCROLLABLE: 'modal-dialog-scrollable',
SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
BACKDROP: 'modal-backdrop',
OPEN: 'modal-open',
FADE: 'fade',
SHOW: 'show',
STATIC: 'modal-static'
}
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',
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 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()
}

24
js/src/popover.js
View File

@ -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) {

82
js/src/scrollspy.js
View File

@ -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)))
})

86
js/src/tab.js
View File

@ -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 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 ClassName = {
DROPDOWN_MENU: 'dropdown-menu',
ACTIVE: 'active',
DISABLED: 'disabled',
FADE: 'fade',
SHOW: 'show'
}
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',
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 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)

60
js/src/toast.js
View File

@ -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()
)
}

88
js/src/tooltip.js
View File

@ -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()