category-filter.js

  1. import { queryAll } from '@ecl/dom-utils';
  3. /**
  4.  * @param {HTMLElement} element DOM element for component instantiation and scope
  5.  * @param {Object} options
  6.  * @param {String} options.itemSelector Selector for the tree parent items
  7.  * @param {Boolean} options.attachClickListener Whether or not to bind click events
  8.  */
  9. export class CategoryFilter {
  10.   /**
  11.    * @static
  12.    * Shorthand for instance creation and initialisation.
  13.    *
  14.    * @param {HTMLElement} root DOM element for component instantiation and scope
  15.    *
  16.    * @return {CategoryFilter} An instance of CategoryFilter.
  17.    */
  18.   static autoInit(root, { CATEGORY_FILTER: defaultOptions = {} } = {}) {
  19.     const categoryFilter = new CategoryFilter(root, defaultOptions);
  20.     categoryFilter.init();
  21.     root.ECLCategoryFilter = categoryFilter;
  22.     return categoryFilter;
  23.   }
  25.   constructor(
  26.     element,
  27.     {
  28.       itemSelector = '.ecl-category-filter__item--has-children',
  29.       attachClickListener = true,
  30.     } = {},
  31.   ) {
  32.     // Check element
  33.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  34.       throw new TypeError(
  35.         'DOM element should be given to initialize this widget.',
  36.       );
  37.     }
  39.     this.element = element;
  41.     // Options
  42.     this.itemSelector = itemSelector;
  43.     this.attachClickListener = attachClickListener;
  45.     // Private variables
  46.     this.items = null;
  48.     // Bind `this` for use in callbacks
  49.     this.handleClickExpand = this.handleClickExpand.bind(this);
  50.   }
  52.   /**
  53.    * Initialise component.
  54.    */
  55.   init() {
  56.     if (!ECL) {
  57.       throw new TypeError('Called init but ECL is not present');
  58.     }
  59.     ECL.components = ECL.components || new Map();
  60.     // Query elementslur
  61.     this.items = queryAll(this.itemSelector, this.element);
  63.     // Bind click event on open
  64.     if (this.attachClickListener && this.items) {
  65.       this.items.forEach((item) =>
  66.         item.addEventListener('click', this.handleClickExpand),
  67.       );
  68.     }
  70.     // Set ecl initialized attribute
  71.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  72.     ECL.components.set(this.element, this);
  73.   }
  75.   /**
  76.    * Destroy component.
  77.    */
  78.   destroy() {
  79.     if (this.attachClickListener && this.items) {
  80.       this.items.forEach((item) => {
  81.         item.removeEventListener('click', this.handleClickExpand, false);
  82.       });
  83.     }
  84.     if (this.element) {
  85.       this.element.removeAttribute('data-ecl-auto-initialized');
  86.       ECL.components.delete(this.element);
  87.     }
  88.   }
  90.   /**
  91.    * Expand tree list item.
  92.    * @param {Event} e
  93.    */
  94.   handleClickExpand(e) {
  95.     e.preventDefault();
  97.     // Get item even if we clicked on the icon
  98.     const treeItem = e.target.closest('.ecl-category-filter__item');
  100.     // Toggle current item
  101.     this.items.forEach((item) => {
  102.       if (item === treeItem) {
  103.         item.setAttribute('aria-current', true);
  104.       } else {
  105.         item.removeAttribute('aria-current');
  106.       }
  107.     });
  109.     // Toggle expanded
  110.     const isExpanded = treeItem.getAttribute('aria-expanded') === 'true';
  111.     if (isExpanded) {
  112.       treeItem.setAttribute('aria-expanded', 'false');
  113.       treeItem.parentElement.classList.remove(
  114.         'ecl-category-filter__list-item--open',
  115.       );
  116.     } else {
  117.       treeItem.setAttribute('aria-expanded', 'true');
  118.       treeItem.parentElement.classList.add(
  119.         'ecl-category-filter__list-item--open',
  120.       );
  121.     }
  123.     // For first level, keep only one item open
  124.     if (treeItem.classList.contains('ecl-category-filter__item--level-1')) {
  125.       this.items.forEach((item) => {
  126.         if (item !== treeItem) {
  127.           item.parentElement.classList.remove(
  128.             'ecl-category-filter__list-item--open',
  129.           );
  130.           item.setAttribute('aria-expanded', 'false');
  131.         }
  132.       });
  133.     }
  134.   }
  135. }
  137. export default CategoryFilter;