[Summary view] [Print] [Text view]

   1  class AlertElement extends HTMLElement {
   2    constructor() {
   3      super();
   4  
   5      // Bindings
   6      this.close = this.close.bind(this);
   7      this.destroyCloseButton = this.destroyCloseButton.bind(this);
   8      this.createCloseButton = this.createCloseButton.bind(this);
   9      this.onMutation = this.onMutation.bind(this);
  10  
  11      this.observer = new MutationObserver(this.onMutation);
  12      this.observer.observe(this, { attributes: false, childList: true, subtree: true });
  13  
  14      // Handle the fade in animation
  15      this.addEventListener('animationend', (event) => {
  16        if (event.animationName === 'joomla-alert-fade-in' && event.target === this) {
  17          this.dispatchEvent(new CustomEvent('joomla.alert.shown'));
  18          this.style.removeProperty('animationName');
  19        }
  20      });
  21  
  22      // Handle the fade out animation
  23      this.addEventListener('animationend', (event) => {
  24        if (event.animationName === 'joomla-alert-fade-out' && event.target === this) {
  25          this.dispatchEvent(new CustomEvent('joomla.alert.closed'));
  26          this.remove();
  27        }
  28      });
  29    }
  30  
  31    /* Attributes to monitor */
  32    static get observedAttributes() { return ['type', 'role', 'dismiss', 'auto-dismiss', 'close-text']; }
  33  
  34    get type() { return this.getAttribute('type'); }
  35  
  36    set type(value) { this.setAttribute('type', value); }
  37  
  38    get role() { return this.getAttribute('role'); }
  39  
  40    set role(value) { this.setAttribute('role', value); }
  41  
  42    get closeText() { return this.getAttribute('close-text'); }
  43  
  44    set closeText(value) { this.setAttribute('close-text', value); }
  45  
  46    get dismiss() { return this.getAttribute('dismiss'); }
  47  
  48    set dismiss(value) { this.setAttribute('dismiss', value); }
  49  
  50    get autodismiss() { return this.getAttribute('auto-dismiss'); }
  51  
  52    set autodismiss(value) { this.setAttribute('auto-dismiss', value); }
  53  
  54    /* Lifecycle, element appended to the DOM */
  55    connectedCallback() {
  56      this.dispatchEvent(new CustomEvent('joomla.alert.show'));
  57      this.style.animationName = 'joomla-alert-fade-in';
  58  
  59      // Default to info
  60      if (!this.type || !['info', 'warning', 'danger', 'success'].includes(this.type)) {
  61        this.setAttribute('type', 'info');
  62      }
  63      // Default to alert
  64      if (!this.role || !['alert', 'alertdialog'].includes(this.role)) {
  65        this.setAttribute('role', 'alert');
  66      }
  67  
  68      // Hydrate the button
  69      if (this.firstElementChild && this.firstElementChild.tagName === 'BUTTON') {
  70        this.button = this.firstElementChild;
  71        if (this.button.classList.contains('joomla-alert--close')) {
  72          this.button.classList.add('joomla-alert--close');
  73        }
  74        if (this.button.innerHTML === '') {
  75          this.button.innerHTML = '<span aria-hidden="true">&times;</span>';
  76        }
  77        if (!this.button.hasAttribute('aria-label')) {
  78          this.button.setAttribute('aria-label', this.closeText);
  79        }
  80      }
  81  
  82      // Append button
  83      if (this.hasAttribute('dismiss') && !this.button) {
  84        this.createCloseButton();
  85      }
  86  
  87      if (this.hasAttribute('auto-dismiss')) {
  88        this.autoDismiss();
  89      }
  90    }
  91  
  92    /* Lifecycle, element removed from the DOM */
  93    disconnectedCallback() {
  94      if (this.button) {
  95        this.button.removeEventListener('click', this.close);
  96      }
  97      this.observer.disconnect();
  98    }
  99  
 100    /* Respond to attribute changes */
 101    attributeChangedCallback(attr, oldValue, newValue) {
 102      switch (attr) {
 103        case 'type':
 104          if (!newValue || (newValue && ['info', 'warning', 'danger', 'success'].indexOf(newValue) === -1)) {
 105            this.type = 'info';
 106          }
 107          break;
 108        case 'role':
 109          if (!newValue || (newValue && ['alert', 'alertdialog'].indexOf(newValue) === -1)) {
 110            this.role = 'alert';
 111          }
 112          break;
 113        case 'dismiss':
 114          if ((!newValue || newValue === '') && (!oldValue || oldValue === '')) {
 115            if (this.button && !this.hasAttribute('dismiss')) {
 116              this.destroyCloseButton();
 117            } else if (!this.button && this.hasAttribute('dismiss')) {
 118              this.createCloseButton();
 119            }
 120          } else if (this.button && newValue === 'false') {
 121            this.destroyCloseButton();
 122          } else if (!this.button && newValue !== 'false') {
 123            this.createCloseButton();
 124          }
 125          break;
 126        case 'close-text':
 127          if (!newValue || newValue !== oldValue) {
 128            if (this.button) {
 129              this.button.setAttribute('aria-label', newValue);
 130            }
 131          }
 132          break;
 133        case 'auto-dismiss':
 134          this.autoDismiss();
 135          break;
 136      }
 137    }
 138  
 139    /* Observe added elements */
 140    onMutation(mutationsList) {
 141      // eslint-disable-next-line no-restricted-syntax
 142      for (const mutation of mutationsList) {
 143        if (mutation.type === 'childList') {
 144          if (mutation.addedNodes.length) {
 145            // Make sure that the button is always the first element
 146            if (this.button && this.firstElementChild !== this.button) {
 147              this.prepend(this.button);
 148            }
 149          }
 150        }
 151      }
 152    }
 153  
 154    /* Method to close the alert */
 155    close() {
 156      this.dispatchEvent(new CustomEvent('joomla.alert.close'));
 157      this.style.animationName = 'joomla-alert-fade-out';
 158    }
 159  
 160    /* Method to create the close button */
 161    createCloseButton() {
 162      this.button = document.createElement('button');
 163      this.button.setAttribute('type', 'button');
 164      this.button.classList.add('joomla-alert--close');
 165      this.button.innerHTML = '<span aria-hidden="true">&times;</span>';
 166      this.button.setAttribute('aria-label', this.closeText);
 167      this.insertAdjacentElement('afterbegin', this.button);
 168  
 169      /* Add the required listener */
 170      this.button.addEventListener('click', this.close);
 171    }
 172  
 173    /* Method to remove the close button */
 174    destroyCloseButton() {
 175      if (this.button) {
 176        this.button.removeEventListener('click', this.close);
 177        this.button.parentNode.removeChild(this.button);
 178        this.button = null;
 179      }
 180    }
 181  
 182    /* Method to auto-dismiss */
 183    autoDismiss() {
 184      const timer = parseInt(this.getAttribute('auto-dismiss'), 10);
 185      setTimeout(this.close, timer >= 10 ? timer : 3000);
 186    }
 187  }
 188  
 189  if (!customElements.get('joomla-alert')) {
 190    customElements.define('joomla-alert', AlertElement);
 191  }