@flexilla/offcanvas - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

dist/index.d.ts

@@ -5,2 +5,4 @@ declare type BackdropHidden = {
 
+declare type BackdropOptions = BackdropVisible | BackdropHidden;
+
 declare type BackdropVisible = {
@@ -21,9 +23,9 @@ visibility: "visible";
     private backdropClass;
-    instance: OffCanvas;
     private backdrop;
     /**
-     * Create an Offcanvas instance.
-     * @param {OffcanvasParams} options - The options for configuring the Offcanvas.
+     * Offcanvas Component
+     * @param offcanvas
+     * @param options
      */
-    constructor({ offCanvasElement, options }: OffcanvasParams);
+    constructor(offcanvas: string | HTMLElement, options?: OffcanvasOptions);
     private findOffCanvasElements;
@@ -49,13 +51,8 @@ private setupAttributes;
 
-export declare type OffcanvasOptions = BackdropVisible | BackdropHidden;
-
-export declare type OffcanvasParams = {
-    offCanvasElement: HTMLElement;
-    options?: {
-        staticBackdrop?: boolean;
-        allowBodyScroll?: boolean;
-        backdrop?: OffcanvasOptions;
-    };
+export declare type OffcanvasOptions = {
+    staticBackdrop?: boolean;
+    allowBodyScroll?: boolean;
+    backdrop?: BackdropOptions;
 };
 
 export { }

dist/offcanvas.js

@@ -1,11 +0,5 @@
-var v = Object.defineProperty;
-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 = ({
-  selector: e,
-  parentElement: t
-}) => t.querySelector(e), f = ({
-  selector: e,
-  parentElement: t
-}) => Array.from(t.querySelectorAll(e)), m = ({
+var h = Object.defineProperty;
+var m = (e, t, s) => t in e ? h(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var n = (e, t, s) => (m(e, typeof t != "symbol" ? t + "" : t, s), s);
+const r = (e, t = document.body) => t.querySelector(e), d = (e, t = document.body) => Array.from(t.querySelectorAll(e)), C = ({
   newElement: e,
@@ -41,12 +35,12 @@ existingElement: t
   return s || "";
-}, C = (e, t) => {
+}, p = (e, t) => {
   t.removeChild(e);
-}, d = (e, t) => {
+}, v = (e, t) => {
   u({
     element: e,
     callback() {
-      C(e, t);
+      p(e, t);
     }
   });
-}, p = (e, t, s) => {
+}, b = (e, t, s) => {
   if (!e && t === "")
@@ -61,30 +55,25 @@ return;
   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) => {
+}, c = (e, t, s) => {
+  e.setAttribute("aria-hidden", s === "open" ? "false" : "true"), e.setAttribute("data-state", s), t || g(s);
+}, g = (e) => {
   document.body.style.overflow = e === "open" ? "hidden" : "", document.body.style.overflowY = e === "open" ? "hidden" : "auto";
-}, g = (e, t) => {
+}, y = (e, t) => {
   if (e === t)
     return;
   e.setAttribute("aria-hidden", "true"), e.setAttribute("data-state", "close");
-  const s = c({
-    selector: `[data-fx-offcanvas-overlay][data-offcanvas-el=${e.getAttribute("id")}]`,
-    parentElement: e.parentElement
-  });
-  s instanceof HTMLElement && d(s, e.parentElement);
-}, y = (e) => {
-  const t = f({
-    selector: "[data-fx-offcanvas][data-state=open]",
-    parentElement: document.body
-  });
+  const s = r(`[data-fx-offcanvas-overlay][data-offcanvas-el=${e.getAttribute("id")}]`, e.parentElement);
+  s instanceof HTMLElement && v(s, e.parentElement);
+}, O = (e) => {
+  const t = d("[data-fx-offcanvas][data-state=open]");
   if (!(t.length <= 0))
     for (const s of t)
-      g(s, e);
+      y(s, e);
 };
-class k {
+class A {
   /**
-  * Create an Offcanvas instance.
-  * @param {OffcanvasParams} options - The options for configuring the Offcanvas.
-  */
-  constructor({ offCanvasElement: t, options: s = {} }) {
+   * Offcanvas Component
+   * @param offcanvas 
+   * @param options 
+   */
+  constructor(t, s = {}) {
     n(this, "offCanvasElement");
@@ -96,16 +85,13 @@ n(this, "offCanvasTriggers");
     n(this, "backdropClass");
-    n(this, "instance");
     n(this, "backdrop");
-    if (this.instance = this, !(t instanceof HTMLElement))
+    const a = typeof t == "string" ? r(t) : t;
+    if (!(a instanceof HTMLElement))
       throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
-    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();
+    const { staticBackdrop: i, allowBodyScroll: o, backdrop: l } = s;
+    this.offCanvasElement = a, this.setupAttributes(), this.staticBackdrop = i || a.hasAttribute("data-static-backdrop") && a.dataset.staticBackdrop !== "false" || !1, this.allowBodyScroll = o || a.hasAttribute("data-allow-body-scroll") && a.dataset.allowBodyScroll !== "false" || !1;
+    const f = this.offCanvasElement.getAttribute("id");
+    this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", f), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", f), this.backdrop = l, this.backdropClass = this.offCanvasElement.dataset.offcanvasBackdrop || "", this.init();
   }
   findOffCanvasElements(t, s) {
-    return f({
-      selector: `${t}[data-target=${s}]`,
-      parentElement: document.body
-    });
+    return d(`${t}[data-target=${s}]`);
   }
@@ -123,11 +109,11 @@ setupAttributes() {
   closeOffCanvas() {
-    const t = this.offCanvasElement.getAttribute("id"), s = c({ selector: `[data-fx-offcanvas-overlay][data-offcanvas-el=${t}]`, parentElement: this.offCanvasElement.parentElement });
-    r(
+    const t = this.offCanvasElement.getAttribute("id"), s = r(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t}]`, this.offCanvasElement.parentElement);
+    c(
       this.offCanvasElement,
       this.allowBodyScroll,
       "close"
-    ), s instanceof HTMLElement && d(s, this.offCanvasElement.parentElement), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !s && document.removeEventListener("click", (a) => this.closeWhenClickOutSide(a));
+    ), s instanceof HTMLElement && v(s, this.offCanvasElement.parentElement), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !s && document.removeEventListener("click", (a) => this.closeWhenClickOutSide(a));
   }
   openOffCanvas() {
-    y(this.offCanvasElement), r(
+    O(this.offCanvasElement), c(
       this.offCanvasElement,
@@ -137,3 +123,3 @@ this.allowBodyScroll,
     );
-    const t = this.offCanvasElement.getAttribute("id"), s = p(
+    const t = this.offCanvasElement.getAttribute("id"), s = b(
       this.backdrop,
@@ -143,3 +129,3 @@ this.backdropClass,
     );
-    s instanceof HTMLElement && (m({ newElement: s, existingElement: this.offCanvasElement }), this.staticBackdrop || s.addEventListener("click", () => {
+    s instanceof HTMLElement && (C({ newElement: s, existingElement: this.offCanvasElement }), this.staticBackdrop || s.addEventListener("click", () => {
       this.closeOffCanvas();
@@ -176,3 +162,3 @@ })), document.addEventListener("keydown", (a) => this.closeWithEsc(a));
 export {
-  k as OffCanvas
+  A as OffCanvas
 };

package.json

 {
   "name": "@flexilla/offcanvas",
   "private": false,
-  "version": "1.2.0",
+  "version": "2.0.0",
   "type": "module",
@@ -24,3 +24,3 @@ "description": "An offcanvas component for creating responsive and off-screen navigation panels in web applications.",
     },
-    "./offcanvas.css":"./dist/offcanvas.css"
+    "./offcanvas.css": "./dist/offcanvas.css"
   },
@@ -68,3 +68,4 @@ "files": [
   "license": "MIT",
-  "author": "johnkat-mj"
+  "author": "johnkat-mj",
+  "gitHead": "b182c7035953bc34e8f350b834df9862bec8acb5"
 }

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

Worsened metrics

Total package byte prevSize

14970

decreased by-4.09%

Lines of code

228

decreased by-7.32%

No dependency changes