@profitlich/template-toolkit 1.0.0

package/components/menu-toggle/MenuToggle.js

@@ -0,0 +1,124 @@
+import './menu-toggle.scss';
+
+export class MenuToggle {
+    static #instance;
+    #menuButton;
+    #menu;
+    #menuLinkClass;
+    #menuItemClass;
+    #scrollbarWidth;
+    #shiftElement;
+    #y;
+    #bodyClickHandler;
+    #resizeHandler;
+    #escapeHandler;
+    isActive;
+
+    constructor(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId) {
+        this.#menuButton = document.getElementById(menuButtonId);
+        this.#menu = document.getElementById(menuId);
+        this.#menuLinkClass = menuLinkClass;
+        this.#menuItemClass = menuItemClass;
+        this.#shiftElement = shiftElementId ? document.getElementById(shiftElementId) : null;
+        this.#scrollbarWidth = 0;
+        this.isActive = false;
+        this.#y = 0;
+
+        this.#bodyClickHandler = this.#onBodyClick.bind(this);
+        this.#resizeHandler = this.#onResize.bind(this);
+        this.#escapeHandler = this.#onEscape.bind(this);
+
+        this.#menuButton.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.#toggleMenu();
+        });
+
+        this.#menu.addEventListener('click', (event) => {
+            if (this.isActive && event.target.matches(this.#menuLinkClass)) {
+                this.#toggleMenu();
+            }
+        });
+    }
+
+    static getInstance(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId) {
+        if (!MenuToggle.#instance) {
+            if (!menuButtonId || !menuId || !menuLinkClass || !menuItemClass) {
+                throw new Error("MenuToggle muss beim ersten Aufruf mit menuButtonId, menuId, menuLinkClass und menuItemClass initialisiert werden.");
+            }
+            MenuToggle.#instance = new MenuToggle(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId);
+        }
+        return MenuToggle.#instance;
+    }
+
+    #toggleMenu() {
+        if (this.isActive) {
+            this.isActive = false;
+            document.body.removeEventListener('click', this.#bodyClickHandler);
+            window.removeEventListener('resize', this.#resizeHandler);
+            this.#setBodyAttribute('data-menu-active', 'false');
+            if (this.#shiftElement) {
+                this.#shiftElement.style.marginRight = '';
+                this.#shiftElement.style.width = '';
+            }
+            document.body.style.paddingRight = '';
+            document.body.style.top = '';
+            window.scrollTo(0, this.#y);
+            this.#toggleEscape(false);
+        } else {
+            this.isActive = true;
+            document.body.addEventListener('click', this.#bodyClickHandler);
+            window.addEventListener('resize', this.#resizeHandler);
+            this.#scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            this.#y = window.scrollY;
+            this.#setBodyAttribute('data-menu-active', 'true');
+            document.body.style.paddingRight = `${this.#scrollbarWidth}px`;
+            document.body.style.top = `-${this.#y}px`;
+            if (this.#shiftElement) {
+                const marginOriginal = parseFloat(window.getComputedStyle(this.#menuButton).marginRight);
+                this.#shiftElement.style.marginRight = `${marginOriginal + this.#scrollbarWidth}px`;
+                this.#adjustShiftElementWidth();
+            }
+            this.#toggleEscape(true);
+        }
+        const event = new CustomEvent('eventMenuestatus', {
+            detail: { menueStatus: this.isActive }
+        });
+        document.dispatchEvent(event);
+    }
+
+    #adjustShiftElementWidth() {
+        const contentWidth = document.documentElement.clientWidth;
+        this.#shiftElement.style.width = `${contentWidth - this.#scrollbarWidth}px`;
+    }
+
+    #onBodyClick(event) {
+        if (this.isActive && !event.target.closest('.' + this.#menuItemClass)) {
+            this.#toggleMenu();
+        }
+    }
+
+    #onResize() {
+        if (this.#shiftElement) {
+            this.#adjustShiftElementWidth();
+        }
+    }
+
+    #setBodyAttribute(attr, value) {
+        document.body.setAttribute(attr, value);
+    }
+
+    #toggleEscape(status) {
+        if (status) {
+            document.addEventListener('keydown', this.#escapeHandler);
+        } else {
+            document.removeEventListener('keydown', this.#escapeHandler);
+        }
+    }
+
+    #onEscape(event) {
+        if (event.key === 'Escape') {
+            this.#toggleMenu();
+        }
+    }
+}

package/components/menu-toggle/menu-toggle.scss

@@ -0,0 +1,14 @@
+body {
+
+    &[data-menu-active="true"] {
+        position: fixed;
+        width: 100%;
+
+        // Bedeckt das Menü nur einen Teil der Seite, ist also ein Teil der Seite weiterhin zu sehen,
+        // soll die Maus Interaktionen ausserhalb des Menüs ignorieren
+        .main {
+            pointer-events: none;
+        }
+    }
+
+}

package/components/mux-player/MuxPlayer.js

@@ -0,0 +1,106 @@
+import '@mux/mux-player';
+import './mux-player.scss';
+
+export class MuxPlayer {
+    #lazyLoadObserver;
+    #playPauseObserver;
+
+    constructor() {
+        this.#lazyLoadObserver = new IntersectionObserver(this.#handleLazyLoad.bind(this));
+        this.#playPauseObserver = new IntersectionObserver(this.#handlePlayPause.bind(this));
+    }
+
+    observeLazyElements() {
+        document.querySelectorAll('.mux-player').forEach(el => {
+            this.#lazyLoadObserver.observe(el);
+        });
+    }
+
+    #handleLazyLoad(entries) {
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                this.#lazyLoadObserver.unobserve(entry.target);
+                const container = entry.target;
+                const playbackId = container.dataset.playbackId;
+                const aspectRatio = container.dataset.aspectRatio || '16 / 9';
+                const autoplay = container.dataset.autoplay === "true";
+
+                const player = document.createElement('mux-player');
+                player.playbackId = playbackId;
+                player.streamType = 'on-demand';
+                player.playsInline = true;
+                player.style.aspectRatio = aspectRatio;
+
+                // Autoplay-Attribut am Player-Element setzen, damit es später gefunden werden kann
+                if (autoplay) {
+                    player.setAttribute('data-autoplay', 'true');
+                }
+
+                const wrapper = container.closest('[data-video-wrapper]');
+
+                // Wenn ein Wrapper gefunden wird, richte den MutationObserver ein
+                if (wrapper) {
+                    const visibilityObserver = new MutationObserver(() => {
+                        this.#handleVisibilityChange(player);
+                    });
+
+                    // Beobachte den gefundenen Wrapper
+                    visibilityObserver.observe(wrapper, { attributes: true, childList: true, subtree: true });
+
+                    // Container durch Player ersetzen BEVOR die Sichtbarkeitsprüfung
+                    container.replaceWith(player);
+
+                    // Führe eine initiale Prüfung durch, falls es schon sichtbar ist
+                    this.#handleVisibilityChange(player);
+                } else if (autoplay) {
+                    // Fallback für normale Autoplay-Videos ohne speziellen Wrapper
+                    player.muted = true;
+                    player.style.setProperty('--controls', 'none');
+                    container.replaceWith(player);
+
+                    player.addEventListener('loadeddata', () => {
+                        this.#playPauseObserver.observe(player);
+                    });
+                } else {
+                    // Für Videos ohne Autoplay
+                    container.replaceWith(player);
+                }
+            }
+        }
+    }
+
+    #handleVisibilityChange(player) {
+        // Prüfe direkt am Player, ob er durch CSS sichtbar ist
+        const isVisible = window.getComputedStyle(player).display !== 'none';
+
+        if (isVisible && player.hasAttribute('data-autoplay')) {
+            // Wenn der Player sichtbar ist und Autoplay haben soll
+            player.muted = true;
+            player.style.setProperty('--controls', 'none');
+
+            // Warte auf loadeddata bevor der IntersectionObserver aktiviert wird
+            if (player.readyState >= 2) { // HAVE_CURRENT_DATA oder höher
+                this.#playPauseObserver.observe(player);
+            } else {
+                player.addEventListener('loadeddata', () => {
+                    this.#playPauseObserver.observe(player);
+                }, { once: true });
+            }
+        } else if (!isVisible) {
+            // Wenn der Player unsichtbar wird, pausiere ihn und stoppe die Beobachtung
+            this.#playPauseObserver.unobserve(player);
+            player.pause();
+        }
+    }
+
+    #handlePlayPause(entries) {
+        for (const entry of entries) {
+            const player = entry.target;
+            if (entry.isIntersecting) {
+                player.play().catch(e => console.error("Player-Fehler:", e));
+            } else {
+                player.pause();
+            }
+        }
+    }
+}

