unit.gl 0.1.2 → 0.1.9

package/scss/variables/_view.scss

@@ -1,7 +1,3 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
 ///
 /// View Variables Module
@@ -71,8 +67,6 @@ $base_screen_unit: 16px !default;
 /// @type Map
 ///
 
-
-
 // $breakpoints: (
 //      xs: calc_breakpoint($base_screen_unit, 20),   //  320px - Extra small devices (Mobile)
 //      sm: calc_breakpoint($base_screen_unit, 30),   //  480px - Small devices (Tablets)
@@ -93,7 +87,8 @@ $breakpoints: (
     // 1024px - Large devices (Desktops)
     xl: 1280px,
     // 1280px - Extra large devices (TV)
-    sl: 1440px, // 1440px - Super large devices (Large TV)
+    sl: 1440px,
+    // 1440px - Super large devices (Large TV)
 ) !default;
 
 ///

package/ts/grids.ts

@@ -0,0 +1,92 @@
+type GridLayer = HTMLElement & { dataset: { grid: string } };
+type ToggleButton = HTMLButtonElement & { dataset: { toggle: string } };
+const STORAGE_KEY = 'unitgl:grid:visibility';
+
+/**
+ * Load visibility map from localStorage.
+ */
+function loadVisibility(): Record<string, boolean> {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Save updated visibility map to localStorage.
+ */
+function saveVisibility(visibilityMap: Record<string, boolean>): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(visibilityMap));
+}
+
+/**
+ * Update height of all grid overlays to match document scroll height.
+ */
+function updateAllGridHeights(): void {
+  const height = Math.max(
+    document.body.scrollHeight,
+    document.documentElement.scrollHeight
+  );
+
+  document.querySelectorAll<HTMLElement>('.grid_layer').forEach(layer => {
+    // Avoid recursive layout inflation
+    if (layer.offsetHeight !== height) {
+      layer.style.height = `${height}px`;
+    }
+  });
+}
+
+/**
+ * Update the indicator badge on a toggle button.
+ */
+function updateStatusIndicator(id: string, isHidden: boolean): void {
+  const badge = document.querySelector<HTMLSpanElement>(`[data-status="${id}"]`);
+  if (badge) {
+    badge.textContent = isHidden ? '✕ Off' : '✓ On';
+  }
+}
+
+/**
+ * Apply saved visibility state to grid layers and badges.
+ */
+function applyVisibilityState(state: Record<string, boolean>): void {
+  document.querySelectorAll<GridLayer>('.grid_layer').forEach(layer => {
+    const id = layer.dataset.grid;
+    const hidden = !!state[id];
+    layer.classList.toggle('is-hidden', hidden);
+    updateStatusIndicator(id, hidden);
+  });
+}
+
+/**
+ * Hook up buttons to toggle grid visibility and update state.
+ */
+function setupGridToggles(): void {
+  const visibility = loadVisibility();
+
+  const buttons = document.querySelectorAll<ToggleButton>('button[data-toggle]');
+  buttons.forEach(button => {
+    const id = button.dataset.toggle;
+    const layer = document.querySelector<GridLayer>(`[data-grid="${id}"]`);
+    if (!layer) return;
+
+    button.addEventListener('click', () => {
+      const isNowHidden = layer.classList.toggle('is-hidden');
+      visibility[id] = isNowHidden;
+      saveVisibility(visibility);
+      updateStatusIndicator(id, isNowHidden);
+    });
+  });
+
+  applyVisibilityState(visibility);
+}
+
+// Initialize on DOM ready
+document.addEventListener('DOMContentLoaded', () => {
+  updateAllGridHeights();
+  setupGridToggles();
+
+  window.addEventListener('resize', updateAllGridHeights);
+  window.addEventListener('scroll', updateAllGridHeights);
+});

package/ts/index.ts

@@ -1 +1,19 @@
-export { };
+import './grids.js';
+
+// Additional imports could go here:
+// import './typography';
+// import './debug';
+// import './viewport-tools';
+
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('[unit.gl] Test site initialized');
+
+  // Example: highlight current test page in nav
+  const current = location.pathname.split('/').pop();
+  const activeLink = document.querySelector(`a[href$="${current}"]`);
+  if (activeLink) {
+    activeLink.classList.add('active');
+  }
+
+  // Additional test tools or instrumentation could be bootstrapped here
+});

