bedrock-flows 0.7.1

package/template/public/bedrock/grid-overlay.js

@@ -0,0 +1,379 @@
+/**
+ * Grid Overlay
+ *
+ * Two modes:
+ *   1. Column Grid     (Ctrl+Shift+G) — 12-column layout grid, 1440px centered, 40px margin, 24px gutter
+ *   2. Section Spacing (Ctrl+Shift+H) — visualizes vertical gaps between direct children of <main>
+ *
+ * State is persisted in localStorage.
+ */
+(function() {
+    const STORAGE_KEY_COL     = 'gridOverlayEnabled';
+    const STORAGE_KEY_SPACING = 'sectionSpacingEnabled';
+    const COL_OVERLAY_ID      = 'grid-overlay';
+    const TOAST_ID            = 'grid-overlay-toast';
+
+    const GRID_WIDTH = 1440;
+    const COLUMNS    = 12;
+    const MARGIN     = 40;
+    const GUTTER     = 24;
+
+    let colEnabled     = false;
+    let spacingEnabled = false;
+    let colOverlay     = null;
+    let spacingMarkers = [];
+
+    // Returns the main content container (proto-nav wrapper or body)
+    function getContainer() {
+        return document.getElementById('protoSiteWrapper') || document.body;
+    }
+
+    // Returns the scroll offset of the content container
+    function getScrollTop() {
+        const wrapper = document.getElementById('protoSiteWrapper');
+        return wrapper ? wrapper.scrollTop : window.scrollY;
+    }
+
+    // --- Styles ---
+    function injectStyles() {
+        if (document.getElementById('grid-overlay-styles')) return;
+        const style = document.createElement('style');
+        style.id = 'grid-overlay-styles';
+        style.textContent = `
+            #${COL_OVERLAY_ID} {
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                width: ${GRID_WIDTH}px;
+                max-width: 100%;
+                min-height: 100%;
+                pointer-events: none;
+                z-index: 99989;
+                display: flex;
+                align-items: flex-start;
+                padding: 0 ${MARGIN}px;
+                box-sizing: border-box;
+                gap: ${GUTTER}px;
+            }
+            #${COL_OVERLAY_ID} .grid-overlay__column {
+                flex: 1;
+                min-height: 100%;
+                background: rgba(220, 38, 38, 0.1);
+                border-left: 1px solid rgba(220, 38, 38, 0.3);
+                border-right: 1px solid rgba(220, 38, 38, 0.3);
+                box-sizing: border-box;
+            }
+            .section-gap-marker {
+                position: absolute;
+                left: 0;
+                width: 100%;
+                pointer-events: none;
+                z-index: 99988;
+                box-sizing: border-box;
+            }
+            .section-gap-marker--has-gap {
+                border-top: 1px dashed rgba(234, 179, 8, 0.5);
+                border-bottom: 1px dashed rgba(234, 179, 8, 0.5);
+            }
+            .section-gap-marker__part {
+                position: absolute;
+                left: 0;
+                width: 100%;
+            }
+            .section-gap-marker__part--bottom {
+                background: rgba(234, 179, 8, 0.15);
+                border-bottom: 1px solid rgba(234, 179, 8, 0.4);
+            }
+            .section-gap-marker__part--top {
+                background: rgba(251, 146, 60, 0.15);
+                border-bottom: 1px solid rgba(251, 146, 60, 0.4);
+            }
+            .section-gap-marker__label {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background: rgba(234, 179, 8, 0.95);
+                color: #1a1a1a;
+                font-size: 11px;
+                font-family: monospace;
+                font-weight: 600;
+                padding: 2px 8px;
+                border-radius: 3px;
+                white-space: nowrap;
+                z-index: 1;
+            }
+            #${TOAST_ID} {
+                position: fixed;
+                bottom: 20px;
+                left: 50%;
+                transform: translateX(-50%) translateY(100px);
+                background: #1A1A2E;
+                color: white;
+                font-size: 13px;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+                padding: 10px 20px;
+                border-radius: 6px;
+                z-index: 100000;
+                pointer-events: none;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+                opacity: 0;
+                transition: transform 0.3s ease, opacity 0.3s ease;
+                white-space: nowrap;
+            }
+            #${TOAST_ID}.visible {
+                opacity: 1;
+                transform: translateX(-50%) translateY(0);
+            }
+            #${TOAST_ID} .toast-status { font-weight: 600; }
+            #${TOAST_ID} .toast-status--on  { color: #4CAF50; }
+            #${TOAST_ID} .toast-status--off { color: #F44336; }
+        `;
+        document.head.appendChild(style);
+    }
+
+    // --- Toast ---
+    let toastTimeout = null;
+    function showToast(label, on) {
+        injectStyles();
+        let toast = document.getElementById(TOAST_ID);
+        if (!toast) {
+            toast = document.createElement('div');
+            toast.id = TOAST_ID;
+            document.body.appendChild(toast);
+        }
+        const cls = on ? 'toast-status--on' : 'toast-status--off';
+        toast.innerHTML = `${label}: <span class="toast-status ${cls}">${on ? 'ON' : 'OFF'}</span>`;
+        if (toastTimeout) clearTimeout(toastTimeout);
+        requestAnimationFrame(() => toast.classList.add('visible'));
+        toastTimeout = setTimeout(() => toast.classList.remove('visible'), 2000);
+    }
+
+    // --- Column grid ---
+    let colResizeObserver = null;
+
+    function updateColOverlayHeight() {
+        if (!colOverlay) return;
+        const container = getContainer();
+        colOverlay.style.height = container.scrollHeight + 'px';
+    }
+
+    function createColOverlay() {
+        if (colOverlay) return;
+        colOverlay = document.createElement('div');
+        colOverlay.id = COL_OVERLAY_ID;
+        for (let i = 0; i < COLUMNS; i++) {
+            const col = document.createElement('div');
+            col.className = 'grid-overlay__column';
+            colOverlay.appendChild(col);
+        }
+        const container = getContainer();
+        container.style.position = 'relative';
+        container.appendChild(colOverlay);
+    }
+
+    function enableCol() {
+        colEnabled = true;
+        injectStyles();
+        createColOverlay();
+        colOverlay.style.display = 'flex';
+        updateColOverlayHeight();
+        // Keep height in sync as content resizes
+        if (!colResizeObserver) {
+            colResizeObserver = new ResizeObserver(updateColOverlayHeight);
+        }
+        const container = getContainer();
+        Array.from(container.children).forEach(child => {
+            if (child !== colOverlay) colResizeObserver.observe(child);
+        });
+        localStorage.setItem(STORAGE_KEY_COL, 'true');
+    }
+
+    function disableCol() {
+        colEnabled = false;
+        if (colOverlay) colOverlay.style.display = 'none';
+        if (colResizeObserver) colResizeObserver.disconnect();
+        localStorage.setItem(STORAGE_KEY_COL, 'false');
+    }
+
+    function dispatchToggleEvent() {
+        const detail = { colEnabled, spacingEnabled };
+        window.dispatchEvent(new CustomEvent('gridOverlayToggled', { detail }));
+        // If we're inside the proto-nav iframe, notify the parent so its
+        // sidebar checkboxes stay in sync.
+        if (window.parent && window.parent !== window) {
+            try {
+                window.parent.postMessage({ type: 'gridOverlayState', ...detail }, '*');
+            } catch (e) { /* cross-origin — ignore */ }
+        }
+    }
+
+    function toggleCol() {
+        colEnabled ? disableCol() : enableCol();
+        showToast('Column Grid', colEnabled);
+        dispatchToggleEvent();
+    }
+
+    // --- Section spacing ---
+    function clearSpacingMarkers() {
+        spacingMarkers.forEach(el => el.remove());
+        spacingMarkers = [];
+    }
+
+    function renderSpacingMarkers() {
+        clearSpacingMarkers();
+
+        const main = document.querySelector('main');
+        if (!main) return;
+
+        const sections = Array.from(main.children).filter(el => {
+            const s = window.getComputedStyle(el);
+            return s.display !== 'none' && s.visibility !== 'hidden';
+        });
+
+        const scrollTop = getScrollTop();
+        const container = getContainer();
+        container.style.position = 'relative';
+
+        for (let i = 0; i < sections.length - 1; i++) {
+            const rectA  = sections[i].getBoundingClientRect();
+            const rectB  = sections[i + 1].getBoundingClientRect();
+            const styleA = window.getComputedStyle(sections[i]);
+            const styleB = window.getComputedStyle(sections[i + 1]);
+
+            const paddingBottomA = parseFloat(styleA.paddingBottom) || 0;
+            const paddingTopB    = parseFloat(styleB.paddingTop) || 0;
+
+            // Measure from last content pixel of A to first content pixel of B
+            const contentBottomA = Math.round(rectA.bottom + scrollTop - paddingBottomA);
+            const contentTopB    = Math.round(rectB.top + scrollTop + paddingTopB);
+            const space          = contentTopB - contentBottomA;
+
+            if (space < 0) continue; // sections actually overlap in content
+
+            const marker = document.createElement('div');
+            marker.className = 'section-gap-marker section-gap-marker--has-gap';
+            marker.style.top    = contentBottomA + 'px';
+            marker.style.height = Math.max(space, 2) + 'px';
+
+            // Padding-bottom of section A (yellow)
+            if (paddingBottomA > 0) {
+                const partBottom = document.createElement('div');
+                partBottom.className = 'section-gap-marker__part section-gap-marker__part--bottom';
+                partBottom.style.top    = '0px';
+                partBottom.style.height = paddingBottomA + 'px';
+                marker.appendChild(partBottom);
+            }
+
+            // Padding-top of section B (orange)
+            if (paddingTopB > 0) {
+                const partTop = document.createElement('div');
+                partTop.className = 'section-gap-marker__part section-gap-marker__part--top';
+                partTop.style.top    = (space - paddingTopB) + 'px';
+                partTop.style.height = paddingTopB + 'px';
+                marker.appendChild(partTop);
+            }
+
+            const label = document.createElement('div');
+            label.className = 'section-gap-marker__label';
+            label.textContent = Math.round(space) + 'px';
+            marker.appendChild(label);
+
+            container.appendChild(marker);
+            spacingMarkers.push(marker);
+        }
+    }
+
+    function enableSpacing() {
+        spacingEnabled = true;
+        injectStyles();
+        renderSpacingMarkers();
+        const wrapper = document.getElementById('protoSiteWrapper');
+        if (wrapper) {
+            wrapper.addEventListener('scroll', renderSpacingMarkers);
+        } else {
+            window.addEventListener('scroll', renderSpacingMarkers);
+        }
+        window.addEventListener('resize', renderSpacingMarkers);
+        localStorage.setItem(STORAGE_KEY_SPACING, 'true');
+    }
+
+    function disableSpacing() {
+        spacingEnabled = false;
+        clearSpacingMarkers();
+        const wrapper = document.getElementById('protoSiteWrapper');
+        if (wrapper) {
+            wrapper.removeEventListener('scroll', renderSpacingMarkers);
+        } else {
+            window.removeEventListener('scroll', renderSpacingMarkers);
+        }
+        window.removeEventListener('resize', renderSpacingMarkers);
+        localStorage.setItem(STORAGE_KEY_SPACING, 'false');
+    }
+
+    function toggleSpacing() {
+        spacingEnabled ? disableSpacing() : enableSpacing();
+        showToast('Section Spacing', spacingEnabled);
+        dispatchToggleEvent();
+    }
+
+    // --- Keyboard ---
+    document.addEventListener('keydown', function(e) {
+        if (e.ctrlKey && e.shiftKey && (e.key === 'G' || e.key === 'g')) {
+            e.preventDefault();
+            toggleCol();
+        }
+        if (e.ctrlKey && e.shiftKey && (e.key === 'H' || e.key === 'h')) {
+            e.preventDefault();
+            toggleSpacing();
+        }
+    });
+
+    // --- Global API ---
+    window.GridOverlay = {
+        toggleCol, enableCol, disableCol, isColEnabled: () => colEnabled,
+        toggleSpacing, enableSpacing, disableSpacing, isSpacingEnabled: () => spacingEnabled
+    };
+
+    // --- Parent → iframe control channel ---
+    // Proto-nav posts commands so its sidebar checkbox controls the overlay
+    // rendered inside the viewport-preview iframe.
+    window.addEventListener('message', function(e) {
+        const msg = e.data;
+        if (!msg || msg.type !== 'gridOverlay') return;
+        switch (msg.action) {
+            case 'enableCol':      if (!colEnabled)      enableCol();      break;
+            case 'disableCol':     if (colEnabled)       disableCol();     break;
+            case 'enableSpacing':  if (!spacingEnabled)  enableSpacing();  break;
+            case 'disableSpacing': if (spacingEnabled)   disableSpacing(); break;
+            case 'requestState':   /* fall through to post below */        break;
+            default: return;
+        }
+        if (window.parent && window.parent !== window) {
+            window.parent.postMessage(
+                { type: 'gridOverlayState', colEnabled, spacingEnabled }, '*'
+            );
+        }
+    });
+
+    // --- Restore state (deferred so proto-nav has time to set up #protoSiteWrapper) ---
+    function restoreState() {
+        if (localStorage.getItem(STORAGE_KEY_COL) === 'true') enableCol();
+        if (localStorage.getItem(STORAGE_KEY_SPACING) === 'true') enableSpacing();
+        // Announce state to parent (no-op when not in an iframe)
+        if (window.parent && window.parent !== window) {
+            window.parent.postMessage(
+                { type: 'gridOverlayState', colEnabled, spacingEnabled }, '*'
+            );
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => setTimeout(restoreState, 0));
+    } else {
+        setTimeout(restoreState, 0);
+    }
+
+    console.log('[Grid Overlay] Ready. Ctrl+Shift+G = columns, Ctrl+Shift+H = section spacing.');
+})();