/*! * Bootstrap modal.js v5.0.0-beta3 (https://getbootstrap.com/) * Copyright 2011-2021 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/data.js'), 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/data', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.Data, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Base)); }(this, (function (Data, EventHandler, Manipulator, SelectorEngine, BaseComponent) { 'use strict'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data); var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator); var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); /** * -------------------------------------------------------------------------- * Bootstrap (v5.0.0-beta3): util/index.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 => (obj[0] || obj).nodeType; const emulateTransitionEnd = (element, duration) => { let called = false; const durationPadding = 5; const emulatedDuration = duration + durationPadding; function listener() { called = true; element.removeEventListener(TRANSITION_END, listener); } element.addEventListener(TRANSITION_END, listener); setTimeout(() => { if (!called) { triggerTransitionEnd(element); } }, emulatedDuration); }; 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 (!element) { return false; } if (element.style && element.parentNode && element.parentNode.style) { const elementStyle = getComputedStyle(element); const parentNodeStyle = getComputedStyle(element.parentNode); return elementStyle.display !== 'none' && parentNodeStyle.display !== 'none' && elementStyle.visibility !== 'hidden'; } return false; }; const reflow = element => element.offsetHeight; const getjQuery = () => { const { jQuery } = window; if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { return jQuery; } return null; }; const onDOMContentLoaded = callback => { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', callback); } else { callback(); } }; const isRTL = () => document.documentElement.dir === 'rtl'; const defineJQueryPlugin = (name, plugin) => { onDOMContentLoaded(() => { const $ = getjQuery(); /* istanbul ignore if */ if ($) { 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; }; } }); }; /** * -------------------------------------------------------------------------- * Bootstrap (v5.0.0-beta3): modal.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ const NAME = 'modal'; const DATA_KEY = 'bs.modal'; 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_FOCUSIN = `focusin${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_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`; const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure'; const CLASS_NAME_BACKDROP = 'modal-backdrop'; const CLASS_NAME_OPEN = 'modal-open'; const CLASS_NAME_FADE = 'fade'; const CLASS_NAME_SHOW = 'show'; const CLASS_NAME_STATIC = 'modal-static'; const SELECTOR_DIALOG = '.modal-dialog'; const SELECTOR_MODAL_BODY = '.modal-body'; const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]'; const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]'; const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'; const SELECTOR_STICKY_CONTENT = '.sticky-top'; /** * ------------------------------------------------------------------------ * Class Definition * ------------------------------------------------------------------------ */ class Modal extends BaseComponent__default['default'] { constructor(element, config) { super(element); this._config = this._getConfig(config); this._dialog = SelectorEngine__default['default'].findOne(SELECTOR_DIALOG, this._element); this._backdrop = null; this._isShown = false; this._isBodyOverflowing = false; this._ignoreBackdropClick = false; this._isTransitioning = false; this._scrollbarWidth = 0; } // Getters static get Default() { return Default; } static get DATA_KEY() { return DATA_KEY; } // Public toggle(relatedTarget) { return this._isShown ? this.hide() : this.show(relatedTarget); } show(relatedTarget) { if (this._isShown || this._isTransitioning) { return; } if (this._isAnimated()) { this._isTransitioning = true; } const showEvent = EventHandler__default['default'].trigger(this._element, EVENT_SHOW, { relatedTarget }); if (this._isShown || showEvent.defaultPrevented) { return; } this._isShown = true; this._checkScrollbar(); this._setScrollbar(); this._adjustDialog(); this._setEscapeEvent(); this._setResizeEvent(); EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, event => this.hide(event)); 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)); } hide(event) { if (event) { event.preventDefault(); } if (!this._isShown || this._isTransitioning) { return; } const hideEvent = EventHandler__default['default'].trigger(this._element, EVENT_HIDE); if (hideEvent.defaultPrevented) { return; } this._isShown = false; const isAnimated = this._isAnimated(); if (isAnimated) { this._isTransitioning = true; } this._setEscapeEvent(); this._setResizeEvent(); EventHandler__default['default'].off(document, EVENT_FOCUSIN); 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); if (isAnimated) { const transitionDuration = getTransitionDurationFromElement(this._element); EventHandler__default['default'].one(this._element, 'transitionend', event => this._hideModal(event)); emulateTransitionEnd(this._element, transitionDuration); } else { this._hideModal(); } } dispose() { [window, this._element, this._dialog].forEach(htmlElement => EventHandler__default['default'].off(htmlElement, EVENT_KEY)); super.dispose(); /** * `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API` * Do not move `document` in `htmlElements` array * It will remove `EVENT_CLICK_DATA_API` event that should remain */ EventHandler__default['default'].off(document, EVENT_FOCUSIN); this._config = null; this._dialog = null; this._backdrop = null; this._isShown = null; this._isBodyOverflowing = null; this._ignoreBackdropClick = null; this._isTransitioning = null; this._scrollbarWidth = null; } handleUpdate() { this._adjustDialog(); } // Private _getConfig(config) { config = { ...Default, ...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 document.body.appendChild(this._element); } this._element.style.display = 'block'; this._element.removeAttribute('aria-hidden'); this._element.setAttribute('aria-modal', true); this._element.setAttribute('role', 'dialog'); this._element.scrollTop = 0; if (modalBody) { modalBody.scrollTop = 0; } if (isAnimated) { reflow(this._element); } this._element.classList.add(CLASS_NAME_SHOW); if (this._config.focus) { this._enforceFocus(); } const transitionComplete = () => { if (this._config.focus) { this._element.focus(); } this._isTransitioning = false; EventHandler__default['default'].trigger(this._element, EVENT_SHOWN, { relatedTarget }); }; if (isAnimated) { const transitionDuration = getTransitionDurationFromElement(this._dialog); EventHandler__default['default'].one(this._dialog, 'transitionend', transitionComplete); emulateTransitionEnd(this._dialog, transitionDuration); } else { transitionComplete(); } } _enforceFocus() { EventHandler__default['default'].off(document, EVENT_FOCUSIN); // guard against infinite focus loop EventHandler__default['default'].on(document, EVENT_FOCUSIN, event => { if (document !== event.target && this._element !== event.target && !this._element.contains(event.target)) { this._element.focus(); } }); } _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); } } _setResizeEvent() { if (this._isShown) { EventHandler__default['default'].on(window, EVENT_RESIZE, () => this._adjustDialog()); } else { EventHandler__default['default'].off(window, EVENT_RESIZE); } } _hideModal() { this._element.style.display = 'none'; this._element.setAttribute('aria-hidden', true); this._element.removeAttribute('aria-modal'); this._element.removeAttribute('role'); this._isTransitioning = false; this._showBackdrop(() => { document.body.classList.remove(CLASS_NAME_OPEN); this._resetAdjustments(); this._resetScrollbar(); EventHandler__default['default'].trigger(this._element, EVENT_HIDDEN); }); } _removeBackdrop() { this._backdrop.parentNode.removeChild(this._backdrop); this._backdrop = null; } _showBackdrop(callback) { const isAnimated = this._isAnimated(); if (this._isShown && this._config.backdrop) { this._backdrop = document.createElement('div'); this._backdrop.className = CLASS_NAME_BACKDROP; if (isAnimated) { this._backdrop.classList.add(CLASS_NAME_FADE); } document.body.appendChild(this._backdrop); 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 === 'static') { this._triggerBackdropTransition(); } else { this.hide(); } }); if (isAnimated) { reflow(this._backdrop); } this._backdrop.classList.add(CLASS_NAME_SHOW); if (!isAnimated) { callback(); return; } const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop); EventHandler__default['default'].one(this._backdrop, 'transitionend', callback); emulateTransitionEnd(this._backdrop, backdropTransitionDuration); } else if (!this._isShown && this._backdrop) { this._backdrop.classList.remove(CLASS_NAME_SHOW); const callbackRemove = () => { this._removeBackdrop(); callback(); }; if (isAnimated) { const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop); EventHandler__default['default'].one(this._backdrop, 'transitionend', callbackRemove); emulateTransitionEnd(this._backdrop, backdropTransitionDuration); } else { callbackRemove(); } } else { callback(); } } _isAnimated() { return this._element.classList.contains(CLASS_NAME_FADE); } _triggerBackdropTransition() { const hideEvent = EventHandler__default['default'].trigger(this._element, EVENT_HIDE_PREVENTED); if (hideEvent.defaultPrevented) { return; } const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight; if (!isModalOverflowing) { this._element.style.overflowY = 'hidden'; } this._element.classList.add(CLASS_NAME_STATIC); const modalTransitionDuration = getTransitionDurationFromElement(this._dialog); EventHandler__default['default'].off(this._element, 'transitionend'); EventHandler__default['default'].one(this._element, 'transitionend', () => { this._element.classList.remove(CLASS_NAME_STATIC); if (!isModalOverflowing) { EventHandler__default['default'].one(this._element, 'transitionend', () => { this._element.style.overflowY = ''; }); emulateTransitionEnd(this._element, modalTransitionDuration); } }); emulateTransitionEnd(this._element, modalTransitionDuration); this._element.focus(); } // ---------------------------------------------------------------------- // the following methods are used to handle overflowing modals // ---------------------------------------------------------------------- _adjustDialog() { const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight; if (!this._isBodyOverflowing && isModalOverflowing && !isRTL() || this._isBodyOverflowing && !isModalOverflowing && isRTL()) { this._element.style.paddingLeft = `${this._scrollbarWidth}px`; } if (this._isBodyOverflowing && !isModalOverflowing && !isRTL() || !this._isBodyOverflowing && isModalOverflowing && isRTL()) { this._element.style.paddingRight = `${this._scrollbarWidth}px`; } } _resetAdjustments() { this._element.style.paddingLeft = ''; this._element.style.paddingRight = ''; } _checkScrollbar() { const rect = document.body.getBoundingClientRect(); this._isBodyOverflowing = Math.round(rect.left + rect.right) < window.innerWidth; this._scrollbarWidth = this._getScrollbarWidth(); } _setScrollbar() { if (this._isBodyOverflowing) { this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth); this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - this._scrollbarWidth); this._setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth); } document.body.classList.add(CLASS_NAME_OPEN); } _setElementAttributes(selector, styleProp, callback) { SelectorEngine__default['default'].find(selector).forEach(element => { if (element !== document.body && window.innerWidth > element.clientWidth + this._scrollbarWidth) { return; } const actualValue = element.style[styleProp]; const calculatedValue = window.getComputedStyle(element)[styleProp]; Manipulator__default['default'].setDataAttribute(element, styleProp, actualValue); element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px'; }); } _resetScrollbar() { this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight'); this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight'); this._resetElementAttributes('body', 'paddingRight'); } _resetElementAttributes(selector, styleProp) { SelectorEngine__default['default'].find(selector).forEach(element => { const value = Manipulator__default['default'].getDataAttribute(element, styleProp); if (typeof value === 'undefined' && element === document.body) { element.style[styleProp] = ''; } else { Manipulator__default['default'].removeDataAttribute(element, styleProp); element.style[styleProp] = value; } }); } _getScrollbarWidth() { // thx d.walsh const scrollDiv = document.createElement('div'); scrollDiv.className = CLASS_NAME_SCROLLBAR_MEASURER; document.body.appendChild(scrollDiv); const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; } // Static static jQueryInterface(config, relatedTarget) { return this.each(function () { let data = Data__default['default'].get(this, DATA_KEY); const _config = { ...Default, ...Manipulator__default['default'].getDataAttributes(this), ...(typeof config === 'object' && config ? config : {}) }; if (!data) { data = new Modal(this, _config); } if (typeof config === 'string') { if (typeof data[config] === 'undefined') { throw new TypeError(`No method named "${config}"`); } data[config](relatedTarget); } }); } } /** * ------------------------------------------------------------------------ * Data Api implementation * ------------------------------------------------------------------------ */ EventHandler__default['default'].on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { const target = getElementFromSelector(this); if (this.tagName === 'A' || this.tagName === 'AREA') { event.preventDefault(); } EventHandler__default['default'].one(target, EVENT_SHOW, showEvent => { if (showEvent.defaultPrevented) { // only register focus restorer if modal will actually get shown return; } EventHandler__default['default'].one(target, EVENT_HIDDEN, () => { if (isVisible(this)) { this.focus(); } }); }); let data = Data__default['default'].get(target, DATA_KEY); if (!data) { const config = { ...Manipulator__default['default'].getDataAttributes(target), ...Manipulator__default['default'].getDataAttributes(this) }; data = new Modal(target, config); } data.toggle(this); }); /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ * add .Modal to jQuery only if jQuery is present */ defineJQueryPlugin(NAME, Modal); return Modal; }))); //# sourceMappingURL=modal.js.map