stylescape/js/utilities/GridManager.js

Stylescape is a visual identity framework developed by Scape Agency.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridManager = void 0;
class GridManager {
    constructor() {
        this.STORAGE_KEY = "unitgl:grid:visibility";
        this.visibilityMap = {};
        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", () => this.init());
        }
        else {
            this.init();
        }
    }
    init() {
        this.loadVisibility();
        this.applyVisibilityState();
        this.setupToggleButtons();
        this.updateAllGridHeights();
        window.addEventListener("resize", () => this.updateAllGridHeights());
        window.addEventListener("scroll", () => this.updateAllGridHeights());
    }
    loadVisibility() {
        try {
            this.visibilityMap = JSON.parse(localStorage.getItem(this.STORAGE_KEY) || "{}");
        }
        catch {
            this.visibilityMap = {};
        }
    }
    saveVisibility() {
        localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.visibilityMap));
    }
    updateAllGridHeights() {
        const height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight, document.documentElement.offsetHeight, document.body.offsetHeight);
        document
            .querySelectorAll(".guide--layer")
            .forEach((layer) => {
            if (layer.offsetHeight !== height) {
                layer.style.height = `${height}px`;
            }
        });
    }
    applyVisibilityState() {
        document
            .querySelectorAll(".guide--layer")
            .forEach((layer) => {
            const id = layer.dataset.grid;
            const isActive = !!this.visibilityMap[id];
            layer.classList.toggle("active", isActive);
        });
        document
            .querySelectorAll("button[data-toggle]")
            .forEach((button) => {
            const id = button.dataset.toggle;
            const isActive = !!this.visibilityMap[id];
            button.classList.toggle("active", isActive);
        });
    }
    setupToggleButtons() {
        document
            .querySelectorAll("button[data-toggle]")
            .forEach((button) => {
            const id = button.dataset.toggle;
            const layer = document.querySelector(`[data-grid="${id}"]`);
            if (!layer)
                return;
            button.addEventListener("click", () => {
                const isNowActive = layer.classList.toggle("active");
                button.classList.toggle("active", isNowActive);
                this.visibilityMap[id] = isNowActive;
                this.saveVisibility();
            });
        });
    }
    setupEventListeners() {
        document.addEventListener("DOMContentLoaded", () => {
            this.updateAllGridHeights();
            this.setupToggleButtons();
            window.addEventListener("resize", () => this.updateAllGridHeights());
            window.addEventListener("scroll", () => this.updateAllGridHeights());
        });
    }
}
exports.GridManager = GridManager;
//# sourceMappingURL=GridManager.js.map