140 lines
4.0 KiB
JavaScript
140 lines
4.0 KiB
JavaScript
/*!
|
|
* Bootstrap backdrop.js v5.3.3 (https://getbootstrap.com/)
|
|
* Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
*/
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../dom/event-handler.js'), require('./config.js'), require('./index.js')) :
|
|
typeof define === 'function' && define.amd ? define(['../dom/event-handler', './config', './index'], factory) :
|
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Backdrop = factory(global.EventHandler, global.Config, global.Index));
|
|
})(this, (function (EventHandler, Config, index_js) { 'use strict';
|
|
|
|
/**
|
|
* --------------------------------------------------------------------------
|
|
* Bootstrap util/backdrop.js
|
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
* --------------------------------------------------------------------------
|
|
*/
|
|
|
|
|
|
/**
|
|
* Constants
|
|
*/
|
|
|
|
const NAME = 'backdrop';
|
|
const CLASS_NAME_FADE = 'fade';
|
|
const CLASS_NAME_SHOW = 'show';
|
|
const EVENT_MOUSEDOWN = `mousedown.bs.${NAME}`;
|
|
const Default = {
|
|
className: 'modal-backdrop',
|
|
clickCallback: null,
|
|
isAnimated: false,
|
|
isVisible: true,
|
|
// if false, we use the backdrop helper without adding any element to the dom
|
|
rootElement: 'body' // give the choice to place backdrop under different elements
|
|
};
|
|
const DefaultType = {
|
|
className: 'string',
|
|
clickCallback: '(function|null)',
|
|
isAnimated: 'boolean',
|
|
isVisible: 'boolean',
|
|
rootElement: '(element|string)'
|
|
};
|
|
|
|
/**
|
|
* Class definition
|
|
*/
|
|
|
|
class Backdrop extends Config {
|
|
constructor(config) {
|
|
super();
|
|
this._config = this._getConfig(config);
|
|
this._isAppended = false;
|
|
this._element = null;
|
|
}
|
|
|
|
// Getters
|
|
static get Default() {
|
|
return Default;
|
|
}
|
|
static get DefaultType() {
|
|
return DefaultType;
|
|
}
|
|
static get NAME() {
|
|
return NAME;
|
|
}
|
|
|
|
// Public
|
|
show(callback) {
|
|
if (!this._config.isVisible) {
|
|
index_js.execute(callback);
|
|
return;
|
|
}
|
|
this._append();
|
|
const element = this._getElement();
|
|
if (this._config.isAnimated) {
|
|
index_js.reflow(element);
|
|
}
|
|
element.classList.add(CLASS_NAME_SHOW);
|
|
this._emulateAnimation(() => {
|
|
index_js.execute(callback);
|
|
});
|
|
}
|
|
hide(callback) {
|
|
if (!this._config.isVisible) {
|
|
index_js.execute(callback);
|
|
return;
|
|
}
|
|
this._getElement().classList.remove(CLASS_NAME_SHOW);
|
|
this._emulateAnimation(() => {
|
|
this.dispose();
|
|
index_js.execute(callback);
|
|
});
|
|
}
|
|
dispose() {
|
|
if (!this._isAppended) {
|
|
return;
|
|
}
|
|
EventHandler.off(this._element, EVENT_MOUSEDOWN);
|
|
this._element.remove();
|
|
this._isAppended = false;
|
|
}
|
|
|
|
// Private
|
|
_getElement() {
|
|
if (!this._element) {
|
|
const backdrop = document.createElement('div');
|
|
backdrop.className = this._config.className;
|
|
if (this._config.isAnimated) {
|
|
backdrop.classList.add(CLASS_NAME_FADE);
|
|
}
|
|
this._element = backdrop;
|
|
}
|
|
return this._element;
|
|
}
|
|
_configAfterMerge(config) {
|
|
// use getElement() with the default "body" to get a fresh Element on each instantiation
|
|
config.rootElement = index_js.getElement(config.rootElement);
|
|
return config;
|
|
}
|
|
_append() {
|
|
if (this._isAppended) {
|
|
return;
|
|
}
|
|
const element = this._getElement();
|
|
this._config.rootElement.append(element);
|
|
EventHandler.on(element, EVENT_MOUSEDOWN, () => {
|
|
index_js.execute(this._config.clickCallback);
|
|
});
|
|
this._isAppended = true;
|
|
}
|
|
_emulateAnimation(callback) {
|
|
index_js.executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
|
|
}
|
|
}
|
|
|
|
return Backdrop;
|
|
|
|
}));
|
|
//# sourceMappingURL=backdrop.js.map
|