@profitlich/template-toolkit 2.6.1 → 2.7.0

package/dev/toolbar/Toolbar.js

@@ -7,6 +7,7 @@ export class Toolbar {
     #gui;
     #state;
     #pictureElements;
+    #contentTypeContainer;
 
     constructor() {
         // State aus localStorage laden
@@ -20,6 +21,11 @@ export class Toolbar {
         gridOverlay.classList.add('dev-toolbar__grid');
         document.body.prepend(gridOverlay);
 
+        // Content-Type-Label-Overlay erstellen
+        this.#contentTypeContainer = document.createElement('div');
+        this.#contentTypeContainer.classList.add('dev-toolbar__content-types');
+        document.body.prepend(this.#contentTypeContainer);
+
         // Picture-Elemente sammeln
         this.#pictureElements = document.getElementsByTagName('picture');
 
@@ -33,6 +39,10 @@ export class Toolbar {
         this.#gui.add(this.#state, 'imageSize')
             .name('Bildgrössen')
             .onChange(() => this.#onStateChange());
+        
+            this.#gui.add(this.#state, 'contentType')
+            .name('Inhaltstypen')
+            .onChange(() => this.#onStateChange());
 
         // State anwenden
         this.#applyState();
@@ -57,10 +67,24 @@ export class Toolbar {
     }
 
     #applyState() {
-        const gridActive = this.#state.grid !== 'aus';
-        document.body.setAttribute('data-dev', String(gridActive));
         document.body.setAttribute('data-dev-grid', this.#state.grid);
+        document.body.setAttribute('data-dev-content-type', this.#state.contentType);
         this.#updateImageSize();
+        this.#updateContentTypeLabels();
+    }
+
+    #updateContentTypeLabels() {
+        this.#contentTypeContainer.innerHTML = '';
+        if (!this.#state.contentType) return;
+        document.querySelectorAll('[data-content-type]').forEach(el => {
+            const rect = el.getBoundingClientRect();
+            const label = document.createElement('div');
+            label.className = 'dev-toolbar__content-type-label';
+            label.textContent = el.dataset.contentType;
+            label.style.left = `${rect.left + window.scrollX}px`;
+            label.style.top = `${rect.top + window.scrollY}px`;
+            this.#contentTypeContainer.appendChild(label);
+        });
     }
 
     #saveState() {
@@ -73,11 +97,11 @@ export class Toolbar {
         if (this.#state.imageSize) {
             const windowWidth = window.innerWidth;
             pictures.forEach((picture) => {
-                picture.setAttribute('data-size', `${Math.round(picture.offsetWidth / windowWidth * 100)}vw`);
+                picture.setAttribute('data-dev-size', `${Math.round(picture.offsetWidth / windowWidth * 100)}vw`);
             });
         } else {
             pictures.forEach((picture) => {
-                picture.setAttribute('data-size', '');
+                picture.setAttribute('data-dev-size', '');
             });
         }
     }
@@ -85,6 +109,7 @@ export class Toolbar {
     #onResize = () => {
         this.#gui.title(this.#getViewportText());
         this.#updateImageSize();
+        this.#updateContentTypeLabels();
     }
 
     #handleKeyDown = (event) => {

package/dev/toolbar/toolbar.scss

@@ -89,7 +89,7 @@ picture {
     position: relative;
 
     &::before{
-        content: attr(data-size);
+        content: attr(data-dev-size);
         font-family: sans-serif;
         position: absolute;
         top: 10px;
@@ -100,3 +100,29 @@ picture {
         z-index: 10;
     }
 }
+
+.dev-toolbar__content-types {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    z-index: 9999999;
+
+    body[data-dev-content-type="true"] & {
+        display: block;
+    }
+}
+
+.dev-toolbar__content-type-label {
+    font: 600 12px / 1.25 sans-serif;
+    background-color: black;
+    color: white;
+    transform: rotate(-90deg) translate(-100%, -100%);
+    transform-origin: left top;
+    padding: 2px 10px;
+    position: absolute;
+    white-space: nowrap;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "2.6.1",
+    "version": "2.7.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {
@@ -21,11 +21,12 @@
         "./vite/jsonToScss": "./vite/jsonToScss.js"
     },
     "files": [
+        "components/",
         "dev/",
         "scss/",
+        "scripts/",
         "utils/",
-        "components/",
-        "scripts/"
+        "vite/"
     ],
     "dependencies": {
         "basic-ftp": "^5.0.0",

package/vite/jsonToScss.js

@@ -0,0 +1,16 @@
+export function jsonToScss(json) {
+    const toValue = (v) => {
+        if (typeof v === 'object' && v !== null) {
+            return '(' + Object.entries(v).map(([k, val]) => `"${k}": ${toValue(val)}`).join(', ') + ')';
+        }
+        if (typeof v === 'string') {
+            if (/^#[0-9a-fA-F]{3,8}$/.test(v)) return v; // Hex-Farben ohne Quotes
+            return `"${v}"`;
+        }
+        return v;
+    };
+    return Object.entries(json)
+        .filter(([key]) => key !== 'README')
+        .map(([key, value]) => `$${key}: ${toValue(value)};`)
+        .join('\n');
+}