[Summary view] [Print] [Text view]

   1  import { E as EventHandler, c as getElementFromSelector, j as isDisabled, i as isVisible, S as SelectorEngine, e as enableDismissTrigger, d as defineJQueryPlugin, B as BaseComponent, l as ScrollBarHelper, M as Manipulator, a as typeCheckConfig, m as Backdrop, F as FocusTrap } from './dom.js?5.1.3';
   2  
   3  /**
   4   * --------------------------------------------------------------------------
   5   * Bootstrap (v5.1.3): offcanvas.js
   6   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   7   * --------------------------------------------------------------------------
   8   */
   9  /**
  10   * ------------------------------------------------------------------------
  11   * Constants
  12   * ------------------------------------------------------------------------
  13   */
  14  
  15  const NAME = 'offcanvas';
  16  const DATA_KEY = 'bs.offcanvas';
  17  const EVENT_KEY = `.$DATA_KEY}`;
  18  const DATA_API_KEY = '.data-api';
  19  const EVENT_LOAD_DATA_API = `load$EVENT_KEY}$DATA_API_KEY}`;
  20  const ESCAPE_KEY = 'Escape';
  21  const Default = {
  22    backdrop: true,
  23    keyboard: true,
  24    scroll: false
  25  };
  26  const DefaultType = {
  27    backdrop: 'boolean',
  28    keyboard: 'boolean',
  29    scroll: 'boolean'
  30  };
  31  const CLASS_NAME_SHOW = 'show';
  32  const CLASS_NAME_BACKDROP = 'offcanvas-backdrop';
  33  const OPEN_SELECTOR = '.offcanvas.show';
  34  const EVENT_SHOW = `show$EVENT_KEY}`;
  35  const EVENT_SHOWN = `shown$EVENT_KEY}`;
  36  const EVENT_HIDE = `hide$EVENT_KEY}`;
  37  const EVENT_HIDDEN = `hidden$EVENT_KEY}`;
  38  const EVENT_CLICK_DATA_API = `click$EVENT_KEY}$DATA_API_KEY}`;
  39  const EVENT_KEYDOWN_DISMISS = `keydown.dismiss$EVENT_KEY}`;
  40  const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]';
  41  /**
  42   * ------------------------------------------------------------------------
  43   * Class Definition
  44   * ------------------------------------------------------------------------
  45   */
  46  
  47  class Offcanvas extends BaseComponent {
  48    constructor(element, config) {
  49      super(element);
  50      this._config = this._getConfig(config);
  51      this._isShown = false;
  52      this._backdrop = this._initializeBackDrop();
  53      this._focustrap = this._initializeFocusTrap();
  54  
  55      this._addEventListeners();
  56    } // Getters
  57  
  58  
  59    static get NAME() {
  60      return NAME;
  61    }
  62  
  63    static get Default() {
  64      return Default;
  65    } // Public
  66  
  67  
  68    toggle(relatedTarget) {
  69      return this._isShown ? this.hide() : this.show(relatedTarget);
  70    }
  71  
  72    show(relatedTarget) {
  73      if (this._isShown) {
  74        return;
  75      }
  76  
  77      const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
  78        relatedTarget
  79      });
  80  
  81      if (showEvent.defaultPrevented) {
  82        return;
  83      }
  84  
  85      this._isShown = true;
  86      this._element.style.visibility = 'visible';
  87  
  88      this._backdrop.show();
  89  
  90      if (!this._config.scroll) {
  91        new ScrollBarHelper().hide();
  92      }
  93  
  94      this._element.removeAttribute('aria-hidden');
  95  
  96      this._element.setAttribute('aria-modal', true);
  97  
  98      this._element.setAttribute('role', 'dialog');
  99  
 100      this._element.classList.add(CLASS_NAME_SHOW);
 101  
 102      const completeCallBack = () => {
 103        if (!this._config.scroll) {
 104          this._focustrap.activate();
 105        }
 106  
 107        EventHandler.trigger(this._element, EVENT_SHOWN, {
 108          relatedTarget
 109        });
 110      };
 111  
 112      this._queueCallback(completeCallBack, this._element, true);
 113    }
 114  
 115    hide() {
 116      if (!this._isShown) {
 117        return;
 118      }
 119  
 120      const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE);
 121  
 122      if (hideEvent.defaultPrevented) {
 123        return;
 124      }
 125  
 126      this._focustrap.deactivate();
 127  
 128      this._element.blur();
 129  
 130      this._isShown = false;
 131  
 132      this._element.classList.remove(CLASS_NAME_SHOW);
 133  
 134      this._backdrop.hide();
 135  
 136      const completeCallback = () => {
 137        this._element.setAttribute('aria-hidden', true);
 138  
 139        this._element.removeAttribute('aria-modal');
 140  
 141        this._element.removeAttribute('role');
 142  
 143        this._element.style.visibility = 'hidden';
 144  
 145        if (!this._config.scroll) {
 146          new ScrollBarHelper().reset();
 147        }
 148  
 149        EventHandler.trigger(this._element, EVENT_HIDDEN);
 150      };
 151  
 152      this._queueCallback(completeCallback, this._element, true);
 153    }
 154  
 155    dispose() {
 156      this._backdrop.dispose();
 157  
 158      this._focustrap.deactivate();
 159  
 160      super.dispose();
 161    } // Private
 162  
 163  
 164    _getConfig(config) {
 165      config = { ...Default,
 166        ...Manipulator.getDataAttributes(this._element),
 167        ...(typeof config === 'object' ? config : {})
 168      };
 169      typeCheckConfig(NAME, config, DefaultType);
 170      return config;
 171    }
 172  
 173    _initializeBackDrop() {
 174      return new Backdrop({
 175        className: CLASS_NAME_BACKDROP,
 176        isVisible: this._config.backdrop,
 177        isAnimated: true,
 178        rootElement: this._element.parentNode,
 179        clickCallback: () => this.hide()
 180      });
 181    }
 182  
 183    _initializeFocusTrap() {
 184      return new FocusTrap({
 185        trapElement: this._element
 186      });
 187    }
 188  
 189    _addEventListeners() {
 190      EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
 191        if (this._config.keyboard && event.key === ESCAPE_KEY) {
 192          this.hide();
 193        }
 194      });
 195    } // Static
 196  
 197  
 198    static jQueryInterface(config) {
 199      return this.each(function () {
 200        const data = Offcanvas.getOrCreateInstance(this, config);
 201  
 202        if (typeof config !== 'string') {
 203          return;
 204        }
 205  
 206        if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
 207          throw new TypeError(`No method named "$config}"`);
 208        }
 209  
 210        data[config](this);
 211      });
 212    }
 213  
 214  }
 215  /**
 216   * ------------------------------------------------------------------------
 217   * Data Api implementation
 218   * ------------------------------------------------------------------------
 219   */
 220  
 221  
 222  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
 223    const target = getElementFromSelector(this);
 224  
 225    if (['A', 'AREA'].includes(this.tagName)) {
 226      event.preventDefault();
 227    }
 228  
 229    if (isDisabled(this)) {
 230      return;
 231    }
 232  
 233    EventHandler.one(target, EVENT_HIDDEN, () => {
 234      // focus on trigger when it is closed
 235      if (isVisible(this)) {
 236        this.focus();
 237      }
 238    }); // avoid conflict when clicking a toggler of an offcanvas, while another is open
 239  
 240    const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR);
 241  
 242    if (allReadyOpen && allReadyOpen !== target) {
 243      Offcanvas.getInstance(allReadyOpen).hide();
 244    }
 245  
 246    const data = Offcanvas.getOrCreateInstance(target);
 247    data.toggle(this);
 248  });
 249  EventHandler.on(window, EVENT_LOAD_DATA_API, () => SelectorEngine.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show()));
 250  enableDismissTrigger(Offcanvas);
 251  /**
 252   * ------------------------------------------------------------------------
 253   * jQuery
 254   * ------------------------------------------------------------------------
 255   */
 256  
 257  defineJQueryPlugin(Offcanvas);
 258  
 259  window.bootstrap = window.bootstrap || {};
 260  window.bootstrap.Offcanvas = Offcanvas;
 261  
 262  if (Joomla && Joomla.getOptions) {
 263    // Get the elements/configurations from the PHP
 264    const offcanvases = Joomla.getOptions('bootstrap.offcanvas'); // Initialise the elements
 265  
 266    if (typeof offcanvases === 'object' && offcanvases !== null) {
 267      Object.keys(offcanvases).forEach(offcanvas => {
 268        const opt = offcanvases[offcanvas];
 269        const options = {
 270          backdrop: opt.backdrop ? opt.backdrop : true,
 271          keyboard: opt.keyboard ? opt.keyboard : true,
 272          scroll: opt.scroll ? opt.scroll : true
 273        };
 274        const elements = Array.from(document.querySelectorAll(offcanvas));
 275  
 276        if (elements.length) {
 277          elements.map(el => new window.bootstrap.Offcanvas(el, options));
 278        }
 279      });
 280    }
 281  }
 282  
 283  export { Offcanvas as O };