profitlich-template-toolkit 0.2.0 → 0.3.1

package/dev/toolbar/Toolbar.js

@@ -0,0 +1,102 @@
+import GUI from 'lil-gui';
+import { MediaQueries } from '../../utils/MediaQueries.js';
+import './toolbar.scss';
+
+export class Toolbar {
+    #mediaQueries = MediaQueries.getInstance();
+    #gui;
+    #state;
+    #pictureElements;
+
+    constructor() {
+        // State aus localStorage laden
+        const saved = localStorage.getItem('devTools');
+        this.#state = saved
+            ? JSON.parse(saved)
+            : { visible: false, grid: 'aus', imageSize: false };
+
+        // Grid-Overlay DOM-Element erstellen
+        const gridOverlay = document.createElement('div');
+        gridOverlay.classList.add('dev-toolbar__grid');
+        document.body.prepend(gridOverlay);
+
+        // Picture-Elemente sammeln
+        this.#pictureElements = document.getElementsByTagName('picture');
+
+        // lil-gui initialisieren
+        this.#gui = new GUI({ title: this.#getViewportText() });
+
+        this.#gui.add(this.#state, 'grid', ['aus', 'lines', 'ribbons'])
+            .name('Grid')
+            .onChange(() => this.#onStateChange());
+
+        this.#gui.add(this.#state, 'imageSize')
+            .name('Bildgrössen')
+            .onChange(() => this.#onStateChange());
+
+        // State anwenden
+        this.#applyState();
+
+        // Panel ein-/ausblenden
+        if (!this.#state.visible) {
+            this.#gui.hide();
+        }
+
+        // Event-Listener
+        window.addEventListener('resize', this.#onResize);
+        document.addEventListener('keydown', this.#handleKeyDown);
+    }
+
+    #getViewportText() {
+        return `${this.#mediaQueries.layout} @ ${window.innerWidth}×${window.innerHeight}`;
+    }
+
+    #onStateChange() {
+        this.#applyState();
+        this.#saveState();
+    }
+
+    #applyState() {
+        const gridActive = this.#state.grid !== 'aus';
+        document.body.setAttribute('data-dev', String(gridActive));
+        document.body.setAttribute('data-dev-grid', this.#state.grid);
+        this.#updateImageSize();
+    }
+
+    #saveState() {
+        localStorage.setItem('devTools', JSON.stringify(this.#state));
+    }
+
+    #updateImageSize() {
+        if (!this.#pictureElements) return;
+        const pictures = Array.from(this.#pictureElements);
+        if (this.#state.imageSize) {
+            const windowWidth = window.innerWidth;
+            pictures.forEach((picture) => {
+                picture.setAttribute('data-size', `${Math.round(picture.offsetWidth / windowWidth * 100)}vw`);
+            });
+        } else {
+            pictures.forEach((picture) => {
+                picture.setAttribute('data-size', '');
+            });
+        }
+    }
+
+    #onResize = () => {
+        this.#gui.title(this.#getViewportText());
+        this.#updateImageSize();
+    }
+
+    #handleKeyDown = (event) => {
+        if (event.key === 'Control') {
+            event.preventDefault();
+            this.#state.visible = !this.#state.visible;
+            if (this.#state.visible) {
+                this.#gui.show();
+            } else {
+                this.#gui.hide();
+            }
+            this.#saveState();
+        }
+    }
+}

package/dev/toolbar/toolbar.scss

@@ -0,0 +1,102 @@
+@use "sass:map";
+@use "../../scss/forward" as *;
+
+// 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);
+    $margin-left: size($layout, $margin-left);
+    $margin-right: size($layout, $margin-right);
+
+    body[data-dev='true'] {
+        .dev-toolbar__grid::after {
+            // the grid is made through repition
+            // 'important' because background settings are more specific than the grid settings
+            background-size: calc((100% - ($columns * $gutter)) * calc(1 / $columns) + $gutter) 1px !important;
+            margin: 0 ($margin-right - calc($gutter / 2)) 0 ($margin-left - calc($gutter / 2));
+            // The grid is calculated starting from the middle
+            // Thats why its necessary to add the half of the column gap to the left and right side
+            width: calc(100% - $margin-right + calc($gutter / 2) - $margin-left + calc($gutter / 2));
+        }
+    }
+
+    body[data-dev='true'][data-dev-grid="lines"] {
+        .dev-toolbar__grid::after {
+            background:
+                // center of the column spacing
+                linear-gradient(90deg, transparent 0.5px, transparent 0.5px) 0 0,
+                // Left column line
+                // position: from the column spacing center to the right by half a column spacing
+                linear-gradient(90deg, $color--dev-grid 0.5px, transparent 0.5px) calc($gutter / 2) 0,
+                // right column line
+                linear-gradient(90deg, $color--dev-grid 0.5px, transparent 0.5px) calc($gutter / 2 * -1) 0;
+        }
+    }
+
+    body[data-dev='true'][data-dev-grid="ribbons"] {
+        .dev-toolbar__grid::after {
+            background:
+                // ceft column ribbon
+                // position: from the column spacing center to the right by half a column spacing
+                linear-gradient(90deg, $color--dev-grid-ribbons calc(100% - $gutter), transparent 0.5px) calc($gutter / 2) 0,
+        }
+    }
+}
+
+// lil-gui z-index
+.lil-gui.root {
+    z-index: 9999999;
+}
+
+.dev-toolbar__grid {
+    display: none;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+
+    body[data-dev='true'] & {
+        display: block;
+    }
+
+    body[data-dev-grid='lines'] & {
+        z-index: 9999999;
+    }
+
+    &::after {
+        content: "";
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+    }
+}
+
+@each $layout, $breite in $layouts {
+    @include mediaquery($layout) using ($layout) {
+        @include dev-toolbar-grid($layout, map.get($columns, $layout), map.get($gutter, $layout), map.get(map.get($margins, $layout), 'left'), map.get(map.get($margins, $layout), 'right'));
+    }
+}
+
+picture {
+    position: relative;
+
+    &::before{
+        content: attr(data-size);
+        font-family: sans-serif;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        color: white;
+        font-size: 20px;
+        text-shadow: 0 0 10px black;
+        z-index: 10;
+    }
+}

package/package.json

@@ -1,9 +1,10 @@
 {
     "name": "profitlich-template-toolkit",
-    "version": "0.2.0",
+    "version": "0.3.1",
     "description": "Shared SCSS layout system, JS utilities and components for profitlich template repos",
     "type": "module",
     "exports": {
+        "./dev/toolbar": "./dev/toolbar/Toolbar.js",
         "./scss/forward": "./scss/forward.scss",
         "./scss/core/layout": "./scss/core/layout.scss",
         "./scss/core/mediaqueries": "./scss/core/mediaqueries.scss",
@@ -15,6 +16,7 @@
         "./components/mux-player/MuxPlayer": "./components/mux-player/MuxPlayer.js"
     },
     "files": [
+        "dev/",
         "scss/",
         "utils/",
         "components/"
@@ -32,4 +34,4 @@
         "url": "https://github.com/profitlich-ch/profitlich-template-toolkit"
     },
     "license": "MIT"
-}
+}