dialog-lite/dist/index.es.js

DialogLite is designed to control a dialog box (modal window) on a web page, providing the functionality to open, close and apply custom styles through a simple interface.

var d = Object.defineProperty;
var h = (l, s, i) => s in l ? d(l, s, { enumerable: !0, configurable: !0, writable: !0, value: i }) : l[s] = i;
var t = (l, s, i) => h(l, typeof s != "symbol" ? s + "" : s, i);
class r {
  constructor({ closingButton: s = !1, closingBackdrop: i = !1 } = {}) {
    t(this, "dialogEl", null);
    t(this, "dialogCloseEl", null);
    t(this, "dialogBackdropEl", null);
    t(this, "mainContentEl", null);
    t(this, "currentClass", "");
    t(this, "previouslyFocusedElement", null);
    t(this, "lastActionTime", 0);
    t(this, "isOpen", !1);
    t(this, "isCloseButtonEnabled");
    t(this, "isCloseOnBackdropClickEnabled");
    this.isCloseButtonEnabled = s, this.isCloseOnBackdropClickEnabled = i, this.getElements();
  }
  getElements() {
    if (this.dialogEl = document.querySelector(".dialog-lite"), this.mainContentEl = document.getElementById("main-content"), !this.dialogEl) throw new Error("Dialog element not found");
    this.dialogCloseEl = this.dialogEl.querySelector(".dialog-lite-close-button"), this.dialogBackdropEl = this.dialogEl.querySelector(".dialog-lite__backdrop");
  }
  init() {
    this.isCloseButtonEnabled && this.dialogCloseEl && this.dialogCloseEl.addEventListener("click", () => this.close()), this.isCloseOnBackdropClickEnabled && this.dialogBackdropEl && this.dialogBackdropEl.addEventListener("click", () => this.close()), document.addEventListener("keydown", (s) => {
      s.key === "Escape" && this.isOpen && this.close();
    });
  }
  open({ stylingClass: s = "" } = {}) {
    this.isDebounced() || this.dialogEl && (this.dialogEl.style.display === "none" && (this.dialogEl.style.display = "", this.dialogEl.offsetWidth), this.isOpen = !0, this.mainContentEl && this.mainContentEl.setAttribute("aria-hidden", "true"), this.dialogEl.setAttribute("aria-hidden", "false"), this.previouslyFocusedElement = document.activeElement, this.updateClassList({ addClass: "dialog-lite--in", removeClass: "dialog-lite--out", newClass: s }));
  }
  close() {
    this.isDebounced() || this.dialogEl && (this.isOpen = !1, this.mainContentEl && this.mainContentEl.setAttribute("aria-hidden", "false"), this.dialogEl.setAttribute("aria-hidden", "true"), this.previouslyFocusedElement && this.previouslyFocusedElement.focus(), this.updateClassList({ addClass: "dialog-lite--out", removeClass: "dialog-lite--in", newClass: "", delayRemove: !0 }), setTimeout(() => {
      this.dialogEl && (this.dialogEl.style.display = "none");
    }, 500));
  }
  updateClassList({ addClass: s, removeClass: i, newClass: e, delayRemove: a = !1 }) {
    if (this.dialogEl) {
      if (this.currentClass) if (a) {
        const n = this.currentClass;
        setTimeout(() => {
          var o;
          (o = this.dialogEl) == null || o.classList.remove(n), this.currentClass = "";
        }, 500);
      } else this.dialogEl.classList.remove(this.currentClass);
      this.dialogEl.classList.remove(i), this.dialogEl.classList.add(s), e && (this.dialogEl.classList.add(e), this.currentClass = e);
    }
  }
  isDebounced() {
    const s = Date.now();
    return s - this.lastActionTime < 500 || (this.lastActionTime = s, !1);
  }
}
export {
  r as default
};