@trunkjs/content-pane 1.0.16 → 1.0.18
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/CHANGELOG.md +8 -0
- package/README.md +105 -58
- package/components/tj-content-pane/TjContentPane.d.ts +4 -4
- package/index.js +125 -125
- package/mixins/SubLayoutApplyMixin.d.ts +1 -1
- package/package.json +1 -1
- package/README_2.md +0 -149
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## 1.0.18 (2025-12-16)
|
|
2
|
+
|
|
3
|
+
This was a version bump only for content-pane to align it with other projects, there were no code changes.
|
|
4
|
+
|
|
5
|
+
## 1.0.17 (2025-12-12)
|
|
6
|
+
|
|
7
|
+
This was a version bump only for content-pane to align it with other projects, there were no code changes.
|
|
8
|
+
|
|
1
9
|
## 1.0.16 (2025-12-11)
|
|
2
10
|
|
|
3
11
|
This was a version bump only for content-pane to align it with other projects, there were no code changes.
|
package/README.md
CHANGED
|
@@ -1,102 +1,149 @@
|
|
|
1
|
-
#
|
|
1
|
+
# TrunkJS Content-Pane
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
Client-Side Rendering (CSR) solution. It is designed to style the unstyled output of static site generators (SSG) like
|
|
5
|
-
Jekyll, Hugo, or others. These provide SEO-friendly HTML output, but the structure is often not ideal for styling.
|
|
3
|
+
Das `<tj-content-pane>` Element übernimmt zwei Aufgaben:
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
- Scritt 1: Es baut aus einer flachen HTML Struktur (H1-6, p, hr etc) eine Baumstruktur auf.
|
|
6
|
+
- Scritt 2: Es ändert die tag-Names und Attribute der Elemente basierend auf den `layout` Attributen.
|
|
8
7
|
|
|
9
|
-
Most Static Site Generators (SSG) support Kramdown, where you can assign attributes to elements in the markdown source by
|
|
10
|
-
using the `{: layout="selector" slot="slotname"}` syntax.
|
|
11
8
|
|
|
12
|
-
##
|
|
9
|
+
## Schritt 1: Baumstruktur aufbauen
|
|
13
10
|
|
|
14
|
-
|
|
11
|
+
Basierend auf dem `I`-Index baut die Komponente z.B. aus einer serverseitig
|
|
12
|
+
generierten flachen HTML Struktur eine Baumstruktur auf
|
|
15
13
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
| Element | I-Index |
|
|
15
|
+
|------------------------|-----------------|
|
|
16
|
+
| H1,H2 | 2 |
|
|
17
|
+
| H3 | 3 |
|
|
18
|
+
| H4 | 4 |
|
|
19
|
+
| H5 | 5 |
|
|
20
|
+
| H6 | 6 |
|
|
21
|
+
| hr mit layout-attribut | letzter I + 0.5 |
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
Dabei werden Element wie folgt verschachtelt:
|
|
24
24
|
|
|
25
|
-
```
|
|
26
|
-
|
|
25
|
+
```text
|
|
26
|
+
i1
|
|
27
|
+
i2
|
|
28
|
+
i2.5
|
|
29
|
+
i3
|
|
30
|
+
i3
|
|
31
|
+
i2
|
|
32
|
+
i3
|
|
33
|
+
i4
|
|
34
|
+
i3
|
|
27
35
|
```
|
|
28
36
|
|
|
29
|
-
|
|
37
|
+
### Übertragen von Attributen
|
|
38
|
+
|
|
39
|
+
Attribute wie 'layout' und mit 'section-' geprefixte Attribute werden auf das `<section>` Element übertragen.
|
|
30
40
|
|
|
31
|
-
|
|
32
|
-
tag, id or classes.
|
|
41
|
+
Beispiel:
|
|
33
42
|
|
|
34
43
|
```markdown
|
|
35
44
|
## Header 2
|
|
36
|
-
{: layout="#id1.class1
|
|
45
|
+
{: layout="#id1.class1" section-class="abc"}
|
|
46
|
+
````
|
|
37
47
|
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
Will be transformed to:
|
|
48
|
+
Wird zu:
|
|
42
49
|
|
|
43
50
|
```html
|
|
44
|
-
<section
|
|
51
|
+
<section layout="#id1.class1" class="abc">
|
|
45
52
|
<h2>Header 2</h2>
|
|
46
|
-
<p>This is content below the section element.</p>
|
|
47
53
|
</section>
|
|
48
54
|
```
|
|
49
55
|
|
|
50
|
-
|
|
56
|
+
***Achtung: In diesem Schritt werden die Tags noch nicht verändert!*** Dies erfolgt erst im Layout-Schritt.
|
|
51
57
|
|
|
52
|
-
|
|
58
|
+
### Benutzerdefiniert I-Layer
|
|
53
59
|
|
|
54
|
-
|
|
55
|
-
- Append to element of layer: `layout="+2.;"`
|
|
56
|
-
- Skip this element: `layout="-;"`
|
|
60
|
+
Über das `layout` Attribut kann ein benutzerdefinierter I-Layer definiert werden.
|
|
57
61
|
|
|
58
|
-
|
|
62
|
+
Beispiel:
|
|
59
63
|
|
|
60
64
|
```markdown
|
|
61
65
|
## Header 2
|
|
62
|
-
{: layout="
|
|
63
|
-
|
|
64
|
-
---
|
|
65
|
-
{: layout="2.5;.class2"}
|
|
66
|
-
|
|
66
|
+
{: layout="3;"}
|
|
67
67
|
```
|
|
68
|
+
Dies würde das Element in den I-Layer 3 verschieben.
|
|
68
69
|
|
|
69
|
-
###
|
|
70
|
+
### Attribute für section-Elemente setzen
|
|
70
71
|
|
|
71
|
-
|
|
72
|
+
Über das `section-<attribut>` können Attribute für das generierte section-Element gesetzt werden:
|
|
72
73
|
|
|
73
74
|
```markdown
|
|
74
75
|
## Header 2
|
|
76
|
+
{: section-id="meine-id" section-style="--cols: 6" section-class="highlight"}
|
|
77
|
+
```
|
|
75
78
|
|
|
76
|
-
|
|
79
|
+
### Klassen-Shortcut für section-Elemente
|
|
77
80
|
|
|
78
|
-
|
|
81
|
+
Alle Klassen des Elements, die mit `section-` beginnen, werden auf das generierte section-Element übertragen.
|
|
79
82
|
|
|
80
|
-
text
|
|
81
83
|
|
|
82
|
-
### Header 3
|
|
83
84
|
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
### Das HR-Element
|
|
86
|
+
|
|
87
|
+
Standardmäßig wird ein `<hr>` nicht behandelt, außer es hat ein layout-Attribut.
|
|
88
|
+
|
|
89
|
+
Wenn kein dedizierter I-Layer angegeben ist, wird der I-Layer des vorherigen Elements + 0.5 verwendet.
|
|
86
90
|
|
|
87
|
-
|
|
91
|
+
|
|
92
|
+
## Schritt 2: Apply-Layouts
|
|
93
|
+
|
|
94
|
+
In diesem Schritt werden die layout-Attribute (ohne I-Layer) ausgewertet und die Elemente entsprechend umgewandelt.
|
|
95
|
+
|
|
96
|
+
Beispiel:
|
|
97
|
+
|
|
98
|
+
````markdown
|
|
99
|
+
## Header 2
|
|
100
|
+
{: layout="custom-element#id1.class1[slot=slotname]"}
|
|
101
|
+
````
|
|
102
|
+
|
|
103
|
+
entpsricht:
|
|
88
104
|
|
|
89
105
|
```html
|
|
90
|
-
<section>
|
|
106
|
+
<section layout="custom-element#id1.class1[slot=slotname]">
|
|
91
107
|
<h2>Header 2</h2>
|
|
92
|
-
<p>text</p>
|
|
93
|
-
<div>
|
|
94
|
-
<h3>Header 3</h3>
|
|
95
|
-
<p>text</p>
|
|
96
|
-
</div>
|
|
97
|
-
<div>
|
|
98
|
-
<h3>Header 3</h3>
|
|
99
|
-
<p>text</p>
|
|
100
|
-
</div>
|
|
101
108
|
</section>
|
|
109
|
+
```
|
|
110
|
+
Wird zu: (*transformiert durch applyLayout()*)
|
|
111
|
+
|
|
112
|
+
```html
|
|
113
|
+
<custom-element class="class1" id="id1" slot="slotname">
|
|
114
|
+
<h2>Header 2</h2>
|
|
115
|
+
</custom-element>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Verschachtelte Layouts
|
|
119
|
+
|
|
120
|
+
z.B. sollen Layout-Elemente die darunterliegenden Elemente verändern:
|
|
121
|
+
|
|
122
|
+
- Automatisches zuweisen von `slot`-Attributen
|
|
123
|
+
- Automatisches zuweisen von layout-Attributen
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
#### Nutzung des `SubLayoutApplyMixin()`
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
Das `SubLayoutApplyMixin()` kann genutzt werden, um verschachtelte Layouts zu realisieren.
|
|
130
|
+
Es analysiert nach dem update() die slot-Elemente im Shadow-DOM. Selektiert werden Slot-elemente mit `data-query` Attribut.
|
|
131
|
+
|
|
132
|
+
Beispiel:
|
|
133
|
+
|
|
134
|
+
```javascript
|
|
135
|
+
class CustomElement extends SubLayoutApplyMixin(LitElement) {
|
|
136
|
+
...
|
|
137
|
+
render() {
|
|
138
|
+
return html`
|
|
139
|
+
<slot data-query=":scope > h2,h3,h4" name="header"></slot>
|
|
140
|
+
<slot data-query=":scope > section" data-set-attribute-layout="nte-card"></slot>
|
|
141
|
+
`;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
102
144
|
```
|
|
145
|
+
|
|
146
|
+
##### data-query
|
|
147
|
+
|
|
148
|
+
Data Query kann ein oder Mehrere durch `|` getrennte CSS-Selektoren enthalten. Das erste Element,
|
|
149
|
+
das gefunden wird, wird verwendet.
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { ReactiveElement } from 'lit';
|
|
2
2
|
declare const ContentAreaElement2_base: (abstract new (...args: any[]) => {
|
|
3
|
-
"__#
|
|
4
|
-
"__#
|
|
3
|
+
"__#3834@#debugCached": boolean | null;
|
|
4
|
+
"__#3834@#myElementId": number;
|
|
5
5
|
invalidateDebugCache(): void;
|
|
6
|
-
"__#
|
|
6
|
+
"__#3834@#myLoggerInstance": import('@trunkjs/browser-utils').Logger | null;
|
|
7
7
|
readonly _debug: boolean;
|
|
8
|
-
getLogger(instanceId?: string): import('
|
|
8
|
+
getLogger(instanceId?: string): import('@trunkjs/browser-utils').Logger;
|
|
9
9
|
log(...args: any[]): void;
|
|
10
10
|
warn(...args: any[]): void;
|
|
11
11
|
error(...args: any[]): void;
|
package/index.js
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { create_element as V, LoggingMixin as
|
|
2
|
-
import { html as
|
|
1
|
+
import { create_element as V, LoggingMixin as ae, Stopwatch as se, waitForDomContentLoaded as ce } from "@trunkjs/browser-utils";
|
|
2
|
+
import { html as le, unsafeCSS as de, LitElement as ue, ReactiveElement as he } from "lit";
|
|
3
3
|
import { customElement as J, property as K } from "lit/decorators.js";
|
|
4
|
-
const
|
|
5
|
-
var
|
|
6
|
-
throw TypeError(
|
|
7
|
-
},
|
|
8
|
-
for (var i = 0, a = t
|
|
4
|
+
const pe = ":host{--border-color: red;--background-color: lightgray;font-family:Arial,sans-serif}#error-fixed-indicator{position:fixed;top:10px;right:10px;cursor:pointer;z-index:100000;padding:5px 10px;width:auto;max-width:90vw;min-width:100px;height:auto;box-shadow:0 4px 8px #0003;border:5px solid white;color:#fff;background-color:red;animation:blink 1s infinite;border-radius:15px;font-size:20px;font-weight:700;font-family:Arial,sans-serif}@keyframes blink{0%,to{background-color:#000}50%{background-color:red}}#error{background-color:var(--background-color);border:3px solid var(--border-color);padding:10px;margin:10px;border-radius:5px}h1{color:red;font-size:24px;margin:0}.error-details{font-size:14px;max-height:200px;overflow:auto}";
|
|
5
|
+
var fe = Object.create, P = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, U = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), C = (e) => {
|
|
6
|
+
throw TypeError(e);
|
|
7
|
+
}, ve = (e, t, r) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, D = (e, t) => P(e, "name", { value: t, configurable: !0 }), ge = (e) => [, , , fe((e == null ? void 0 : e[U("metadata")]) ?? null)], X = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], k = (e) => e !== void 0 && typeof e != "function" ? C("Function expected") : e, ye = (e, t, r, o, i) => ({ kind: X[e], name: t, metadata: o, addInitializer: (a) => r._ ? C("Already initialized") : i.push(k(a || null)) }), me = (e, t) => ve(t, U("metadata"), e[3]), N = (e, t, r, o) => {
|
|
8
|
+
for (var i = 0, a = e[t >> 1], c = a && a.length; i < c; i++) t & 1 ? a[i].call(r) : o = a[i].call(r, o);
|
|
9
9
|
return o;
|
|
10
|
-
}, Y = (
|
|
11
|
-
var c, s,
|
|
10
|
+
}, Y = (e, t, r, o, i, a) => {
|
|
11
|
+
var c, s, f, d, l, n = t & 7, _ = !!(t & 8), u = !!(t & 16), v = n > 3 ? e.length + 1 : n ? _ ? 1 : 2 : 0, x = X[n + 5], E = n > 3 && (e[v - 1] = []), L = e[v] || (e[v] = []), p = n && (!u && !_ && (i = i.prototype), n < 5 && (n > 3 || !u) && _e(n < 4 ? i : { get [r]() {
|
|
12
12
|
return B(this, a);
|
|
13
13
|
}, set [r](h) {
|
|
14
14
|
return H(this, a, h);
|
|
15
15
|
} }, r));
|
|
16
16
|
n ? u && n < 4 && D(a, (n > 2 ? "set " : n > 1 ? "get " : "") + r) : D(i, r);
|
|
17
17
|
for (var g = o.length - 1; g >= 0; g--)
|
|
18
|
-
|
|
19
|
-
return n ||
|
|
20
|
-
}, z = (
|
|
21
|
-
|
|
22
|
-
class w extends (T =
|
|
23
|
-
constructor(
|
|
24
|
-
super(), this.originalCode = void 0,
|
|
18
|
+
d = ye(n, r, f = {}, e[3], L), n && (d.static = _, d.private = u, l = d.access = { has: u ? (h) => we(i, h) : (h) => r in h }, n ^ 3 && (l.get = u ? (h) => (n ^ 1 ? B : Ce)(h, i, n ^ 4 ? a : p.get) : (h) => h[r]), n > 2 && (l.set = u ? (h, y) => H(h, i, y, n ^ 4 ? a : p.set) : (h, y) => h[r] = y)), s = (0, o[g])(n ? n < 4 ? u ? a : p[x] : n > 4 ? void 0 : { get: p.get, set: p.set } : i, d), f._ = 1, n ^ 4 || s === void 0 ? k(s) && (n > 4 ? E.unshift(s) : n ? u ? a = s : p[x] = s : i = s) : typeof s != "object" || s === null ? C("Object expected") : (k(c = s.get) && (p.get = c), k(c = s.set) && (p.set = c), k(c = s.init) && E.unshift(c));
|
|
19
|
+
return n || me(e, i), p && P(i, r, p), u ? n ^ 4 ? a : p : i;
|
|
20
|
+
}, z = (e, t, r) => t.has(e) || C("Cannot " + r), we = (e, t) => Object(t) !== t ? C('Cannot use the "in" operator on this value') : e.has(t), B = (e, t, r) => (z(e, t, "read from private field"), r ? r.call(e) : t.get(e)), Ae = (e, t, r) => t.has(e) ? C("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), H = (e, t, r, o) => (z(e, t, "write to private field"), o ? o.call(e, r) : t.set(e, r), r), Ce = (e, t, r) => (z(e, t, "access private method"), r), Z, T, ee, m, q;
|
|
21
|
+
ee = [J("tj-error-element")];
|
|
22
|
+
class w extends (T = ue, Z = [K({ type: String, reflect: !0 })], T) {
|
|
23
|
+
constructor(t = "An error occurred", r) {
|
|
24
|
+
super(), this.originalCode = void 0, Ae(this, q, N(m, 8, this)), N(m, 11, this), this.message = t, this.originalCode = r;
|
|
25
25
|
}
|
|
26
26
|
static get is() {
|
|
27
27
|
return "tj-error-element";
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
|
-
return
|
|
30
|
+
return le`
|
|
31
31
|
<div id="error-fixed-indicator" @click=${() => this.scrollIntoView({ behavior: "smooth" })}>
|
|
32
32
|
Err: ${this.message}
|
|
33
33
|
</div>
|
|
@@ -43,78 +43,78 @@ class w extends (T = ut, Z = [K({ type: String, reflect: !0 })], T) {
|
|
|
43
43
|
`;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
m =
|
|
46
|
+
m = ge(T);
|
|
47
47
|
q = /* @__PURE__ */ new WeakMap();
|
|
48
48
|
Y(m, 4, "message", Z, w, q);
|
|
49
|
-
w = Y(m, 0, "TjErrorElement",
|
|
50
|
-
w.styles = [
|
|
49
|
+
w = Y(m, 0, "TjErrorElement", ee, w);
|
|
50
|
+
w.styles = [de(pe)];
|
|
51
51
|
N(m, 1, w);
|
|
52
|
-
function
|
|
52
|
+
function be(e, { allowAttributes: t = !0, ignoreGaps: r = !0 } = {}) {
|
|
53
53
|
let o = "div", i = null, a = [], c = [], s = {};
|
|
54
|
-
const
|
|
55
|
-
let
|
|
54
|
+
const f = /(^[a-z][\w-]*)|#[\w-]+|\.[\w:-]+|\[\s*([\w-]+)(?:\s*=\s*(['"]?)(.*?)\3)?\s*\]/gi;
|
|
55
|
+
let d = 0;
|
|
56
56
|
for (; ; ) {
|
|
57
|
-
const
|
|
58
|
-
if (!
|
|
59
|
-
if (!r &&
|
|
57
|
+
const l = f.exec(e);
|
|
58
|
+
if (!l || l.index !== d) {
|
|
59
|
+
if (!r && l && l.index > d)
|
|
60
60
|
break;
|
|
61
61
|
break;
|
|
62
62
|
}
|
|
63
|
-
const n =
|
|
63
|
+
const n = l[0];
|
|
64
64
|
if (n[0] === "#") i = n.slice(1);
|
|
65
65
|
else if (n[0] === ".") a.push(n.slice(1));
|
|
66
66
|
else if (n[0] === "[") {
|
|
67
|
-
if (!
|
|
68
|
-
const _ =
|
|
67
|
+
if (!t) throw new Error(`Attributes not allowed: '${n}'`);
|
|
68
|
+
const _ = l[2], u = l[4] || void 0;
|
|
69
69
|
c.push({ name: _, value: u }), s[_] = u;
|
|
70
70
|
} else o = n;
|
|
71
|
-
|
|
71
|
+
d += n.length;
|
|
72
72
|
}
|
|
73
|
-
return { tag: o, id: i, classes: a, attrs: c, attrsMap: s, length:
|
|
73
|
+
return { tag: o, id: i, classes: a, attrs: c, attrsMap: s, length: d, rest: e.slice(d) };
|
|
74
74
|
}
|
|
75
|
-
function
|
|
76
|
-
return typeof
|
|
75
|
+
function xe(e) {
|
|
76
|
+
return typeof e.beforeLayoutCallback == "function";
|
|
77
77
|
}
|
|
78
|
-
function
|
|
78
|
+
function Ee(e, t, r) {
|
|
79
79
|
var n, _;
|
|
80
|
-
const o = /^(\+|-|)([0-9]+\.?[0-9]*);?/, i = r.replace(o, ""), a =
|
|
80
|
+
const o = /^(\+|-|)([0-9]+\.?[0-9]*);?/, i = r.replace(o, ""), a = be(i), s = { ...Array.from(e.attributes).reduce(
|
|
81
81
|
(u, v) => (u[v.name] = v.value, u),
|
|
82
82
|
{}
|
|
83
83
|
), ...a.attrsMap };
|
|
84
84
|
s.class = "", a.attrsMap.class && (s.class = a.attrsMap.class + " "), s.class += a.classes.join(" "), s.id = a.id ?? void 0, ((n = s.class) == null ? void 0 : n.trim()) === "" && delete s.class, ((_ = s.id) == null ? void 0 : _.trim()) === "" && delete s.id;
|
|
85
|
-
const
|
|
86
|
-
let
|
|
87
|
-
if (
|
|
88
|
-
console.warn(`Custom element <${
|
|
85
|
+
const f = a.tag || "div";
|
|
86
|
+
let d = !1, l = V(f, { ...s, layoutOrig: r });
|
|
87
|
+
if (f.includes("-") && !customElements.get(f))
|
|
88
|
+
console.warn(`Custom element <${f}> is not registered.`), l = new w(`Custom element <${f}> is not registered.`, e.outerHTML), e.replaceWith(l), l.append(e), d = !0;
|
|
89
89
|
else {
|
|
90
|
-
const u = Array.from(
|
|
91
|
-
|
|
90
|
+
const u = Array.from(e.children);
|
|
91
|
+
xe(l) && (d = l.beforeLayoutCallback(e, l, u) === !1), l.__ORIG_ELEMENT__ = e, l.append(...Array.from(e.children)), e.replaceWith(l);
|
|
92
92
|
}
|
|
93
93
|
return {
|
|
94
|
-
replacementElement:
|
|
95
|
-
skipChildren:
|
|
94
|
+
replacementElement: l,
|
|
95
|
+
skipChildren: d
|
|
96
96
|
};
|
|
97
97
|
}
|
|
98
|
-
function $(
|
|
99
|
-
const { recursive: r = !0 } =
|
|
98
|
+
function $(e, t = {}) {
|
|
99
|
+
const { recursive: r = !0 } = t;
|
|
100
100
|
let o = [];
|
|
101
|
-
if (Array.isArray(
|
|
102
|
-
return
|
|
103
|
-
if (!(
|
|
101
|
+
if (Array.isArray(e))
|
|
102
|
+
return e.forEach((s) => o.push(...$(s, t))), o;
|
|
103
|
+
if (!(e instanceof HTMLElement))
|
|
104
104
|
return [];
|
|
105
|
-
const i =
|
|
106
|
-
let a = !1, c =
|
|
107
|
-
return i && ({ replacementElement: c, skipChildren: a } =
|
|
105
|
+
const i = e.getAttribute("layout");
|
|
106
|
+
let a = !1, c = e;
|
|
107
|
+
return i && ({ replacementElement: c, skipChildren: a } = Ee(e, t, i)), r && !a && Array.from(c.children).forEach((f) => o.push(...$(f, t))), o;
|
|
108
108
|
}
|
|
109
|
-
function
|
|
110
|
-
return
|
|
109
|
+
function Re(e) {
|
|
110
|
+
return e && typeof e == "object" && "__I__" in e && typeof e.__I__ == "object" && "i" in e.__I__;
|
|
111
111
|
}
|
|
112
|
-
class
|
|
113
|
-
constructor(
|
|
114
|
-
this.debug = r, this.currentContainerNode = null, this.containerPath = [], this.containerIndex = [0], this.lastFixedI = 20, this.currentContainerNode = this.rootNode =
|
|
112
|
+
class ke {
|
|
113
|
+
constructor(t, r = !1) {
|
|
114
|
+
this.debug = r, this.currentContainerNode = null, this.containerPath = [], this.containerIndex = [0], this.lastFixedI = 20, this.currentContainerNode = this.rootNode = t, this.containerPath.push(this.rootNode);
|
|
115
115
|
}
|
|
116
|
-
getI(
|
|
117
|
-
const r =
|
|
116
|
+
getI(t) {
|
|
117
|
+
const r = t.tagName, o = t.getAttribute("layout"), i = { i: -99, variant: "new", tag: "hr", hi: null };
|
|
118
118
|
if (o) {
|
|
119
119
|
const a = /^(\+|-|)([0-9]\.?[0-9]?|)(;|$)/, c = o.match(a);
|
|
120
120
|
c && (i.variant = c[1] === "+" ? "append" : c[1] === "-" ? "skip" : "new", c[2] !== "" && (i.i = parseFloat(c[2]) * 10));
|
|
@@ -125,35 +125,35 @@ class kt {
|
|
|
125
125
|
}
|
|
126
126
|
return i.i === -99 && r === "HR" && o !== null ? (i.i = this.lastFixedI + 5, i) : null;
|
|
127
127
|
}
|
|
128
|
-
getAttributeRecords(
|
|
128
|
+
getAttributeRecords(t, r = !1) {
|
|
129
129
|
const o = {};
|
|
130
|
-
for (const i of Array.from(
|
|
131
|
-
i.name.startsWith("section-") ? o[i.name.replace(/^section-/, "")] = i.value : (i.name.startsWith("layout") || r) && (o[i.name] = i.value,
|
|
132
|
-
return r || Array.from(
|
|
133
|
-
i.startsWith("section-") && (o.class = (o.class ? o.class + " " : "") + i.replace(/^section-/, ""),
|
|
130
|
+
for (const i of Array.from(t.attributes))
|
|
131
|
+
i.name.startsWith("section-") ? o[i.name.replace(/^section-/, "")] = i.value : (i.name.startsWith("layout") || r) && (o[i.name] = i.value, t.removeAttribute(i.name));
|
|
132
|
+
return r || Array.from(t.classList).forEach((i) => {
|
|
133
|
+
i.startsWith("section-") && (o.class = (o.class ? o.class + " " : "") + i.replace(/^section-/, ""), t.classList.remove(i));
|
|
134
134
|
}), o;
|
|
135
135
|
}
|
|
136
|
-
createNewContainerNode(
|
|
137
|
-
const o = this.getAttributeRecords(
|
|
136
|
+
createNewContainerNode(t, r) {
|
|
137
|
+
const o = this.getAttributeRecords(t, t.tagName === "HR"), i = V("section", o);
|
|
138
138
|
return i.__IT = r, i;
|
|
139
139
|
}
|
|
140
|
-
arrangeSingleNode(
|
|
140
|
+
arrangeSingleNode(t, r) {
|
|
141
141
|
r.i;
|
|
142
142
|
let o = 0;
|
|
143
143
|
for (o = 0; o < this.containerIndex.length && !(this.containerIndex[o] >= r.i); o++)
|
|
144
144
|
;
|
|
145
145
|
let i = null;
|
|
146
|
-
r.variant === "append" ? i = this.containerPath[o] : i = this.createNewContainerNode(
|
|
146
|
+
r.variant === "append" ? i = this.containerPath[o] : i = this.createNewContainerNode(t, r);
|
|
147
147
|
const a = this.containerPath[o - 1];
|
|
148
|
-
this.containerPath.length = o, this.containerIndex.length = o,
|
|
148
|
+
this.containerPath.length = o, this.containerIndex.length = o, t.tagName === "HR" && (t.setAttribute("aria-hidden", "true"), t.setAttribute("hidden", "hidden")), i.appendChild(t), a.appendChild(i), this.containerPath.push(i), this.containerIndex.push(r.i), this.currentContainerNode = i;
|
|
149
149
|
}
|
|
150
|
-
appendToCurrentContainer(
|
|
150
|
+
appendToCurrentContainer(t) {
|
|
151
151
|
if (this.currentContainerNode === null)
|
|
152
152
|
throw new Error("No current container node set");
|
|
153
|
-
this.currentContainerNode.appendChild(
|
|
153
|
+
this.currentContainerNode.appendChild(t);
|
|
154
154
|
}
|
|
155
|
-
arrange(
|
|
156
|
-
for (let r of
|
|
155
|
+
arrange(t) {
|
|
156
|
+
for (let r of t) {
|
|
157
157
|
if (r.nodeType !== Node.ELEMENT_NODE) {
|
|
158
158
|
this.appendToCurrentContainer(r);
|
|
159
159
|
continue;
|
|
@@ -167,26 +167,26 @@ class kt {
|
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
|
-
var
|
|
171
|
-
throw TypeError(
|
|
172
|
-
},
|
|
173
|
-
for (var i = 0, a = t
|
|
170
|
+
var Se = Object.create, W = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, te = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), b = (e) => {
|
|
171
|
+
throw TypeError(e);
|
|
172
|
+
}, Ie = (e, t, r) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, G = (e, t) => W(e, "name", { value: t, configurable: !0 }), Le = (e) => [, , , Se((e == null ? void 0 : e[te("metadata")]) ?? null)], re = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], S = (e) => e !== void 0 && typeof e != "function" ? b("Function expected") : e, Ne = (e, t, r, o, i) => ({ kind: re[e], name: t, metadata: o, addInitializer: (a) => r._ ? b("Already initialized") : i.push(S(a || null)) }), Te = (e, t) => Ie(t, te("metadata"), e[3]), M = (e, t, r, o) => {
|
|
173
|
+
for (var i = 0, a = e[t >> 1], c = a && a.length; i < c; i++) t & 1 ? a[i].call(r) : o = a[i].call(r, o);
|
|
174
174
|
return o;
|
|
175
|
-
},
|
|
176
|
-
var c, s,
|
|
175
|
+
}, ie = (e, t, r, o, i, a) => {
|
|
176
|
+
var c, s, f, d, l, n = t & 7, _ = !!(t & 8), u = !!(t & 16), v = n > 3 ? e.length + 1 : n ? _ ? 1 : 2 : 0, x = re[n + 5], E = n > 3 && (e[v - 1] = []), L = e[v] || (e[v] = []), p = n && (!u && !_ && (i = i.prototype), n < 5 && (n > 3 || !u) && $e(n < 4 ? i : { get [r]() {
|
|
177
177
|
return j(this, a);
|
|
178
178
|
}, set [r](h) {
|
|
179
179
|
return Q(this, a, h);
|
|
180
180
|
} }, r));
|
|
181
181
|
n ? u && n < 4 && G(a, (n > 2 ? "set " : n > 1 ? "get " : "") + r) : G(i, r);
|
|
182
182
|
for (var g = o.length - 1; g >= 0; g--)
|
|
183
|
-
|
|
184
|
-
return n ||
|
|
185
|
-
}, F = (
|
|
186
|
-
|
|
187
|
-
class I extends (O =
|
|
183
|
+
d = Ne(n, r, f = {}, e[3], L), n && (d.static = _, d.private = u, l = d.access = { has: u ? (h) => Me(i, h) : (h) => r in h }, n ^ 3 && (l.get = u ? (h) => (n ^ 1 ? j : Pe)(h, i, n ^ 4 ? a : p.get) : (h) => h[r]), n > 2 && (l.set = u ? (h, y) => Q(h, i, y, n ^ 4 ? a : p.set) : (h, y) => h[r] = y)), s = (0, o[g])(n ? n < 4 ? u ? a : p[x] : n > 4 ? void 0 : { get: p.get, set: p.set } : i, d), f._ = 1, n ^ 4 || s === void 0 ? S(s) && (n > 4 ? E.unshift(s) : n ? u ? a = s : p[x] = s : i = s) : typeof s != "object" || s === null ? b("Object expected") : (S(c = s.get) && (p.get = c), S(c = s.set) && (p.set = c), S(c = s.init) && E.unshift(c));
|
|
184
|
+
return n || Te(e, i), p && W(i, r, p), u ? n ^ 4 ? a : p : i;
|
|
185
|
+
}, F = (e, t, r) => t.has(e) || b("Cannot " + r), Me = (e, t) => Object(t) !== t ? b('Cannot use the "in" operator on this value') : e.has(t), j = (e, t, r) => (F(e, t, "read from private field"), r ? r.call(e) : t.get(e)), Oe = (e, t, r) => t.has(e) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), Q = (e, t, r, o) => (F(e, t, "write to private field"), o ? o.call(e, r) : t.set(e, r), r), Pe = (e, t, r) => (F(e, t, "access private method"), r), ne, O, oe, A, R;
|
|
186
|
+
oe = [J("tj-content-pane")];
|
|
187
|
+
class I extends (O = ae(he), ne = [K({ type: Boolean, reflect: !0, attribute: "skip-layout" })], O) {
|
|
188
188
|
constructor() {
|
|
189
|
-
super(),
|
|
189
|
+
super(), Oe(this, R, M(A, 8, this, !1)), M(A, 11, this);
|
|
190
190
|
}
|
|
191
191
|
static get is() {
|
|
192
192
|
return "tj-content-pane";
|
|
@@ -195,86 +195,86 @@ class I extends (O = at(ht), nt = [K({ type: Boolean, reflect: !0, attribute: "s
|
|
|
195
195
|
return this;
|
|
196
196
|
}
|
|
197
197
|
arrange() {
|
|
198
|
-
const
|
|
198
|
+
const t = new se("SectionTreeBuilder");
|
|
199
199
|
this.log("arrange() called");
|
|
200
|
-
const r = new
|
|
200
|
+
const r = new ke(this), o = Array.from(this.children);
|
|
201
201
|
if (r.arrange(o), this.skipLayout) {
|
|
202
202
|
this.warn("Skipping layout as per skipLayout property.");
|
|
203
203
|
return;
|
|
204
204
|
}
|
|
205
|
-
$(Array.from(this.children), { recursive: !0 }),
|
|
205
|
+
$(Array.from(this.children), { recursive: !0 }), t.lap("after arrange");
|
|
206
206
|
}
|
|
207
207
|
async connectedCallback() {
|
|
208
|
-
await
|
|
208
|
+
await ce(), super.connectedCallback(), this.arrange();
|
|
209
209
|
}
|
|
210
210
|
}
|
|
211
|
-
A =
|
|
211
|
+
A = Le(O);
|
|
212
212
|
R = /* @__PURE__ */ new WeakMap();
|
|
213
|
-
|
|
214
|
-
I =
|
|
213
|
+
ie(A, 4, "skipLayout", ne, I, R);
|
|
214
|
+
I = ie(A, 0, "ContentAreaElement2", oe, I);
|
|
215
215
|
M(A, 1, I);
|
|
216
|
-
function
|
|
217
|
-
const o = [], i =
|
|
216
|
+
function De(e, t, r) {
|
|
217
|
+
const o = [], i = t.split("|");
|
|
218
218
|
for (const a of i) {
|
|
219
|
-
const c =
|
|
219
|
+
const c = e.querySelectorAll(a.trim());
|
|
220
220
|
if (c.length > 0)
|
|
221
221
|
for (const s of c) {
|
|
222
222
|
o.push(s);
|
|
223
|
-
for (const [
|
|
224
|
-
s.setAttribute(
|
|
223
|
+
for (const [f, d] of Object.entries(r))
|
|
224
|
+
s.setAttribute(f, d);
|
|
225
225
|
}
|
|
226
226
|
}
|
|
227
227
|
return o;
|
|
228
228
|
}
|
|
229
|
-
function
|
|
230
|
-
const r =
|
|
229
|
+
function ze(e, t) {
|
|
230
|
+
const r = e.split("|");
|
|
231
231
|
for (const o of r) {
|
|
232
|
-
const i =
|
|
232
|
+
const i = t.querySelectorAll(o.trim());
|
|
233
233
|
if (i.length > 0)
|
|
234
234
|
return Array.from(i);
|
|
235
235
|
}
|
|
236
236
|
return [];
|
|
237
237
|
}
|
|
238
|
-
function
|
|
239
|
-
class
|
|
238
|
+
function Be(e) {
|
|
239
|
+
class t extends e {
|
|
240
240
|
beforeLayoutCallback(o, i, a) {
|
|
241
241
|
return !1;
|
|
242
242
|
}
|
|
243
|
-
updated() {
|
|
244
|
-
var
|
|
245
|
-
const
|
|
246
|
-
for (const
|
|
247
|
-
const
|
|
248
|
-
if (!
|
|
249
|
-
let
|
|
243
|
+
updated(o) {
|
|
244
|
+
var a;
|
|
245
|
+
const i = ((a = this.shadowRoot) == null ? void 0 : a.querySelectorAll("slot[data-query]")) ?? [];
|
|
246
|
+
for (const c of Array.from(i)) {
|
|
247
|
+
const s = c.getAttribute("data-query");
|
|
248
|
+
if (!s) continue;
|
|
249
|
+
let f = [];
|
|
250
250
|
try {
|
|
251
|
-
|
|
252
|
-
} catch (
|
|
253
|
-
throw this.error(`"${
|
|
251
|
+
f = ze(s, this);
|
|
252
|
+
} catch (d) {
|
|
253
|
+
throw this.error(`"${d}" in slot`, c), d;
|
|
254
254
|
}
|
|
255
|
-
|
|
256
|
-
if (
|
|
257
|
-
const
|
|
258
|
-
if (!
|
|
259
|
-
const
|
|
260
|
-
|
|
255
|
+
f.forEach((d) => {
|
|
256
|
+
if (c.getAttributeNames().filter((l) => l.startsWith("data-set-attribute-")).forEach((l) => {
|
|
257
|
+
const n = l.replace(/^data-set-attribute-/, "");
|
|
258
|
+
if (!d.hasAttribute(n)) {
|
|
259
|
+
const _ = c.getAttribute(l);
|
|
260
|
+
_ !== null && d.setAttribute(n, _);
|
|
261
261
|
}
|
|
262
|
-
}), !
|
|
263
|
-
const l =
|
|
264
|
-
l &&
|
|
262
|
+
}), !d.hasAttribute("slot")) {
|
|
263
|
+
const l = c.getAttribute("name");
|
|
264
|
+
l && d.setAttribute("slot", l);
|
|
265
265
|
}
|
|
266
266
|
});
|
|
267
267
|
}
|
|
268
268
|
$(Array.from(this.children), { recursive: !0 });
|
|
269
269
|
}
|
|
270
270
|
}
|
|
271
|
-
return
|
|
271
|
+
return t;
|
|
272
272
|
}
|
|
273
273
|
export {
|
|
274
274
|
I as ContentAreaElement2,
|
|
275
|
-
|
|
276
|
-
|
|
275
|
+
ke as SectionTreeBuilder,
|
|
276
|
+
Be as SubLayoutApplyMixin,
|
|
277
277
|
$ as applyLayout,
|
|
278
|
-
|
|
279
|
-
|
|
278
|
+
De as attrAssign,
|
|
279
|
+
Re as isSectionTreeElement
|
|
280
280
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
type Constructor<T = object> = abstract new (...args: any[]) => T;
|
|
2
2
|
export declare function SubLayoutApplyMixin<TBase extends Constructor<HTMLElement>>(Base: TBase): (abstract new (...args: any[]) => {
|
|
3
3
|
beforeLayoutCallback(element: HTMLElement, replacementElement: HTMLElement, children: HTMLElement[]): boolean;
|
|
4
|
-
updated(): void;
|
|
4
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
5
5
|
accessKey: string;
|
|
6
6
|
readonly accessKeyLabel: string;
|
|
7
7
|
autocapitalize: string;
|
package/package.json
CHANGED
package/README_2.md
DELETED
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
# TrunkJS Content-Pane
|
|
2
|
-
|
|
3
|
-
Das `<tj-content-pane>` Element übernimmt zwei Aufgaben:
|
|
4
|
-
|
|
5
|
-
- Scritt 1: Es baut aus einer flachen HTML Struktur (H1-6, p, hr etc) eine Baumstruktur auf.
|
|
6
|
-
- Scritt 2: Es ändert die tag-Names und Attribute der Elemente basierend auf den `layout` Attributen.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
## Schritt 1: Baumstruktur aufbauen
|
|
10
|
-
|
|
11
|
-
Basierend auf dem `I`-Index baut die Komponente z.B. aus einer serverseitig
|
|
12
|
-
generierten flachen HTML Struktur eine Baumstruktur auf
|
|
13
|
-
|
|
14
|
-
| Element | I-Index |
|
|
15
|
-
|------------------------|-----------------|
|
|
16
|
-
| H1,H2 | 2 |
|
|
17
|
-
| H3 | 3 |
|
|
18
|
-
| H4 | 4 |
|
|
19
|
-
| H5 | 5 |
|
|
20
|
-
| H6 | 6 |
|
|
21
|
-
| hr mit layout-attribut | letzter I + 0.5 |
|
|
22
|
-
|
|
23
|
-
Dabei werden Element wie folgt verschachtelt:
|
|
24
|
-
|
|
25
|
-
```text
|
|
26
|
-
i1
|
|
27
|
-
i2
|
|
28
|
-
i2.5
|
|
29
|
-
i3
|
|
30
|
-
i3
|
|
31
|
-
i2
|
|
32
|
-
i3
|
|
33
|
-
i4
|
|
34
|
-
i3
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### Übertragen von Attributen
|
|
38
|
-
|
|
39
|
-
Attribute wie 'layout' und mit 'section-' geprefixte Attribute werden auf das `<section>` Element übertragen.
|
|
40
|
-
|
|
41
|
-
Beispiel:
|
|
42
|
-
|
|
43
|
-
```markdown
|
|
44
|
-
## Header 2
|
|
45
|
-
{: layout="#id1.class1" section-class="abc"}
|
|
46
|
-
````
|
|
47
|
-
|
|
48
|
-
Wird zu:
|
|
49
|
-
|
|
50
|
-
```html
|
|
51
|
-
<section layout="#id1.class1" class="abc">
|
|
52
|
-
<h2>Header 2</h2>
|
|
53
|
-
</section>
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
***Achtung: In diesem Schritt werden die Tags noch nicht verändert!*** Dies erfolgt erst im Layout-Schritt.
|
|
57
|
-
|
|
58
|
-
### Benutzerdefiniert I-Layer
|
|
59
|
-
|
|
60
|
-
Über das `layout` Attribut kann ein benutzerdefinierter I-Layer definiert werden.
|
|
61
|
-
|
|
62
|
-
Beispiel:
|
|
63
|
-
|
|
64
|
-
```markdown
|
|
65
|
-
## Header 2
|
|
66
|
-
{: layout="3;"}
|
|
67
|
-
```
|
|
68
|
-
Dies würde das Element in den I-Layer 3 verschieben.
|
|
69
|
-
|
|
70
|
-
### Attribute für section-Elemente setzen
|
|
71
|
-
|
|
72
|
-
Über das `section-<attribut>` können Attribute für das generierte section-Element gesetzt werden:
|
|
73
|
-
|
|
74
|
-
```markdown
|
|
75
|
-
## Header 2
|
|
76
|
-
{: section-id="meine-id" section-style="--cols: 6" section-class="highlight"}
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### Klassen-Shortcut für section-Elemente
|
|
80
|
-
|
|
81
|
-
Alle Klassen des Elements, die mit `section-` beginnen, werden auf das generierte section-Element übertragen.
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
### Das HR-Element
|
|
86
|
-
|
|
87
|
-
Standardmäßig wird ein `<hr>` nicht behandelt, außer es hat ein layout-Attribut.
|
|
88
|
-
|
|
89
|
-
Wenn kein dedizierter I-Layer angegeben ist, wird der I-Layer des vorherigen Elements + 0.5 verwendet.
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
## Schritt 2: Apply-Layouts
|
|
93
|
-
|
|
94
|
-
In diesem Schritt werden die layout-Attribute (ohne I-Layer) ausgewertet und die Elemente entsprechend umgewandelt.
|
|
95
|
-
|
|
96
|
-
Beispiel:
|
|
97
|
-
|
|
98
|
-
````markdown
|
|
99
|
-
## Header 2
|
|
100
|
-
{: layout="custom-element#id1.class1[slot=slotname]"}
|
|
101
|
-
````
|
|
102
|
-
|
|
103
|
-
entpsricht:
|
|
104
|
-
|
|
105
|
-
```html
|
|
106
|
-
<section layout="custom-element#id1.class1[slot=slotname]">
|
|
107
|
-
<h2>Header 2</h2>
|
|
108
|
-
</section>
|
|
109
|
-
```
|
|
110
|
-
Wird zu: (*transformiert durch applyLayout()*)
|
|
111
|
-
|
|
112
|
-
```html
|
|
113
|
-
<custom-element class="class1" id="id1" slot="slotname">
|
|
114
|
-
<h2>Header 2</h2>
|
|
115
|
-
</custom-element>
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
### Verschachtelte Layouts
|
|
119
|
-
|
|
120
|
-
z.B. sollen Layout-Elemente die darunterliegenden Elemente verändern:
|
|
121
|
-
|
|
122
|
-
- Automatisches zuweisen von `slot`-Attributen
|
|
123
|
-
- Automatisches zuweisen von layout-Attributen
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
#### Nutzung des `SubLayoutApplyMixin()`
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
Das `SubLayoutApplyMixin()` kann genutzt werden, um verschachtelte Layouts zu realisieren.
|
|
130
|
-
Es analysiert nach dem update() die slot-Elemente im Shadow-DOM. Selektiert werden Slot-elemente mit `data-query` Attribut.
|
|
131
|
-
|
|
132
|
-
Beispiel:
|
|
133
|
-
|
|
134
|
-
```javascript
|
|
135
|
-
class CustomElement extends SubLayoutApplyMixin(LitElement) {
|
|
136
|
-
...
|
|
137
|
-
render() {
|
|
138
|
-
return html`
|
|
139
|
-
<slot data-query=":scope > h2,h3,h4" name="header"></slot>
|
|
140
|
-
<slot data-query=":scope > section" data-set-attribute-layout="nte-card"></slot>
|
|
141
|
-
`;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
##### data-query
|
|
147
|
-
|
|
148
|
-
Data Query kann ein oder Mehrere durch `|` getrennte CSS-Selektoren enthalten. Das erste Element,
|
|
149
|
-
das gefunden wird, wird verwendet.
|