diff options
Diffstat (limited to 'js/src/alert')
| -rw-r--r-- | js/src/alert/alert.js | 188 | ||||
| -rw-r--r-- | js/src/alert/alert.spec.js | 173 |
2 files changed, 0 insertions, 361 deletions
diff --git a/js/src/alert/alert.js b/js/src/alert/alert.js deleted file mode 100644 index 024528b81..000000000 --- a/js/src/alert/alert.js +++ /dev/null @@ -1,188 +0,0 @@ -/** - * -------------------------------------------------------------------------- - * Bootstrap (v4.3.1): alert.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - * -------------------------------------------------------------------------- - */ - -import { - getjQuery, - TRANSITION_END, - emulateTransitionEnd, - getElementFromSelector, - getTransitionDurationFromElement -} from '../util/index' -import Data from '../dom/data' -import EventHandler from '../dom/event-handler' -import SelectorEngine from '../dom/selector-engine' - -/** - * ------------------------------------------------------------------------ - * Constants - * ------------------------------------------------------------------------ - */ - -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 - * ------------------------------------------------------------------------ - */ - -class Alert { - constructor(element) { - this._element = element - - if (this._element) { - Data.setData(element, DATA_KEY, this) - } - } - - // Getters - - static get VERSION() { - return VERSION - } - - // Public - - close(element) { - let rootElement = this._element - if (element) { - rootElement = this._getRootElement(element) - } - - const customEvent = this._triggerCloseEvent(rootElement) - - if (customEvent === null || customEvent.defaultPrevented) { - return - } - - this._removeElement(rootElement) - } - - dispose() { - Data.removeData(this._element, DATA_KEY) - 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) { - return this.each(function () { - let data = Data.getData(this, DATA_KEY) - - if (!data) { - data = new Alert(this) - } - - if (config === 'close') { - data[config](this) - } - }) - } - - static handleDismiss(alertInstance) { - return function (event) { - if (event) { - event.preventDefault() - } - - alertInstance.close(this) - } - } - - static getInstance(element) { - return Data.getData(element, DATA_KEY) - } -} - -/** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ - */ -EventHandler - .on(document, Event.CLICK_DATA_API, Selector.DISMISS, Alert.handleDismiss(new Alert())) - -const $ = getjQuery() - -/** - * ------------------------------------------------------------------------ - * jQuery - * ------------------------------------------------------------------------ - * add .alert to jQuery only if jQuery is present - */ - -/* istanbul ignore if */ -if ($) { - const JQUERY_NO_CONFLICT = $.fn[NAME] - $.fn[NAME] = Alert.jQueryInterface - $.fn[NAME].Constructor = Alert - $.fn[NAME].noConflict = () => { - $.fn[NAME] = JQUERY_NO_CONFLICT - return Alert.jQueryInterface - } -} - -export default Alert diff --git a/js/src/alert/alert.spec.js b/js/src/alert/alert.spec.js deleted file mode 100644 index 61d656bd0..000000000 --- a/js/src/alert/alert.spec.js +++ /dev/null @@ -1,173 +0,0 @@ -import Alert from './alert' -import { makeArray, getTransitionDurationFromElement } from '../util/index' - -/** Test helpers */ -import { getFixture, clearFixture, jQueryMock } from '../../tests/helpers/fixture' - -describe('Alert', () => { - let fixtureEl - - beforeAll(() => { - fixtureEl = getFixture() - }) - - afterEach(() => { - clearFixture() - }) - - it('should return version', () => { - expect(typeof Alert.VERSION).toEqual('string') - }) - - describe('data-api', () => { - it('should close an alert without instantiate it manually', () => { - fixtureEl.innerHTML = [ - '<div class="alert">', - ' <button type="button" data-dismiss="alert">x</button>', - '</div>' - ].join('') - - const button = document.querySelector('button') - - button.click() - expect(makeArray(document.querySelectorAll('.alert')).length).toEqual(0) - }) - - it('should close an alert without instantiate it manually with the parent selector', () => { - fixtureEl.innerHTML = [ - '<div class="alert">', - ' <button type="button" data-target=".alert" data-dismiss="alert">x</button>', - '</div>' - ].join('') - - const button = document.querySelector('button') - - button.click() - expect(makeArray(document.querySelectorAll('.alert')).length).toEqual(0) - }) - }) - - describe('close', () => { - it('should close an alert', done => { - const spy = jasmine.createSpy('spy', getTransitionDurationFromElement) - fixtureEl.innerHTML = '<div class="alert"></div>' - - const alertEl = document.querySelector('.alert') - const alert = new Alert(alertEl) - - alertEl.addEventListener('closed.bs.alert', () => { - expect(makeArray(document.querySelectorAll('.alert')).length).toEqual(0) - expect(spy).not.toHaveBeenCalled() - done() - }) - - alert.close() - }) - - it('should close alert with fade class', done => { - fixtureEl.innerHTML = '<div class="alert fade"></div>' - - const alertEl = document.querySelector('.alert') - const alert = new Alert(alertEl) - - alertEl.addEventListener('transitionend', () => { - expect().nothing() - }) - - alertEl.addEventListener('closed.bs.alert', () => { - expect(makeArray(document.querySelectorAll('.alert')).length).toEqual(0) - done() - }) - - alert.close() - }) - - it('should not remove alert if close event is prevented', done => { - fixtureEl.innerHTML = '<div class="alert"></div>' - - const alertEl = document.querySelector('.alert') - const alert = new Alert(alertEl) - - const endTest = () => { - setTimeout(() => { - expect(alert._removeElement).not.toHaveBeenCalled() - done() - }, 10) - } - - spyOn(alert, '_removeElement') - - alertEl.addEventListener('close.bs.alert', event => { - event.preventDefault() - endTest() - }) - - alertEl.addEventListener('closed.bs.alert', () => { - endTest() - }) - - alert.close() - }) - }) - - describe('dispose', () => { - it('should dispose an alert', () => { - fixtureEl.innerHTML = '<div class="alert"></div>' - - const alertEl = document.querySelector('.alert') - const alert = new Alert(alertEl) - - expect(Alert.getInstance(alertEl)).toBeDefined() - - alert.dispose() - - expect(Alert.getInstance(alertEl)).toBeNull() - }) - }) - - describe('jQueryInterface', () => { - it('should handle config passed and toggle existing alert', () => { - fixtureEl.innerHTML = '<div class="alert"></div>' - - const alertEl = fixtureEl.querySelector('.alert') - const alert = new Alert(alertEl) - - spyOn(alert, 'close') - - jQueryMock.fn.alert = Alert.jQueryInterface - jQueryMock.elements = [alertEl] - - jQueryMock.fn.alert.call(jQueryMock, 'close') - - expect(alert.close).toHaveBeenCalled() - }) - - it('should create new alert instance and call close', () => { - fixtureEl.innerHTML = '<div class="alert"></div>' - - const alertEl = fixtureEl.querySelector('.alert') - - jQueryMock.fn.alert = Alert.jQueryInterface - jQueryMock.elements = [alertEl] - - jQueryMock.fn.alert.call(jQueryMock, 'close') - - expect(Alert.getInstance(alertEl)).toBeDefined() - expect(fixtureEl.querySelector('.alert')).toBeNull() - }) - - it('should just create an alert instance without calling close', () => { - fixtureEl.innerHTML = '<div class="alert"></div>' - - const alertEl = fixtureEl.querySelector('.alert') - - jQueryMock.fn.alert = Alert.jQueryInterface - jQueryMock.elements = [alertEl] - - jQueryMock.fn.alert.call(jQueryMock) - - expect(Alert.getInstance(alertEl)).toBeDefined() - expect(fixtureEl.querySelector('.alert')).not.toBeNull() - }) - }) -}) |
