diff --git a/js/src/alert/alert.js b/js/src/alert/alert.js index 024528b81..fde2db9b9 100644 --- a/js/src/alert/alert.js +++ b/js/src/alert/alert.js @@ -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) { diff --git a/js/src/alert/alert.spec.js b/js/src/alert/alert.spec.js index 61d656bd0..adaea8d08 100644 --- a/js/src/alert/alert.spec.js +++ b/js/src/alert/alert.spec.js @@ -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() diff --git a/js/src/alert/constants.js b/js/src/alert/constants.js new file mode 100644 index 000000000..3ba4299ce --- /dev/null +++ b/js/src/alert/constants.js @@ -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' +} diff --git a/js/src/alert/private.js b/js/src/alert/private.js new file mode 100644 index 000000000..46d87ff43 --- /dev/null +++ b/js/src/alert/private.js @@ -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) +}