/*! * Bootstrap offcanvas.js v5.0.1 (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/selector-engine.js'), require('./dom/manipulator.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./base-component.js')) : typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/manipulator', './dom/data', './dom/event-handler', './base-component'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Offcanvas = factory(global.SelectorEngine, global.Manipulator, global.Data, global.EventHandler, global.Base)); }(this, (function (SelectorEngine, Manipulator, Data, EventHandler, BaseComponent) { 'use strict'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine); var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator); var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data); var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); 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 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 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'; }; 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 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(); } }; /** * -------------------------------------------------------------------------- * Bootstrap (v5.0.1): 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'; const 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); }; const hide = (width = getWidth()) => { _disableOverFlow(); // give padding to element to balances the hidden scrollbar width _setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth _setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width); _setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width); }; const _disableOverFlow = () => { const actualValue = document.body.style.overflow; if (actualValue) { Manipulator__default['default'].setDataAttribute(document.body, 'overflow', actualValue); } document.body.style.overflow = 'hidden'; }; const _setElementAttributes = (selector, styleProp, callback) => { const scrollbarWidth = getWidth(); SelectorEngine__default['default'].find(selector).forEach(element => { if (element !== document.body && window.innerWidth > element.clientWidth + 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`; }); }; const reset = () => { _resetElementAttributes('body', 'overflow'); _resetElementAttributes('body', 'paddingRight'); _resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight'); _resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight'); }; const _resetElementAttributes = (selector, styleProp) => { SelectorEngine__default['default'].find(selector).forEach(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; } }); }; /** * -------------------------------------------------------------------------- * Bootstrap (v5.0.1): util/backdrop.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ const Default$1 = { isVisible: true, // if false, we use the backdrop helper without adding any element to the dom isAnimated: false, rootElement: document.body, // give the choice to place backdrop under different elements clickCallback: null }; const DefaultType$1 = { isVisible: 'boolean', isAnimated: 'boolean', rootElement: 'element', clickCallback: '(function|null)' }; const NAME$1 = 'backdrop'; const CLASS_NAME_BACKDROP = 'modal-backdrop'; const CLASS_NAME_FADE = 'fade'; const CLASS_NAME_SHOW$1 = 'show'; const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$1}`; 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 = CLASS_NAME_BACKDROP; if (this._config.isAnimated) { backdrop.classList.add(CLASS_NAME_FADE); } this._element = backdrop; } return this._element; } _getConfig(config) { config = { ...Default$1, ...(typeof config === 'object' ? config : {}) }; config.rootElement = config.rootElement || document.body; typeCheckConfig(NAME$1, config, DefaultType$1); return config; } _append() { if (this._isAppended) { return; } this._config.rootElement.appendChild(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._getElement().parentNode.removeChild(this._element); this._isAppended = false; } _emulateAnimation(callback) { if (!this._config.isAnimated) { execute(callback); return; } const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement()); EventHandler__default['default'].one(this._getElement(), 'transitionend', () => execute(callback)); emulateTransitionEnd(this._getElement(), backdropTransitionDuration); } } /** * -------------------------------------------------------------------------- * Bootstrap (v5.0.1): offcanvas.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ const NAME = 'offcanvas'; const DATA_KEY = 'bs.offcanvas'; const EVENT_KEY = `.${DATA_KEY}`; const DATA_API_KEY = '.data-api'; const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`; const ESCAPE_KEY = 'Escape'; const Default = { backdrop: true, keyboard: true, scroll: false }; const DefaultType = { backdrop: 'boolean', keyboard: 'boolean', scroll: 'boolean' }; const CLASS_NAME_SHOW = 'show'; const OPEN_SELECTOR = '.offcanvas.show'; const EVENT_SHOW = `show${EVENT_KEY}`; const EVENT_SHOWN = `shown${EVENT_KEY}`; const EVENT_HIDE = `hide${EVENT_KEY}`; const EVENT_HIDDEN = `hidden${EVENT_KEY}`; const EVENT_FOCUSIN = `focusin${EVENT_KEY}`; const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`; const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`; const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`; const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="offcanvas"]'; const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'; /** * ------------------------------------------------------------------------ * Class Definition * ------------------------------------------------------------------------ */ class Offcanvas extends BaseComponent__default['default'] { constructor(element, config) { super(element); this._config = this._getConfig(config); this._isShown = false; this._backdrop = this._initializeBackDrop(); this._addEventListeners(); } // Getters static get NAME() { return NAME; } static get Default() { return Default; } // Public toggle(relatedTarget) { return this._isShown ? this.hide() : this.show(relatedTarget); } show(relatedTarget) { if (this._isShown) { return; } const showEvent = EventHandler__default['default'].trigger(this._element, EVENT_SHOW, { relatedTarget }); if (showEvent.defaultPrevented) { return; } this._isShown = true; this._element.style.visibility = 'visible'; this._backdrop.show(); if (!this._config.scroll) { hide(); this._enforceFocusOnElement(this._element); } this._element.removeAttribute('aria-hidden'); this._element.setAttribute('aria-modal', true); this._element.setAttribute('role', 'dialog'); this._element.classList.add(CLASS_NAME_SHOW); const completeCallBack = () => { EventHandler__default['default'].trigger(this._element, EVENT_SHOWN, { relatedTarget }); }; this._queueCallback(completeCallBack, this._element, true); } hide() { if (!this._isShown) { return; } const hideEvent = EventHandler__default['default'].trigger(this._element, EVENT_HIDE); if (hideEvent.defaultPrevented) { return; } EventHandler__default['default'].off(document, EVENT_FOCUSIN); this._element.blur(); this._isShown = false; this._element.classList.remove(CLASS_NAME_SHOW); this._backdrop.hide(); const completeCallback = () => { this._element.setAttribute('aria-hidden', true); this._element.removeAttribute('aria-modal'); this._element.removeAttribute('role'); this._element.style.visibility = 'hidden'; if (!this._config.scroll) { reset(); } EventHandler__default['default'].trigger(this._element, EVENT_HIDDEN); }; this._queueCallback(completeCallback, this._element, true); } dispose() { this._backdrop.dispose(); super.dispose(); EventHandler__default['default'].off(document, EVENT_FOCUSIN); } // Private _getConfig(config) { config = { ...Default, ...Manipulator__default['default'].getDataAttributes(this._element), ...(typeof config === 'object' ? config : {}) }; typeCheckConfig(NAME, config, DefaultType); return config; } _initializeBackDrop() { return new Backdrop({ isVisible: this._config.backdrop, isAnimated: true, rootElement: this._element.parentNode, clickCallback: () => this.hide() }); } _enforceFocusOnElement(element) { EventHandler__default['default'].off(document, EVENT_FOCUSIN); // guard against infinite focus loop EventHandler__default['default'].on(document, EVENT_FOCUSIN, event => { if (document !== event.target && element !== event.target && !element.contains(event.target)) { element.focus(); } }); element.focus(); } _addEventListeners() { EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, () => this.hide()); EventHandler__default['default'].on(this._element, EVENT_KEYDOWN_DISMISS, event => { if (this._config.keyboard && event.key === ESCAPE_KEY) { this.hide(); } }); } // Static static jQueryInterface(config) { return this.each(function () { const data = Data__default['default'].get(this, DATA_KEY) || new Offcanvas(this, typeof config === 'object' ? config : {}); 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__default['default'].on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { const target = getElementFromSelector(this); if (['A', 'AREA'].includes(this.tagName)) { event.preventDefault(); } if (isDisabled(this)) { return; } EventHandler__default['default'].one(target, EVENT_HIDDEN, () => { // focus on trigger when it is closed if (isVisible(this)) { this.focus(); } }); // avoid conflict when clicking a toggler of an offcanvas, while another is open const allReadyOpen = SelectorEngine__default['default'].findOne(OPEN_SELECTOR); if (allReadyOpen && allReadyOpen !== target) { Offcanvas.getInstance(allReadyOpen).hide(); } const data = Data__default['default'].get(target, DATA_KEY) || new Offcanvas(target); data.toggle(this); }); EventHandler__default['default'].on(window, EVENT_LOAD_DATA_API, () => { SelectorEngine__default['default'].find(OPEN_SELECTOR).forEach(el => (Data__default['default'].get(el, DATA_KEY) || new Offcanvas(el)).show()); }); /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ defineJQueryPlugin(Offcanvas); return Offcanvas; }))); //# sourceMappingURL=offcanvas.js.map