file.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.translationToggleSelector Selector for toggling translatoins section
  7.  * @param {String} options.translationContainerSelector Selector for translations section container
  8.  * @param {Boolean} options.attachClickListener Whether or not to bind click events on toggle
  9.  */
  10. export class FileDownload {
  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 {FileDownload} An instance of FileDownload.
  18.    */
  19.   static autoInit(root, { FILE_DOWNLOAD: defaultOptions = {} } = {}) {
  20.     const fileDownload = new FileDownload(root, defaultOptions);
  21.     fileDownload.init();
  22.     root.ECLFileDownload = fileDownload;
  23.     return fileDownload;
  24.   }
  26.   constructor(
  27.     element,
  28.     {
  29.       translationToggleSelector = '[data-ecl-file-translation-toggle]',
  30.       translationContainerSelector = '[data-ecl-file-translation-container]',
  31.       attachClickListener = 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.translationToggleSelector = translationToggleSelector;
  45.     this.translationContainerSelector = translationContainerSelector;
  46.     this.attachClickListener = attachClickListener;
  48.     // Private variables
  49.     this.translationToggle = null;
  50.     this.translationContainer = null;
  52.     // Bind `this` for use in callbacks
  53.     this.handleClickOnToggle = this.handleClickOnToggle.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.translationToggle = queryOne(
  66.       this.translationToggleSelector,
  67.       this.element,
  68.     );
  69.     this.translationContainer = queryOne(
  70.       this.translationContainerSelector,
  71.       this.element,
  72.     );
  74.     // Bind click event on toggle
  75.     if (this.attachClickListener && this.translationToggle) {
  76.       this.translationToggle.addEventListener(
  77.         'click',
  78.         this.handleClickOnToggle,
  79.       );
  80.     }
  82.     // Set ecl initialized attribute
  83.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  84.     ECL.components.set(this.element, this);
  85.   }
  87.   /**
  88.    * Destroy component.
  89.    */
  90.   destroy() {
  91.     if (this.attachClickListener && this.translationToggle) {
  92.       this.translationToggle.removeEventListener(
  93.         'click',
  94.         this.handleClickOnToggle,
  95.       );
  96.     }
  97.     if (this.element) {
  98.       this.element.removeAttribute('data-ecl-auto-initialized');
  99.       ECL.components.delete(this.element);
  100.     }
  101.   }
  103.   /**
  104.    * @param {Event} e
  105.    */
  106.   handleClickOnToggle(e) {
  107.     e.preventDefault();
  109.     if (this.translationToggle.getAttribute('aria-expanded') === 'true') {
  110.       this.translationToggle.setAttribute('aria-expanded', 'false');
  111.     } else {
  112.       this.translationToggle.setAttribute('aria-expanded', 'true');
  113.     }
  115.     return this;
  116.   }
  117. }
  119. export default FileDownload;