breadcrumb.js

  1. import { queryAll, queryOne } from '@ecl/dom-utils';
  3. /**
  4.  * @param {HTMLElement} element DOM element for component instantiation and scope
  5.  * @param {Object} options
  6.  * @param {String} options.ellipsisButtonSelector
  7.  * @param {String} options.ellipsisSelector
  8.  * @param {String} options.segmentSelector
  9.  * @param {String} options.expandableItemsSelector
  10.  * @param {String} options.staticItemsSelector
  11.  * @param {Function} options.onPartialExpand
  12.  * @param {Function} options.onFullExpand
  13.  * @param {Boolean} options.attachClickListener
  14.  */
  15. export class Breadcrumb {
  16.   /**
  17.    * @static
  18.    * Shorthand for instance creation and initialisation.
  19.    *
  20.    * @param {HTMLElement} root DOM element for component instantiation and scope
  21.    *
  22.    * @return {Breadcrumb} An instance of Breadcrumb.
  23.    */
  24.   static autoInit(root, { BREADCRUMB: defaultOptions = {} } = {}) {
  25.     const breadcrumb = new Breadcrumb(root, defaultOptions);
  26.     breadcrumb.init();
  27.     root.ECLBreadcrumb = breadcrumb;
  28.     return breadcrumb;
  29.   }
  31.   constructor(
  32.     element,
  33.     {
  34.       ellipsisButtonSelector = '[data-ecl-breadcrumb-ellipsis-button]',
  35.       ellipsisSelector = '[data-ecl-breadcrumb-ellipsis]',
  36.       segmentSelector = '[data-ecl-breadcrumb-item]',
  37.       expandableItemsSelector = '[data-ecl-breadcrumb-item="expandable"]',
  38.       staticItemsSelector = '[data-ecl-breadcrumb-item="static"]',
  39.       onPartialExpand = null,
  40.       onFullExpand = null,
  41.       attachClickListener = true,
  42.       attachResizeListener = true,
  43.     } = {},
  44.   ) {
  45.     // Check element
  46.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  47.       throw new TypeError(
  48.         'DOM element should be given to initialize this widget.',
  49.       );
  50.     }
  52.     this.element = element;
  54.     // Options
  55.     this.ellipsisButtonSelector = ellipsisButtonSelector;
  56.     this.ellipsisSelector = ellipsisSelector;
  57.     this.segmentSelector = segmentSelector;
  58.     this.expandableItemsSelector = expandableItemsSelector;
  59.     this.staticItemsSelector = staticItemsSelector;
  60.     this.onPartialExpand = onPartialExpand;
  61.     this.onFullExpand = onFullExpand;
  62.     this.attachClickListener = attachClickListener;
  63.     this.attachResizeListener = attachResizeListener;
  65.     // Private variables
  66.     this.ellipsisButton = null;
  67.     this.itemsElements = null;
  68.     this.staticElements = null;
  69.     this.expandableElements = null;
  70.     this.resizeTimer = null;
  72.     // Bind `this` for use in callbacks
  73.     this.handleClickOnEllipsis = this.handleClickOnEllipsis.bind(this);
  74.     this.handleResize = this.handleResize.bind(this);
  75.   }
  77.   /**
  78.    * Initialise component.
  79.    */
  80.   init() {
  81.     if (!ECL) {
  82.       throw new TypeError('Called init but ECL is not present');
  83.     }
  85.     ECL.components = ECL.components || new Map();
  87.     this.ellipsisButton = queryOne(this.ellipsisButtonSelector, this.element);
  89.     // Bind click event on ellipsis
  90.     if (this.attachClickListener && this.ellipsisButton) {
  91.       this.ellipsisButton.addEventListener('click', this.handleClickOnEllipsis);
  92.     }
  94.     this.itemsElements = queryAll(this.segmentSelector, this.element);
  95.     this.staticElements = queryAll(this.staticItemsSelector, this.element);
  96.     this.expandableElements = queryAll(
  97.       this.expandableItemsSelector,
  98.       this.element,
  99.     );
  101.     this.check();
  103.     // Bind resize events
  104.     if (this.attachResizeListener) {
  105.       window.addEventListener('resize', this.handleResize);
  106.     }
  107.     // Set ecl initialized attribute
  108.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  109.     ECL.components.set(this.element, this);
  110.   }
  112.   /**
  113.    * Destroy component.
  114.    */
  115.   destroy() {
  116.     if (this.attachClickListener && this.ellipsisButton) {
  117.       this.ellipsisButton.removeEventListener(
  118.         'click',
  119.         this.handleClickOnEllipsis,
  120.       );
  121.     }
  122.     if (this.attachResizeListener) {
  123.       window.removeEventListener('resize', this.handleResize);
  124.     }
  125.     if (this.element) {
  126.       this.element.removeAttribute('data-ecl-auto-initialized');
  127.       this.element.classList.remove('ecl-breadcrumb--wrap');
  128.       ECL.components.delete(this.element);
  129.     }
  130.   }
  132.   /**
  133.    * Invoke event listener attached on the elipsis. Traslates to a full expand.
  134.    */
  135.   handleClickOnEllipsis() {
  136.     return this.handleFullExpand();
  137.   }
  139.   /**
  140.    * Apply partial or full expand.
  141.    */
  142.   async check() {
  143.     const visibilityMap = await this.computeVisibilityMap();
  144.     if (!visibilityMap) return;
  146.     if (visibilityMap.expanded === true) {
  147.       this.handleFullExpand();
  148.     } else {
  149.       this.handlePartialExpand(visibilityMap);
  150.     }
  151.   }
  153.   /**
  154.    * Removes the elipsis element and its event listeners.
  155.    */
  156.   hideEllipsis() {
  157.     // Hide ellipsis
  158.     const ellipsis = queryOne(this.ellipsisSelector, this.element);
  159.     if (ellipsis) {
  160.       ellipsis.setAttribute('aria-hidden', 'true');
  161.     }
  162.   }
  164.   /**
  165.    * Show all expandable elements.
  166.    */
  167.   showAllItems() {
  168.     this.expandableElements.forEach((item) =>
  169.       item.setAttribute('aria-hidden', 'false'),
  170.     );
  171.   }
  173.   /**
  174.    * @param {Object} visibilityMap
  175.    */
  176.   handlePartialExpand(visibilityMap) {
  177.     if (!visibilityMap) return;
  179.     this.element.classList.add('ecl-breadcrumb--collapsed');
  181.     const { isItemVisible } = visibilityMap;
  182.     if (!isItemVisible || !Array.isArray(isItemVisible)) return;
  184.     if (this.onPartialExpand) {
  185.       this.onPartialExpand(isItemVisible);
  186.     } else {
  187.       // eslint-disable-next-line no-lonely-if
  188.       if (Math.floor(this.element.getBoundingClientRect().width) > 767) {
  189.         const ellipsis = queryOne(this.ellipsisSelector, this.element);
  190.         if (ellipsis) {
  191.           ellipsis.setAttribute('aria-hidden', 'false');
  192.         }
  193.         this.expandableElements.forEach((item, index) => {
  194.           item.setAttribute(
  195.             'aria-hidden',
  196.             isItemVisible[index] ? 'false' : 'true',
  197.           );
  198.         });
  199.       } else {
  200.         this.expandableElements.forEach((item) => {
  201.           item.setAttribute('aria-hidden', 'true');
  202.         });
  203.       }
  204.     }
  205.   }
  207.   /**
  208.    * Display all elements.
  209.    */
  210.   handleFullExpand() {
  211.     this.element.classList.remove('ecl-breadcrumb--collapsed');
  212.     this.element.classList.add('ecl-breadcrumb--wrap');
  214.     if (this.onFullExpand) {
  215.       this.onFullExpand();
  216.     } else {
  217.       this.hideEllipsis();
  218.       this.showAllItems();
  219.     }
  220.   }
  222.   /**
  223.    * Trigger events on resize
  224.    */
  225.   handleResize() {
  226.     clearTimeout(this.resizeTimer);
  227.     this.resizeTimer = setTimeout(() => {
  228.       this.check();
  229.     }, 200);
  230.   }
  232.   /**
  233.    * Measure/evaluate which elements can be displayed and toggle those who don't fit.
  234.    */
  235.   computeVisibilityMap() {
  236.     return new Promise((resolve) => {
  237.       // Ignore if there are no expandableElements
  238.       if (!this.expandableElements || this.expandableElements.length === 0) {
  239.         resolve({ expanded: true });
  240.         return;
  241.       }
  243.       const wrapperWidth = Math.floor(
  244.         this.element.getBoundingClientRect().width,
  245.       );
  247.       setTimeout(() => {
  248.         // Get the sum of all items' width
  249.         const allItemsWidth = this.itemsElements
  250.           .map((breadcrumbSegment) => {
  251.             let segmentWidth = breadcrumbSegment.getBoundingClientRect().width;
  252.             // Current page can have a display none set via the css.
  253.             if (segmentWidth === 0) {
  254.               breadcrumbSegment.style.display = 'inline-flex';
  255.               segmentWidth = breadcrumbSegment.getBoundingClientRect().width;
  256.               breadcrumbSegment.style.cssText = '';
  257.             }
  258.             return segmentWidth;
  259.           })
  260.           .reduce((a, b) => a + b);
  261.         // This calculation is not always 100% reliable, we add a 10% to limit the risk.
  262.         if (allItemsWidth * 1.1 <= wrapperWidth) {
  263.           resolve({ expanded: true });
  264.           return;
  265.         }
  267.         const ellipsisItem = queryOne(this.ellipsisSelector, this.element);
  268.         const ellipsisItemWidth = ellipsisItem.getBoundingClientRect().width;
  270.         const incompressibleWidth =
  271.           ellipsisItemWidth +
  272.           this.staticElements.reduce(
  273.             (sum, currentItem) =>
  274.               sum + currentItem.getBoundingClientRect().width,
  275.             0,
  276.           );
  278.         if (incompressibleWidth >= wrapperWidth) {
  279.           resolve({
  280.             expanded: false,
  281.             isItemVisible: [...this.expandableElements.map(() => false)],
  282.           });
  283.           return;
  284.         }
  286.         let previousItemsWidth = 0;
  287.         let isPreviousItemVisible = true;
  289.         // Careful: reverse() is destructive, that's why we make a copy of the array
  290.         const isItemVisible = [...this.expandableElements]
  291.           .reverse()
  292.           .map((otherSegment) => {
  293.             if (!isPreviousItemVisible) return false;
  295.             previousItemsWidth += otherSegment.getBoundingClientRect().width;
  297.             const isVisible =
  298.               previousItemsWidth + incompressibleWidth <= wrapperWidth;
  300.             if (!isVisible) isPreviousItemVisible = false;
  302.             return isVisible;
  303.           })
  304.           .reverse();
  306.         resolve({
  307.           expanded: false,
  308.           isItemVisible,
  309.         });
  310.       }, 150);
  311.     });
  312.   }
  313. }
  315. export default Breadcrumb;