[Summary view] [Print] [Text view]

   1  import { E as EventHandler, j as isDisabled, d as defineJQueryPlugin, B as BaseComponent, c as getElementFromSelector, S as SelectorEngine, r as reflow } from './dom.js?5.1.3';
   2  
   3  /**
   4   * --------------------------------------------------------------------------
   5   * Bootstrap (v5.1.3): tab.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 = 'tab';
  16  const DATA_KEY = 'bs.tab';
  17  const EVENT_KEY = `.$DATA_KEY}`;
  18  const DATA_API_KEY = '.data-api';
  19  const EVENT_HIDE = `hide$EVENT_KEY}`;
  20  const EVENT_HIDDEN = `hidden$EVENT_KEY}`;
  21  const EVENT_SHOW = `show$EVENT_KEY}`;
  22  const EVENT_SHOWN = `shown$EVENT_KEY}`;
  23  const EVENT_CLICK_DATA_API = `click$EVENT_KEY}$DATA_API_KEY}`;
  24  const CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu';
  25  const CLASS_NAME_ACTIVE = 'active';
  26  const CLASS_NAME_FADE = 'fade';
  27  const CLASS_NAME_SHOW = 'show';
  28  const SELECTOR_DROPDOWN = '.dropdown';
  29  const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group';
  30  const SELECTOR_ACTIVE = '.active';
  31  const SELECTOR_ACTIVE_UL = ':scope > li > .active';
  32  const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]';
  33  const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle';
  34  const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active';
  35  /**
  36   * ------------------------------------------------------------------------
  37   * Class Definition
  38   * ------------------------------------------------------------------------
  39   */
  40  
  41  class Tab extends BaseComponent {
  42    // Getters
  43    static get NAME() {
  44      return NAME;
  45    } // Public
  46  
  47  
  48    show() {
  49      if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && this._element.classList.contains(CLASS_NAME_ACTIVE)) {
  50        return;
  51      }
  52  
  53      let previous;
  54      const target = getElementFromSelector(this._element);
  55  
  56      const listElement = this._element.closest(SELECTOR_NAV_LIST_GROUP);
  57  
  58      if (listElement) {
  59        const itemSelector = listElement.nodeName === 'UL' || listElement.nodeName === 'OL' ? SELECTOR_ACTIVE_UL : SELECTOR_ACTIVE;
  60        previous = SelectorEngine.find(itemSelector, listElement);
  61        previous = previous[previous.length - 1];
  62      }
  63  
  64      const hideEvent = previous ? EventHandler.trigger(previous, EVENT_HIDE, {
  65        relatedTarget: this._element
  66      }) : null;
  67      const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
  68        relatedTarget: previous
  69      });
  70  
  71      if (showEvent.defaultPrevented || hideEvent !== null && hideEvent.defaultPrevented) {
  72        return;
  73      }
  74  
  75      this._activate(this._element, listElement);
  76  
  77      const complete = () => {
  78        EventHandler.trigger(previous, EVENT_HIDDEN, {
  79          relatedTarget: this._element
  80        });
  81        EventHandler.trigger(this._element, EVENT_SHOWN, {
  82          relatedTarget: previous
  83        });
  84      };
  85  
  86      if (target) {
  87        this._activate(target, target.parentNode, complete);
  88      } else {
  89        complete();
  90      }
  91    } // Private
  92  
  93  
  94    _activate(element, container, callback) {
  95      const activeElements = container && (container.nodeName === 'UL' || container.nodeName === 'OL') ? SelectorEngine.find(SELECTOR_ACTIVE_UL, container) : SelectorEngine.children(container, SELECTOR_ACTIVE);
  96      const active = activeElements[0];
  97      const isTransitioning = callback && active && active.classList.contains(CLASS_NAME_FADE);
  98  
  99      const complete = () => this._transitionComplete(element, active, callback);
 100  
 101      if (active && isTransitioning) {
 102        active.classList.remove(CLASS_NAME_SHOW);
 103  
 104        this._queueCallback(complete, element, true);
 105      } else {
 106        complete();
 107      }
 108    }
 109  
 110    _transitionComplete(element, active, callback) {
 111      if (active) {
 112        active.classList.remove(CLASS_NAME_ACTIVE);
 113        const dropdownChild = SelectorEngine.findOne(SELECTOR_DROPDOWN_ACTIVE_CHILD, active.parentNode);
 114  
 115        if (dropdownChild) {
 116          dropdownChild.classList.remove(CLASS_NAME_ACTIVE);
 117        }
 118  
 119        if (active.getAttribute('role') === 'tab') {
 120          active.setAttribute('aria-selected', false);
 121        }
 122      }
 123  
 124      element.classList.add(CLASS_NAME_ACTIVE);
 125  
 126      if (element.getAttribute('role') === 'tab') {
 127        element.setAttribute('aria-selected', true);
 128      }
 129  
 130      reflow(element);
 131  
 132      if (element.classList.contains(CLASS_NAME_FADE)) {
 133        element.classList.add(CLASS_NAME_SHOW);
 134      }
 135  
 136      let parent = element.parentNode;
 137  
 138      if (parent && parent.nodeName === 'LI') {
 139        parent = parent.parentNode;
 140      }
 141  
 142      if (parent && parent.classList.contains(CLASS_NAME_DROPDOWN_MENU)) {
 143        const dropdownElement = element.closest(SELECTOR_DROPDOWN);
 144  
 145        if (dropdownElement) {
 146          SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement).forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE));
 147        }
 148  
 149        element.setAttribute('aria-expanded', true);
 150      }
 151  
 152      if (callback) {
 153        callback();
 154      }
 155    } // Static
 156  
 157  
 158    static jQueryInterface(config) {
 159      return this.each(function () {
 160        const data = Tab.getOrCreateInstance(this);
 161  
 162        if (typeof config === 'string') {
 163          if (typeof data[config] === 'undefined') {
 164            throw new TypeError(`No method named "$config}"`);
 165          }
 166  
 167          data[config]();
 168        }
 169      });
 170    }
 171  
 172  }
 173  /**
 174   * ------------------------------------------------------------------------
 175   * Data Api implementation
 176   * ------------------------------------------------------------------------
 177   */
 178  
 179  
 180  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
 181    if (['A', 'AREA'].includes(this.tagName)) {
 182      event.preventDefault();
 183    }
 184  
 185    if (isDisabled(this)) {
 186      return;
 187    }
 188  
 189    const data = Tab.getOrCreateInstance(this);
 190    data.show();
 191  });
 192  /**
 193   * ------------------------------------------------------------------------
 194   * jQuery
 195   * ------------------------------------------------------------------------
 196   * add .Tab to jQuery only if jQuery is present
 197   */
 198  
 199  defineJQueryPlugin(Tab);
 200  
 201  window.Joomla = window.Joomla || {};
 202  window.bootstrap = window.bootstrap || {};
 203  window.bootstrap.Tab = Tab;
 204  /**
 205   * Initialise the Tabs interactivity
 206   *
 207   * @param {HTMLElement} el The element that will become an collapse
 208   * @param {object} options The options for this collapse
 209   */
 210  
 211  Joomla.initialiseTabs = (el, options) => {
 212    if (!(el instanceof Element) && options.isJoomla) {
 213      const tab = document.querySelector(`$el}Content`);
 214  
 215      if (tab) {
 216        const related = Array.from(tab.children); // Build the navigation
 217  
 218        if (related.length) {
 219          related.forEach(element => {
 220            if (!element.classList.contains('tab-pane')) {
 221              return;
 222            }
 223  
 224            const isActive = element.dataset.active !== '';
 225            const ul = document.querySelector(`$el}Tabs`);
 226  
 227            if (ul) {
 228              const link = document.createElement('a');
 229              link.href = `#$element.dataset.id}`;
 230              link.classList.add('nav-link');
 231  
 232              if (isActive) {
 233                link.classList.add('active');
 234              }
 235  
 236              link.dataset.bsToggle = 'tab';
 237              link.setAttribute('role', 'tab');
 238              link.setAttribute('aria-controls', element.dataset.id);
 239              link.setAttribute('aria-selected', element.dataset.id);
 240              link.innerHTML = Joomla.sanitizeHtml(element.dataset.title);
 241              const li = document.createElement('li');
 242              li.classList.add('nav-item');
 243              li.setAttribute('role', 'presentation');
 244              li.appendChild(link);
 245              ul.appendChild(li); // eslint-disable-next-line no-new
 246  
 247              new window.bootstrap.Tab(li);
 248            }
 249          });
 250        }
 251      }
 252    } else {
 253      Array.from(document.querySelectorAll(`$el} a`)).map(tab => new window.bootstrap.Tab(tab, options));
 254    }
 255  };
 256  
 257  if (Joomla && Joomla.getOptions) {
 258    // Get the elements/configurations from the PHP
 259    const tabs = Joomla.getOptions('bootstrap.tabs'); // Initialise the elements
 260  
 261    if (typeof tabs === 'object' && tabs !== null) {
 262      Object.keys(tabs).map(tab => Joomla.initialiseTabs(tab, tabs[tab]));
 263    }
 264  }
 265  
 266  export { Tab as T };