@profitlich/template-toolkit 5.5.1 → 5.6.0
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/CLAUDE.project.md +42 -1
- package/package.json +1 -1
package/CLAUDE.project.md
CHANGED
|
@@ -22,7 +22,48 @@ Dieser Abschnitt stammt aus `@profitlich/template-toolkit` und wird bei jedem `c
|
|
|
22
22
|
|
|
23
23
|
- Zustandskommunikation zwischen Komponenten über `CustomEvent`, nicht direkte Methodenaufrufe.
|
|
24
24
|
- Event-Namenskonvention: `event` + PascalCase → `eventMenuStatus`, `eventBodyScrolled`.
|
|
25
|
-
- DOM
|
|
25
|
+
- DOM-**Zustand** per `data-*`-Attribut, nie als CSS-Klassen-Toggle: `document.body.setAttribute('data-menu-active', 'true')`.
|
|
26
|
+
|
|
27
|
+
Das betrifft den Zustand eines Elements. Wie ein Skript seine Elemente überhaupt **findet**, regelt der nächste Abschnitt.
|
|
28
|
+
|
|
29
|
+
### Wie JavaScript seine Elemente findet
|
|
30
|
+
|
|
31
|
+
Zwei Fragen, die leicht durcheinandergeraten:
|
|
32
|
+
|
|
33
|
+
*Welches Skript lädt diese Seite?* → immer `craft.vite.register` im Template, das das Markup rendert. Gilt unabhängig von allem Folgenden.
|
|
34
|
+
|
|
35
|
+
*Woran erkennt das Skript seine Elemente?* → dafür gilt:
|
|
36
|
+
|
|
37
|
+
> **Wer entscheidet, dort steht es.** Entscheidet der Code, steht der Selektor im Code. Entscheidet der Inhalt, steht es im Markup.
|
|
38
|
+
|
|
39
|
+
**Klassen-Selektor**, wenn das Verhalten untrennbar zur Komponente gehört — jedes Element dieser Klasse verhält sich immer so, es gibt nichts zu entscheiden:
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
new Subcategory('.subcategory');
|
|
43
|
+
new HoverImages('.client-list__link');
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**`data`-Attribut**, sobald eine der beiden Bedingungen zutrifft:
|
|
47
|
+
|
|
48
|
+
1. **Die Redaktion entscheidet, ob.** Ein CMS-Feld schaltet das Verhalten — `module.fixiert` → `data-sticky`, `module.raster` → `data-grid-type`. Der Code kann das nicht wissen.
|
|
49
|
+
2. **Das Element trägt einen Wert**, den das Skript braucht — `data-hover-image`, `data-categories`, `data-map-zoom`.
|
|
50
|
+
|
|
51
|
+
Fallen beide zusammen, ist der Selektor das Attribut:
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
new Grid('[data-grid-type]');
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Nicht überall Attribute: Ein `data-swiper="true"` an jeder `.subcategory` wäre eine zweite Stelle zum Ändern und suggeriert eine Wahlmöglichkeit, die es nicht gibt. Nicht überall Selektoren: Redaktionelle Entscheidungen und Werte pro Element kann der Code nicht kennen.
|
|
58
|
+
|
|
59
|
+
### Entry oder Klassendatei
|
|
60
|
+
|
|
61
|
+
Eine JS-Datei ist das eine oder das andere, nie beides:
|
|
62
|
+
|
|
63
|
+
- **Entry** — initialisiert sich selbst auf `DOMContentLoaded` und wird von keinem Modul importiert. Geladen durch `craft.vite.register`.
|
|
64
|
+
- **Klassendatei** — wird importiert und tut nichts, bis jemand sie konstruiert.
|
|
65
|
+
|
|
66
|
+
Vermischt man beides, wird ein Import zur versteckten Ladeanweisung: Er sieht ungenutzt aus, ist aber das Einzige, was die Funktion startet. Wer ihn entfernt — oder ein Linter, der ihn meldet — legt sie lautlos still.
|
|
26
67
|
|
|
27
68
|
### SCSS
|
|
28
69
|
|
package/package.json
CHANGED