0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-13 01:08:58 +01:00
Bootstrap/js/dist/util/backdrop.js

140 lines
4.0 KiB
JavaScript
Raw Normal View History

2022-05-13 08:07:23 +02:00
/*!
* Bootstrap backdrop.js v5.3.0-alpha1 (https://getbootstrap.com/)
2022-05-13 08:07:23 +02:00
* Copyright 2011-2022 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('./index.js'), require('./config.js')) :
2022-05-13 08:07:23 +02:00
typeof define === 'function' && define.amd ? define(['../dom/event-handler', './index', './config'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Backdrop = factory(global.EventHandler, global.Index, global.Config));
})(this, (function (EventHandler, index_js, Config) { 'use strict';
2022-05-13 08:07:23 +02:00
/**
* --------------------------------------------------------------------------
* Bootstrap (v5.3.0-alpha1): util/backdrop.js
2022-05-13 08:07:23 +02:00
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
2022-05-13 08:07:23 +02:00
/**
* 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,
2022-05-13 08:07:23 +02:00
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
2022-05-13 08:07:23 +02:00
};
2022-05-13 08:07:23 +02:00
const DefaultType = {
className: 'string',
clickCallback: '(function|null)',
2022-05-13 08:07:23 +02:00
isAnimated: 'boolean',
isVisible: 'boolean',
rootElement: '(element|string)'
2022-05-13 08:07:23 +02:00
};
2022-05-13 08:07:23 +02:00
/**
* Class definition
*/
class Backdrop extends Config {
2022-05-13 08:07:23 +02:00
constructor(config) {
super();
this._config = this._getConfig(config);
this._isAppended = false;
this._element = null;
}
2022-05-13 08:07:23 +02:00
// Getters
2022-05-13 08:07:23 +02:00
static get Default() {
return Default;
}
static get DefaultType() {
return DefaultType;
}
static get NAME() {
return NAME;
}
2022-05-13 08:07:23 +02:00
// Public
2022-05-13 08:07:23 +02:00
show(callback) {
if (!this._config.isVisible) {
index_js.execute(callback);
2022-05-13 08:07:23 +02:00
return;
}
this._append();
const element = this._getElement();
if (this._config.isAnimated) {
index_js.reflow(element);
2022-05-13 08:07:23 +02:00
}
element.classList.add(CLASS_NAME_SHOW);
this._emulateAnimation(() => {
index_js.execute(callback);
2022-05-13 08:07:23 +02:00
});
}
hide(callback) {
if (!this._config.isVisible) {
index_js.execute(callback);
2022-05-13 08:07:23 +02:00
return;
}
this._getElement().classList.remove(CLASS_NAME_SHOW);
this._emulateAnimation(() => {
this.dispose();
index_js.execute(callback);
2022-05-13 08:07:23 +02:00
});
}
dispose() {
if (!this._isAppended) {
return;
}
EventHandler.off(this._element, EVENT_MOUSEDOWN);
2022-05-13 08:07:23 +02:00
this._element.remove();
this._isAppended = false;
}
2022-05-13 08:07:23 +02:00
// Private
2022-05-13 08:07:23 +02:00
_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);
2022-05-13 08:07:23 +02:00
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);
2022-05-13 08:07:23 +02:00
});
this._isAppended = true;
}
_emulateAnimation(callback) {
index_js.executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
2022-05-13 08:07:23 +02:00
}
}
return Backdrop;
}));
//# sourceMappingURL=backdrop.js.map