package/scss/classes/_guides.scss

@@ -1,141 +0,0 @@
-@use "../dev" as *;
-@use "../variables" as *;
-@use "../mixins" as *;
-
-// ============================================================================
-// Utilities | Guides
-// ============================================================================
-
-.guide {
-    @include guide;
-}
-
-@mixin guide_graph {
-    @include guide;
-    background-size: 4 * $q 4 * $q;
-    background-image: repeating-linear-gradient(
-            rgb(66, 61, 61) 0 1px,
-            transparent 1px 100%
-        ),
-        repeating-linear-gradient(
-            90deg,
-            rgb(66, 61, 61) 0 1px,
-            transparent 1px 100%
-        );
-}
-
-.guide_graph {
-    @include guide_graph;
-}
-
-@mixin guide_baseline {
-    @include guide;
-    // background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
-    // background: repeating-linear-gradient(transparent, transparent 20px, transparent 20px, transparent 25px);
-    // background-repeat: repeat-y;
-    background-repeat: repeat;
-
-    background-size: map-get($baseline, 4) map-get($baseline, 4);
-    @include guide;
-    background-image: repeating-linear-gradient(
-        cyan 0 1px,
-        transparent 1px 100%
-    );
-}
-
-.guide_baseline {
-    @include guide_baseline;
-}
-
-.baseline-grid {
-    @include guide;
-
-    background-image:
-    // -webkit-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
-        -webkit-linear-gradient(
-        top,
-        rgba(0, 0, 0, 0) 95%,
-        rgba(56, 255, 255, 0.8) 100%
-    );
-
-    background-image:
-        // -moz-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
-        -moz-linear-gradient(
-        top,
-        rgba(0, 0, 0, 0) 95%,
-        rgba(56, 255, 255, 0.8) 100%
-    );
-    background-image:
-        // -o-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
-        -o-linear-gradient(
-        top,
-        rgba(0, 0, 0, 0) 95%,
-        rgba(56, 255, 255, 0.8) 100%
-    );
-
-    background-size:
-        100% 100%,
-        100% 100%;
-    // background-size: 60px 100%, 100% 22px;
-    // background-position: 10px 0px;
-}
-
-// .guide_graph {
-//   @include guide;
-//   background-image:
-//     repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
-//     repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
-//   }
-
-// .guide_baseline {
-//   @include guide;
-//   background-image:
-//     repeating-linear-gradient(cyan 0 2px, transparent 2px 100%);
-// }
-
-.page {
-    border: $q * 2 solid red;
-}
-
-$body-width: 960px;
-$baseline: 22px;
-@mixin baseline-grid {
-    $columns: 16;
-    $column-color: rgba(200, 0, 0, 0.2);
-    $baseline-color: rgba(56, 255, 255, 0.8);
-
-    // These are all automatically calculated
-    $gutter-width: 20px; // Change if you like
-    $gutters: ($columns - 1);
-    $column-width: calc($body-width / $columns);
-
-    background-image:
-        -webkit-linear-gradient(
-            0deg,
-            $column-color $column-width,
-            transparent $gutter-width
-        ),
-        -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 95%, $baseline-color 100%);
-    background-image:
-        -moz-linear-gradient(
-            0deg,
-            $column-color $column-width,
-            transparent $gutter-width
-        ),
-        -moz-linear-gradient(top, rgba(0, 0, 0, 0) 95%, $baseline-color 100%);
-    background-image:
-        -o-linear-gradient(
-            0deg,
-            $column-color $column-width,
-            transparent $gutter-width
-        ),
-        -o-linear-gradient(top, rgba(0, 0, 0, 0) 95%, $baseline-color 100%);
-    background-size:
-        ($column-width + $gutter-width) 100%,
-        100% $baseline;
-    background-position: 10px 0px; // Use to offset and center your grid
-}
-
-// Example call
-.baseline-grid {
-}

package/ts/AspectRatio.ts

