@flexilla/dismissible 2.0.11 → 2.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/dismissible.js +90 -46
  2. package/dist/dismissible.umd.cjs +1 -1
  3. package/dist/index.d.ts +14 -4
  4. package/package.json +3 -3
package/dist/dismissible.js CHANGED
@@ -1,97 +1,138 @@
1
1
  var u = Object.defineProperty;
2
- var E = (t, e, s) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
3
- var n = (t, e, s) => E(t, typeof e != "symbol" ? e + "" : e, s);
4
- const f = (t, e = document.body) => e.querySelector(t), c = (t, e = document.body) => Array.from(e.querySelectorAll(t)), w = ({
5
- element: t,
2
+ var E = (i, e, s) => e in i ? u(i, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : i[e] = s;
3
+ var t = (i, e, s) => E(i, typeof e != "symbol" ? e + "" : e, s);
4
+ const f = (i, e = document.body) => e.querySelector(i), d = (i, e = document.body) => Array.from(e.querySelectorAll(i)), p = ({
5
+ element: i,
6
6
  callback: e,
7
7
  type: s,
8
- keysCheck: i
8
+ keysCheck: n
9
9
  }) => {
10
- const l = getComputedStyle(t), a = l.transition;
11
- if (a !== "none" && a !== "" && !i.includes(a)) {
12
- const d = "transitionend", r = () => {
13
- t.removeEventListener(d, r), e();
10
+ const l = getComputedStyle(i), a = l.transition;
11
+ if (a !== "none" && a !== "" && !n.includes(a)) {
12
+ const r = "transitionend", h = () => {
13
+ i.removeEventListener(r, h), e();
14
14
  };
15
- t.addEventListener(d, r, { once: !0 });
15
+ i.addEventListener(r, h, { once: !0 });
16
16
  } else
17
17
  e();
18
- }, h = ({
19
- element: t,
18
+ }, m = ({
19
+ element: i,
20
20
  callback: e
21
21
  }) => {
22
- w({
23
- element: t,
22
+ p({
23
+ element: i,
24
24
  callback: e,
25
25
  type: "transition",
26
26
  keysCheck: ["all 0s ease 0s", "all"]
27
27
  });
28
28
  };
29
- class o {
29
+ class c {
30
30
  static initGlobalRegistry() {
31
31
  window.$flexillaInstances || (window.$flexillaInstances = {});
32
32
  }
33
- static register(e, s, i) {
34
- return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, s) || (window.$flexillaInstances[e].push({ element: s, instance: i }), i);
33
+ static register(e, s, n) {
34
+ return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, s) || (window.$flexillaInstances[e].push({ element: s, instance: n }), n);
35
35
  }
36
36
  static getInstance(e, s) {
37
- var i, l;
38
- return this.initGlobalRegistry(), (l = (i = window.$flexillaInstances[e]) == null ? void 0 : i.find(
37
+ var n, l;
38
+ return this.initGlobalRegistry(), (l = (n = window.$flexillaInstances[e]) == null ? void 0 : n.find(
39
39
  (a) => a.element === s
40
40
  )) == null ? void 0 : l.instance;
41
41
  }
42
42
  static removeInstance(e, s) {
43
43
  this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
44
- (i) => i.element !== s
44
+ (n) => n.element !== s
45
45
  ));
46
46
  }
47
+ static setup(e) {
48
+ e.setAttribute("data-fx-component", "fx");
49
+ }
50
+ static initialized(e) {
51
+ e.setAttribute("data-component-initialized", "initialized");
52
+ }
47
53
  }
48
- const m = class m {
54
+ const o = class o {
55
+ // Store original display style
49
56
  /**
50
57
  * Dismissible Component
51
58
  * @param dismissible
52
59
  * @param action
53
- * @param onDissmiss
60
+ * @param onDismiss
61
+ * @param onRestore
54
62
  */
55
- constructor(e, s, i) {
56
- n(this, "dismissibleElement");
57
- n(this, "dismissButtons");
58
- n(this, "action");
59
- n(this, "onDismiss");
60
- n(this, "hideFromScreen", () => {
63
+ constructor(e, s, n, l) {
64
+ t(this, "dismissibleElement");
65
+ t(this, "dismissButtons");
66
+ t(this, "restoreButtons");
67
+ t(this, "action");
68
+ t(this, "onDismiss");
69
+ t(this, "onRestore");
70
+ t(this, "parentElement");
71
+ // Store parent for DOM restoration
72
+ t(this, "previousSibling");
73
+ // Store sibling for precise restoration
74
+ t(this, "originalDisplay");
75
+ t(this, "hideFromScreen", () => {
61
76
  var e;
62
77
  this.dismissibleElement.style.display = "none", (e = this.onDismiss) == null || e.call(this);
63
78
  });
64
- n(this, "removeFromDom", () => {
79
+ t(this, "removeFromDom", () => {
65
80
  var e, s;
66
81
  (e = this.onDismiss) == null || e.call(this), (s = this.dismissibleElement.parentElement) == null || s.removeChild(this.dismissibleElement);
67
82
  });
68
- n(this, "dismiss", () => {
83
+ t(this, "showOnScreen", () => {
84
+ var e;
85
+ this.dismissibleElement.style.display = this.originalDisplay, this.dismissibleElement.setAttribute("aria-hidden", "false"), this.dismissibleElement.setAttribute("data-state", "visible"), (e = this.onRestore) == null || e.call(this);
86
+ });
87
+ t(this, "restoreToDom", () => {
88
+ var e;
89
+ this.parentElement && (this.previousSibling && this.previousSibling.nextSibling ? this.parentElement.insertBefore(this.dismissibleElement, this.previousSibling.nextSibling) : this.parentElement.appendChild(this.dismissibleElement), this.dismissibleElement.setAttribute("aria-hidden", "false"), this.dismissibleElement.removeAttribute("data-hidden"), this.dismissibleElement.setAttribute("data-state", "visible"), (e = this.onRestore) == null || e.call(this));
90
+ });
91
+ t(this, "dismiss", () => {
69
92
  switch (this.action) {
70
93
  case "hide-from-screen":
71
- this.dismissibleElement.setAttribute("aria-hidden", "true"), this.dismissibleElement.setAttribute("data-state", "hidden"), h({
94
+ this.dismissibleElement.setAttribute("aria-hidden", "true"), this.dismissibleElement.setAttribute("data-state", "hidden"), m({
72
95
  element: this.dismissibleElement,
73
96
  callback: this.hideFromScreen
74
97
  });
75
98
  break;
76
99
  default:
77
- this.dismissibleElement.setAttribute("data-hidden", ""), this.dismissibleElement.setAttribute("aria-hidden", "true"), this.dismissibleElement.setAttribute("data-state", "removed"), h({
100
+ this.dismissibleElement.setAttribute("data-hidden", ""), this.dismissibleElement.setAttribute("aria-hidden", "true"), this.dismissibleElement.setAttribute("data-state", "removed"), m({
78
101
  element: this.dismissibleElement,
79
102
  callback: this.removeFromDom
80
103
  });
81
104
  break;
82
105
  }
83
106
  });
84
- const l = typeof e == "string" ? f(e, document.body) : e;
85
- if (!(l instanceof HTMLElement)) throw new Error("Provided Element not a valid HTMLElement");
86
- this.dismissibleElement = l, this.action = s || this.dismissibleElement.dataset.action || "hide-from-screen", this.dismissButtons = c("[data-dismiss-btn]", this.dismissibleElement), this.onDismiss = i, this.dismissibleElement.setAttribute("aria-hidden", "false");
87
- const a = o.getInstance("dismissible", this.dismissibleElement);
88
- if (a)
89
- return a;
90
- this.setupDismissible(), o.register("dismissible", this.dismissibleElement, this);
107
+ t(this, "restore", () => {
108
+ switch (this.action) {
109
+ case "hide-from-screen":
110
+ m({
111
+ element: this.dismissibleElement,
112
+ callback: this.showOnScreen
113
+ });
114
+ break;
115
+ default:
116
+ m({
117
+ element: this.dismissibleElement,
118
+ callback: this.restoreToDom
119
+ });
120
+ break;
121
+ }
122
+ });
123
+ const a = typeof e == "string" ? f(e, document.body) : e;
124
+ if (!(a instanceof HTMLElement)) throw new Error("Provided Element not a valid HTMLElement");
125
+ this.dismissibleElement = a, this.action = s || this.dismissibleElement.dataset.action || "hide-from-screen", this.dismissButtons = d("[data-dismiss-btn]", this.dismissibleElement), this.restoreButtons = d("[data-restore-btn]", document.body), this.onDismiss = n, this.onRestore = l, this.parentElement = this.dismissibleElement.parentElement, this.previousSibling = this.dismissibleElement.previousSibling, this.originalDisplay = this.dismissibleElement.style.display || getComputedStyle(this.dismissibleElement).display, this.dismissibleElement.setAttribute("aria-hidden", "false");
126
+ const r = c.getInstance("dismissible", this.dismissibleElement);
127
+ if (r)
128
+ return r;
129
+ this.setupDismissible(), c.register("dismissible", this.dismissibleElement, this);
91
130
  }
92
131
  setupDismissible() {
93
132
  for (const e of this.dismissButtons)
94
133
  e.addEventListener("click", this.dismiss);
134
+ for (const e of this.restoreButtons)
135
+ e.addEventListener("click", this.restore);
95
136
  }
96
137
  /**
97
138
  * Cleanup method to remove event listeners
@@ -99,21 +140,24 @@ const m = class m {
99
140
  cleanup() {
100
141
  for (const e of this.dismissButtons)
101
142
  e.removeEventListener("click", this.dismiss);
102
- o.removeInstance("dismissible", this.dismissibleElement);
143
+ for (const e of this.restoreButtons)
144
+ e.removeEventListener("click", this.restore);
145
+ c.removeInstance("dismissible", this.dismissibleElement);
103
146
  }
104
147
  };
105
- n(m, "autoInit", (e = "[data-fx-dismissible]") => {
106
- const s = c(e);
107
- for (const i of s) new m(i);
148
+ t(o, "autoInit", (e = "[data-fx-dismissible]") => {
149
+ const s = d(e);
150
+ for (const n of s) new o(n);
108
151
  }), /**
109
152
  *
110
153
  * @param dismissible
111
154
  * @param action
112
- * @param onDissmiss
155
+ * @param onDismiss
156
+ * @param onRestore
113
157
  * @returns
114
158
  */
115
- n(m, "init", (e, s, i) => new m(e, s, i));
116
- let b = m;
159
+ t(o, "init", (e, s, n, l) => new o(e, s, n, l));
160
+ let b = o;
117
161
  export {
118
162
  b as Dismissible
119
163
  };
package/dist/dismissible.umd.cjs CHANGED
@@ -1 +1 @@
1
- (function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports):typeof define=="function"&&define.amd?define(["exports"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n["@flexilla/dismissible"]={}))})(this,function(n){"use strict";var w=Object.defineProperty;var y=(n,t,m)=>t in n?w(n,t,{enumerable:!0,configurable:!0,writable:!0,value:m}):n[t]=m;var o=(n,t,m)=>y(n,typeof t!="symbol"?t+"":t,m);const t=(l,e=document.body)=>e.querySelector(l),m=(l,e=document.body)=>Array.from(e.querySelectorAll(l)),E=({element:l,callback:e,type:s,keysCheck:i})=>{const a=getComputedStyle(l),d=a.transition;if(d!=="none"&&d!==""&&!i.includes(d)){const u="transitionend",f=()=>{l.removeEventListener(u,f),e()};l.addEventListener(u,f,{once:!0})}else e()},b=({element:l,callback:e})=>{E({element:l,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})};class c{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,s,i){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,s)||(window.$flexillaInstances[e].push({element:s,instance:i}),i)}static getInstance(e,s){var i,a;return this.initGlobalRegistry(),(a=(i=window.$flexillaInstances[e])==null?void 0:i.find(d=>d.element===s))==null?void 0:a.instance}static removeInstance(e,s){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(i=>i.element!==s))}}const r=class r{constructor(e,s,i){o(this,"dismissibleElement");o(this,"dismissButtons");o(this,"action");o(this,"onDismiss");o(this,"hideFromScreen",()=>{var e;this.dismissibleElement.style.display="none",(e=this.onDismiss)==null||e.call(this)});o(this,"removeFromDom",()=>{var e,s;(e=this.onDismiss)==null||e.call(this),(s=this.dismissibleElement.parentElement)==null||s.removeChild(this.dismissibleElement)});o(this,"dismiss",()=>{switch(this.action){case"hide-from-screen":this.dismissibleElement.setAttribute("aria-hidden","true"),this.dismissibleElement.setAttribute("data-state","hidden"),b({element:this.dismissibleElement,callback:this.hideFromScreen});break;default:this.dismissibleElement.setAttribute("data-hidden",""),this.dismissibleElement.setAttribute("aria-hidden","true"),this.dismissibleElement.setAttribute("data-state","removed"),b({element:this.dismissibleElement,callback:this.removeFromDom});break}});const a=typeof e=="string"?t(e,document.body):e;if(!(a instanceof HTMLElement))throw new Error("Provided Element not a valid HTMLElement");this.dismissibleElement=a,this.action=s||this.dismissibleElement.dataset.action||"hide-from-screen",this.dismissButtons=m("[data-dismiss-btn]",this.dismissibleElement),this.onDismiss=i,this.dismissibleElement.setAttribute("aria-hidden","false");const d=c.getInstance("dismissible",this.dismissibleElement);if(d)return d;this.setupDismissible(),c.register("dismissible",this.dismissibleElement,this)}setupDismissible(){for(const e of this.dismissButtons)e.addEventListener("click",this.dismiss)}cleanup(){for(const e of this.dismissButtons)e.removeEventListener("click",this.dismiss);c.removeInstance("dismissible",this.dismissibleElement)}};o(r,"autoInit",(e="[data-fx-dismissible]")=>{const s=m(e);for(const i of s)new r(i)}),o(r,"init",(e,s,i)=>new r(e,s,i));let h=r;n.Dismissible=h,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
1
+ (function(l,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(l=typeof globalThis<"u"?globalThis:l||self,n(l["@flexilla/dismissible"]={}))})(this,function(l){"use strict";var p=Object.defineProperty;var y=(l,n,r)=>n in l?p(l,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):l[n]=r;var i=(l,n,r)=>y(l,typeof n!="symbol"?n+"":n,r);const n=(o,e=document.body)=>e.querySelector(o),r=(o,e=document.body)=>Array.from(e.querySelectorAll(o)),E=({element:o,callback:e,type:s,keysCheck:t})=>{const a=getComputedStyle(o),d=a.transition;if(d!=="none"&&d!==""&&!t.includes(d)){const c="transitionend",f=()=>{o.removeEventListener(c,f),e()};o.addEventListener(c,f,{once:!0})}else e()},h=({element:o,callback:e})=>{E({element:o,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})};class b{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,s,t){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,s)||(window.$flexillaInstances[e].push({element:s,instance:t}),t)}static getInstance(e,s){var t,a;return this.initGlobalRegistry(),(a=(t=window.$flexillaInstances[e])==null?void 0:t.find(d=>d.element===s))==null?void 0:a.instance}static removeInstance(e,s){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(t=>t.element!==s))}static setup(e){e.setAttribute("data-fx-component","fx")}static initialized(e){e.setAttribute("data-component-initialized","initialized")}}const m=class m{constructor(e,s,t,a){i(this,"dismissibleElement");i(this,"dismissButtons");i(this,"restoreButtons");i(this,"action");i(this,"onDismiss");i(this,"onRestore");i(this,"parentElement");i(this,"previousSibling");i(this,"originalDisplay");i(this,"hideFromScreen",()=>{var e;this.dismissibleElement.style.display="none",(e=this.onDismiss)==null||e.call(this)});i(this,"removeFromDom",()=>{var e,s;(e=this.onDismiss)==null||e.call(this),(s=this.dismissibleElement.parentElement)==null||s.removeChild(this.dismissibleElement)});i(this,"showOnScreen",()=>{var e;this.dismissibleElement.style.display=this.originalDisplay,this.dismissibleElement.setAttribute("aria-hidden","false"),this.dismissibleElement.setAttribute("data-state","visible"),(e=this.onRestore)==null||e.call(this)});i(this,"restoreToDom",()=>{var e;this.parentElement&&(this.previousSibling&&this.previousSibling.nextSibling?this.parentElement.insertBefore(this.dismissibleElement,this.previousSibling.nextSibling):this.parentElement.appendChild(this.dismissibleElement),this.dismissibleElement.setAttribute("aria-hidden","false"),this.dismissibleElement.removeAttribute("data-hidden"),this.dismissibleElement.setAttribute("data-state","visible"),(e=this.onRestore)==null||e.call(this))});i(this,"dismiss",()=>{switch(this.action){case"hide-from-screen":this.dismissibleElement.setAttribute("aria-hidden","true"),this.dismissibleElement.setAttribute("data-state","hidden"),h({element:this.dismissibleElement,callback:this.hideFromScreen});break;default:this.dismissibleElement.setAttribute("data-hidden",""),this.dismissibleElement.setAttribute("aria-hidden","true"),this.dismissibleElement.setAttribute("data-state","removed"),h({element:this.dismissibleElement,callback:this.removeFromDom});break}});i(this,"restore",()=>{switch(this.action){case"hide-from-screen":h({element:this.dismissibleElement,callback:this.showOnScreen});break;default:h({element:this.dismissibleElement,callback:this.restoreToDom});break}});const d=typeof e=="string"?n(e,document.body):e;if(!(d instanceof HTMLElement))throw new Error("Provided Element not a valid HTMLElement");this.dismissibleElement=d,this.action=s||this.dismissibleElement.dataset.action||"hide-from-screen",this.dismissButtons=r("[data-dismiss-btn]",this.dismissibleElement),this.restoreButtons=r("[data-restore-btn]",document.body),this.onDismiss=t,this.onRestore=a,this.parentElement=this.dismissibleElement.parentElement,this.previousSibling=this.dismissibleElement.previousSibling,this.originalDisplay=this.dismissibleElement.style.display||getComputedStyle(this.dismissibleElement).display,this.dismissibleElement.setAttribute("aria-hidden","false");const c=b.getInstance("dismissible",this.dismissibleElement);if(c)return c;this.setupDismissible(),b.register("dismissible",this.dismissibleElement,this)}setupDismissible(){for(const e of this.dismissButtons)e.addEventListener("click",this.dismiss);for(const e of this.restoreButtons)e.addEventListener("click",this.restore)}cleanup(){for(const e of this.dismissButtons)e.removeEventListener("click",this.dismiss);for(const e of this.restoreButtons)e.removeEventListener("click",this.restore);b.removeInstance("dismissible",this.dismissibleElement)}};i(m,"autoInit",(e="[data-fx-dismissible]")=>{const s=r(e);for(const t of s)new m(t)}),i(m,"init",(e,s,t,a)=>new m(e,s,t,a));let u=m;l.Dismissible=u,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
package/dist/index.d.ts CHANGED
@@ -1,18 +1,27 @@
1
1
  export declare class Dismissible {
2
2
  private dismissibleElement;
3
3
  private dismissButtons;
4
+ private restoreButtons;
4
5
  private action;
5
6
  private onDismiss;
7
+ private onRestore;
8
+ private parentElement;
9
+ private previousSibling;
10
+ private originalDisplay;
6
11
  /**
7
12
  * Dismissible Component
8
13
  * @param dismissible
9
14
  * @param action
10
- * @param onDissmiss
15
+ * @param onDismiss
16
+ * @param onRestore
11
17
  */
12
- constructor(dismissible: string | HTMLElement, action?: "remove-from-dom" | "hide-from-screen", onDissmiss?: () => void);
18
+ constructor(dismissible: string | HTMLElement, action?: "remove-from-dom" | "hide-from-screen", onDismiss?: () => void, onRestore?: () => void);
13
19
  private hideFromScreen;
14
20
  private removeFromDom;
21
+ private showOnScreen;
22
+ private restoreToDom;
15
23
  dismiss: () => void;
24
+ restore: () => void;
16
25
  private setupDismissible;
17
26
  /**
18
27
  * Cleanup method to remove event listeners
@@ -23,10 +32,11 @@ export declare class Dismissible {
23
32
  *
24
33
  * @param dismissible
25
34
  * @param action
26
- * @param onDissmiss
35
+ * @param onDismiss
36
+ * @param onRestore
27
37
  * @returns
28
38
  */
29
- static init: (dismissible: string | HTMLElement, action?: "remove-from-dom" | "hide-from-screen", onDissmiss?: () => void) => Dismissible;
39
+ static init: (dismissible: string | HTMLElement, action?: "remove-from-dom" | "hide-from-screen", onDismiss?: () => void, onRestore?: () => void) => Dismissible;
30
40
  }
31
41
 
32
42
  export { }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@flexilla/dismissible",
3
3
  "private": false,
4
- "version": "2.0.11",
4
+ "version": "2.0.13",
5
5
  "type": "module",
6
6
  "description": "A lightweight JavaScript component that automatically makes a component dismissible for easy user interaction.",
7
7
  "publishConfig": {
@@ -62,7 +62,7 @@
62
62
  "license": "MIT",
63
63
  "author": "johnkat-mj",
64
64
  "dependencies": {
65
- "@flexilla/manager": "^0.1.0"
65
+ "@flexilla/manager": "^0.2.0"
66
66
  },
67
- "gitHead": "efc206a244e576bbadf7e78c5b6b921e3019a0c0"
67
+ "gitHead": "571385edbe8bad9a5cd0de39af00185455acb50a"
68
68
  }