@profitlich/template-toolkit 5.2.3 → 5.3.1

package/dev/toolbar/Toolbar.js

@@ -15,7 +15,7 @@ export class Toolbar {
 
     constructor() {
         // State aus localStorage laden
-        const defaults = { visible: false, grid: 'aus', imageSize: false, contentType: false };
+        const defaults = { visible: false, grid: 'aus', imageSize: false, sizes: false, contentType: false };
         const saved = localStorage.getItem('devTools');
         this.#state = saved ? { ...defaults, ...JSON.parse(saved) } : defaults;
 
@@ -42,7 +42,11 @@ export class Toolbar {
         this.#gui.add(this.#state, 'imageSize')
             .name('Bildgrössen')
             .onChange(() => this.#onStateChange());
-        
+
+        this.#gui.add(this.#state, 'sizes')
+            .name('Sizes')
+            .onChange(() => this.#onStateChange());
+
         this.#gui.add(this.#state, 'contentType')
             .name('Inhaltstypen')
             .onChange(() => this.#onStateChange());
@@ -73,6 +77,7 @@ export class Toolbar {
         document.body.setAttribute('data-dev-grid', this.#state.grid);
         document.body.setAttribute('data-dev-content-types', this.#state.contentType);
         this.#updateImageSize();
+        this.#updateSizes();
         this.#updateContentTypeLabels();
     }
 
@@ -109,9 +114,35 @@ export class Toolbar {
         }
     }
 
+    #updateSizes() {
+        if (!this.#pictureElements) return;
+        const pictures = Array.from(this.#pictureElements);
+        if (this.#state.sizes) {
+            pictures.forEach((picture) => {
+                const sizes = picture.querySelector('img')?.getAttribute('sizes');
+                if (!sizes) {
+                    picture.setAttribute('data-dev-sizes', '');
+                    return;
+                }
+                // Media-Conditions in Klammern entfernen, nur die Längenwerte behalten
+                const shortened = sizes
+                    .split(',')
+                    .map(part => part.replace(/\([^)]*\)/g, '').trim())
+                    .filter(Boolean)
+                    .join(' / ');
+                picture.setAttribute('data-dev-sizes', shortened);
+            });
+        } else {
+            pictures.forEach((picture) => {
+                picture.setAttribute('data-dev-sizes', '');
+            });
+        }
+    }
+
     #onResize = () => {
         this.#gui.title(this.#getViewportText());
         this.#updateImageSize();
+        this.#updateSizes();
         this.#updateContentTypeLabels();
     }
 

package/dev/toolbar/toolbar.scss

@@ -1,12 +1,16 @@
 @use "sass:map";
 @use "../../scss/forward" as *;
 
+// lil-gui z-index
+.lil-gui.lil-root {
+    z-index: 9999999;
+}
+
 // grid
 $color--dev-grid: rgba(0, 0, 255, 0.5);
 $color--dev-grid-ribbons: rgba(191, 255, 254, 0.5);
 $color--dev-grid-center: rgba(0, 0, 0, 0.2);
 
-
 @mixin dev-toolbar-grid($layout, $columns, $gutter, $margin-left, $margin-right) {
 
     $gutter: size($layout, $gutter);
@@ -46,11 +50,6 @@ $color--dev-grid-center: rgba(0, 0, 0, 0.2);
     }
 }
 
-// lil-gui z-index
-.lil-gui.root {
-    z-index: 9999999;
-}
-
 .dev-toolbar__grid {
     display: none;
     width: 100%;
@@ -97,6 +96,18 @@ picture {
         text-shadow: 0 0 10px black;
         z-index: 10;
     }
+
+    &::after{
+        content: attr(data-dev-sizes);
+        font-family: sans-serif;
+        position: absolute;
+        top: 34px;
+        left: 10px;
+        color: white;
+        font-size: 20px;
+        text-shadow: 0 0 10px black;
+        z-index: 10;
+    }
 }
 
 .dev-toolbar__content-types {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "5.2.3",
+    "version": "5.3.1",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "sass": "scss/forward.scss",