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.     }
  84.     ECL.components = ECL.components || new Map();
  86.     this.ellipsisButton = queryOne(this.ellipsisButtonSelector, this.element);
  88.     // Bind click event on ellipsis
  89.     if (this.attachClickListener && this.ellipsisButton) {
  90.       this.ellipsisButton.addEventListener('click', this.handleClickOnEllipsis);
  91.     }
  93.     this.itemsElements = queryAll(this.segmentSelector, this.element);
  94.     this.staticElements = queryAll(this.staticItemsSelector, this.element);
  95.     this.expandableElements = queryAll(
  96.       this.expandableItemsSelector,
  97.       this.element,
  98.     );
  100.     this.check();
  102.     // Bind resize events
  103.     if (this.attachResizeListener) {
  104.       window.addEventListener('resize', this.handleResize);
  105.     }
  106.     // Set ecl initialized attribute
  107.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  108.     ECL.components.set(this.element, this);
  109.   }
  111.   /**
  112.    * Destroy component.
  113.    */
  114.   destroy() {
  115.     if (this.attachClickListener && this.ellipsisButton) {
  116.       this.ellipsisButton.removeEventListener(
  117.         'click',
  118.         this.handleClickOnEllipsis,
  119.       );
  120.     }
  121.     if (this.attachResizeListener) {
  122.       window.removeEventListener('resize', this.handleResize);
  123.     }
  124.     if (this.element) {
  125.       this.element.removeAttribute('data-ecl-auto-initialized');
  126.       ECL.components.delete(this.element);
  127.     }
  128.   }
  130.   /**
  131.    * Invoke event listener attached on the elipsis. Traslates to a full expand.
  132.    */
  133.   handleClickOnEllipsis() {
  134.     return this.handleFullExpand();
  135.   }
  137.   /**
  138.    * Apply partial or full expand.
  139.    */
  140.   check() {
  141.     const visibilityMap = this.computeVisibilityMap();
  142.     if (!visibilityMap) return;
  144.     if (visibilityMap.expanded === true) {
  145.       this.handleFullExpand();
  146.     } else {
  147.       this.handlePartialExpand(visibilityMap);
  148.     }
  149.   }
  151.   /**
  152.    * Removes the elipsis element and its event listeners.
  153.    */
  154.   hideEllipsis() {
  155.     // Hide ellipsis
  156.     const ellipsis = queryOne(this.ellipsisSelector, this.element);
  157.     if (ellipsis) {
  158.       ellipsis.setAttribute('aria-hidden', 'true');
  159.     }
  160.   }
  162.   /**
  163.    * Show all expandable elements.
  164.    */
  165.   showAllItems() {
  166.     this.expandableElements.forEach((item) =>
  167.       item.setAttribute('aria-hidden', 'false'),
  168.     );
  169.   }
  171.   /**
  172.    * @param {Object} visibilityMap
  173.    */
  174.   handlePartialExpand(visibilityMap) {
  175.     if (!visibilityMap) return;
  177.     this.element.classList.add('ecl-breadcrumb--collapsed');
  179.     const { isItemVisible } = visibilityMap;
  180.     if (!isItemVisible || !Array.isArray(isItemVisible)) return;
  182.     if (this.onPartialExpand) {
  183.       this.onPartialExpand(isItemVisible);
  184.     } else {
  185.       // eslint-disable-next-line no-lonely-if
  186.       if (Math.floor(this.element.getBoundingClientRect().width) > 767) {
  187.         const ellipsis = queryOne(this.ellipsisSelector, this.element);
  188.         if (ellipsis) {
  189.           ellipsis.setAttribute('aria-hidden', 'false');
  190.         }
  191.         this.expandableElements.forEach((item, index) => {
  192.           item.setAttribute(
  193.             'aria-hidden',
  194.             isItemVisible[index] ? 'false' : 'true',
  195.           );
  196.         });
  197.       } else {
  198.         this.expandableElements.forEach((item) => {
  199.           item.setAttribute('aria-hidden', 'true');
  200.         });
  201.       }
  202.     }
  203.   }
  205.   /**
  206.    * Display all elements.
  207.    */
  208.   handleFullExpand() {
  209.     this.element.classList.remove('ecl-breadcrumb--collapsed');
  211.     if (this.onFullExpand) {
  212.       this.onFullExpand();
  213.     } else {
  214.       this.hideEllipsis();
  215.       this.showAllItems();
  216.     }
  217.   }
  219.   /**
  220.    * Trigger events on resize
  221.    */
  222.   handleResize() {
  223.     clearTimeout(this.resizeTimer);
  224.     this.resizeTimer = setTimeout(() => {
  225.       this.check();
  226.     }, 200);
  227.   }
  229.   /**
  230.    * Measure/evaluate which elements can be displayed and toggle those who don't fit.
  231.    */
  232.   computeVisibilityMap() {
  233.     // Ignore if there are no expandableElements
  234.     if (!this.expandableElements || this.expandableElements.length === 0) {
  235.       return { expanded: true };
  236.     }
  238.     const wrapperWidth = Math.floor(this.element.getBoundingClientRect().width);
  240.     // Get the sum of all items' width
  241.     const allItemsWidth = this.itemsElements
  242.       .map((breadcrumbSegment) => {
  243.         let segmentWidth = breadcrumbSegment.getBoundingClientRect().width;
  244.         // Current page can have a display none set via the css.
  245.         if (segmentWidth === 0) {
  246.           breadcrumbSegment.style.display = 'inline-flex';
  247.           segmentWidth = breadcrumbSegment.getBoundingClientRect().width;
  248.           breadcrumbSegment.style.cssText = '';
  249.         }
  250.         return segmentWidth;
  251.       })
  252.       .reduce((a, b) => a + b);
  254.     // This calculation is not always 100% reliable, we add a 20% to limit the risk.
  255.     if (allItemsWidth * 1.2 <= wrapperWidth) {
  256.       return { expanded: true };
  257.     }
  259.     const ellipsisItem = queryOne(this.ellipsisSelector, this.element);
  260.     const ellipsisItemWidth = ellipsisItem.getBoundingClientRect().width;
  262.     const incompressibleWidth =
  263.       ellipsisItemWidth +
  264.       this.staticElements.reduce(
  265.         (sum, currentItem) => sum + currentItem.getBoundingClientRect().width,
  266.         0,
  267.       );
  269.     if (incompressibleWidth >= wrapperWidth) {
  270.       return {
  271.         expanded: false,
  272.         isItemVisible: [...this.expandableElements.map(() => false)],
  273.       };
  274.     }
  276.     let previousItemsWidth = 0;
  277.     let isPreviousItemVisible = true;
  279.     // Careful: reverse() is destructive, that's why we make a copy of the array
  280.     const isItemVisible = [...this.expandableElements]
  281.       .reverse()
  282.       .map((otherSegment) => {
  283.         if (!isPreviousItemVisible) return false;
  285.         previousItemsWidth += otherSegment.getBoundingClientRect().width;
  287.         const isVisible =
  288.           previousItemsWidth + incompressibleWidth <= wrapperWidth;
  290.         if (!isVisible) isPreviousItemVisible = false;
  292.         return isVisible;
  293.       })
  294.       .reverse();
  296.     return {
  297.       expanded: false,
  298.       isItemVisible,
  299.     };
  300.   }
  301. }
  303. export default Breadcrumb;