@@ -1,50 +0,0 @@
-// ============================================================================
-// Import
-// ============================================================================
-
-import Unit from "./Unit";
-
-
-// ============================================================================
-// Classes
-// ============================================================================
-
-export default class AspectRatio {
-
-    // Parameters
-    // ========================================================================
-
-    width: Unit;
-    height: Unit;
-
-    // Constructor
-    // ========================================================================
-
-    constructor(width: Unit, height: Unit) {
-        this.width = width;
-        this.height = height;
-    }
-
-    // Methods
-    // ========================================================================
-
-    calculateRatio(): number {
-        return this.width.value / this.height.value;
-    }
-
-    scaleToWidth(newWidth: Unit): Unit {
-        const ratio: number = this.calculateRatio();
-        const newHeightValue: number = newWidth.value / ratio;
-        return new Unit(newHeightValue, newWidth.unit);
-    }
-
-    scaleToHeight(newHeight: Unit): Unit {
-        const ratio: number = this.calculateRatio();
-        const newWidthValue: number = newHeight.value * ratio;
-        return new Unit(newWidthValue, newHeight.unit);
-    }
-
-    toString(): string {
-        return `AspectRatio: width ${this.width.toString()}, height ${this.height.toString()}, ratio ${this.calculateRatio()}`;
-    }
-}

package/ts/Border.ts

@@ -1,60 +0,0 @@
-// ============================================================================
-// Import
-// ============================================================================
-
-import Unit from "./Unit";
-
-// ============================================================================
-// Types
-// ============================================================================
-
-type BorderStyle = "solid" | "dashed" | "dotted" | "double" | "none";
-
-
-// ============================================================================
-// Classes
-// ============================================================================
-
-export default class Border {
-
-    // Parameters
-    // ========================================================================
-
-    width: Unit;
-    style: BorderStyle;
-    color: string;
-
-
-    // Constructor
-    // ========================================================================
-
-    constructor(
-        width: Unit,
-        style: BorderStyle,
-        color: string
-    ) {
-        this.width = width;
-        this.style = style;
-        this.color = color;
-    }
-
-    // Methods
-    // ========================================================================
-
-    setWidth(newWidth: Unit): void {
-        this.width = newWidth;
-    }
-
-    setStyle(newStyle: BorderStyle): void {
-        this.style = newStyle;
-    }
-
-    setColor(newColor: string): void {
-        this.color = newColor;
-    }
-
-    toString(): string {
-        return `Border: ${this.width.toString()} ${this.style} ${this.color}`;
-    }
-
-}

package/ts/BoxModel.ts

@@ -1,68 +0,0 @@
-// ============================================================================
-// Import
-// ============================================================================
-
-import Border from "./Border";
-import Size from "./Size";
-
-
-// ============================================================================
-// Classes
-// ============================================================================
-
-export default class BoxModel {
-
-    // Parameters
-    // ========================================================================
-
-    margin: Margin;
-    padding: Padding;
-    border: Border;
-    size: Size;
-
-    // Constructor
-    // ========================================================================
-
-    constructor(
-        margin: Margin,
-        padding: Padding,
-        border: Border,
-        size: Size
-    ) {
-        if (
-            margin.top.unit !== size.width.unit ||
-            padding.top.unit !== size.width.unit ||
-            border.width.unit !== size.width.unit
-        ) {
-            throw new Error("All units in BoxModel must match");
-        }
-        this.margin = margin;
-        this.padding = padding;
-        this.border = border;
-        this.size = size;
-    }
-
-
-    // Methods
-    // ========================================================================
-
-    setMargin(margin: Margin): void {
-        this.margin = margin;
-    }
-
-    setPadding(padding: Padding): void {
-        this.padding = padding;
-    }
-
-    setBorder(border: Border): void {
-        this.border = border;
-    }
-
-    setSize(size: Size): void {
-        this.size = size;
-    }
-
-    toString(): string {
-        return `BoxModel:\n  Size: ${this.size.toString()}\n  Margin: ${this.margin.toString()}\n  Padding: ${this.padding.toString()}\n  Border: ${this.border.toString()}`;
-    }
-}

package/ts/FlexContainer.ts

