@hybridly/utils 0.0.1-alpha.13 → 0.0.1-alpha.15
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.
- package/dist/index.cjs +19 -11
- package/dist/index.d.ts +5 -4
- package/dist/index.mjs +19 -11
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -55,17 +55,23 @@ function append(form, key, value) {
|
|
|
55
55
|
objectToFormData(value, form, key);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
const stack = [];
|
|
58
59
|
class Modal {
|
|
59
|
-
constructor(html,
|
|
60
|
+
constructor(html, id) {
|
|
60
61
|
this.html = html;
|
|
61
|
-
this.
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
this.id = id;
|
|
63
|
+
this.animationDurationInMs = 200;
|
|
64
|
+
if (stack.includes(id)) {
|
|
65
|
+
return;
|
|
64
66
|
}
|
|
67
|
+
if (this.initializeDOM() === false) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
this.show();
|
|
65
71
|
}
|
|
66
|
-
static fromException(response) {
|
|
72
|
+
static fromException(response, id) {
|
|
67
73
|
if (typeof response === "string" && response.trim() !== "") {
|
|
68
|
-
return new Modal(`<style>${htmlStyle()}</style>${response.toString()}
|
|
74
|
+
return new Modal(`<style>${htmlStyle()}</style>${response.toString()}`, id);
|
|
69
75
|
}
|
|
70
76
|
return new Modal(`
|
|
71
77
|
<style>${style()}</style>
|
|
@@ -76,9 +82,9 @@ class Modal {
|
|
|
76
82
|
<pre class="text-sm opacity-80 max-h-[500px] w-full mx-auto text-left mt-6">${JSON.stringify(response, null, 2)}</pre>
|
|
77
83
|
</div>
|
|
78
84
|
</div>
|
|
79
|
-
|
|
85
|
+
`, id);
|
|
80
86
|
}
|
|
81
|
-
static forPageComponent(component) {
|
|
87
|
+
static forPageComponent(component, id) {
|
|
82
88
|
return new Modal(`
|
|
83
89
|
<style>${style()}</style>
|
|
84
90
|
<div class="h-full text-center flex">
|
|
@@ -88,7 +94,7 @@ class Modal {
|
|
|
88
94
|
<div class="m-2 flex justify-center text-xl opacity-30 underline underline-dotted">${component}</div>
|
|
89
95
|
</div>
|
|
90
96
|
</div>
|
|
91
|
-
|
|
97
|
+
`, id);
|
|
92
98
|
}
|
|
93
99
|
initializeDOM() {
|
|
94
100
|
if (!this.html) {
|
|
@@ -148,6 +154,7 @@ class Modal {
|
|
|
148
154
|
this.style = style2;
|
|
149
155
|
}
|
|
150
156
|
show() {
|
|
157
|
+
stack.push(this.id);
|
|
151
158
|
this.overlay.addEventListener("click", () => this.destroy());
|
|
152
159
|
this.hideOnEscape = (event) => {
|
|
153
160
|
if (event.keyCode === 27) {
|
|
@@ -163,6 +170,7 @@ class Modal {
|
|
|
163
170
|
this.overlay.dataset.hybridly = "visible";
|
|
164
171
|
}
|
|
165
172
|
destroy() {
|
|
173
|
+
stack.splice(stack.indexOf(this.html), 1);
|
|
166
174
|
this.overlay.dataset.hybridly = "";
|
|
167
175
|
setTimeout(() => {
|
|
168
176
|
this.overlay.outerHTML = "";
|
|
@@ -173,10 +181,10 @@ class Modal {
|
|
|
173
181
|
}
|
|
174
182
|
}
|
|
175
183
|
function showResponseErrorModal(response) {
|
|
176
|
-
return Modal.fromException(response);
|
|
184
|
+
return Modal.fromException(response, "non-hybrid-response");
|
|
177
185
|
}
|
|
178
186
|
function showPageComponentErrorModal(response) {
|
|
179
|
-
return Modal.forPageComponent(response);
|
|
187
|
+
return Modal.forPageComponent(response, `page-component-${response}`);
|
|
180
188
|
}
|
|
181
189
|
function htmlStyle() {
|
|
182
190
|
return `
|
package/dist/index.d.ts
CHANGED
|
@@ -16,15 +16,16 @@ declare function objectToFormData(source?: RequestData, form?: FormData, parentK
|
|
|
16
16
|
|
|
17
17
|
declare class Modal {
|
|
18
18
|
private html;
|
|
19
|
-
private
|
|
19
|
+
private id;
|
|
20
20
|
private main;
|
|
21
21
|
private overlay;
|
|
22
22
|
private iframe;
|
|
23
23
|
private style;
|
|
24
24
|
private hideOnEscape?;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
static
|
|
25
|
+
private animationDurationInMs;
|
|
26
|
+
constructor(html: string, id: string);
|
|
27
|
+
static fromException(response: string, id: string): Modal;
|
|
28
|
+
static forPageComponent(component: string, id: string): Modal;
|
|
28
29
|
initializeDOM(): false | undefined;
|
|
29
30
|
show(): void;
|
|
30
31
|
destroy(): void;
|
package/dist/index.mjs
CHANGED
|
@@ -45,17 +45,23 @@ function append(form, key, value) {
|
|
|
45
45
|
objectToFormData(value, form, key);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
const stack = [];
|
|
48
49
|
class Modal {
|
|
49
|
-
constructor(html,
|
|
50
|
+
constructor(html, id) {
|
|
50
51
|
this.html = html;
|
|
51
|
-
this.
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
this.id = id;
|
|
53
|
+
this.animationDurationInMs = 200;
|
|
54
|
+
if (stack.includes(id)) {
|
|
55
|
+
return;
|
|
54
56
|
}
|
|
57
|
+
if (this.initializeDOM() === false) {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
this.show();
|
|
55
61
|
}
|
|
56
|
-
static fromException(response) {
|
|
62
|
+
static fromException(response, id) {
|
|
57
63
|
if (typeof response === "string" && response.trim() !== "") {
|
|
58
|
-
return new Modal(`<style>${htmlStyle()}</style>${response.toString()}
|
|
64
|
+
return new Modal(`<style>${htmlStyle()}</style>${response.toString()}`, id);
|
|
59
65
|
}
|
|
60
66
|
return new Modal(`
|
|
61
67
|
<style>${style()}</style>
|
|
@@ -66,9 +72,9 @@ class Modal {
|
|
|
66
72
|
<pre class="text-sm opacity-80 max-h-[500px] w-full mx-auto text-left mt-6">${JSON.stringify(response, null, 2)}</pre>
|
|
67
73
|
</div>
|
|
68
74
|
</div>
|
|
69
|
-
|
|
75
|
+
`, id);
|
|
70
76
|
}
|
|
71
|
-
static forPageComponent(component) {
|
|
77
|
+
static forPageComponent(component, id) {
|
|
72
78
|
return new Modal(`
|
|
73
79
|
<style>${style()}</style>
|
|
74
80
|
<div class="h-full text-center flex">
|
|
@@ -78,7 +84,7 @@ class Modal {
|
|
|
78
84
|
<div class="m-2 flex justify-center text-xl opacity-30 underline underline-dotted">${component}</div>
|
|
79
85
|
</div>
|
|
80
86
|
</div>
|
|
81
|
-
|
|
87
|
+
`, id);
|
|
82
88
|
}
|
|
83
89
|
initializeDOM() {
|
|
84
90
|
if (!this.html) {
|
|
@@ -138,6 +144,7 @@ class Modal {
|
|
|
138
144
|
this.style = style2;
|
|
139
145
|
}
|
|
140
146
|
show() {
|
|
147
|
+
stack.push(this.id);
|
|
141
148
|
this.overlay.addEventListener("click", () => this.destroy());
|
|
142
149
|
this.hideOnEscape = (event) => {
|
|
143
150
|
if (event.keyCode === 27) {
|
|
@@ -153,6 +160,7 @@ class Modal {
|
|
|
153
160
|
this.overlay.dataset.hybridly = "visible";
|
|
154
161
|
}
|
|
155
162
|
destroy() {
|
|
163
|
+
stack.splice(stack.indexOf(this.html), 1);
|
|
156
164
|
this.overlay.dataset.hybridly = "";
|
|
157
165
|
setTimeout(() => {
|
|
158
166
|
this.overlay.outerHTML = "";
|
|
@@ -163,10 +171,10 @@ class Modal {
|
|
|
163
171
|
}
|
|
164
172
|
}
|
|
165
173
|
function showResponseErrorModal(response) {
|
|
166
|
-
return Modal.fromException(response);
|
|
174
|
+
return Modal.fromException(response, "non-hybrid-response");
|
|
167
175
|
}
|
|
168
176
|
function showPageComponentErrorModal(response) {
|
|
169
|
-
return Modal.forPageComponent(response);
|
|
177
|
+
return Modal.forPageComponent(response, `page-component-${response}`);
|
|
170
178
|
}
|
|
171
179
|
function htmlStyle() {
|
|
172
180
|
return `
|