@pageboard/html 0.17.4 → 0.17.6
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/elements/card.js +1 -0
- package/package.json +2 -2
- package/ui/image.js +2 -2
- package/ui/input-file.js +4 -4
- package/ui/layout.js +2 -2
- package/ui/site.css +0 -1
- package/ui/transition.js +4 -21
package/elements/card.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pageboard/html",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.6",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"repository": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"nouislider/dist/nouislider.css": "link lib/"
|
|
23
23
|
},
|
|
24
24
|
"pageboard": {
|
|
25
|
-
"version": "^0.
|
|
25
|
+
"version": "^0.17",
|
|
26
26
|
"priority": -10,
|
|
27
27
|
"directories": [
|
|
28
28
|
"elements",
|
package/ui/image.js
CHANGED
|
@@ -154,9 +154,9 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
|
|
|
154
154
|
} else if (reqSrc != this.currentSrc) {
|
|
155
155
|
this.classList.add('loading');
|
|
156
156
|
this.#defer?.resolve();
|
|
157
|
-
this.#defer =
|
|
157
|
+
this.#defer = Promise.withResolvers();
|
|
158
158
|
img.setAttribute('src', reqSrc);
|
|
159
|
-
return this.#defer;
|
|
159
|
+
return this.#defer.promise;
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
162
|
captureLoad() {
|
package/ui/input-file.js
CHANGED
|
@@ -53,7 +53,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
presubmit(state) {
|
|
56
|
-
if (this.#defer) return this.#defer;
|
|
56
|
+
if (this.#defer) return this.#defer.promise;
|
|
57
57
|
if (!this.files.length) return Promise.resolve();
|
|
58
58
|
const field = this.closest('.field');
|
|
59
59
|
field.classList.remove('success', 'error');
|
|
@@ -63,7 +63,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
|
|
|
63
63
|
}
|
|
64
64
|
track(0);
|
|
65
65
|
field.classList.add('loading');
|
|
66
|
-
this.#defer =
|
|
66
|
+
this.#defer = Promise.withResolvers();
|
|
67
67
|
|
|
68
68
|
const fail = (err) => {
|
|
69
69
|
field.classList.add('error');
|
|
@@ -76,7 +76,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
|
|
|
76
76
|
if (!obj.hrefs?.length) {
|
|
77
77
|
return fail(new Error("File rejected"));
|
|
78
78
|
}
|
|
79
|
-
this.value = obj.hrefs[0]?.
|
|
79
|
+
this.value = obj.hrefs[0]?.url;
|
|
80
80
|
field.classList.add('success');
|
|
81
81
|
field.classList.remove('loading');
|
|
82
82
|
this.#xhr = null;
|
|
@@ -132,7 +132,7 @@ class HTMLElementInputFile extends Page.create(HTMLInputElement) {
|
|
|
132
132
|
} catch (err) {
|
|
133
133
|
fail(err);
|
|
134
134
|
}
|
|
135
|
-
return this.#defer;
|
|
135
|
+
return this.#defer.promise;
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
|
package/ui/layout.js
CHANGED
|
@@ -20,7 +20,7 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
|
|
|
20
20
|
this.style.backgroundImage = '';
|
|
21
21
|
} else if (reqSrc != this.currentSrc) {
|
|
22
22
|
this.#defer?.resolve();
|
|
23
|
-
this.#defer =
|
|
23
|
+
this.#defer = Promise.withResolvers();
|
|
24
24
|
const img = new Image();
|
|
25
25
|
img.addEventListener('load', this.#defer.resolve);
|
|
26
26
|
img.addEventListener('error',
|
|
@@ -28,7 +28,7 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
|
|
|
28
28
|
);
|
|
29
29
|
img.src = this.currentSrc = reqSrc;
|
|
30
30
|
this.style.backgroundImage = `url("${reqSrc}")`;
|
|
31
|
-
return this.#defer;
|
|
31
|
+
return this.#defer.promise;
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
close() {
|
package/ui/site.css
CHANGED
package/ui/transition.js
CHANGED
|
@@ -6,12 +6,6 @@ Object.defineProperty(document, 'body', {
|
|
|
6
6
|
});
|
|
7
7
|
|
|
8
8
|
const loader = new class {
|
|
9
|
-
ready(state) {
|
|
10
|
-
this.update(state.stage);
|
|
11
|
-
}
|
|
12
|
-
build(state) {
|
|
13
|
-
if (!document.hidden) document.body.hidden = true;
|
|
14
|
-
}
|
|
15
9
|
patch(state) {
|
|
16
10
|
this.update(state);
|
|
17
11
|
}
|
|
@@ -27,20 +21,18 @@ const loader = new class {
|
|
|
27
21
|
document.documentElement.dataset.stage = state.stage;
|
|
28
22
|
}
|
|
29
23
|
async setup(state) {
|
|
30
|
-
const tr = state.scope
|
|
31
|
-
|
|
32
|
-
document.body.hidden = false;
|
|
24
|
+
const { transition: tr } = state.scope;
|
|
25
|
+
if (!tr) return;
|
|
33
26
|
state.finish(async () => {
|
|
34
|
-
if (tr
|
|
27
|
+
if (tr.ok) return tr.start();
|
|
35
28
|
});
|
|
36
|
-
tr
|
|
29
|
+
tr.end();
|
|
37
30
|
}
|
|
38
31
|
};
|
|
39
32
|
Page.connect(loader);
|
|
40
33
|
loader.update(Page);
|
|
41
34
|
|
|
42
35
|
class Transition {
|
|
43
|
-
#defer;
|
|
44
36
|
|
|
45
37
|
static event(name) {
|
|
46
38
|
const low = name.toLowerCase();
|
|
@@ -78,7 +70,6 @@ class Transition {
|
|
|
78
70
|
from.after(to);
|
|
79
71
|
}
|
|
80
72
|
start() {
|
|
81
|
-
this.#defer = new Deferred();
|
|
82
73
|
if (!this.ok) {
|
|
83
74
|
this.destroy();
|
|
84
75
|
} else {
|
|
@@ -95,19 +86,11 @@ class Transition {
|
|
|
95
86
|
cancel() {
|
|
96
87
|
this.ok = false;
|
|
97
88
|
this.root.classList.remove('transitioning');
|
|
98
|
-
if (this.#defer) {
|
|
99
|
-
this.#defer.resolve();
|
|
100
|
-
this.#defer = null;
|
|
101
|
-
}
|
|
102
89
|
}
|
|
103
90
|
end() {
|
|
104
91
|
this.ok = false;
|
|
105
92
|
this.from.remove();
|
|
106
93
|
this.destroy();
|
|
107
|
-
if (this.#defer) {
|
|
108
|
-
this.#defer.resolve();
|
|
109
|
-
this.#defer = null;
|
|
110
|
-
}
|
|
111
94
|
}
|
|
112
95
|
scrollTo(obj) {
|
|
113
96
|
this.to.scrollTop = obj.top;
|