range.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.rangeInputSelector Selector for the range input
  7.  * @param {String} options.currentValueSelector Selector for the current value area
  8.  * @param {Boolean} options.attachChangeListener Whether or not to bind change events on range
  9.  */
  10. export class Range {
  11.   /**
  12.    * @static
  13.    * Shorthand for instance creation and initialisation.
  14.    *
  15.    * @param {HTMLElement} root DOM element for component instantiation and scope
  16.    *
  17.    * @return {Range} An instance of Range.
  18.    */
  19.   static autoInit(root, { RANGE: defaultOptions = {} } = {}) {
  20.     const range = new Range(root, defaultOptions);
  21.     range.init();
  22.     root.ECLRange = range;
  23.     return range;
  24.   }
  26.   constructor(
  27.     element,
  28.     {
  29.       rangeInputSelector = '[data-ecl-range-input]',
  30.       currentValueSelector = '[data-ecl-range-value-current]',
  31.       attachChangeListener = true,
  32.     } = {},
  33.   ) {
  34.     // Check element
  35.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  36.       throw new TypeError(
  37.         'DOM element should be given to initialize this widget.',
  38.       );
  39.     }
  41.     this.element = element;
  43.     // Options
  44.     this.rangeInputSelector = rangeInputSelector;
  45.     this.currentValueSelector = currentValueSelector;
  46.     this.attachChangeListener = attachChangeListener;
  48.     // Private variables
  49.     this.rangeInput = null;
  50.     this.currentValue = null;
  52.     // Bind `this` for use in callbacks
  53.     this.handleChange = this.handleChange.bind(this);
  54.   }
  56.   /**
  57.    * Initialise component.
  58.    */
  59.   init() {
  60.     if (!ECL) {
  61.       throw new TypeError('Called init but ECL is not present');
  62.     }
  63.     ECL.components = ECL.components || new Map();
  65.     this.rangeInput = queryOne(this.rangeInputSelector, this.element);
  66.     this.currentValue = queryOne(this.currentValueSelector, this.element);
  68.     if (this.rangeInput && this.currentValue) {
  69.       // Display default value
  70.       this.currentValue.innerHTML = this.rangeInput.value;
  72.       // Bind change event on range
  73.       if (this.attachChangeListener) {
  74.         this.rangeInput.addEventListener('input', this.handleChange);
  75.       }
  76.     }
  78.     // Set ecl initialized attribute
  79.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  80.     ECL.components.set(this.element, this);
  81.   }
  83.   /**
  84.    * Destroy component.
  85.    */
  86.   destroy() {
  87.     if (this.attachChangeListener && this.rangeInput && this.currentValue) {
  88.       this.rangeInput.removeEventListener('input', this.handleChange);
  89.     }
  90.     if (this.element) {
  91.       this.element.removeAttribute('data-ecl-auto-initialized');
  92.       ECL.components.delete(this.element);
  93.     }
  94.   }
  96.   /**
  97.    * Display value when changed
  98.    */
  99.   handleChange() {
  100.     // Update value
  101.     this.currentValue.innerHTML = this.rangeInput.value;
  102.   }
  103. }
  105. export default Range;