tabs.js

  1. import { queryOne, queryAll } from '@ecl/dom-utils';
  2. import EventManager from '@ecl/event-manager';
  4. /**
  5.  * @param {HTMLElement} element DOM element for component instantiation and scope
  6.  * @param {Object} options
  7.  * @param {String} options.containerSelector Selector for container element
  8.  * @param {String} options.listSelector Selector for list element
  9.  * @param {String} options.listItemsSelector Selector for tabs element
  10.  * @param {String} options.moreButtonSelector Selector for more button element
  11.  * @param {String} options.moreLabelSelector Selector for more button label element
  12.  * @param {String} options.prevSelector Selector for prev element
  13.  * @param {String} options.nextSelector Selector for next element
  14.  * @param {Boolean} options.attachClickListener
  15.  * @param {Boolean} options.attachResizeListener
  16.  */
  17. export class Tabs {
  18.   /**
  19.    * @static
  20.    * Shorthand for instance creation and initialisation.
  21.    *
  22.    * @param {HTMLElement} root DOM element for component instantiation and scope
  23.    *
  24.    * @return {Tabs} An instance of Tabs.
  25.    */
  26.   static autoInit(root, { TABS: defaultOptions = {} } = {}) {
  27.     const tabs = new Tabs(root, defaultOptions);
  28.     tabs.init();
  29.     root.ECLTabs = tabs;
  30.     return tabs;
  31.   }
  33.   /**
  34.    * An array of supported events for this component.
  35.    *
  36.    * @type {Array<string>}
  37.    * @memberof Select
  38.    */
  39.   supportedEvents = ['onToggle'];
  41.   constructor(
  42.     element,
  43.     {
  44.       containerSelector = '.ecl-tabs__container',
  45.       listSelector = '.ecl-tabs__list',
  46.       listItemsSelector = '.ecl-tabs__item:not(.ecl-tabs__item--more)',
  47.       moreItemSelector = '.ecl-tabs__item--more',
  48.       moreButtonSelector = '.ecl-tabs__toggle',
  49.       moreLabelSelector = '.ecl-tabs__toggle .ecl-button__label',
  50.       prevSelector = '.ecl-tabs__prev',
  51.       nextSelector = '.ecl-tabs__next',
  52.       attachClickListener = true,
  53.       attachResizeListener = true,
  54.     } = {},
  55.   ) {
  56.     // Check element
  57.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  58.       throw new TypeError(
  59.         'DOM element should be given to initialize this widget.',
  60.       );
  61.     }
  63.     this.element = element;
  64.     this.eventManager = new EventManager();
  66.     // Options
  67.     this.containerSelector = containerSelector;
  68.     this.listSelector = listSelector;
  69.     this.listItemsSelector = listItemsSelector;
  70.     this.moreItemSelector = moreItemSelector;
  71.     this.moreButtonSelector = moreButtonSelector;
  72.     this.moreLabelSelector = moreLabelSelector;
  73.     this.prevSelector = prevSelector;
  74.     this.nextSelector = nextSelector;
  75.     this.attachClickListener = attachClickListener;
  76.     this.attachResizeListener = attachResizeListener;
  78.     // Private variables
  79.     this.container = null;
  80.     this.list = null;
  81.     this.listItems = null;
  82.     this.moreItem = null;
  83.     this.moreButton = null;
  84.     this.moreButtonActive = false;
  85.     this.moreLabel = null;
  86.     this.moreLabelValue = null;
  87.     this.dropdown = null;
  88.     this.dropdownList = null;
  89.     this.dropdownItems = null;
  90.     this.allowShift = true;
  91.     this.buttonNextSize = 0;
  92.     this.index = 0;
  93.     this.total = 0;
  94.     this.tabsKey = [];
  95.     this.firstTab = null;
  96.     this.lastTab = null;
  97.     this.direction = 'ltr';
  98.     this.isMobile = false;
  99.     this.resizeTimer = null;
  101.     // Bind `this` for use in callbacks
  102.     this.handleClickOnToggle = this.handleClickOnToggle.bind(this);
  103.     this.handleResize = this.handleResize.bind(this);
  104.     this.closeMoreDropdown = this.closeMoreDropdown.bind(this);
  105.     this.shiftTabs = this.shiftTabs.bind(this);
  106.     this.handleKeyboardOnTabs = this.handleKeyboardOnTabs.bind(this);
  107.     this.moveFocus = this.moveFocus.bind(this);
  108.     this.arrowFocusToTab = this.arrowFocusToTab.bind(this);
  109.     this.tabsKeyEvents = this.tabsKeyEvents.bind(this);
  110.   }
  112.   /**
  113.    * Initialise component.
  114.    */
  115.   init() {
  116.     if (!ECL) {
  117.       throw new TypeError('Called init but ECL is not present');
  118.     }
  119.     ECL.components = ECL.components || new Map();
  121.     this.container = queryOne(this.containerSelector, this.element);
  122.     this.list = queryOne(this.listSelector, this.element);
  123.     this.listItems = queryAll(this.listItemsSelector, this.element);
  124.     this.moreItem = queryOne(this.moreItemSelector, this.element);
  125.     this.moreButton = queryOne(this.moreButtonSelector, this.element);
  126.     this.moreLabel = queryOne(this.moreLabelSelector, this.element);
  127.     this.moreLabelValue = this.moreLabel.innerText;
  128.     this.btnPrev = queryOne(this.prevSelector, this.element);
  129.     this.btnNext = queryOne(this.nextSelector, this.element);
  130.     this.total = this.listItems.length;
  132.     if (this.moreButton) {
  133.       // Create the "more" dropdown and clone existing list items
  134.       this.dropdown = document.createElement('div');
  135.       this.dropdown.classList.add('ecl-tabs__dropdown');
  136.       this.dropdownList = document.createElement('div');
  137.       this.dropdownList.classList.add('ecl-tabs__dropdown-list');
  138.       this.listItems.forEach((item) => {
  139.         this.dropdownList.appendChild(item.cloneNode(true));
  140.       });
  141.       this.dropdown.appendChild(this.dropdownList);
  142.       this.moreItem.appendChild(this.dropdown);
  143.       this.dropdownItems = queryAll(
  144.         '.ecl-tabs__dropdown .ecl-tabs__item',
  145.         this.element,
  146.       );
  147.     }
  149.     if (this.btnNext) {
  150.       this.buttonNextSize = this.btnNext.getBoundingClientRect().width;
  151.     }
  153.     this.handleResize();
  155.     // Bind events
  156.     if (this.attachClickListener && this.moreButton) {
  157.       this.moreButton.addEventListener('click', this.handleClickOnToggle);
  158.     }
  159.     if (this.attachClickListener && document && this.moreButton) {
  160.       document.addEventListener('click', this.closeMoreDropdown);
  161.     }
  162.     if (this.attachClickListener && this.btnNext) {
  163.       this.btnNext.addEventListener(
  164.         'click',
  165.         this.shiftTabs.bind(this, 'next', true),
  166.       );
  167.     }
  168.     if (this.attachClickListener && this.btnPrev) {
  169.       this.btnPrev.addEventListener(
  170.         'click',
  171.         this.shiftTabs.bind(this, 'prev', true),
  172.       );
  173.     }
  174.     if (this.attachResizeListener) {
  175.       window.addEventListener('resize', this.handleResize);
  176.     }
  178.     // Set ecl initialized attribute
  179.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  180.     ECL.components.set(this.element, this);
  181.   }
  183.   /**
  184.    * Register a callback function for a specific event.
  185.    *
  186.    * @param {string} eventName - The name of the event to listen for.
  187.    * @param {Function} callback - The callback function to be invoked when the event occurs.
  188.    * @returns {void}
  189.    * @memberof Tabs
  190.    * @instance
  191.    *
  192.    * @example
  193.    * // Registering a callback for the 'onToggle' event
  194.    * inpage.on('onToggle', (event) => {
  195.    *   console.log('Toggle event occurred!', event);
  196.    * });
  197.    */
  198.   on(eventName, callback) {
  199.     this.eventManager.on(eventName, callback);
  200.   }
  202.   /**
  203.    * Trigger a component event.
  204.    *
  205.    * @param {string} eventName - The name of the event to trigger.
  206.    * @param {any} eventData - Data associated with the event.
  207.    *
  208.    * @memberof Tabs
  209.    */
  210.   trigger(eventName, eventData) {
  211.     this.eventManager.trigger(eventName, eventData);
  212.   }
  214.   /**
  215.    * Destroy component.
  216.    */
  217.   destroy() {
  218.     if (this.dropdown) {
  219.       this.dropdown.remove();
  220.     }
  221.     if (this.moreButton) {
  222.       this.moreLabel.textContent = this.moreLabelValue;
  223.       this.moreButton.replaceWith(this.moreButton.cloneNode(true));
  224.     }
  225.     if (this.btnNext) {
  226.       this.btnNext.replaceWith(this.btnNext.cloneNode(true));
  227.     }
  228.     if (this.btnPrev) {
  229.       this.btnPrev.replaceWith(this.btnPrev.cloneNode(true));
  230.     }
  231.     if (this.attachClickListener && document && this.moreButton) {
  232.       document.removeEventListener('click', this.closeMoreDropdown);
  233.     }
  234.     if (this.attachResizeListener) {
  235.       window.removeEventListener('resize', this.handleResize);
  236.     }
  237.     if (this.tabsKey) {
  238.       this.tabsKey.forEach((item) => {
  239.         item.addEventListener('keydown', this.handleKeyboardOnTabs);
  240.       });
  241.     }
  242.     if (this.element) {
  243.       this.element.removeAttribute('data-ecl-auto-initialized');
  244.       ECL.components.delete(this.element);
  245.     }
  246.   }
  248.   /**
  249.    * Action to shift next or previous tabs on mobile format.
  250.    * @param {int|string} dir
  251.    */
  252.   shiftTabs(dir) {
  253.     this.index = dir === 'next' ? this.index + 1 : this.index - 1;
  254.     // Show or hide prev or next button based on tab index
  255.     if (this.index >= 1) {
  256.       this.btnPrev.style.display = 'flex';
  257.       this.container.classList.add('ecl-tabs__container--left');
  258.     } else {
  259.       this.btnPrev.style.display = 'none';
  260.       this.container.classList.remove('ecl-tabs__container--left');
  261.     }
  263.     if (this.index >= this.total - 1) {
  264.       this.btnNext.style.display = 'none';
  265.       this.container.classList.remove('ecl-tabs__container--right');
  266.     } else {
  267.       this.btnNext.style.display = 'flex';
  268.       this.container.classList.add('ecl-tabs__container--right');
  269.     }
  271.     // Slide tabs
  272.     let newOffset = 0;
  273.     this.direction = getComputedStyle(this.element).direction;
  274.     if (this.direction === 'rtl') {
  275.       newOffset = Math.ceil(
  276.         this.list.offsetWidth -
  277.           this.listItems[this.index].offsetLeft -
  278.           this.listItems[this.index].offsetWidth,
  279.       );
  280.     } else {
  281.       newOffset = Math.ceil(this.listItems[this.index].offsetLeft);
  282.     }
  284.     const maxScroll = Math.ceil(
  285.       this.list.getBoundingClientRect().width -
  286.         this.element.getBoundingClientRect().width,
  287.     );
  289.     if (newOffset > maxScroll) {
  290.       this.btnNext.style.display = 'none';
  291.       this.container.classList.remove('ecl-tabs__container--right');
  292.       newOffset = maxScroll;
  293.     }
  295.     this.list.style.transitionDuration = '0.4s';
  297.     if (this.direction === 'rtl') {
  298.       this.list.style.transform = `translate3d(${newOffset}px, 0px, 0px)`;
  299.     } else {
  300.       this.list.style.transform = `translate3d(-${newOffset}px, 0px, 0px)`;
  301.     }
  302.   }
  304.   /**
  305.    * Toggle the "more" dropdown.
  306.    */
  307.   handleClickOnToggle(e) {
  308.     this.dropdown.classList.toggle('ecl-tabs__dropdown--show');
  309.     this.moreButton.setAttribute(
  310.       'aria-expanded',
  311.       this.dropdown.classList.contains('ecl-tabs__dropdown--show'),
  312.     );
  314.     this.trigger('onToggle', e);
  315.   }
  317.   /**
  318.    * Sets the callback function to be executed on toggle.
  319.    * @param {Function} callback - The callback function to be set.
  320.    */
  321.   set onToggle(callback) {
  322.     this.onToggleCallback = callback;
  323.   }
  325.   /**
  326.    * Gets the callback function set for toggle events.
  327.    * @returns {Function|null} - The callback function, or null if not set.
  328.    */
  329.   get onToggle() {
  330.     return this.onToggleCallback;
  331.   }
  333.   /**
  334.    * Trigger events on resize.
  335.    */
  336.   handleResize() {
  337.     // Close dropdown if more button is not displayed
  338.     if (window.getComputedStyle(this.moreButton).display === 'none') {
  339.       this.closeMoreDropdown(this);
  340.     }
  341.     clearTimeout(this.resizeTimer);
  342.     this.resizeTimer = setTimeout(() => {
  343.       this.list.style.transform = `translate3d(0px, 0px, 0px)`;
  345.       // Behaviors for mobile format
  346.       const vw = Math.max(
  347.         document.documentElement.clientWidth || 0,
  348.         window.innerWidth || 0,
  349.       );
  351.       if (vw <= 480) {
  352.         this.isMobile = true;
  353.         this.index = 1;
  354.         this.list.style.transitionDuration = '0.4s';
  355.         this.shiftTabs(this.index);
  356.         if (this.moreItem) {
  357.           this.moreItem.classList.add('ecl-tabs__item--hidden');
  358.         }
  359.         if (this.moreButton) {
  360.           this.moreButton.classList.add('ecl-tabs__toggle--hidden');
  361.         }
  362.         let listWidth = 0;
  363.         this.listItems.forEach((item) => {
  364.           item.classList.remove('ecl-tabs__item--hidden');
  365.           listWidth += Math.ceil(item.getBoundingClientRect().width);
  366.         });
  367.         this.list.style.width = `${listWidth}px`;
  368.         this.btnNext.style.display = 'flex';
  369.         this.container.classList.add('ecl-tabs__container--right');
  370.         this.btnPrev.style.display = 'none';
  371.         this.container.classList.remove('ecl-tabs__container--left');
  372.         this.tabsKeyEvents();
  373.         return;
  374.       }
  376.       this.isMobile = false;
  377.       // Behaviors for Tablet and desktop format (More button)
  378.       this.btnNext.style.display = 'none';
  379.       this.container.classList.remove('ecl-tabs__container--right');
  380.       this.btnPrev.style.display = 'none';
  381.       this.container.classList.remove('ecl-tabs__container--left');
  382.       this.list.style.width = 'auto';
  384.       // Hide items that won't fit in the list
  385.       let stopWidth = this.moreButton.getBoundingClientRect().width + 25;
  386.       const hiddenItems = [];
  387.       const listWidth = this.list.getBoundingClientRect().width;
  388.       this.moreButtonActive = false;
  389.       this.listItems.forEach((item, i) => {
  390.         item.classList.remove('ecl-tabs__item--hidden');
  391.         if (
  392.           listWidth >= stopWidth + item.getBoundingClientRect().width &&
  393.           !hiddenItems.includes(i - 1)
  394.         ) {
  395.           stopWidth += item.getBoundingClientRect().width;
  396.         } else {
  397.           item.classList.add('ecl-tabs__item--hidden');
  398.           if (item.childNodes[0].classList.contains('ecl-tabs__link--active')) {
  399.             this.moreButtonActive = true;
  400.           }
  401.           hiddenItems.push(i);
  402.         }
  403.       });
  405.       // Add active class to the more button if it contains an active element
  406.       if (this.moreButtonActive) {
  407.         this.moreButton.classList.add('ecl-tabs__toggle--active');
  408.       } else {
  409.         this.moreButton.classList.remove('ecl-tabs__toggle--active');
  410.       }
  412.       // Toggle the visibility of More button and items in dropdown
  413.       if (!hiddenItems.length) {
  414.         this.moreItem.classList.add('ecl-tabs__item--hidden');
  415.         this.moreButton.classList.add('ecl-tabs__toggle--hidden');
  416.       } else {
  417.         this.moreItem.classList.remove('ecl-tabs__item--hidden');
  418.         this.moreButton.classList.remove('ecl-tabs__toggle--hidden');
  419.         this.moreLabel.textContent = this.moreLabelValue.replace(
  420.           '%d',
  421.           hiddenItems.length,
  422.         );
  423.         this.dropdownItems.forEach((item, i) => {
  424.           if (!hiddenItems.includes(i)) {
  425.             item.classList.add('ecl-tabs__item--hidden');
  426.           } else {
  427.             item.classList.remove('ecl-tabs__item--hidden');
  428.           }
  429.         });
  430.       }
  432.       this.tabsKeyEvents();
  433.     }, 100);
  434.   }
  436.   /**
  437.    * Bind key events on tabs for accessibility.
  438.    */
  439.   tabsKeyEvents() {
  440.     this.tabsKey = [];
  441.     this.listItems.forEach((item, index, array) => {
  442.       let tab = null;
  443.       if (!item.classList.contains('ecl-tabs__item--hidden')) {
  444.         tab = queryOne('.ecl-tabs__link', item);
  445.       } else {
  446.         const dropdownItem = this.dropdownItems[index];
  447.         tab = queryOne('.ecl-tabs__link', dropdownItem);
  448.       }
  449.       tab.addEventListener('keydown', this.handleKeyboardOnTabs);
  450.       this.tabsKey.push(tab);
  452.       if (index === 0) {
  453.         this.firstTab = tab;
  454.       }
  455.       if (index === array.length - 1) {
  456.         this.lastTab = tab;
  457.       }
  458.     });
  459.   }
  461.   /**
  462.    * Close the dropdown.
  463.    * @param {Event} e
  464.    */
  465.   closeMoreDropdown(e) {
  466.     let el = e.target;
  467.     while (el) {
  468.       if (el === this.moreButton) {
  469.         return;
  470.       }
  471.       el = el.parentNode;
  472.     }
  473.     this.moreButton.setAttribute('aria-expanded', false);
  474.     this.dropdown.classList.remove('ecl-tabs__dropdown--show');
  475.   }
  477.   /**
  478.    * @param {Event} e
  479.    */
  480.   handleKeyboardOnTabs(e) {
  481.     const tgt = e.currentTarget;
  483.     switch (e.key) {
  484.       case 'ArrowLeft':
  485.       case 'ArrowUp':
  486.         this.arrowFocusToTab(tgt, 'prev');
  487.         break;
  489.       case 'ArrowRight':
  490.       case 'ArrowDown':
  491.         this.arrowFocusToTab(tgt, 'next');
  492.         break;
  494.       case 'Home':
  495.         this.moveFocus(this.firstTab);
  496.         break;
  498.       case 'End':
  499.         this.moveFocus(this.lastTab);
  500.         break;
  502.       default:
  503.     }
  504.   }
  506.   /**
  507.    * @param {HTMLElement} currentTab tab element
  508.    */
  509.   moveFocus(currentTab) {
  510.     if (currentTab.closest('.ecl-tabs__dropdown')) {
  511.       this.moreButton.setAttribute('aria-expanded', true);
  512.       this.dropdown.classList.add('ecl-tabs__dropdown--show');
  513.     } else {
  514.       this.moreButton.setAttribute('aria-expanded', false);
  515.       this.dropdown.classList.remove('ecl-tabs__dropdown--show');
  516.     }
  517.     currentTab.focus();
  518.   }
  520.   /**
  521.    * @param {HTMLElement} currentTab tab element
  522.    * @param {string} direction key arrow direction
  523.    */
  524.   arrowFocusToTab(currentTab, direction) {
  525.     let index = this.tabsKey.indexOf(currentTab);
  526.     index = direction === 'next' ? index + 1 : index - 1;
  528.     const startTab = direction === 'next' ? this.firstTab : this.lastTab;
  529.     const endTab = direction === 'next' ? this.lastTab : this.firstTab;
  531.     if (this.isMobile) {
  532.       if (currentTab !== endTab) {
  533.         this.moveFocus(this.tabsKey[index]);
  534.         this.shiftTabs(direction);
  535.       }
  536.       return;
  537.     }
  539.     if (currentTab === endTab) {
  540.       this.moveFocus(startTab);
  541.     } else {
  542.       this.moveFocus(this.tabsKey[index]);
  543.     }
  544.   }
  545. }
  547. export default Tabs;