notification.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.closeSelector Selector for closing the notification
  7.  * @param {Boolean} options.attachClickListener Whether or not to bind click events
  8.  */
  9. export class Notification {
  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 {Notification} An instance of Notification.
  17.    */
  18.   static autoInit(root, { NOTIFICATION: defaultOptions = {} } = {}) {
  19.     const notification = new Notification(root, defaultOptions);
  20.     notification.init();
  21.     root.ECLNotification = notification;
  22.     return notification;
  23.   }
  25.   constructor(
  26.     element,
  27.     {
  28.       closeSelector = '[data-ecl-notification-close]',
  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.closeSelector = closeSelector;
  43.     this.attachClickListener = attachClickListener;
  45.     // Private variables
  46.     this.close = null;
  48.     // Bind `this` for use in callbacks
  49.     this.handleClickOnClose = this.handleClickOnClose.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();
  61.     this.close = queryOne(this.closeSelector, this.element);
  63.     // Bind click event on close
  64.     if (this.attachClickListener && this.close) {
  65.       this.close.addEventListener('click', this.handleClickOnClose);
  66.     }
  68.     // Set ecl initialized attribute
  69.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  70.     ECL.components.set(this.element, this);
  71.   }
  73.   /**
  74.    * Destroy component.
  75.    */
  76.   destroy() {
  77.     if (this.attachClickListener && this.close) {
  78.       this.close.removeEventListener('click', this.handleClickOnClose);
  79.     }
  80.     if (this.element) {
  81.       this.element.removeAttribute('data-ecl-auto-initialized');
  82.       ECL.components.delete(this.element);
  83.     }
  84.   }
  86.   /**
  87.    * Remove the notification component.
  88.    */
  89.   handleClickOnClose() {
  90.     // IE way to remove a node...
  91.     if (this.element.parentNode) {
  92.       this.element.parentNode.removeChild(this.element);
  93.     }
  95.     return this;
  96.   }
  97. }
  99. export default Notification;