real private methods for alert
This commit is contained in:
parent
2be5f03bfc
commit
9f515888cd
4 changed files with 82 additions and 69 deletions
|
|
@ -5,16 +5,11 @@
|
|||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
getTransitionDurationFromElement
|
||||
} from '../util/index'
|
||||
import { getjQuery } from '../util/index'
|
||||
import { getRootElement, removeElement, triggerCloseEvent } from './private'
|
||||
import { DATA_KEY, Event } from './constants'
|
||||
import Data from '../dom/data'
|
||||
import EventHandler from '../dom/event-handler'
|
||||
import SelectorEngine from '../dom/selector-engine'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
|
|
@ -24,26 +19,10 @@ import SelectorEngine from '../dom/selector-engine'
|
|||
|
||||
const NAME = 'alert'
|
||||
const VERSION = '4.3.1'
|
||||
const DATA_KEY = 'bs.alert'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
|
||||
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 ClassName = {
|
||||
ALERT: 'alert',
|
||||
FADE: 'fade',
|
||||
SHOW: 'show'
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
|
|
@ -70,16 +49,16 @@ class Alert {
|
|||
close(element) {
|
||||
let rootElement = this._element
|
||||
if (element) {
|
||||
rootElement = this._getRootElement(element)
|
||||
rootElement = getRootElement(element)
|
||||
}
|
||||
|
||||
const customEvent = this._triggerCloseEvent(rootElement)
|
||||
const customEvent = triggerCloseEvent(rootElement)
|
||||
|
||||
if (customEvent === null || customEvent.defaultPrevented) {
|
||||
return
|
||||
}
|
||||
|
||||
this._removeElement(rootElement)
|
||||
removeElement(rootElement)
|
||||
}
|
||||
|
||||
dispose() {
|
||||
|
|
@ -87,45 +66,6 @@ class Alert {
|
|||
this._element = null
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_getRootElement(element) {
|
||||
let parent = getElementFromSelector(element)
|
||||
|
||||
if (!parent) {
|
||||
parent = SelectorEngine.closest(element, `.${ClassName.ALERT}`)
|
||||
}
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
_triggerCloseEvent(element) {
|
||||
return EventHandler.trigger(element, Event.CLOSE)
|
||||
}
|
||||
|
||||
_removeElement(element) {
|
||||
element.classList.remove(ClassName.SHOW)
|
||||
|
||||
if (!element.classList.contains(ClassName.FADE)) {
|
||||
this._destroyElement(element)
|
||||
return
|
||||
}
|
||||
|
||||
const transitionDuration = getTransitionDurationFromElement(element)
|
||||
|
||||
EventHandler
|
||||
.one(element, TRANSITION_END, () => this._destroyElement(element))
|
||||
emulateTransitionEnd(element, transitionDuration)
|
||||
}
|
||||
|
||||
_destroyElement(element) {
|
||||
if (element.parentNode) {
|
||||
element.parentNode.removeChild(element)
|
||||
}
|
||||
|
||||
EventHandler.trigger(element, Event.CLOSED)
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static jQueryInterface(config) {
|
||||
|
|
|
|||
|
|
@ -90,13 +90,11 @@ describe('Alert', () => {
|
|||
|
||||
const endTest = () => {
|
||||
setTimeout(() => {
|
||||
expect(alert._removeElement).not.toHaveBeenCalled()
|
||||
expect(fixtureEl.querySelector('.alert')).not.toBeNull()
|
||||
done()
|
||||
}, 10)
|
||||
}
|
||||
|
||||
spyOn(alert, '_removeElement')
|
||||
|
||||
alertEl.addEventListener('close.bs.alert', event => {
|
||||
event.preventDefault()
|
||||
endTest()
|
||||
|
|
|
|||
22
js/src/alert/constants.js
Normal file
22
js/src/alert/constants.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.3.1): alert constants
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
export const DATA_KEY = 'bs.alert'
|
||||
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
export const Event = {
|
||||
CLOSE: `close${EVENT_KEY}`,
|
||||
CLOSED: `closed${EVENT_KEY}`,
|
||||
CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
|
||||
}
|
||||
|
||||
export const ClassName = {
|
||||
ALERT: 'alert',
|
||||
FADE: 'fade',
|
||||
SHOW: 'show'
|
||||
}
|
||||
53
js/src/alert/private.js
Normal file
53
js/src/alert/private.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.3.1): private alert functions
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import {
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
getTransitionDurationFromElement
|
||||
} from '../util/index'
|
||||
import EventHandler from '../dom/event-handler'
|
||||
import SelectorEngine from '../dom/selector-engine'
|
||||
import { ClassName, Event } from './constants'
|
||||
|
||||
export const getRootElement = element => {
|
||||
let parent = getElementFromSelector(element)
|
||||
|
||||
if (!parent) {
|
||||
parent = SelectorEngine.closest(element, `.${ClassName.ALERT}`)
|
||||
}
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
export const triggerCloseEvent = element => {
|
||||
return EventHandler.trigger(element, Event.CLOSE)
|
||||
}
|
||||
|
||||
export const removeElement = element => {
|
||||
element.classList.remove(ClassName.SHOW)
|
||||
|
||||
if (!element.classList.contains(ClassName.FADE)) {
|
||||
destroyElement(element)
|
||||
return
|
||||
}
|
||||
|
||||
const transitionDuration = getTransitionDurationFromElement(element)
|
||||
|
||||
EventHandler
|
||||
.one(element, TRANSITION_END, () => destroyElement(element))
|
||||
emulateTransitionEnd(element, transitionDuration)
|
||||
}
|
||||
|
||||
const destroyElement = element => {
|
||||
if (element.parentNode) {
|
||||
element.parentNode.removeChild(element)
|
||||
}
|
||||
|
||||
EventHandler.trigger(element, Event.CLOSED)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue