@ussebastian/kitdigital/src/js/components/Modal.js

Kit Digital de la Universidad San Sebastián

export class Modal {
  constructor(el) {
    this.rootNode = el;
    const getAttr = (attribute) => this.rootNode.getAttribute(attribute);

    this.modalId = getAttr('data-uss-modal-id');

    const closeBtn = document.createElement('button');
    closeBtn.addEventListener('click', () => {
      this.closeModal();
    });
    closeBtn.classList.add('uss-modal__close-btn');
    closeBtn.innerHTML = '<i class="uss-icon uss-icon--sm ri-close-line"></i>';
    this.rootNode.appendChild(closeBtn);

    this.triggers = document.querySelectorAll(`[data-uss-modal-target="${this.modalId}"]`);
    this.rootNode.setAttribute('aria-modal', 'true');
    this.rootNode.setAttribute('role', 'dialog');
  }

  openModal() {
    this.rootNode.showModal();
  }

  closeModal() {
    this.rootNode.close();
  }

  setCloseOnClickButtons() {
    this.rootNode.querySelectorAll('[data-uss-modal-close-on-click]').forEach((btn) => {
      btn.addEventListener('click', () => {
        this.closeModal();
      });
      this.rootNode.addEventListener('click', (e) => {
        if (e.target === this.rootNode) {
          this.closeModal();
        }
      });
    });
  }

  mount() {
    this.triggers.forEach((trigger) => {
      trigger.addEventListener('click', () => {
        this.openModal();
      });
    });
    this.setCloseOnClickButtons();
  }
}