@pageboard/html 0.12.11 → 0.12.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.
- package/package.json +1 -1
- package/ui/form.js +3 -13
- package/ui/image.js +4 -0
- package/ui/layout.js +4 -0
- package/ui/tab-helper.js +14 -7
- package/ui/tab.css +6 -0
package/package.json
CHANGED
package/ui/form.js
CHANGED
|
@@ -41,17 +41,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
|
|
|
41
41
|
if (val == null) {
|
|
42
42
|
form.reset();
|
|
43
43
|
} else if (typeof val == "object") {
|
|
44
|
-
|
|
45
|
-
if (val.id && val.data) {
|
|
46
|
-
// old way
|
|
47
|
-
values = { ...val.data };
|
|
48
|
-
for (const key of Object.keys(val)) {
|
|
49
|
-
if (key != "data") values['$' + key] = val[key];
|
|
50
|
-
}
|
|
51
|
-
} else {
|
|
52
|
-
// new way
|
|
53
|
-
}
|
|
54
|
-
form.fill(this.linearizeValues(values), state.scope);
|
|
44
|
+
form.fill(this.linearizeValues(val), state.scope);
|
|
55
45
|
form.save();
|
|
56
46
|
}
|
|
57
47
|
}
|
|
@@ -208,7 +198,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
|
|
|
208
198
|
fill(query, scope) {
|
|
209
199
|
// fieldset-list are not custom inputs yet
|
|
210
200
|
for (const node of this.querySelectorAll("element-fieldset-list")) {
|
|
211
|
-
node.fill(query, scope);
|
|
201
|
+
node.fill?.(query, scope);
|
|
212
202
|
}
|
|
213
203
|
const vars = [];
|
|
214
204
|
for (const elem of this.elements) {
|
|
@@ -223,7 +213,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
|
|
|
223
213
|
}
|
|
224
214
|
}
|
|
225
215
|
for (const node of this.querySelectorAll('fieldset[is="element-fieldset"]')) {
|
|
226
|
-
node.fill(query, scope);
|
|
216
|
+
node.fill?.(query, scope);
|
|
227
217
|
}
|
|
228
218
|
return vars;
|
|
229
219
|
}
|
package/ui/image.js
CHANGED
|
@@ -162,6 +162,7 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
|
|
|
162
162
|
const curSrc = loc.toString();
|
|
163
163
|
if (curSrc != this.currentSrc) {
|
|
164
164
|
this.classList.add('loading');
|
|
165
|
+
this.#defer?.resolve();
|
|
165
166
|
this.#defer = new Deferred();
|
|
166
167
|
img.setAttribute('src', curSrc);
|
|
167
168
|
return this.#defer;
|
|
@@ -181,6 +182,9 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
|
|
|
181
182
|
placeholder(error) {
|
|
182
183
|
this.image.removeAttribute('src');
|
|
183
184
|
}
|
|
185
|
+
close() {
|
|
186
|
+
this.#defer?.resolve();
|
|
187
|
+
}
|
|
184
188
|
};
|
|
185
189
|
|
|
186
190
|
const HTMLElementImage = HTMLElementImageConstructor(Page.Element);
|
package/ui/layout.js
CHANGED
|
@@ -56,6 +56,7 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
|
|
|
56
56
|
} catch(e) {
|
|
57
57
|
// pass
|
|
58
58
|
}
|
|
59
|
+
this.#defer?.resolve();
|
|
59
60
|
this.#defer = new Deferred();
|
|
60
61
|
const img = new Image();
|
|
61
62
|
img.addEventListener('load', this.#defer.resolve);
|
|
@@ -65,6 +66,9 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
|
|
|
65
66
|
return this.#defer;
|
|
66
67
|
}
|
|
67
68
|
}
|
|
69
|
+
close() {
|
|
70
|
+
this.#defer?.resolve();
|
|
71
|
+
}
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
(function(HTMLElementImage) {
|
package/ui/tab-helper.js
CHANGED
|
@@ -11,19 +11,26 @@ Page.extend('element-tabs', class TabsHelper {
|
|
|
11
11
|
if (this.observer) this.observer.disconnect();
|
|
12
12
|
}
|
|
13
13
|
mutate(record, state) {
|
|
14
|
-
const items = this
|
|
15
|
-
const tabs = this.tabs;
|
|
14
|
+
const { items, tabs } = this;
|
|
16
15
|
if (!items || !tabs) return;
|
|
16
|
+
const { editor } = state.scope;
|
|
17
|
+
if (!editor) return;
|
|
18
|
+
const { utils } = editor;
|
|
19
|
+
const { tr } = editor.state;
|
|
17
20
|
for (const node of record.addedNodes) {
|
|
18
|
-
tabs.
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
const cur = tabs.children[items.children.indexOf(node) - 1];
|
|
22
|
+
if (!cur) continue;
|
|
23
|
+
const sel = utils.selectDomTr(tr, cur);
|
|
24
|
+
utils.insertTr(tr, editor.render({ type: 'tab' }), sel);
|
|
21
25
|
}
|
|
22
26
|
for (let i = 0; i < record.removedNodes.length; i++) {
|
|
23
27
|
const pos = record.target.childNodes.indexOf(record.previousSibling) + 1 + i;
|
|
24
|
-
const
|
|
25
|
-
if (
|
|
28
|
+
const cur = tabs.childNodes[pos];
|
|
29
|
+
if (!cur) continue;
|
|
30
|
+
const sel = utils.selectDomTr(tr, cur);
|
|
31
|
+
utils.deleteTr(tr, sel);
|
|
26
32
|
}
|
|
33
|
+
editor.dispatch(tr);
|
|
27
34
|
}
|
|
28
35
|
handleClick(e, state) {
|
|
29
36
|
const item = e.target.closest('[block-type="tab_item"]');
|
package/ui/tab.css
CHANGED
|
@@ -8,6 +8,12 @@ element-tabs {
|
|
|
8
8
|
overflow:hidden;
|
|
9
9
|
margin:0;
|
|
10
10
|
}
|
|
11
|
+
element-tabs > .ui.tabular.menu {
|
|
12
|
+
flex-wrap:wrap;
|
|
13
|
+
}
|
|
14
|
+
element-tabs > .ui.tabular.menu::after {
|
|
15
|
+
content:none;
|
|
16
|
+
}
|
|
11
17
|
element-tabs > .ui.tabular.menu + div[block-content="tabs"] > .segment {
|
|
12
18
|
border-top: none;
|
|
13
19
|
margin:0 0 1rem;
|