hq-modal/dist/hq-modal.es.js

A simple component of modal

var s = Object.defineProperty;
var a = (i, t, o) => t in i ? s(i, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : i[t] = o;
var e = (i, t, o) => a(i, typeof t != "symbol" ? t + "" : t, o);
class d {
  constructor(t, o = {}) {
    e(this, "dialog");
    e(this, "dialogContainer");
    e(this, "buttonClose");
    e(this, "name");
    e(this, "options");
    this.name = t, this.options = {
      maxWidth: "500px",
      background: "rgba(0, 0, 0, 0.4)",
      top: "0",
      bottom: "0",
      left: "0",
      right: "0",
      showButtonClose: !1,
      ...o
    }, this.dialog = this.createDialog(), this.dialogContainer = this.createContainer(), this.buttonClose = this.createButtonClose(), this.transferContent(), this.open(), this.closeOverlayClick(), this.btnClose(), this.inlineCss(), this.onClose();
  }
  createDialog() {
    const t = document.createElement("dialog");
    return t.classList.add("hq-modal"), t.classList.add(`hq-modal--${this.name}`), t.setAttribute("data-hq-modal-block", this.name), t;
  }
  createContainer() {
    const t = document.createElement("div");
    return t.classList.add("hq-modal__container"), t.classList.add(`hq-modal__container--${this.name}`), t;
  }
  createButtonClose() {
    const t = document.createElement("div");
    return t.classList.add("hq-modal__btn-close"), t.classList.add(`hq-modal__btn-close--${this.name}`), t.addEventListener("click", () => this.dialog.close()), t;
  }
  transferContent() {
    var o;
    const t = document.querySelector(`[data-hq-modal-block="${this.name}"]`);
    if (t)
      for (; t.firstChild; )
        this.dialogContainer.appendChild(t.firstChild);
    t == null || t.remove(), this.dialog.appendChild(this.dialogContainer), this.options.showButtonClose && this.dialog.appendChild(this.buttonClose), (o = document.querySelector("body")) == null || o.appendChild(this.dialog);
  }
  open() {
    document.querySelectorAll(`[data-hq-modal-button="${this.name}"]`).forEach((t) => {
      t.addEventListener("click", () => {
        var n;
        const o = window.innerWidth - document.documentElement.clientWidth;
        document.body.style.paddingRight = `${o}px`, this.dialog.showModal(), (n = document.querySelector("body")) == null || n.classList.add("hq-modal-lock");
      });
    });
  }
  onClose() {
    this.dialog.addEventListener("close", () => {
      document.body.classList.remove("hq-modal-lock"), document.body.style.paddingRight = "";
    });
  }
  closeOverlayClick() {
    this.dialog.addEventListener("click", (t) => {
      const o = this.dialog.getBoundingClientRect();
      (t.clientX < o.left || t.clientX > o.right || t.clientY < o.top || t.clientY > o.bottom) && this.dialog.close();
    });
  }
  btnClose() {
    this.dialog.querySelectorAll("[data-hq-modal-close]").forEach((t) => {
      t.addEventListener("click", () => {
        this.dialog.close();
      });
    });
  }
  inlineCss() {
    const t = document.createElement("style");
    t.innerHTML = `
    .hq-modal {
      overflow: visible;
    }

    .hq-modal__container {
      overflow: auto;
      max-height: 80vh;
    }

    .hq-modal--${this.name} {
      box-sizing: border-box;
      inset: unset;
      top: ${this.options.bottom === "0" ? this.options.top : "initial"};
      bottom: ${this.options.top === "0" ? this.options.bottom : "initial"};
      right: ${this.options.left === "0" ? this.options.right : "initial"};
      left: ${this.options.right === "0" ? this.options.left : "initial"};
      border: none;
      max-width: ${this.options.maxWidth};
      width: 90%;
      padding: initial;
    }

    .hq-modal--${this.name}::backdrop {
      background: ${this.options.background};
    }

    .hq-modal__btn-close {
      position: absolute;
      top: -40px;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }

    .hq-modal__btn-close::before {
      content: '';
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'><path d='M2 2l12 12M14 2L2 14' stroke='%23333' stroke-width='2' stroke-linecap='round'/></svg>");
      background-repeat: no-repeat;
    }

    .hq-modal-lock {
      overflow: hidden;
    }
  `, document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => {
      this.dialog.appendChild(t);
    }) : this.dialog.appendChild(t);
  }
}
export {
  d as default
};