stylescape/ts/utilities/GridManager.ts

Stylescape is a visual identity framework developed by Scape Agency.

type GridLayer = HTMLElement & { dataset: { grid: string } }
type ToggleButton = HTMLButtonElement & { dataset: { toggle: string } }

export class GridManager {
    private readonly STORAGE_KEY = "unitgl:grid:visibility"
    private visibilityMap: Record<string, boolean> = {}

    constructor() {
        // console.log("Initializing GridManager...")

        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", () => this.init())
        } else {
            this.init()
        }
    }

    private init(): void {
        this.loadVisibility()
        this.applyVisibilityState()
        this.setupToggleButtons()
        this.updateAllGridHeights()
        window.addEventListener("resize", () => this.updateAllGridHeights())
        window.addEventListener("scroll", () => this.updateAllGridHeights())

        // console.log("GridManager initialized")
    }

    private loadVisibility(): void {
        // console.log("Loading grid visibility state from localStorage")
        try {
            this.visibilityMap = JSON.parse(
                localStorage.getItem(this.STORAGE_KEY) || "{}",
            )
            // console.log("Loaded visibility map:", this.visibilityMap)
        } catch {
            this.visibilityMap = {}
        }
    }

    private saveVisibility(): void {
        localStorage.setItem(
            this.STORAGE_KEY,
            JSON.stringify(this.visibilityMap),
        )
        // console.log("Saved grid visibility state:", this.visibilityMap)
    }

    private updateAllGridHeights(): void {
        const height = Math.max(
            document.documentElement.scrollHeight,
            document.body.scrollHeight,
            document.documentElement.offsetHeight,
            document.body.offsetHeight,
        )

        document
            .querySelectorAll<HTMLElement>(".guide--layer")
            .forEach((layer) => {
                if (layer.offsetHeight !== height) {
                    layer.style.height = `${height}px`
                }
            })
    }

    private applyVisibilityState(): void {
        document
            .querySelectorAll<GridLayer>(".guide--layer")
            .forEach((layer) => {
                const id = layer.dataset.grid
                const isActive = !!this.visibilityMap[id]
                layer.classList.toggle("active", isActive)
            })

        document
            .querySelectorAll<ToggleButton>("button[data-toggle]")
            .forEach((button) => {
                const id = button.dataset.toggle
                const isActive = !!this.visibilityMap[id]
                button.classList.toggle("active", isActive)
            })
    }

    private setupToggleButtons(): void {
        // console.log("Setting up toggle buttons for grid layers")
        document
            .querySelectorAll<ToggleButton>("button[data-toggle]")
            .forEach((button) => {
                const id = button.dataset.toggle
                const layer = document.querySelector<GridLayer>(
                    `[data-grid="${id}"]`,
                )
                if (!layer) return

                // console.log(`Setting up toggle for layer: ${id}`)

                button.addEventListener("click", () => {
                    const isNowActive = layer.classList.toggle("active")
                    button.classList.toggle("active", isNowActive)
                    this.visibilityMap[id] = isNowActive
                    this.saveVisibility()
                })
            })
    }

    private setupEventListeners(): void {
        // console.log("Setting up event listeners for GridManager")
        document.addEventListener("DOMContentLoaded", () => {
            this.updateAllGridHeights()
            this.setupToggleButtons()

            window.addEventListener("resize", () =>
                this.updateAllGridHeights(),
            )
            window.addEventListener("scroll", () =>
                this.updateAllGridHeights(),
            )
        })
    }
}