@@ -1,75 +0,0 @@
-// ============================================================================
-// Import
-// ============================================================================
-
-
-// ============================================================================
-// Types
-// ============================================================================
-
-type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
-type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
-
-// ============================================================================
-// Classes
-// ============================================================================
-
-
-
-export default class FlexContainer {
-
-    // Parameters
-    // ========================================================================
-
-    flexDirection: FlexDirection;
-    flexWrap: FlexWrap;
-    justifyContent: Justify;
-    alignItems: Align;
-    alignContent: Align;
-
-
-    // Constructor
-    // ========================================================================
-
-    constructor(
-        flexDirection: FlexDirection = "row",
-        flexWrap: FlexWrap = "nowrap",
-        justifyContent: Justify = "start",
-        alignItems: Align = "stretch",
-        alignContent: Align = "stretch"
-    ) {
-        this.flexDirection = flexDirection;
-        this.flexWrap = flexWrap;
-        this.justifyContent = justifyContent;
-        this.alignItems = alignItems;
-        this.alignContent = alignContent;
-    }
-
-
-    // Methods
-    // ========================================================================
-
-    setDirection(direction: FlexDirection): void {
-        this.flexDirection = direction;
-    }
-
-    setWrap(wrap: FlexWrap): void {
-        this.flexWrap = wrap;
-    }
-
-    setJustifyContent(justify: Justify): void {
-        this.justifyContent = justify;
-    }
-
-    setAlignItems(align: Align): void {
-        this.alignItems = align;
-    }
-
-    setAlignContent(align: Align): void {
-        this.alignContent = align;
-    }
-
-    toString(): string {
-        return `FlexContainer: direction ${this.flexDirection}, wrap ${this.flexWrap}, justify ${this.justifyContent}, align-items ${this.alignItems}, align-content ${this.alignContent}`;
-    }
-}

package/ts/Grid.ts

@@ -1,46 +0,0 @@
-// ============================================================================
-// Import
-// ============================================================================
-
-import Unit from "./Unit";
-
-
-// ============================================================================
-// Classes
-// ============================================================================
-
-export default class Grid {
-
-    // Parameters
-    // ========================================================================
-
-    columns: number;
-    gutter: Unit;
-    rowHeight: Unit;
-
-    // Constructor
-    // ========================================================================
-
-    constructor(
-        columns: number,
-        gutter: Unit,
-        rowHeight: Unit
-    ) {
-        this.columns = columns;
-        this.gutter = gutter;
-        this.rowHeight = rowHeight;
-    }
-
-    // Methods
-    // ========================================================================
-
-    getColumnWidth(containerWidth: Unit): Unit {
-        const totalGutterWidth = this.gutter.value * (this.columns - 1);
-        const columnWidth = (containerWidth.value - totalGutterWidth) / this.columns;
-        return new Unit(columnWidth, containerWidth.unit);
-    }
-
-    toString(): string {
-        return `Grid: ${this.columns} columns, gutter ${this.gutter.toString()}, row height ${this.rowHeight.toString()}`;
-    }
-}

package/ts/GridContainer.ts

@@ -1,59 +0,0 @@
-// ============================================================================
-// Import
-// ============================================================================
-
-import Unit from "./Unit";
-
-
-// ============================================================================
-// Classes
-// ============================================================================
-
-export default class GridContainer {
-
-    // Parameters
-    // ========================================================================
-
-    rows: number;
-    columns: number;
-    rowGap: Unit;
-    columnGap: Unit;
-
-    // Constructor
-    // ========================================================================
-
-    constructor(
-        rows: number,
-        columns: number,
-        rowGap: Unit,
-        columnGap: Unit
-    ) {
-        this.rows = rows;
-        this.columns = columns;
-        this.rowGap = rowGap;
-        this.columnGap = columnGap;
-    }
-
-    // Methods
-    // ========================================================================
-
-    setRows(rows: number): void {
-        this.rows = rows;
-    }
-
-    setColumns(columns: number): void {
-        this.columns = columns;
-    }
-
-    setRowGap(rowGap: Unit): void {
-        this.rowGap = rowGap;
-    }
-
-    setColumnGap(columnGap: Unit): void {
-        this.columnGap = columnGap;
-    }
-
-    toString(): string {
-        return `GridContainer: ${this.rows} rows, ${this.columns} columns, row-gap ${this.rowGap.toString()}, column-gap ${this.columnGap.toString()}`;
-    }
-}