package/components/mux-player/mux-player.scss

@@ -0,0 +1,3 @@
+mux-player {
+    display: block;
+}

package/dev/Dev.js

@@ -0,0 +1,19 @@
+import { Toolbar } from './toolbar/Toolbar.js';
+import { FormieFillIn } from './formie-fill-in/FormieFillIn.js';
+
+let _config = {};
+
+/**
+* @param {Object} config - Aus config.json des Projekts
+ */
+export function initDev(config = {}) {
+    _config = config;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    new Toolbar();
+    if (_config.formie) {
+        new FormieFillIn(_config.formie);
+    }
+    console.info('Dev initialized.');
+});

package/dev/formie-fill-in/FormieFillIn.js

@@ -0,0 +1,91 @@
+/**
+ * FormieFillIn – Füllt Formie-Formulare in der Entwicklungsumgebung automatisch aus.
+ *
+ * Initialisierung im Projekt-Dev-Script:
+ *   import config from '../config.json';
+ *   import { FormieFillIn } from 'profitlich-template-toolkit/dev/formie-fill-in/FormieFillIn';
+ *   new FormieFillIn(config.formie);
+ *
+ * Konfiguration in config.json (zwei Ebenen: Form-Handle → Feld-Handle → Wert):
+ *   "formie": {
+ *     "kontaktformular": {
+ *       "vorname": "Max",
+ *       "email": "max@example.com",
+ *       "nachricht": "Testanfrage"
+ *     }
+ *   }
+ */
+export class FormieFillIn {
+    #formConfig;
+
+    /**
+     * @param {Object} formConfig - Aus config.json, z.B. { kontaktformular: { email: 'test@example.com' } }
+     */
+    constructor(formConfig) {
+        if (!formConfig || typeof formConfig !== 'object') return;
+
+        this.#formConfig = formConfig;
+        document.addEventListener('onFormieInit', this.#onFormieInit);
+    }
+
+    #onFormieInit = () => {
+        const forms = document.querySelectorAll('form[data-fui-form]');
+        forms.forEach((formElement) => {
+            const handle = this.#getFormHandle(formElement);
+            if (!handle || !this.#formConfig[handle]) return;
+
+            this.#fillForm(formElement, this.#formConfig[handle]);
+            console.info(`FormieFillIn: "${handle}" ausgefüllt.`);
+        });
+    };
+
+    #getFormHandle(formElement) {
+        try {
+            const data = JSON.parse(formElement.getAttribute('data-fui-form'));
+            return data?.handle ?? null;
+        } catch {
+            return null;
+        }
+    }
+
+    #fillForm(formElement, fields) {
+        for (const [fieldHandle, value] of Object.entries(fields)) {
+            const name = `fields[${fieldHandle}]`;
+            const inputs = formElement.querySelectorAll(`[name="${name}"], [name="${name}[]"]`);
+
+            if (!inputs.length) {
+                console.warn(`FormieFillIn: Feld "${fieldHandle}" nicht gefunden.`);
+                continue;
+            }
+
+            this.#setFieldValue(inputs, value);
+        }
+    }
+
+    #setFieldValue(inputs, value) {
+        const first = inputs[0];
+        const type = first.type?.toLowerCase();
+
+        if (type === 'radio') {
+            inputs.forEach((radio) => {
+                radio.checked = radio.value === String(value);
+                if (radio.checked) radio.dispatchEvent(new Event('change', { bubbles: true }));
+            });
+        } else if (type === 'checkbox') {
+            if (inputs.length === 1) {
+                first.checked = Boolean(value);
+            } else {
+                // Checkbox-Gruppe: value ist Array mit den gewünschten Werten
+                const selected = Array.isArray(value) ? value.map(String) : [String(value)];
+                inputs.forEach((checkbox) => {
+                    checkbox.checked = selected.includes(checkbox.value);
+                });
+            }
+            inputs.forEach((cb) => cb.dispatchEvent(new Event('change', { bubbles: true })));
+        } else {
+            first.value = value;
+            first.dispatchEvent(new Event('input', { bubbles: true }));
+            first.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+{
+    "name": "@profitlich/template-toolkit",
+    "version": "1.0.0",
+    "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
+    "type": "module",
+    "exports": {
+        "./dev": "./dev/Dev.js",
+        "./dev/toolbar": "./dev/toolbar/Toolbar.js",
+        "./dev/formie-fill-in/FormieFillIn": "./dev/formie-fill-in/FormieFillIn.js",
+        "./scss/forward": "./scss/forward.scss",
+        "./scss/core/layout": "./scss/core/layout.scss",
+        "./scss/core/mediaqueries": "./scss/core/mediaqueries.scss",
+        "./scss/core/hamburger": "./scss/core/hamburger.scss",
+        "./utils/MediaQueries": "./utils/MediaQueries.js",
+        "./utils/Vh100": "./utils/Vh100.js",
+        "./utils/BodyScrolled": "./utils/BodyScrolled.js",
+        "./components/menu-toggle/MenuToggle": "./components/menu-toggle/MenuToggle.js",
+        "./components/mux-player/MuxPlayer": "./components/mux-player/MuxPlayer.js",
+        "./scripts/copy-files": "./scripts/copy-files.js",
+        "./scripts/deploy": "./scripts/deploy.js"
+    },
+    "files": [
+        "dev/",
+        "scss/",
+        "utils/",
+        "components/",
+        "scripts/"
+    ],
+    "dependencies": {
+        "basic-ftp": "^5.0.0",
+        "chokidar": "^4.0.0",
+        "cli-progress": "^3.12.0",
+        "dotenv": "^17.0.0",
+        "fs-extra": "^11.3.0",
+        "glob": "^11.0.0",
+        "lil-gui": "^0.21.0"
+    },
+    "peerDependencies": {
+        "@mux/mux-player": ">=3.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@mux/mux-player": {
+            "optional": true
+        }
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/profitlich-ch/profitlich-template-toolkit.git"
+    },
+    "license": "MIT"
+}

package/scripts/copy-files.js

@@ -0,0 +1,74 @@
+import fs from 'fs-extra';
+import { glob } from 'glob';
+import path from 'path';
+import chokidar from 'chokidar';
+
+async function runTask(task) {
+    const files = await glob(task.src, { nodir: true, dot: true });
+    if (files.length === 0) return;
+
+    for (const file of files) {
+        const relativePath = path.relative(task.base, file);
+        const destPath = path.join(task.dest, relativePath);
+        await fs.copy(file, destPath);
+    }
+}
+
+export async function copyAll(copyTasks) {
+    console.log('🚀 Starting initial copy of all files...');
+    // empty folders to prevent orphaned files
+    for (const task of copyTasks) {
+        await fs.emptyDir(task.dest);
+    }
+    // run tasks parallely
+    await Promise.all(copyTasks.map(task => runTask(task)));
+    console.log('✅ Initial copy complete.');
+}
+
+export function watchFiles(copyTasks, watchDir = 'src') {
+    console.log(`👀 Watching for file changes in ${watchDir}/`);
+
+    // set lock variable to prevent parallel copy tasks
+    let isCopying = false;
+
+    const watcher = chokidar.watch(watchDir, { ignored: /(^|[\/\\])\../, persistent: true });
+
+    watcher.on('all', async (event, filePath) => {
+        if (['add', 'change', 'unlink'].includes(event)) {
+
+            // only proceed if copy job is not running
+            if (isCopying) {
+                return;
+            }
+
+            console.log(`[${event}] ${filePath}. Re-copying all files...`);
+
+            // secure copy job with try...finally
+            try {
+                isCopying = true; // activate lock
+                await copyAll(copyTasks);
+            } catch (err) {
+                console.error("Error during copy:", err);
+            } finally {
+                isCopying = false; // deactivate lock, allow new copy job
+            }
+        }
+    });
+}
+
+/**
+ * Run the copy-files script.
+ * @param {Array} copyTasks - array of { name, src, dest, base } objects
+ * @param {object} [options] - optional settings
+ * @param {string} [options.watchDir] - directory to watch (default: 'src')
+ */
+export function run(copyTasks, options = {}) {
+    const command = process.argv[2];
+    const watchDir = options.watchDir || 'src';
+
+    if (command === 'dev') {
+        copyAll(copyTasks).then(() => watchFiles(copyTasks, watchDir));
+    } else if (command === 'build') {
+        copyAll(copyTasks);
+    }
+}