diff options
Diffstat (limited to 'vendor/twbs/bootstrap/js/dist/modal.js')
| -rw-r--r-- | vendor/twbs/bootstrap/js/dist/modal.js | 859 |
1 files changed, 107 insertions, 752 deletions
diff --git a/vendor/twbs/bootstrap/js/dist/modal.js b/vendor/twbs/bootstrap/js/dist/modal.js index c6983290e..b27d6ab38 100644 --- a/vendor/twbs/bootstrap/js/dist/modal.js +++ b/vendor/twbs/bootstrap/js/dist/modal.js @@ -1,622 +1,31 @@ /*! - * Bootstrap modal.js v5.1.3 (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) + * Bootstrap modal.js v5.2.0 (https://getbootstrap.com/) + * 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('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./base-component.js')) : - typeof define === 'function' && define.amd ? define(['./dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.EventHandler, global.Manipulator, global.SelectorEngine, global.Base)); -})(this, (function (EventHandler, Manipulator, SelectorEngine, BaseComponent) { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./util/index'), require('./dom/event-handler'), require('./dom/selector-engine'), require('./util/scrollbar'), require('./base-component'), require('./util/backdrop'), require('./util/focustrap'), require('./util/component-functions')) : + typeof define === 'function' && define.amd ? define(['./util/index', './dom/event-handler', './dom/selector-engine', './util/scrollbar', './base-component', './util/backdrop', './util/focustrap', './util/component-functions'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.Index, global.EventHandler, global.SelectorEngine, global.Scrollbar, global.BaseComponent, global.Backdrop, global.Focustrap, global.ComponentFunctions)); +})(this, (function (index, EventHandler, SelectorEngine, ScrollBarHelper, BaseComponent, Backdrop, FocusTrap, componentFunctions) { 'use strict'; const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e }; const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); - const Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator); const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); + const ScrollBarHelper__default = /*#__PURE__*/_interopDefaultLegacy(ScrollBarHelper); const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); + const Backdrop__default = /*#__PURE__*/_interopDefaultLegacy(Backdrop); + const FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap); /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/index.js + * Bootstrap (v5.2.0): modal.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ - const MILLISECONDS_MULTIPLIER = 1000; - const TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp) - - const toType = obj => { - if (obj === null || obj === undefined) { - return `${obj}`; - } - - return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase(); - }; - - const getSelector = element => { - let selector = element.getAttribute('data-bs-target'); - - if (!selector || selector === '#') { - let hrefAttr = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes, - // so everything starting with `#` or `.`. If a "real" URL is used as the selector, - // `document.querySelector` will rightfully complain it is invalid. - // See https://github.com/twbs/bootstrap/issues/32273 - - if (!hrefAttr || !hrefAttr.includes('#') && !hrefAttr.startsWith('.')) { - return null; - } // Just in case some CMS puts out a full URL with the anchor appended - - - if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) { - hrefAttr = `#${hrefAttr.split('#')[1]}`; - } - - selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null; - } - - return selector; - }; - - const getElementFromSelector = element => { - const selector = getSelector(element); - return selector ? document.querySelector(selector) : null; - }; - - const getTransitionDurationFromElement = element => { - if (!element) { - return 0; - } // Get transition-duration of the element - - - let { - transitionDuration, - transitionDelay - } = window.getComputedStyle(element); - const floatTransitionDuration = Number.parseFloat(transitionDuration); - const floatTransitionDelay = Number.parseFloat(transitionDelay); // Return 0 if element or transition duration is not found - - if (!floatTransitionDuration && !floatTransitionDelay) { - return 0; - } // If multiple durations are defined, take the first - - - transitionDuration = transitionDuration.split(',')[0]; - transitionDelay = transitionDelay.split(',')[0]; - return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER; - }; - - const triggerTransitionEnd = element => { - element.dispatchEvent(new Event(TRANSITION_END)); - }; - - const isElement = obj => { - if (!obj || typeof obj !== 'object') { - return false; - } - - if (typeof obj.jquery !== 'undefined') { - obj = obj[0]; - } - - return typeof obj.nodeType !== 'undefined'; - }; - - const getElement = obj => { - if (isElement(obj)) { - // it's a jQuery object or a node element - return obj.jquery ? obj[0] : obj; - } - - if (typeof obj === 'string' && obj.length > 0) { - return document.querySelector(obj); - } - - return null; - }; - - const typeCheckConfig = (componentName, config, configTypes) => { - Object.keys(configTypes).forEach(property => { - const expectedTypes = configTypes[property]; - const value = config[property]; - const valueType = value && isElement(value) ? 'element' : toType(value); - - if (!new RegExp(expectedTypes).test(valueType)) { - throw new TypeError(`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`); - } - }); - }; - - const isVisible = element => { - if (!isElement(element) || element.getClientRects().length === 0) { - return false; - } - - return getComputedStyle(element).getPropertyValue('visibility') === 'visible'; - }; - - const isDisabled = element => { - if (!element || element.nodeType !== Node.ELEMENT_NODE) { - return true; - } - - if (element.classList.contains('disabled')) { - return true; - } - - if (typeof element.disabled !== 'undefined') { - return element.disabled; - } - - return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false'; - }; /** - * Trick to restart an element's animation - * - * @param {HTMLElement} element - * @return void - * - * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation - */ - - - const reflow = element => { - // eslint-disable-next-line no-unused-expressions - element.offsetHeight; - }; - - const getjQuery = () => { - const { - jQuery - } = window; - - if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { - return jQuery; - } - - return null; - }; - - const DOMContentLoadedCallbacks = []; - - const onDOMContentLoaded = callback => { - if (document.readyState === 'loading') { - // add listener on the first call when the document is in loading state - if (!DOMContentLoadedCallbacks.length) { - document.addEventListener('DOMContentLoaded', () => { - DOMContentLoadedCallbacks.forEach(callback => callback()); - }); - } - - DOMContentLoadedCallbacks.push(callback); - } else { - callback(); - } - }; - - const isRTL = () => document.documentElement.dir === 'rtl'; - - const defineJQueryPlugin = plugin => { - onDOMContentLoaded(() => { - const $ = getjQuery(); - /* istanbul ignore if */ - - if ($) { - const name = plugin.NAME; - const JQUERY_NO_CONFLICT = $.fn[name]; - $.fn[name] = plugin.jQueryInterface; - $.fn[name].Constructor = plugin; - - $.fn[name].noConflict = () => { - $.fn[name] = JQUERY_NO_CONFLICT; - return plugin.jQueryInterface; - }; - } - }); - }; - - const execute = callback => { - if (typeof callback === 'function') { - callback(); - } - }; - - const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => { - if (!waitForTransition) { - execute(callback); - return; - } - - const durationPadding = 5; - const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding; - let called = false; - - const handler = ({ - target - }) => { - if (target !== transitionElement) { - return; - } - - called = true; - transitionElement.removeEventListener(TRANSITION_END, handler); - execute(callback); - }; - - transitionElement.addEventListener(TRANSITION_END, handler); - setTimeout(() => { - if (!called) { - triggerTransitionEnd(transitionElement); - } - }, emulatedDuration); - }; - - /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/scrollBar.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- - */ - const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'; - const SELECTOR_STICKY_CONTENT = '.sticky-top'; - - class ScrollBarHelper { - constructor() { - this._element = document.body; - } - - getWidth() { - // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes - const documentWidth = document.documentElement.clientWidth; - return Math.abs(window.innerWidth - documentWidth); - } - - hide() { - const width = this.getWidth(); - - this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width - - - this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth - - - this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width); - - this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width); - } - - _disableOverFlow() { - this._saveInitialAttribute(this._element, 'overflow'); - - this._element.style.overflow = 'hidden'; - } - - _setElementAttributes(selector, styleProp, callback) { - const scrollbarWidth = this.getWidth(); - - const manipulationCallBack = element => { - if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) { - return; - } - - this._saveInitialAttribute(element, styleProp); - - const calculatedValue = window.getComputedStyle(element)[styleProp]; - element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`; - }; - - this._applyManipulationCallback(selector, manipulationCallBack); - } - - reset() { - this._resetElementAttributes(this._element, 'overflow'); - - this._resetElementAttributes(this._element, 'paddingRight'); - - this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight'); - - this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight'); - } - - _saveInitialAttribute(element, styleProp) { - const actualValue = element.style[styleProp]; - - if (actualValue) { - Manipulator__default.default.setDataAttribute(element, styleProp, actualValue); - } - } - - _resetElementAttributes(selector, styleProp) { - const manipulationCallBack = element => { - const value = Manipulator__default.default.getDataAttribute(element, styleProp); - - if (typeof value === 'undefined') { - element.style.removeProperty(styleProp); - } else { - Manipulator__default.default.removeDataAttribute(element, styleProp); - element.style[styleProp] = value; - } - }; - - this._applyManipulationCallback(selector, manipulationCallBack); - } - - _applyManipulationCallback(selector, callBack) { - if (isElement(selector)) { - callBack(selector); - } else { - SelectorEngine__default.default.find(selector, this._element).forEach(callBack); - } - } - - isOverflowing() { - return this.getWidth() > 0; - } - - } - - /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/backdrop.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- - */ - const Default$2 = { - className: 'modal-backdrop', - isVisible: true, - // if false, we use the backdrop helper without adding any element to the dom - isAnimated: false, - rootElement: 'body', - // give the choice to place backdrop under different elements - clickCallback: null - }; - const DefaultType$2 = { - className: 'string', - isVisible: 'boolean', - isAnimated: 'boolean', - rootElement: '(element|string)', - clickCallback: '(function|null)' - }; - const NAME$2 = 'backdrop'; - const CLASS_NAME_FADE$1 = 'fade'; - const CLASS_NAME_SHOW$1 = 'show'; - const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$2}`; - - class Backdrop { - constructor(config) { - this._config = this._getConfig(config); - this._isAppended = false; - this._element = null; - } - - show(callback) { - if (!this._config.isVisible) { - execute(callback); - return; - } - - this._append(); - - if (this._config.isAnimated) { - reflow(this._getElement()); - } - - this._getElement().classList.add(CLASS_NAME_SHOW$1); - - this._emulateAnimation(() => { - execute(callback); - }); - } - - hide(callback) { - if (!this._config.isVisible) { - execute(callback); - return; - } - - this._getElement().classList.remove(CLASS_NAME_SHOW$1); - - this._emulateAnimation(() => { - this.dispose(); - execute(callback); - }); - } // 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$1); - } - - this._element = backdrop; - } - - return this._element; - } - - _getConfig(config) { - config = { ...Default$2, - ...(typeof config === 'object' ? config : {}) - }; // use getElement() with the default "body" to get a fresh Element on each instantiation - - config.rootElement = getElement(config.rootElement); - typeCheckConfig(NAME$2, config, DefaultType$2); - return config; - } - - _append() { - if (this._isAppended) { - return; - } - - this._config.rootElement.append(this._getElement()); - - EventHandler__default.default.on(this._getElement(), EVENT_MOUSEDOWN, () => { - execute(this._config.clickCallback); - }); - this._isAppended = true; - } - - dispose() { - if (!this._isAppended) { - return; - } - - EventHandler__default.default.off(this._element, EVENT_MOUSEDOWN); - - this._element.remove(); - - this._isAppended = false; - } - - _emulateAnimation(callback) { - executeAfterTransition(callback, this._getElement(), this._config.isAnimated); - } - - } - - /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/focustrap.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- - */ - const Default$1 = { - trapElement: null, - // The element to trap focus inside of - autofocus: true - }; - const DefaultType$1 = { - trapElement: 'element', - autofocus: 'boolean' - }; - const NAME$1 = 'focustrap'; - const DATA_KEY$1 = 'bs.focustrap'; - const EVENT_KEY$1 = `.${DATA_KEY$1}`; - const EVENT_FOCUSIN = `focusin${EVENT_KEY$1}`; - const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY$1}`; - const TAB_KEY = 'Tab'; - const TAB_NAV_FORWARD = 'forward'; - const TAB_NAV_BACKWARD = 'backward'; - - class FocusTrap { - constructor(config) { - this._config = this._getConfig(config); - this._isActive = false; - this._lastTabNavDirection = null; - } - - activate() { - const { - trapElement, - autofocus - } = this._config; - - if (this._isActive) { - return; - } - - if (autofocus) { - trapElement.focus(); - } - - EventHandler__default.default.off(document, EVENT_KEY$1); // guard against infinite focus loop - - EventHandler__default.default.on(document, EVENT_FOCUSIN, event => this._handleFocusin(event)); - EventHandler__default.default.on(document, EVENT_KEYDOWN_TAB, event => this._handleKeydown(event)); - this._isActive = true; - } - - deactivate() { - if (!this._isActive) { - return; - } - - this._isActive = false; - EventHandler__default.default.off(document, EVENT_KEY$1); - } // Private - - - _handleFocusin(event) { - const { - target - } = event; - const { - trapElement - } = this._config; - - if (target === document || target === trapElement || trapElement.contains(target)) { - return; - } - - const elements = SelectorEngine__default.default.focusableChildren(trapElement); - - if (elements.length === 0) { - trapElement.focus(); - } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) { - elements[elements.length - 1].focus(); - } else { - elements[0].focus(); - } - } - - _handleKeydown(event) { - if (event.key !== TAB_KEY) { - return; - } - - this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD; - } - - _getConfig(config) { - config = { ...Default$1, - ...(typeof config === 'object' ? config : {}) - }; - typeCheckConfig(NAME$1, config, DefaultType$1); - return config; - } - - } - - /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): util/component-functions.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- - */ - - const enableDismissTrigger = (component, method = 'hide') => { - const clickEvent = `click.dismiss${component.EVENT_KEY}`; - const name = component.NAME; - EventHandler__default.default.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) { - if (['A', 'AREA'].includes(this.tagName)) { - event.preventDefault(); - } - - if (isDisabled(this)) { - return; - } - - const target = getElementFromSelector(this) || this.closest(`.${name}`); - const instance = component.getOrCreateInstance(target); // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method - - instance[method](); - }); - }; - - /** - * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): modal.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - * -------------------------------------------------------------------------- - */ - /** - * ------------------------------------------------------------------------ * Constants - * ------------------------------------------------------------------------ */ const NAME = 'modal'; @@ -624,26 +33,14 @@ const EVENT_KEY = `.${DATA_KEY}`; const DATA_API_KEY = '.data-api'; const ESCAPE_KEY = 'Escape'; - const Default = { - backdrop: true, - keyboard: true, - focus: true - }; - const DefaultType = { - backdrop: '(boolean|string)', - keyboard: 'boolean', - focus: 'boolean' - }; const EVENT_HIDE = `hide${EVENT_KEY}`; const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`; const EVENT_HIDDEN = `hidden${EVENT_KEY}`; const EVENT_SHOW = `show${EVENT_KEY}`; const EVENT_SHOWN = `shown${EVENT_KEY}`; const EVENT_RESIZE = `resize${EVENT_KEY}`; - const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`; - const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`; - const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`; const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`; + const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`; const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`; const CLASS_NAME_OPEN = 'modal-open'; const CLASS_NAME_FADE = 'fade'; @@ -653,23 +50,31 @@ const SELECTOR_DIALOG = '.modal-dialog'; const SELECTOR_MODAL_BODY = '.modal-body'; const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]'; + const Default = { + backdrop: true, + focus: true, + keyboard: true + }; + const DefaultType = { + backdrop: '(boolean|string)', + focus: 'boolean', + keyboard: 'boolean' + }; /** - * ------------------------------------------------------------------------ - * Class Definition - * ------------------------------------------------------------------------ + * Class definition */ class Modal extends BaseComponent__default.default { constructor(element, config) { - super(element); - this._config = this._getConfig(config); + super(element, config); this._dialog = SelectorEngine__default.default.findOne(SELECTOR_DIALOG, this._element); this._backdrop = this._initializeBackDrop(); this._focustrap = this._initializeFocusTrap(); this._isShown = false; - this._ignoreBackdropClick = false; this._isTransitioning = false; - this._scrollBar = new ScrollBarHelper(); + this._scrollBar = new ScrollBarHelper__default.default(); + + this._addEventListeners(); } // Getters @@ -677,6 +82,10 @@ return Default; } + static get DefaultType() { + return DefaultType; + } + static get NAME() { return NAME; } // Public @@ -700,10 +109,7 @@ } this._isShown = true; - - if (this._isAnimated()) { - this._isTransitioning = true; - } + this._isTransitioning = true; this._scrollBar.hide(); @@ -711,19 +117,7 @@ this._adjustDialog(); - this._setEscapeEvent(); - - this._setResizeEvent(); - - EventHandler__default.default.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => { - EventHandler__default.default.one(this._element, EVENT_MOUSEUP_DISMISS, event => { - if (event.target === this._element) { - this._ignoreBackdropClick = true; - } - }); - }); - - this._showBackdrop(() => this._showElement(relatedTarget)); + this._backdrop.show(() => this._showElement(relatedTarget)); } hide() { @@ -738,29 +132,19 @@ } this._isShown = false; - - const isAnimated = this._isAnimated(); - - if (isAnimated) { - this._isTransitioning = true; - } - - this._setEscapeEvent(); - - this._setResizeEvent(); + this._isTransitioning = true; this._focustrap.deactivate(); this._element.classList.remove(CLASS_NAME_SHOW); - EventHandler__default.default.off(this._element, EVENT_CLICK_DISMISS); - EventHandler__default.default.off(this._dialog, EVENT_MOUSEDOWN_DISMISS); - - this._queueCallback(() => this._hideModal(), this._element, isAnimated); + this._queueCallback(() => this._hideModal(), this._element, this._isAnimated()); } dispose() { - [window, this._dialog].forEach(htmlElement => EventHandler__default.default.off(htmlElement, EVENT_KEY)); + for (const htmlElement of [window, this._dialog]) { + EventHandler__default.default.off(htmlElement, EVENT_KEY); + } this._backdrop.dispose(); @@ -775,35 +159,22 @@ _initializeBackDrop() { - return new Backdrop({ + return new Backdrop__default.default({ isVisible: Boolean(this._config.backdrop), - // 'static' option will be translated to true, and booleans will keep their value + // 'static' option will be translated to true, and booleans will keep their value, isAnimated: this._isAnimated() }); } _initializeFocusTrap() { - return new FocusTrap({ + return new FocusTrap__default.default({ trapElement: this._element }); } - _getConfig(config) { - config = { ...Default, - ...Manipulator__default.default.getDataAttributes(this._element), - ...(typeof config === 'object' ? config : {}) - }; - typeCheckConfig(NAME, config, DefaultType); - return config; - } - _showElement(relatedTarget) { - const isAnimated = this._isAnimated(); - - const modalBody = SelectorEngine__default.default.findOne(SELECTOR_MODAL_BODY, this._dialog); - - if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { - // Don't move modal's DOM position + // try to append dynamic modal + if (!document.body.contains(this._element)) { document.body.append(this._element); } @@ -816,14 +187,13 @@ this._element.setAttribute('role', 'dialog'); this._element.scrollTop = 0; + const modalBody = SelectorEngine__default.default.findOne(SELECTOR_MODAL_BODY, this._dialog); if (modalBody) { modalBody.scrollTop = 0; } - if (isAnimated) { - reflow(this._element); - } + index.reflow(this._element); this._element.classList.add(CLASS_NAME_SHOW); @@ -838,30 +208,44 @@ }); }; - this._queueCallback(transitionComplete, this._dialog, isAnimated); + this._queueCallback(transitionComplete, this._dialog, this._isAnimated()); } - _setEscapeEvent() { - if (this._isShown) { - EventHandler__default.default.on(this._element, EVENT_KEYDOWN_DISMISS, event => { - if (this._config.keyboard && event.key === ESCAPE_KEY) { - event.preventDefault(); - this.hide(); - } else if (!this._config.keyboard && event.key === ESCAPE_KEY) { - this._triggerBackdropTransition(); - } - }); - } else { - EventHandler__default.default.off(this._element, EVENT_KEYDOWN_DISMISS); - } - } + _addEventListeners() { + EventHandler__default.default.on(this._element, EVENT_KEYDOWN_DISMISS, event => { + if (event.key !== ESCAPE_KEY) { + return; + } - _setResizeEvent() { - if (this._isShown) { - EventHandler__default.default.on(window, EVENT_RESIZE, () => this._adjustDialog()); - } else { - EventHandler__default.default.off(window, EVENT_RESIZE); - } + if (this._config.keyboard) { + event.preventDefault(); + this.hide(); + return; + } + + this._triggerBackdropTransition(); + }); + EventHandler__default.default.on(window, EVENT_RESIZE, () => { + if (this._isShown && !this._isTransitioning) { + this._adjustDialog(); + } + }); + EventHandler__default.default.on(this._element, EVENT_MOUSEDOWN_DISMISS, event => { + if (event.target !== event.currentTarget) { + // click is inside modal-dialog + return; + } + + if (this._config.backdrop === 'static') { + this._triggerBackdropTransition(); + + return; + } + + if (this._config.backdrop) { + this.hide(); + } + }); } _hideModal() { @@ -886,27 +270,6 @@ }); } - _showBackdrop(callback) { - EventHandler__default.default.on(this._element, EVENT_CLICK_DISMISS, event => { - if (this._ignoreBackdropClick) { - this._ignoreBackdropClick = false; - return; - } - - if (event.target !== event.currentTarget) { - return; - } - - if (this._config.backdrop === true) { - this.hide(); - } else if (this._config.backdrop === 'static') { - this._triggerBackdropTransition(); - } - }); - - this._backdrop.show(callback); - } - _isAnimated() { return this._element.classList.contains(CLASS_NAME_FADE); } @@ -918,37 +281,32 @@ return; } - const { - classList, - scrollHeight, - style - } = this._element; - const isModalOverflowing = scrollHeight > document.documentElement.clientHeight; // return if the following background transition hasn't yet completed + const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight; + const initialOverflowY = this._element.style.overflowY; // return if the following background transition hasn't yet completed - if (!isModalOverflowing && style.overflowY === 'hidden' || classList.contains(CLASS_NAME_STATIC)) { + if (initialOverflowY === 'hidden' || this._element.classList.contains(CLASS_NAME_STATIC)) { return; } if (!isModalOverflowing) { - style.overflowY = 'hidden'; + this._element.style.overflowY = 'hidden'; } - classList.add(CLASS_NAME_STATIC); + this._element.classList.add(CLASS_NAME_STATIC); this._queueCallback(() => { - classList.remove(CLASS_NAME_STATIC); + this._element.classList.remove(CLASS_NAME_STATIC); - if (!isModalOverflowing) { - this._queueCallback(() => { - style.overflowY = ''; - }, this._dialog); - } + this._queueCallback(() => { + this._element.style.overflowY = initialOverflowY; + }, this._dialog); }, this._dialog); this._element.focus(); - } // ---------------------------------------------------------------------- - // the following methods are used to handle overflowing modals - // ---------------------------------------------------------------------- + } + /** + * The following methods are used to handle overflowing modals + */ _adjustDialog() { @@ -958,12 +316,14 @@ const isBodyOverflowing = scrollbarWidth > 0; - if (!isBodyOverflowing && isModalOverflowing && !isRTL() || isBodyOverflowing && !isModalOverflowing && isRTL()) { - this._element.style.paddingLeft = `${scrollbarWidth}px`; + if (isBodyOverflowing && !isModalOverflowing) { + const property = index.isRTL() ? 'paddingLeft' : 'paddingRight'; + this._element.style[property] = `${scrollbarWidth}px`; } - if (isBodyOverflowing && !isModalOverflowing && !isRTL() || !isBodyOverflowing && isModalOverflowing && isRTL()) { - this._element.style.paddingRight = `${scrollbarWidth}px`; + if (!isBodyOverflowing && isModalOverflowing) { + const property = index.isRTL() ? 'paddingRight' : 'paddingLeft'; + this._element.style[property] = `${scrollbarWidth}px`; } } @@ -991,14 +351,12 @@ } /** - * ------------------------------------------------------------------------ - * Data Api implementation - * ------------------------------------------------------------------------ + * Data API implementation */ EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { - const target = getElementFromSelector(this); + const target = index.getElementFromSelector(this); if (['A', 'AREA'].includes(this.tagName)) { event.preventDefault(); @@ -1011,30 +369,27 @@ } EventHandler__default.default.one(target, EVENT_HIDDEN, () => { - if (isVisible(this)) { + if (index.isVisible(this)) { this.focus(); } }); - }); // avoid conflict when clicking moddal toggler while another one is open + }); // avoid conflict when clicking modal toggler while another one is open - const allReadyOpen = SelectorEngine__default.default.findOne(OPEN_SELECTOR); + const alreadyOpen = SelectorEngine__default.default.findOne(OPEN_SELECTOR); - if (allReadyOpen) { - Modal.getInstance(allReadyOpen).hide(); + if (alreadyOpen) { + Modal.getInstance(alreadyOpen).hide(); } const data = Modal.getOrCreateInstance(target); data.toggle(this); }); - enableDismissTrigger(Modal); + componentFunctions.enableDismissTrigger(Modal); /** - * ------------------------------------------------------------------------ * jQuery - * ------------------------------------------------------------------------ - * add .Modal to jQuery only if jQuery is present */ - defineJQueryPlugin(Modal); + index.defineJQueryPlugin(Modal); return Modal; |