mirror of
https://github.com/Hopiu/bootstrap.git
synced 2026-03-23 07:50:23 +00:00
70dd7f6ff5
Alert.js: Refactor code to match the other components * Use this._element * Remove handleDismiss method and keep its functionality on event * Change JqueryInterface to be more generic * Correct docs to be aligned with code, and add undocumented functionality * Update alerts.md Co-authored-by: XhmikosR <xhmikosr@gmail.com>
120 lines
3 KiB
JavaScript
120 lines
3 KiB
JavaScript
/**
|
|
* --------------------------------------------------------------------------
|
|
* Bootstrap (v5.0.2): alert.js
|
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
* --------------------------------------------------------------------------
|
|
*/
|
|
|
|
import {
|
|
defineJQueryPlugin,
|
|
getElementFromSelector,
|
|
isDisabled
|
|
} from './util/index'
|
|
import EventHandler from './dom/event-handler'
|
|
import BaseComponent from './base-component'
|
|
|
|
/**
|
|
* ------------------------------------------------------------------------
|
|
* Constants
|
|
* ------------------------------------------------------------------------
|
|
*/
|
|
|
|
const NAME = 'alert'
|
|
const DATA_KEY = 'bs.alert'
|
|
const EVENT_KEY = `.${DATA_KEY}`
|
|
const DATA_API_KEY = '.data-api'
|
|
|
|
const SELECTOR_DISMISS = '[data-bs-dismiss="alert"]'
|
|
|
|
const EVENT_CLOSE = `close${EVENT_KEY}`
|
|
const EVENT_CLOSED = `closed${EVENT_KEY}`
|
|
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
|
|
|
const CLASS_NAME_ALERT = 'alert'
|
|
const CLASS_NAME_FADE = 'fade'
|
|
const CLASS_NAME_SHOW = 'show'
|
|
|
|
/**
|
|
* ------------------------------------------------------------------------
|
|
* Class Definition
|
|
* ------------------------------------------------------------------------
|
|
*/
|
|
|
|
class Alert extends BaseComponent {
|
|
// Getters
|
|
|
|
static get NAME() {
|
|
return NAME
|
|
}
|
|
|
|
// Public
|
|
|
|
close() {
|
|
const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE)
|
|
|
|
if (closeEvent.defaultPrevented) {
|
|
return
|
|
}
|
|
|
|
this._element.classList.remove(CLASS_NAME_SHOW)
|
|
|
|
const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)
|
|
this._queueCallback(() => this._destroyElement(), this._element, isAnimated)
|
|
}
|
|
|
|
// Private
|
|
_destroyElement() {
|
|
this._element.remove()
|
|
EventHandler.trigger(this._element, EVENT_CLOSED)
|
|
this.dispose()
|
|
}
|
|
|
|
// Static
|
|
|
|
static jQueryInterface(config) {
|
|
return this.each(function () {
|
|
const data = Alert.getOrCreateInstance(this)
|
|
|
|
if (typeof config !== 'string') {
|
|
return
|
|
}
|
|
|
|
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
|
throw new TypeError(`No method named "${config}"`)
|
|
}
|
|
|
|
data[config](this)
|
|
})
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ------------------------------------------------------------------------
|
|
* Data Api implementation
|
|
* ------------------------------------------------------------------------
|
|
*/
|
|
|
|
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DISMISS, function (event) {
|
|
if (['A', 'AREA'].includes(this.tagName)) {
|
|
event.preventDefault()
|
|
}
|
|
|
|
if (isDisabled(this)) {
|
|
return
|
|
}
|
|
|
|
const target = getElementFromSelector(this) || this.closest(`.${CLASS_NAME_ALERT}`)
|
|
const alert = Alert.getOrCreateInstance(target)
|
|
alert.close()
|
|
})
|
|
|
|
/**
|
|
* ------------------------------------------------------------------------
|
|
* jQuery
|
|
* ------------------------------------------------------------------------
|
|
* add .Alert to jQuery only if jQuery is present
|
|
*/
|
|
|
|
defineJQueryPlugin(Alert)
|
|
|
|
export default Alert
|