@flexilla/offcanvas - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/offcanvas.js

 var v = Object.defineProperty;
-var h = (e, t, a) => t in e ? v(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
-var n = (e, t, a) => (h(e, typeof t != "symbol" ? t + "" : t, a), a);
+var h = (e, t, s) => t in e ? v(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var n = (e, t, s) => (h(e, typeof t != "symbol" ? t + "" : t, s), s);
 const c = ({
@@ -16,38 +16,20 @@ selector: e,
     throw new Error("Both parameters must be valid HTML elements.");
-  const a = t.parentElement;
-  if (a)
-    a.insertBefore(e, t);
+  const s = t.parentElement;
+  if (s)
+    s.insertBefore(e, t);
   else
     throw new Error("Existing element must have a parent element.");
 }, u = ({
-  newStyles: e,
-  identifier: t
-}) => {
-  const a = document.head.querySelector("[data-fx-style]");
-  if (a) {
-    (a.textContent || "").includes(t) || (a.textContent += e);
-    return;
-  }
-  const s = document.createElement("style");
-  s.textContent = e, s.setAttribute("data-fx-style", ""), document.head.appendChild(s);
-}, E = ({
   element: e,
   callback: t
 }) => {
-  const a = getComputedStyle(e).transition;
-  a !== "none" && a !== "" && a !== "all 0s ease 0s" ? e.addEventListener(
+  const s = getComputedStyle(e).transition;
+  s !== "none" && s !== "" && s !== "all 0s ease 0s" ? e.addEventListener(
     "transitionend",
-    function s() {
-      e.removeEventListener("transitionend", s), t();
+    function a() {
+      e.removeEventListener("transitionend", a), t();
     },
     { once: !0 }
   ) : t();
-}, C = () => {
-  u({
-    newStyles: "[data-fx-offcanvas-overlay]{position: fixed;inset: 0;display: flex;}[data-fx-offcanvas-overlay][data-state=visible]{visibility: visible;}[data-fx-offcanvas-overlay][data-state=hidden]{visibility: hidden;}",
-    identifier: "[data-fx-offcanvas]"
-  });
-}, p = () => {
-  document.querySelectorAll("[data-fx-offcanvas]").length > 0 && C();
-}, y = (e) => {
+}, E = (e) => {
   if (!e)
@@ -58,37 +40,37 @@ return;
     return;
-  const { backdropClass: a } = e;
-  return a || "";
-}, b = (e, t) => {
+  const { backdropClass: s } = e;
+  return s || "";
+}, C = (e, t) => {
   t.removeChild(e);
 }, d = (e, t) => {
-  E({
+  u({
     element: e,
     callback() {
-      b(e, t);
+      C(e, t);
     }
   });
-}, g = (e, t, a) => {
+}, p = (e, t, s) => {
   if (!e && t === "")
     return;
-  const s = document.createElement("div");
-  s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "visible"), s.setAttribute("data-fx-offcanvas-overlay", ""), s.setAttribute("data-offcanvas-el", a);
-  const i = y(e), o = i !== "" && i || t;
+  const a = document.createElement("div");
+  a.setAttribute("aria-hidden", "true"), a.setAttribute("data-state", "visible"), a.setAttribute("data-fx-offcanvas-overlay", ""), a.setAttribute("data-offcanvas-el", s);
+  const i = E(e), o = i !== "" && i || t;
   if (o === "")
     return;
   const l = o.split(" ");
-  return o !== "" && s.classList.add(...l), s;
-}, r = (e, t, a) => {
-  e.setAttribute("aria-hidden", a === "open" ? "false" : "true"), e.setAttribute("data-state", a), t || O(a);
-}, O = (e) => {
+  return o !== "" && a.classList.add(...l), a;
+}, r = (e, t, s) => {
+  e.setAttribute("aria-hidden", s === "open" ? "false" : "true"), e.setAttribute("data-state", s), t || b(s);
+}, b = (e) => {
   document.body.style.overflow = e === "open" ? "hidden" : "", document.body.style.overflowY = e === "open" ? "hidden" : "auto";
-}, k = (e, t) => {
+}, g = (e, t) => {
   if (e === t)
     return;
   e.setAttribute("aria-hidden", "true"), e.setAttribute("data-state", "close");
-  const a = c({
+  const s = c({
     selector: `[data-fx-offcanvas-overlay][data-offcanvas-el=${e.getAttribute("id")}]`,
     parentElement: e.parentElement
   });
-  a instanceof HTMLElement && d(a, e.parentElement);
-}, A = (e) => {
+  s instanceof HTMLElement && d(s, e.parentElement);
+}, y = (e) => {
   const t = f({
@@ -99,6 +81,6 @@ selector: "[data-fx-offcanvas][data-state=open]",
   if (!(t.length <= 0))
-    for (const a of t)
-      k(a, e);
+    for (const s of t)
+      g(s, e);
 };
-class w {
+class k {
   /**
@@ -108,3 +90,3 @@ * Create an Offcanvas instance.
   */
-  constructor({ offCanvasElement: t, options: a = {} }) {
+  constructor({ offCanvasElement: t, options: s = {} }) {
     n(this, "offCanvasElement");
@@ -120,10 +102,10 @@ n(this, "offCanvasTriggers");
       throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
-    const { staticBackdrop: s, allowBodyScroll: i, backdrop: o } = a;
-    this.offCanvasElement = t, this.setupAttributes(), this.staticBackdrop = s || t.hasAttribute("data-static-backdrop") && t.dataset.staticBackdrop !== "false" || !1, this.allowBodyScroll = i || t.hasAttribute("data-allow-body-scroll") && t.dataset.allowBodyScroll !== "false" || !1;
+    const { staticBackdrop: a, allowBodyScroll: i, backdrop: o } = s;
+    this.offCanvasElement = t, this.setupAttributes(), this.staticBackdrop = a || t.hasAttribute("data-static-backdrop") && t.dataset.staticBackdrop !== "false" || !1, this.allowBodyScroll = i || t.hasAttribute("data-allow-body-scroll") && t.dataset.allowBodyScroll !== "false" || !1;
     const l = this.offCanvasElement.getAttribute("id");
     this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", l), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", l), this.backdrop = o, this.backdropClass = this.offCanvasElement.dataset.offcanvasBackdrop || "", this.init();
   }
-  findOffCanvasElements(t, a) {
+  findOffCanvasElements(t, s) {
     return f({
-      selector: `${t}[data-target=${a}]`,
+      selector: `${t}[data-target=${s}]`,
       parentElement: document.body
@@ -139,7 +121,7 @@ });
   closeWhenClickOutSide(t) {
-    const a = this.offCanvasElement.getAttribute("data-state") === "open", s = !this.offCanvasElement.contains(t.target) && ![...this.offCanvasTriggers].includes(t.target);
-    a && s && this.closeOffCanvas();
+    const s = this.offCanvasElement.getAttribute("data-state") === "open", a = !this.offCanvasElement.contains(t.target) && ![...this.offCanvasTriggers].includes(t.target);
+    s && a && this.closeOffCanvas();
   }
   closeOffCanvas() {
-    const t = this.offCanvasElement.getAttribute("id"), a = c({ selector: `[data-fx-offcanvas-overlay][data-offcanvas-el=${t}]`, parentElement: this.offCanvasElement.parentElement });
+    const t = this.offCanvasElement.getAttribute("id"), s = c({ selector: `[data-fx-offcanvas-overlay][data-offcanvas-el=${t}]`, parentElement: this.offCanvasElement.parentElement });
     r(
@@ -149,6 +131,6 @@ this.offCanvasElement,
       "close"
-    ), a instanceof HTMLElement && d(a, this.offCanvasElement.parentElement), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a && document.removeEventListener("click", (s) => this.closeWhenClickOutSide(s));
+    ), s instanceof HTMLElement && d(s, this.offCanvasElement.parentElement), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !s && document.removeEventListener("click", (a) => this.closeWhenClickOutSide(a));
   }
   openOffCanvas() {
-    A(this.offCanvasElement), r(
+    y(this.offCanvasElement), r(
       this.offCanvasElement,
@@ -158,3 +140,3 @@ this.allowBodyScroll,
     );
-    const t = this.offCanvasElement.getAttribute("id"), a = g(
+    const t = this.offCanvasElement.getAttribute("id"), s = p(
       this.backdrop,
@@ -164,5 +146,5 @@ this.backdropClass,
     );
-    a instanceof HTMLElement && (m({ newElement: a, existingElement: this.offCanvasElement }), this.staticBackdrop || a.addEventListener("click", () => {
+    s instanceof HTMLElement && (m({ newElement: s, existingElement: this.offCanvasElement }), this.staticBackdrop || s.addEventListener("click", () => {
       this.closeOffCanvas();
-    })), document.addEventListener("keydown", (s) => this.closeWithEsc(s));
+    })), document.addEventListener("keydown", (a) => this.closeWithEsc(a));
   }
@@ -196,5 +178,4 @@ /**
 }
-document.addEventListener("DOMContentLoaded", p);
 export {
-  w as OffCanvas
+  k as OffCanvas
 };

package.json

 {
   "name": "@flexilla/offcanvas",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
@@ -23,3 +23,4 @@ "description": "An offcanvas component for creating responsive and off-screen navigation panels in web applications.",
       }
-    }
+    },
+    "./offcanvas.css":"./dist/offcanvas.css"
   },
@@ -43,3 +44,3 @@ "files": [
     "@biomejs/biome": "1.5.1",
-    "@flexilla/utilities": "^1.1.0",
+    "@flexilla/utilities": "latest",
     "typescript": "^5.2.2",
@@ -68,4 +69,3 @@ "vite": "^5.0.8",
   "license": "MIT",
-  "author": "johnkat-mj",
-  "gitHead": "18549edaac73621574bb4df22436305c201c47c8"
+  "author": "johnkat-mj"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

7

increased by16.67%

Worsened metrics

Total package byte prevSize

15609

decreased by-6.78%

Lines of code

246

decreased by-7.87%

No dependency changes