timeline.js

  1. import { 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.buttonSelector
  7.  * @param {String} options.labelSelector
  8.  * @param {String} options.labelExpanded
  9.  * @param {String} options.labelCollapsed
  10.  * @param {Boolean} options.attachClickListener Whether or not to bind click events
  11.  */
  12. export class Timeline {
  13.   /**
  14.    * @static
  15.    * Shorthand for instance creation and initialisation.
  16.    *
  17.    * @param {HTMLElement} root DOM element for component instantiation and scope
  18.    *
  19.    * @return {Timeline} An instance of Timeline.
  20.    */
  21.   static autoInit(root, { TIMELINE: defaultOptions = {} } = {}) {
  22.     const timeline = new Timeline(root, defaultOptions);
  23.     timeline.init();
  24.     root.ECLTimeline = timeline;
  25.     return timeline;
  26.   }
  28.   constructor(
  29.     element,
  30.     {
  31.       buttonSelector = '[data-ecl-timeline-button]',
  32.       labelSelector = '[data-ecl-label]',
  33.       labelExpanded = 'data-ecl-label-expanded',
  34.       labelCollapsed = 'data-ecl-label-collapsed',
  35.       attachClickListener = true,
  36.     } = {},
  37.   ) {
  38.     // Check element
  39.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  40.       throw new TypeError(
  41.         'DOM element should be given to initialize this widget.',
  42.       );
  43.     }
  45.     this.element = element;
  47.     // Options
  48.     this.buttonSelector = buttonSelector;
  49.     this.labelSelector = labelSelector;
  50.     this.labelExpanded = labelExpanded;
  51.     this.labelCollapsed = labelCollapsed;
  52.     this.attachClickListener = attachClickListener;
  54.     // Private variables
  55.     this.button = null;
  56.     this.label = null;
  58.     // Bind `this` for use in callbacks
  59.     this.handleClickOnButton = this.handleClickOnButton.bind(this);
  60.   }
  62.   /**
  63.    * Initialise component.
  64.    */
  65.   init() {
  66.     if (!ECL) {
  67.       throw new TypeError('Called init but ECL is not present');
  68.     }
  69.     ECL.components = ECL.components || new Map();
  70.     // Query elements
  71.     this.button = queryOne(this.buttonSelector, this.element);
  73.     // Get label, if any
  74.     this.label = queryOne(this.labelSelector, this.element);
  76.     // Bind click event on button
  77.     if (this.attachClickListener && this.button) {
  78.       this.button.addEventListener('click', this.handleClickOnButton);
  79.     }
  81.     // Set ecl initialized attribute
  82.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  83.     ECL.components.set(this.element, this);
  84.   }
  86.   /**
  87.    * Destroy component.
  88.    */
  89.   destroy() {
  90.     if (this.attachClickListener && this.button) {
  91.       this.button.removeEventListener('click', this.handleClickOnButton);
  92.     }
  93.     if (this.element) {
  94.       this.element.removeAttribute('data-ecl-auto-initialized');
  95.       ECL.components.delete(this.element);
  96.     }
  97.   }
  99.   /**
  100.    * Expand timeline if not such already.
  101.    */
  102.   handleClickOnButton() {
  103.     // Get current status
  104.     const isExpanded = this.button.getAttribute('aria-expanded') === 'true';
  106.     // Toggle the expandable/collapsible
  107.     this.button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
  108.     if (isExpanded) {
  109.       this.element.removeAttribute('data-ecl-timeline-expanded');
  110.       // Scroll up to the button
  111.       this.button.blur();
  112.       this.button.focus();
  113.     } else {
  114.       this.element.setAttribute('data-ecl-timeline-expanded', 'true');
  116.       // Focus first expanded item
  117.       const item = queryOne('.ecl-timeline__item--collapsed', this.element);
  118.       if (item) {
  119.         item.setAttribute('tabindex', '-1');
  120.         item.focus({ focusVisible: false });
  121.         item.removeAttribute('tabindex');
  122.       }
  123.     }
  125.     // Toggle label if possible
  126.     if (
  127.       this.label &&
  128.       !isExpanded &&
  129.       this.button.hasAttribute(this.labelExpanded)
  130.     ) {
  131.       this.label.innerHTML = this.button.getAttribute(this.labelExpanded);
  132.     } else if (
  133.       this.label &&
  134.       isExpanded &&
  135.       this.button.hasAttribute(this.labelCollapsed)
  136.     ) {
  137.       this.label.innerHTML = this.button.getAttribute(this.labelCollapsed);
  138.     }
  140.     return this;
  141.   }
  142. }
  144. export default Timeline;