| 1 | /*!
|
|---|
| 2 | * Bootstrap offcanvas.js v5.1.3 (https://getbootstrap.com/)
|
|---|
| 3 | * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
|---|
| 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|---|
| 5 | */
|
|---|
| 6 | (function (global, factory) {
|
|---|
| 7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/manipulator.js'), require('./dom/event-handler.js'), require('./base-component.js')) :
|
|---|
| 8 | typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/manipulator', './dom/event-handler', './base-component'], factory) :
|
|---|
| 9 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Offcanvas = factory(global.SelectorEngine, global.Manipulator, global.EventHandler, global.Base));
|
|---|
| 10 | })(this, (function (SelectorEngine, Manipulator, EventHandler, BaseComponent) { 'use strict';
|
|---|
| 11 |
|
|---|
| 12 | const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
|
|---|
| 13 |
|
|---|
| 14 | const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
|
|---|
| 15 | const Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
|
|---|
| 16 | const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
|
|---|
| 17 | const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
|
|---|
| 18 |
|
|---|
| 19 | /**
|
|---|
| 20 | * --------------------------------------------------------------------------
|
|---|
| 21 | * Bootstrap (v5.1.3): util/index.js
|
|---|
| 22 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|---|
| 23 | * --------------------------------------------------------------------------
|
|---|
| 24 | */
|
|---|
| 25 | const MILLISECONDS_MULTIPLIER = 1000;
|
|---|
| 26 | const TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp)
|
|---|
| 27 |
|
|---|
| 28 | const toType = obj => {
|
|---|
| 29 | if (obj === null || obj === undefined) {
|
|---|
| 30 | return `${obj}`;
|
|---|
| 31 | }
|
|---|
| 32 |
|
|---|
| 33 | return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase();
|
|---|
| 34 | };
|
|---|
| 35 |
|
|---|
| 36 | const getSelector = element => {
|
|---|
| 37 | let selector = element.getAttribute('data-bs-target');
|
|---|
| 38 |
|
|---|
| 39 | if (!selector || selector === '#') {
|
|---|
| 40 | let hrefAttr = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes,
|
|---|
| 41 | // so everything starting with `#` or `.`. If a "real" URL is used as the selector,
|
|---|
| 42 | // `document.querySelector` will rightfully complain it is invalid.
|
|---|
| 43 | // See https://github.com/twbs/bootstrap/issues/32273
|
|---|
| 44 |
|
|---|
| 45 | if (!hrefAttr || !hrefAttr.includes('#') && !hrefAttr.startsWith('.')) {
|
|---|
| 46 | return null;
|
|---|
| 47 | } // Just in case some CMS puts out a full URL with the anchor appended
|
|---|
| 48 |
|
|---|
| 49 |
|
|---|
| 50 | if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
|
|---|
| 51 | hrefAttr = `#${hrefAttr.split('#')[1]}`;
|
|---|
| 52 | }
|
|---|
| 53 |
|
|---|
| 54 | selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null;
|
|---|
| 55 | }
|
|---|
| 56 |
|
|---|
| 57 | return selector;
|
|---|
| 58 | };
|
|---|
| 59 |
|
|---|
| 60 | const getElementFromSelector = element => {
|
|---|
| 61 | const selector = getSelector(element);
|
|---|
| 62 | return selector ? document.querySelector(selector) : null;
|
|---|
| 63 | };
|
|---|
| 64 |
|
|---|
| 65 | const getTransitionDurationFromElement = element => {
|
|---|
| 66 | if (!element) {
|
|---|
| 67 | return 0;
|
|---|
| 68 | } // Get transition-duration of the element
|
|---|
| 69 |
|
|---|
| 70 |
|
|---|
| 71 | let {
|
|---|
| 72 | transitionDuration,
|
|---|
| 73 | transitionDelay
|
|---|
| 74 | } = window.getComputedStyle(element);
|
|---|
| 75 | const floatTransitionDuration = Number.parseFloat(transitionDuration);
|
|---|
| 76 | const floatTransitionDelay = Number.parseFloat(transitionDelay); // Return 0 if element or transition duration is not found
|
|---|
| 77 |
|
|---|
| 78 | if (!floatTransitionDuration && !floatTransitionDelay) {
|
|---|
| 79 | return 0;
|
|---|
| 80 | } // If multiple durations are defined, take the first
|
|---|
| 81 |
|
|---|
| 82 |
|
|---|
| 83 | transitionDuration = transitionDuration.split(',')[0];
|
|---|
| 84 | transitionDelay = transitionDelay.split(',')[0];
|
|---|
| 85 | return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER;
|
|---|
| 86 | };
|
|---|
| 87 |
|
|---|
| 88 | const triggerTransitionEnd = element => {
|
|---|
| 89 | element.dispatchEvent(new Event(TRANSITION_END));
|
|---|
| 90 | };
|
|---|
| 91 |
|
|---|
| 92 | const isElement = obj => {
|
|---|
| 93 | if (!obj || typeof obj !== 'object') {
|
|---|
| 94 | return false;
|
|---|
| 95 | }
|
|---|
| 96 |
|
|---|
| 97 | if (typeof obj.jquery !== 'undefined') {
|
|---|
| 98 | obj = obj[0];
|
|---|
| 99 | }
|
|---|
| 100 |
|
|---|
| 101 | return typeof obj.nodeType !== 'undefined';
|
|---|
| 102 | };
|
|---|
| 103 |
|
|---|
| 104 | const getElement = obj => {
|
|---|
| 105 | if (isElement(obj)) {
|
|---|
| 106 | // it's a jQuery object or a node element
|
|---|
| 107 | return obj.jquery ? obj[0] : obj;
|
|---|
| 108 | }
|
|---|
| 109 |
|
|---|
| 110 | if (typeof obj === 'string' && obj.length > 0) {
|
|---|
| 111 | return document.querySelector(obj);
|
|---|
| 112 | }
|
|---|
| 113 |
|
|---|
| 114 | return null;
|
|---|
| 115 | };
|
|---|
| 116 |
|
|---|
| 117 | const typeCheckConfig = (componentName, config, configTypes) => {
|
|---|
| 118 | Object.keys(configTypes).forEach(property => {
|
|---|
| 119 | const expectedTypes = configTypes[property];
|
|---|
| 120 | const value = config[property];
|
|---|
| 121 | const valueType = value && isElement(value) ? 'element' : toType(value);
|
|---|
| 122 |
|
|---|
| 123 | if (!new RegExp(expectedTypes).test(valueType)) {
|
|---|
| 124 | throw new TypeError(`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`);
|
|---|
| 125 | }
|
|---|
| 126 | });
|
|---|
| 127 | };
|
|---|
| 128 |
|
|---|
| 129 | const isVisible = element => {
|
|---|
| 130 | if (!isElement(element) || element.getClientRects().length === 0) {
|
|---|
| 131 | return false;
|
|---|
| 132 | }
|
|---|
| 133 |
|
|---|
| 134 | return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
|
|---|
| 135 | };
|
|---|
| 136 |
|
|---|
| 137 | const isDisabled = element => {
|
|---|
| 138 | if (!element || element.nodeType !== Node.ELEMENT_NODE) {
|
|---|
| 139 | return true;
|
|---|
| 140 | }
|
|---|
| 141 |
|
|---|
| 142 | if (element.classList.contains('disabled')) {
|
|---|
| 143 | return true;
|
|---|
| 144 | }
|
|---|
| 145 |
|
|---|
| 146 | if (typeof element.disabled !== 'undefined') {
|
|---|
| 147 | return element.disabled;
|
|---|
| 148 | }
|
|---|
| 149 |
|
|---|
| 150 | return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false';
|
|---|
| 151 | };
|
|---|
| 152 | /**
|
|---|
| 153 | * Trick to restart an element's animation
|
|---|
| 154 | *
|
|---|
| 155 | * @param {HTMLElement} element
|
|---|
| 156 | * @return void
|
|---|
| 157 | *
|
|---|
| 158 | * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
|
|---|
| 159 | */
|
|---|
| 160 |
|
|---|
| 161 |
|
|---|
| 162 | const reflow = element => {
|
|---|
| 163 | // eslint-disable-next-line no-unused-expressions
|
|---|
| 164 | element.offsetHeight;
|
|---|
| 165 | };
|
|---|
| 166 |
|
|---|
| 167 | const getjQuery = () => {
|
|---|
| 168 | const {
|
|---|
| 169 | jQuery
|
|---|
| 170 | } = window;
|
|---|
| 171 |
|
|---|
| 172 | if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
|
|---|
| 173 | return jQuery;
|
|---|
| 174 | }
|
|---|
| 175 |
|
|---|
| 176 | return null;
|
|---|
| 177 | };
|
|---|
| 178 |
|
|---|
| 179 | const DOMContentLoadedCallbacks = [];
|
|---|
| 180 |
|
|---|
| 181 | const onDOMContentLoaded = callback => {
|
|---|
| 182 | if (document.readyState === 'loading') {
|
|---|
| 183 | // add listener on the first call when the document is in loading state
|
|---|
| 184 | if (!DOMContentLoadedCallbacks.length) {
|
|---|
| 185 | document.addEventListener('DOMContentLoaded', () => {
|
|---|
| 186 | DOMContentLoadedCallbacks.forEach(callback => callback());
|
|---|
| 187 | });
|
|---|
| 188 | }
|
|---|
| 189 |
|
|---|
| 190 | DOMContentLoadedCallbacks.push(callback);
|
|---|
| 191 | } else {
|
|---|
| 192 | callback();
|
|---|
| 193 | }
|
|---|
| 194 | };
|
|---|
| 195 |
|
|---|
| 196 | const defineJQueryPlugin = plugin => {
|
|---|
| 197 | onDOMContentLoaded(() => {
|
|---|
| 198 | const $ = getjQuery();
|
|---|
| 199 | /* istanbul ignore if */
|
|---|
| 200 |
|
|---|
| 201 | if ($) {
|
|---|
| 202 | const name = plugin.NAME;
|
|---|
| 203 | const JQUERY_NO_CONFLICT = $.fn[name];
|
|---|
| 204 | $.fn[name] = plugin.jQueryInterface;
|
|---|
| 205 | $.fn[name].Constructor = plugin;
|
|---|
| 206 |
|
|---|
| 207 | $.fn[name].noConflict = () => {
|
|---|
| 208 | $.fn[name] = JQUERY_NO_CONFLICT;
|
|---|
| 209 | return plugin.jQueryInterface;
|
|---|
| 210 | };
|
|---|
| 211 | }
|
|---|
| 212 | });
|
|---|
| 213 | };
|
|---|
| 214 |
|
|---|
| 215 | const execute = callback => {
|
|---|
| 216 | if (typeof callback === 'function') {
|
|---|
| 217 | callback();
|
|---|
| 218 | }
|
|---|
| 219 | };
|
|---|
| 220 |
|
|---|
| 221 | const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
|
|---|
| 222 | if (!waitForTransition) {
|
|---|
| 223 | execute(callback);
|
|---|
| 224 | return;
|
|---|
| 225 | }
|
|---|
| 226 |
|
|---|
| 227 | const durationPadding = 5;
|
|---|
| 228 | const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
|
|---|
| 229 | let called = false;
|
|---|
| 230 |
|
|---|
| 231 | const handler = ({
|
|---|
| 232 | target
|
|---|
| 233 | }) => {
|
|---|
| 234 | if (target !== transitionElement) {
|
|---|
| 235 | return;
|
|---|
| 236 | }
|
|---|
| 237 |
|
|---|
| 238 | called = true;
|
|---|
| 239 | transitionElement.removeEventListener(TRANSITION_END, handler);
|
|---|
| 240 | execute(callback);
|
|---|
| 241 | };
|
|---|
| 242 |
|
|---|
| 243 | transitionElement.addEventListener(TRANSITION_END, handler);
|
|---|
| 244 | setTimeout(() => {
|
|---|
| 245 | if (!called) {
|
|---|
| 246 | triggerTransitionEnd(transitionElement);
|
|---|
| 247 | }
|
|---|
| 248 | }, emulatedDuration);
|
|---|
| 249 | };
|
|---|
| 250 |
|
|---|
| 251 | /**
|
|---|
| 252 | * --------------------------------------------------------------------------
|
|---|
| 253 | * Bootstrap (v5.1.3): util/scrollBar.js
|
|---|
| 254 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|---|
| 255 | * --------------------------------------------------------------------------
|
|---|
| 256 | */
|
|---|
| 257 | const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top';
|
|---|
| 258 | const SELECTOR_STICKY_CONTENT = '.sticky-top';
|
|---|
| 259 |
|
|---|
| 260 | class ScrollBarHelper {
|
|---|
| 261 | constructor() {
|
|---|
| 262 | this._element = document.body;
|
|---|
| 263 | }
|
|---|
| 264 |
|
|---|
| 265 | getWidth() {
|
|---|
| 266 | // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
|
|---|
| 267 | const documentWidth = document.documentElement.clientWidth;
|
|---|
| 268 | return Math.abs(window.innerWidth - documentWidth);
|
|---|
| 269 | }
|
|---|
| 270 |
|
|---|
| 271 | hide() {
|
|---|
| 272 | const width = this.getWidth();
|
|---|
| 273 |
|
|---|
| 274 | this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width
|
|---|
| 275 |
|
|---|
| 276 |
|
|---|
| 277 | this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
|
|---|
| 278 |
|
|---|
| 279 |
|
|---|
| 280 | this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
|
|---|
| 281 |
|
|---|
| 282 | this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
|
|---|
| 283 | }
|
|---|
| 284 |
|
|---|
| 285 | _disableOverFlow() {
|
|---|
| 286 | this._saveInitialAttribute(this._element, 'overflow');
|
|---|
| 287 |
|
|---|
| 288 | this._element.style.overflow = 'hidden';
|
|---|
| 289 | }
|
|---|
| 290 |
|
|---|
| 291 | _setElementAttributes(selector, styleProp, callback) {
|
|---|
| 292 | const scrollbarWidth = this.getWidth();
|
|---|
| 293 |
|
|---|
| 294 | const manipulationCallBack = element => {
|
|---|
| 295 | if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
|
|---|
| 296 | return;
|
|---|
| 297 | }
|
|---|
| 298 |
|
|---|
| 299 | this._saveInitialAttribute(element, styleProp);
|
|---|
| 300 |
|
|---|
| 301 | const calculatedValue = window.getComputedStyle(element)[styleProp];
|
|---|
| 302 | element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
|
|---|
| 303 | };
|
|---|
| 304 |
|
|---|
| 305 | this._applyManipulationCallback(selector, manipulationCallBack);
|
|---|
| 306 | }
|
|---|
| 307 |
|
|---|
| 308 | reset() {
|
|---|
| 309 | this._resetElementAttributes(this._element, 'overflow');
|
|---|
| 310 |
|
|---|
| 311 | this._resetElementAttributes(this._element, 'paddingRight');
|
|---|
| 312 |
|
|---|
| 313 | this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
|
|---|
| 314 |
|
|---|
| 315 | this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
|
|---|
| 316 | }
|
|---|
| 317 |
|
|---|
| 318 | _saveInitialAttribute(element, styleProp) {
|
|---|
| 319 | const actualValue = element.style[styleProp];
|
|---|
| 320 |
|
|---|
| 321 | if (actualValue) {
|
|---|
| 322 | Manipulator__default.default.setDataAttribute(element, styleProp, actualValue);
|
|---|
| 323 | }
|
|---|
| 324 | }
|
|---|
| 325 |
|
|---|
| 326 | _resetElementAttributes(selector, styleProp) {
|
|---|
| 327 | const manipulationCallBack = element => {
|
|---|
| 328 | const value = Manipulator__default.default.getDataAttribute(element, styleProp);
|
|---|
| 329 |
|
|---|
| 330 | if (typeof value === 'undefined') {
|
|---|
| 331 | element.style.removeProperty(styleProp);
|
|---|
| 332 | } else {
|
|---|
| 333 | Manipulator__default.default.removeDataAttribute(element, styleProp);
|
|---|
| 334 | element.style[styleProp] = value;
|
|---|
| 335 | }
|
|---|
| 336 | };
|
|---|
| 337 |
|
|---|
| 338 | this._applyManipulationCallback(selector, manipulationCallBack);
|
|---|
| 339 | }
|
|---|
| 340 |
|
|---|
| 341 | _applyManipulationCallback(selector, callBack) {
|
|---|
| 342 | if (isElement(selector)) {
|
|---|
| 343 | callBack(selector);
|
|---|
| 344 | } else {
|
|---|
| 345 | SelectorEngine__default.default.find(selector, this._element).forEach(callBack);
|
|---|
| 346 | }
|
|---|
| 347 | }
|
|---|
| 348 |
|
|---|
| 349 | isOverflowing() {
|
|---|
| 350 | return this.getWidth() > 0;
|
|---|
| 351 | }
|
|---|
| 352 |
|
|---|
| 353 | }
|
|---|
| 354 |
|
|---|
| 355 | /**
|
|---|
| 356 | * --------------------------------------------------------------------------
|
|---|
| 357 | * Bootstrap (v5.1.3): util/backdrop.js
|
|---|
| 358 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|---|
| 359 | * --------------------------------------------------------------------------
|
|---|
| 360 | */
|
|---|
| 361 | const Default$2 = {
|
|---|
| 362 | className: 'modal-backdrop',
|
|---|
| 363 | isVisible: true,
|
|---|
| 364 | // if false, we use the backdrop helper without adding any element to the dom
|
|---|
| 365 | isAnimated: false,
|
|---|
| 366 | rootElement: 'body',
|
|---|
| 367 | // give the choice to place backdrop under different elements
|
|---|
| 368 | clickCallback: null
|
|---|
| 369 | };
|
|---|
| 370 | const DefaultType$2 = {
|
|---|
| 371 | className: 'string',
|
|---|
| 372 | isVisible: 'boolean',
|
|---|
| 373 | isAnimated: 'boolean',
|
|---|
| 374 | rootElement: '(element|string)',
|
|---|
| 375 | clickCallback: '(function|null)'
|
|---|
| 376 | };
|
|---|
| 377 | const NAME$2 = 'backdrop';
|
|---|
| 378 | const CLASS_NAME_FADE = 'fade';
|
|---|
| 379 | const CLASS_NAME_SHOW$1 = 'show';
|
|---|
| 380 | const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$2}`;
|
|---|
| 381 |
|
|---|
| 382 | class Backdrop {
|
|---|
| 383 | constructor(config) {
|
|---|
| 384 | this._config = this._getConfig(config);
|
|---|
| 385 | this._isAppended = false;
|
|---|
| 386 | this._element = null;
|
|---|
| 387 | }
|
|---|
| 388 |
|
|---|
| 389 | show(callback) {
|
|---|
| 390 | if (!this._config.isVisible) {
|
|---|
| 391 | execute(callback);
|
|---|
| 392 | return;
|
|---|
| 393 | }
|
|---|
| 394 |
|
|---|
| 395 | this._append();
|
|---|
| 396 |
|
|---|
| 397 | if (this._config.isAnimated) {
|
|---|
| 398 | reflow(this._getElement());
|
|---|
| 399 | }
|
|---|
| 400 |
|
|---|
| 401 | this._getElement().classList.add(CLASS_NAME_SHOW$1);
|
|---|
| 402 |
|
|---|
| 403 | this._emulateAnimation(() => {
|
|---|
| 404 | execute(callback);
|
|---|
| 405 | });
|
|---|
| 406 | }
|
|---|
| 407 |
|
|---|
| 408 | hide(callback) {
|
|---|
| 409 | if (!this._config.isVisible) {
|
|---|
| 410 | execute(callback);
|
|---|
| 411 | return;
|
|---|
| 412 | }
|
|---|
| 413 |
|
|---|
| 414 | this._getElement().classList.remove(CLASS_NAME_SHOW$1);
|
|---|
| 415 |
|
|---|
| 416 | this._emulateAnimation(() => {
|
|---|
| 417 | this.dispose();
|
|---|
| 418 | execute(callback);
|
|---|
| 419 | });
|
|---|
| 420 | } // Private
|
|---|
| 421 |
|
|---|
| 422 |
|
|---|
| 423 | _getElement() {
|
|---|
| 424 | if (!this._element) {
|
|---|
| 425 | const backdrop = document.createElement('div');
|
|---|
| 426 | backdrop.className = this._config.className;
|
|---|
| 427 |
|
|---|
| 428 | if (this._config.isAnimated) {
|
|---|
| 429 | backdrop.classList.add(CLASS_NAME_FADE);
|
|---|
| 430 | }
|
|---|
| 431 |
|
|---|
| 432 | this._element = backdrop;
|
|---|
| 433 | }
|
|---|
| 434 |
|
|---|
| 435 | return this._element;
|
|---|
| 436 | }
|
|---|
| 437 |
|
|---|
| 438 | _getConfig(config) {
|
|---|
| 439 | config = { ...Default$2,
|
|---|
| 440 | ...(typeof config === 'object' ? config : {})
|
|---|
| 441 | }; // use getElement() with the default "body" to get a fresh Element on each instantiation
|
|---|
| 442 |
|
|---|
| 443 | config.rootElement = getElement(config.rootElement);
|
|---|
| 444 | typeCheckConfig(NAME$2, config, DefaultType$2);
|
|---|
| 445 | return config;
|
|---|
| 446 | }
|
|---|
| 447 |
|
|---|
| 448 | _append() {
|
|---|
| 449 | if (this._isAppended) {
|
|---|
| 450 | return;
|
|---|
| 451 | }
|
|---|
| 452 |
|
|---|
| 453 | this._config.rootElement.append(this._getElement());
|
|---|
| 454 |
|
|---|
| 455 | EventHandler__default.default.on(this._getElement(), EVENT_MOUSEDOWN, () => {
|
|---|
| 456 | execute(this._config.clickCallback);
|
|---|
| 457 | });
|
|---|
| 458 | this._isAppended = true;
|
|---|
| 459 | }
|
|---|
| 460 |
|
|---|
| 461 | dispose() {
|
|---|
| 462 | if (!this._isAppended) {
|
|---|
| 463 | return;
|
|---|
| 464 | }
|
|---|
| 465 |
|
|---|
| 466 | EventHandler__default.default.off(this._element, EVENT_MOUSEDOWN);
|
|---|
| 467 |
|
|---|
| 468 | this._element.remove();
|
|---|
| 469 |
|
|---|
| 470 | this._isAppended = false;
|
|---|
| 471 | }
|
|---|
| 472 |
|
|---|
| 473 | _emulateAnimation(callback) {
|
|---|
| 474 | executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
|
|---|
| 475 | }
|
|---|
| 476 |
|
|---|
| 477 | }
|
|---|
| 478 |
|
|---|
| 479 | /**
|
|---|
| 480 | * --------------------------------------------------------------------------
|
|---|
| 481 | * Bootstrap (v5.1.3): util/focustrap.js
|
|---|
| 482 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|---|
| 483 | * --------------------------------------------------------------------------
|
|---|
| 484 | */
|
|---|
| 485 | const Default$1 = {
|
|---|
| 486 | trapElement: null,
|
|---|
| 487 | // The element to trap focus inside of
|
|---|
| 488 | autofocus: true
|
|---|
| 489 | };
|
|---|
| 490 | const DefaultType$1 = {
|
|---|
| 491 | trapElement: 'element',
|
|---|
| 492 | autofocus: 'boolean'
|
|---|
| 493 | };
|
|---|
| 494 | const NAME$1 = 'focustrap';
|
|---|
| 495 | const DATA_KEY$1 = 'bs.focustrap';
|
|---|
| 496 | const EVENT_KEY$1 = `.${DATA_KEY$1}`;
|
|---|
| 497 | const EVENT_FOCUSIN = `focusin${EVENT_KEY$1}`;
|
|---|
| 498 | const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY$1}`;
|
|---|
| 499 | const TAB_KEY = 'Tab';
|
|---|
| 500 | const TAB_NAV_FORWARD = 'forward';
|
|---|
| 501 | const TAB_NAV_BACKWARD = 'backward';
|
|---|
| 502 |
|
|---|
| 503 | class FocusTrap {
|
|---|
| 504 | constructor(config) {
|
|---|
| 505 | this._config = this._getConfig(config);
|
|---|
| 506 | this._isActive = false;
|
|---|
| 507 | this._lastTabNavDirection = null;
|
|---|
| 508 | }
|
|---|
| 509 |
|
|---|
| 510 | activate() {
|
|---|
| 511 | const {
|
|---|
| 512 | trapElement,
|
|---|
| 513 | autofocus
|
|---|
| 514 | } = this._config;
|
|---|
| 515 |
|
|---|
| 516 | if (this._isActive) {
|
|---|
| 517 | return;
|
|---|
| 518 | }
|
|---|
| 519 |
|
|---|
| 520 | if (autofocus) {
|
|---|
| 521 | trapElement.focus();
|
|---|
| 522 | }
|
|---|
| 523 |
|
|---|
| 524 | EventHandler__default.default.off(document, EVENT_KEY$1); // guard against infinite focus loop
|
|---|
| 525 |
|
|---|
| 526 | EventHandler__default.default.on(document, EVENT_FOCUSIN, event => this._handleFocusin(event));
|
|---|
| 527 | EventHandler__default.default.on(document, EVENT_KEYDOWN_TAB, event => this._handleKeydown(event));
|
|---|
| 528 | this._isActive = true;
|
|---|
| 529 | }
|
|---|
| 530 |
|
|---|
| 531 | deactivate() {
|
|---|
| 532 | if (!this._isActive) {
|
|---|
| 533 | return;
|
|---|
| 534 | }
|
|---|
| 535 |
|
|---|
| 536 | this._isActive = false;
|
|---|
| 537 | EventHandler__default.default.off(document, EVENT_KEY$1);
|
|---|
| 538 | } // Private
|
|---|
| 539 |
|
|---|
| 540 |
|
|---|
| 541 | _handleFocusin(event) {
|
|---|
| 542 | const {
|
|---|
| 543 | target
|
|---|
| 544 | } = event;
|
|---|
| 545 | const {
|
|---|
| 546 | trapElement
|
|---|
| 547 | } = this._config;
|
|---|
| 548 |
|
|---|
| 549 | if (target === document || target === trapElement || trapElement.contains(target)) {
|
|---|
| 550 | return;
|
|---|
| 551 | }
|
|---|
| 552 |
|
|---|
| 553 | const elements = SelectorEngine__default.default.focusableChildren(trapElement);
|
|---|
| 554 |
|
|---|
| 555 | if (elements.length === 0) {
|
|---|
| 556 | trapElement.focus();
|
|---|
| 557 | } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {
|
|---|
| 558 | elements[elements.length - 1].focus();
|
|---|
| 559 | } else {
|
|---|
| 560 | elements[0].focus();
|
|---|
| 561 | }
|
|---|
| 562 | }
|
|---|
| 563 |
|
|---|
| 564 | _handleKeydown(event) {
|
|---|
| 565 | if (event.key !== TAB_KEY) {
|
|---|
| 566 | return;
|
|---|
| 567 | }
|
|---|
| 568 |
|
|---|
| 569 | this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD;
|
|---|
| 570 | }
|
|---|
| 571 |
|
|---|
| 572 | _getConfig(config) {
|
|---|
| 573 | config = { ...Default$1,
|
|---|
| 574 | ...(typeof config === 'object' ? config : {})
|
|---|
| 575 | };
|
|---|
| 576 | typeCheckConfig(NAME$1, config, DefaultType$1);
|
|---|
| 577 | return config;
|
|---|
| 578 | }
|
|---|
| 579 |
|
|---|
| 580 | }
|
|---|
| 581 |
|
|---|
| 582 | /**
|
|---|
| 583 | * --------------------------------------------------------------------------
|
|---|
| 584 | * Bootstrap (v5.1.3): util/component-functions.js
|
|---|
| 585 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|---|
| 586 | * --------------------------------------------------------------------------
|
|---|
| 587 | */
|
|---|
| 588 |
|
|---|
| 589 | const enableDismissTrigger = (component, method = 'hide') => {
|
|---|
| 590 | const clickEvent = `click.dismiss${component.EVENT_KEY}`;
|
|---|
| 591 | const name = component.NAME;
|
|---|
| 592 | EventHandler__default.default.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
|
|---|
| 593 | if (['A', 'AREA'].includes(this.tagName)) {
|
|---|
| 594 | event.preventDefault();
|
|---|
| 595 | }
|
|---|
| 596 |
|
|---|
| 597 | if (isDisabled(this)) {
|
|---|
| 598 | return;
|
|---|
| 599 | }
|
|---|
| 600 |
|
|---|
| 601 | const target = getElementFromSelector(this) || this.closest(`.${name}`);
|
|---|
| 602 | const instance = component.getOrCreateInstance(target); // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
|
|---|
| 603 |
|
|---|
| 604 | instance[method]();
|
|---|
| 605 | });
|
|---|
| 606 | };
|
|---|
| 607 |
|
|---|
| 608 | /**
|
|---|
| 609 | * --------------------------------------------------------------------------
|
|---|
| 610 | * Bootstrap (v5.1.3): offcanvas.js
|
|---|
| 611 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|---|
| 612 | * --------------------------------------------------------------------------
|
|---|
| 613 | */
|
|---|
| 614 | /**
|
|---|
| 615 | * ------------------------------------------------------------------------
|
|---|
| 616 | * Constants
|
|---|
| 617 | * ------------------------------------------------------------------------
|
|---|
| 618 | */
|
|---|
| 619 |
|
|---|
| 620 | const NAME = 'offcanvas';
|
|---|
| 621 | const DATA_KEY = 'bs.offcanvas';
|
|---|
| 622 | const EVENT_KEY = `.${DATA_KEY}`;
|
|---|
| 623 | const DATA_API_KEY = '.data-api';
|
|---|
| 624 | const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
|
|---|
| 625 | const ESCAPE_KEY = 'Escape';
|
|---|
| 626 | const Default = {
|
|---|
| 627 | backdrop: true,
|
|---|
| 628 | keyboard: true,
|
|---|
| 629 | scroll: false
|
|---|
| 630 | };
|
|---|
| 631 | const DefaultType = {
|
|---|
| 632 | backdrop: 'boolean',
|
|---|
| 633 | keyboard: 'boolean',
|
|---|
| 634 | scroll: 'boolean'
|
|---|
| 635 | };
|
|---|
| 636 | const CLASS_NAME_SHOW = 'show';
|
|---|
| 637 | const CLASS_NAME_BACKDROP = 'offcanvas-backdrop';
|
|---|
| 638 | const OPEN_SELECTOR = '.offcanvas.show';
|
|---|
| 639 | const EVENT_SHOW = `show${EVENT_KEY}`;
|
|---|
| 640 | const EVENT_SHOWN = `shown${EVENT_KEY}`;
|
|---|
| 641 | const EVENT_HIDE = `hide${EVENT_KEY}`;
|
|---|
| 642 | const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
|---|
| 643 | const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
|
|---|
| 644 | const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
|
|---|
| 645 | const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]';
|
|---|
| 646 | /**
|
|---|
| 647 | * ------------------------------------------------------------------------
|
|---|
| 648 | * Class Definition
|
|---|
| 649 | * ------------------------------------------------------------------------
|
|---|
| 650 | */
|
|---|
| 651 |
|
|---|
| 652 | class Offcanvas extends BaseComponent__default.default {
|
|---|
| 653 | constructor(element, config) {
|
|---|
| 654 | super(element);
|
|---|
| 655 | this._config = this._getConfig(config);
|
|---|
| 656 | this._isShown = false;
|
|---|
| 657 | this._backdrop = this._initializeBackDrop();
|
|---|
| 658 | this._focustrap = this._initializeFocusTrap();
|
|---|
| 659 |
|
|---|
| 660 | this._addEventListeners();
|
|---|
| 661 | } // Getters
|
|---|
| 662 |
|
|---|
| 663 |
|
|---|
| 664 | static get NAME() {
|
|---|
| 665 | return NAME;
|
|---|
| 666 | }
|
|---|
| 667 |
|
|---|
| 668 | static get Default() {
|
|---|
| 669 | return Default;
|
|---|
| 670 | } // Public
|
|---|
| 671 |
|
|---|
| 672 |
|
|---|
| 673 | toggle(relatedTarget) {
|
|---|
| 674 | return this._isShown ? this.hide() : this.show(relatedTarget);
|
|---|
| 675 | }
|
|---|
| 676 |
|
|---|
| 677 | show(relatedTarget) {
|
|---|
| 678 | if (this._isShown) {
|
|---|
| 679 | return;
|
|---|
| 680 | }
|
|---|
| 681 |
|
|---|
| 682 | const showEvent = EventHandler__default.default.trigger(this._element, EVENT_SHOW, {
|
|---|
| 683 | relatedTarget
|
|---|
| 684 | });
|
|---|
| 685 |
|
|---|
| 686 | if (showEvent.defaultPrevented) {
|
|---|
| 687 | return;
|
|---|
| 688 | }
|
|---|
| 689 |
|
|---|
| 690 | this._isShown = true;
|
|---|
| 691 | this._element.style.visibility = 'visible';
|
|---|
| 692 |
|
|---|
| 693 | this._backdrop.show();
|
|---|
| 694 |
|
|---|
| 695 | if (!this._config.scroll) {
|
|---|
| 696 | new ScrollBarHelper().hide();
|
|---|
| 697 | }
|
|---|
| 698 |
|
|---|
| 699 | this._element.removeAttribute('aria-hidden');
|
|---|
| 700 |
|
|---|
| 701 | this._element.setAttribute('aria-modal', true);
|
|---|
| 702 |
|
|---|
| 703 | this._element.setAttribute('role', 'dialog');
|
|---|
| 704 |
|
|---|
| 705 | this._element.classList.add(CLASS_NAME_SHOW);
|
|---|
| 706 |
|
|---|
| 707 | const completeCallBack = () => {
|
|---|
| 708 | if (!this._config.scroll) {
|
|---|
| 709 | this._focustrap.activate();
|
|---|
| 710 | }
|
|---|
| 711 |
|
|---|
| 712 | EventHandler__default.default.trigger(this._element, EVENT_SHOWN, {
|
|---|
| 713 | relatedTarget
|
|---|
| 714 | });
|
|---|
| 715 | };
|
|---|
| 716 |
|
|---|
| 717 | this._queueCallback(completeCallBack, this._element, true);
|
|---|
| 718 | }
|
|---|
| 719 |
|
|---|
| 720 | hide() {
|
|---|
| 721 | if (!this._isShown) {
|
|---|
| 722 | return;
|
|---|
| 723 | }
|
|---|
| 724 |
|
|---|
| 725 | const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE);
|
|---|
| 726 |
|
|---|
| 727 | if (hideEvent.defaultPrevented) {
|
|---|
| 728 | return;
|
|---|
| 729 | }
|
|---|
| 730 |
|
|---|
| 731 | this._focustrap.deactivate();
|
|---|
| 732 |
|
|---|
| 733 | this._element.blur();
|
|---|
| 734 |
|
|---|
| 735 | this._isShown = false;
|
|---|
| 736 |
|
|---|
| 737 | this._element.classList.remove(CLASS_NAME_SHOW);
|
|---|
| 738 |
|
|---|
| 739 | this._backdrop.hide();
|
|---|
| 740 |
|
|---|
| 741 | const completeCallback = () => {
|
|---|
| 742 | this._element.setAttribute('aria-hidden', true);
|
|---|
| 743 |
|
|---|
| 744 | this._element.removeAttribute('aria-modal');
|
|---|
| 745 |
|
|---|
| 746 | this._element.removeAttribute('role');
|
|---|
| 747 |
|
|---|
| 748 | this._element.style.visibility = 'hidden';
|
|---|
| 749 |
|
|---|
| 750 | if (!this._config.scroll) {
|
|---|
| 751 | new ScrollBarHelper().reset();
|
|---|
| 752 | }
|
|---|
| 753 |
|
|---|
| 754 | EventHandler__default.default.trigger(this._element, EVENT_HIDDEN);
|
|---|
| 755 | };
|
|---|
| 756 |
|
|---|
| 757 | this._queueCallback(completeCallback, this._element, true);
|
|---|
| 758 | }
|
|---|
| 759 |
|
|---|
| 760 | dispose() {
|
|---|
| 761 | this._backdrop.dispose();
|
|---|
| 762 |
|
|---|
| 763 | this._focustrap.deactivate();
|
|---|
| 764 |
|
|---|
| 765 | super.dispose();
|
|---|
| 766 | } // Private
|
|---|
| 767 |
|
|---|
| 768 |
|
|---|
| 769 | _getConfig(config) {
|
|---|
| 770 | config = { ...Default,
|
|---|
| 771 | ...Manipulator__default.default.getDataAttributes(this._element),
|
|---|
| 772 | ...(typeof config === 'object' ? config : {})
|
|---|
| 773 | };
|
|---|
| 774 | typeCheckConfig(NAME, config, DefaultType);
|
|---|
| 775 | return config;
|
|---|
| 776 | }
|
|---|
| 777 |
|
|---|
| 778 | _initializeBackDrop() {
|
|---|
| 779 | return new Backdrop({
|
|---|
| 780 | className: CLASS_NAME_BACKDROP,
|
|---|
| 781 | isVisible: this._config.backdrop,
|
|---|
| 782 | isAnimated: true,
|
|---|
| 783 | rootElement: this._element.parentNode,
|
|---|
| 784 | clickCallback: () => this.hide()
|
|---|
| 785 | });
|
|---|
| 786 | }
|
|---|
| 787 |
|
|---|
| 788 | _initializeFocusTrap() {
|
|---|
| 789 | return new FocusTrap({
|
|---|
| 790 | trapElement: this._element
|
|---|
| 791 | });
|
|---|
| 792 | }
|
|---|
| 793 |
|
|---|
| 794 | _addEventListeners() {
|
|---|
| 795 | EventHandler__default.default.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
|---|
| 796 | if (this._config.keyboard && event.key === ESCAPE_KEY) {
|
|---|
| 797 | this.hide();
|
|---|
| 798 | }
|
|---|
| 799 | });
|
|---|
| 800 | } // Static
|
|---|
| 801 |
|
|---|
| 802 |
|
|---|
| 803 | static jQueryInterface(config) {
|
|---|
| 804 | return this.each(function () {
|
|---|
| 805 | const data = Offcanvas.getOrCreateInstance(this, config);
|
|---|
| 806 |
|
|---|
| 807 | if (typeof config !== 'string') {
|
|---|
| 808 | return;
|
|---|
| 809 | }
|
|---|
| 810 |
|
|---|
| 811 | if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
|---|
| 812 | throw new TypeError(`No method named "${config}"`);
|
|---|
| 813 | }
|
|---|
| 814 |
|
|---|
| 815 | data[config](this);
|
|---|
| 816 | });
|
|---|
| 817 | }
|
|---|
| 818 |
|
|---|
| 819 | }
|
|---|
| 820 | /**
|
|---|
| 821 | * ------------------------------------------------------------------------
|
|---|
| 822 | * Data Api implementation
|
|---|
| 823 | * ------------------------------------------------------------------------
|
|---|
| 824 | */
|
|---|
| 825 |
|
|---|
| 826 |
|
|---|
| 827 | EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
|---|
| 828 | const target = getElementFromSelector(this);
|
|---|
| 829 |
|
|---|
| 830 | if (['A', 'AREA'].includes(this.tagName)) {
|
|---|
| 831 | event.preventDefault();
|
|---|
| 832 | }
|
|---|
| 833 |
|
|---|
| 834 | if (isDisabled(this)) {
|
|---|
| 835 | return;
|
|---|
| 836 | }
|
|---|
| 837 |
|
|---|
| 838 | EventHandler__default.default.one(target, EVENT_HIDDEN, () => {
|
|---|
| 839 | // focus on trigger when it is closed
|
|---|
| 840 | if (isVisible(this)) {
|
|---|
| 841 | this.focus();
|
|---|
| 842 | }
|
|---|
| 843 | }); // avoid conflict when clicking a toggler of an offcanvas, while another is open
|
|---|
| 844 |
|
|---|
| 845 | const allReadyOpen = SelectorEngine__default.default.findOne(OPEN_SELECTOR);
|
|---|
| 846 |
|
|---|
| 847 | if (allReadyOpen && allReadyOpen !== target) {
|
|---|
| 848 | Offcanvas.getInstance(allReadyOpen).hide();
|
|---|
| 849 | }
|
|---|
| 850 |
|
|---|
| 851 | const data = Offcanvas.getOrCreateInstance(target);
|
|---|
| 852 | data.toggle(this);
|
|---|
| 853 | });
|
|---|
| 854 | EventHandler__default.default.on(window, EVENT_LOAD_DATA_API, () => SelectorEngine__default.default.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show()));
|
|---|
| 855 | enableDismissTrigger(Offcanvas);
|
|---|
| 856 | /**
|
|---|
| 857 | * ------------------------------------------------------------------------
|
|---|
| 858 | * jQuery
|
|---|
| 859 | * ------------------------------------------------------------------------
|
|---|
| 860 | */
|
|---|
| 861 |
|
|---|
| 862 | defineJQueryPlugin(Offcanvas);
|
|---|
| 863 |
|
|---|
| 864 | return Offcanvas;
|
|---|
| 865 |
|
|---|
| 866 | }));
|
|---|
| 867 | //# sourceMappingURL=offcanvas.js.map
|
|---|
