@vanduo-oss/framework 1.3.3 → 1.3.4

package/js/components/glass.js

@@ -0,0 +1,87 @@
+/**
+ * Vanduo Framework - Glass Scroll Activation
+ * Generic scroll-aware glass activation via IntersectionObserver.
+ *
+ * Usage:
+ *   Add `data-glass-scroll` to any element carrying a `.vd-glass*` class.
+ *   By default the previous sibling is used as the sentinel.
+ *   Point to a custom sentinel via `data-glass-sentinel="<CSS selector>"`.
+ *
+ * Behaviour:
+ *   - Adds `.is-glass-active` when the sentinel leaves the viewport (scrolled past).
+ *   - Removes `.is-glass-active` when the sentinel re-enters the viewport.
+ */
+(function () {
+  'use strict';
+
+  const GlassScroll = {
+    /** @type {Map<Element, IntersectionObserver>} */
+    observers: new Map(),
+
+    init: function () {
+      document.querySelectorAll('[data-glass-scroll]').forEach(el => {
+        if (this.observers.has(el)) return;
+        this.initElement(el);
+      });
+    },
+
+    /**
+     * Wire up a single scroll-activated glass element.
+     * @param {HTMLElement} el
+     */
+    initElement: function (el) {
+      const sentinelSelector = el.dataset.glassSentinel;
+      let sentinel;
+
+      if (sentinelSelector) {
+        sentinel = document.querySelector(sentinelSelector);
+      }
+
+      if (!sentinel) {
+        // Fall back to the previous sibling element
+        sentinel = el.previousElementSibling;
+      }
+
+      if (!sentinel) {
+        // No sentinel available — activate immediately so glass is always shown
+        el.classList.add('is-glass-active');
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach(entry => {
+            // Active when sentinel is NOT intersecting (scrolled past it)
+            el.classList.toggle('is-glass-active', !entry.isIntersecting);
+          });
+        },
+        { threshold: 0, rootMargin: '0px' }
+      );
+
+      observer.observe(sentinel);
+      this.observers.set(el, observer);
+    },
+
+    /**
+     * Disconnect and remove a single element's observer.
+     * @param {HTMLElement} el
+     */
+    destroy: function (el) {
+      const observer = this.observers.get(el);
+      if (observer) {
+        observer.disconnect();
+        this.observers.delete(el);
+      }
+    },
+
+    destroyAll: function () {
+      this.observers.forEach((observer, el) => this.destroy(el));
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('glassScroll', GlassScroll);
+  }
+
+  window.VanduoGlassScroll = GlassScroll;
+})();

package/js/components/navbar.js

@@ -41,6 +41,37 @@
       });
     },
 
+    /**
+     * Initialize scroll-aware glass/transparent behaviour for a navbar.
+     * Adds/removes `.vd-navbar-scrolled` when the page scrolls past a threshold.
+     * Threshold: `data-scroll-threshold` attribute (px) or the navbar's own height.
+     * @param {HTMLElement} navbar - Navbar element
+     * @returns {Function|null} Cleanup function, or null if not applicable
+     */
+    initScrollWatcher: function (navbar) {
+      const isGlass = navbar.classList.contains('vd-navbar-glass');
+      const isTransparent = navbar.classList.contains('vd-navbar-transparent');
+
+      if (!isGlass && !isTransparent) {
+        return null;
+      }
+
+      const getThreshold = () => {
+        const attr = parseInt(navbar.dataset.scrollThreshold, 10);
+        return isNaN(attr) ? (navbar.offsetHeight || 60) : attr;
+      };
+
+      const onScroll = () => {
+        const scrolled = window.scrollY > getThreshold();
+        navbar.classList.toggle('vd-navbar-scrolled', scrolled);
+      };
+
+      onScroll(); // set initial state without waiting for first scroll
+      window.addEventListener('scroll', onScroll, { passive: true });
+
+      return () => window.removeEventListener('scroll', onScroll);
+    },
+
     /**
      * Initialize a single navbar
      * @param {HTMLElement} navbar - Navbar element
@@ -50,13 +81,23 @@
       const menu = navbar.querySelector('.vd-navbar-menu');
       const overlay = navbar.querySelector('.vd-navbar-overlay') || this.createOverlay(navbar);
 
+      // Store cleanup functions for this navbar instance
+      const cleanupFunctions = [];
+
+      // Wire up scroll-aware glass/transparent behaviour regardless of mobile menu
+      const scrollWatcherCleanup = this.initScrollWatcher(navbar);
+      if (scrollWatcherCleanup) {
+        cleanupFunctions.push(scrollWatcherCleanup);
+      }
+
       if (!toggle || !menu) {
+        // Still store the instance so scroll-watcher cleanup is tracked
+        if (cleanupFunctions.length) {
+          this.instances.set(navbar, { toggle: null, menu: null, overlay: null, cleanup: cleanupFunctions });
+        }
         return;
       }
 
-      // Store cleanup functions for this navbar instance
-      const cleanupFunctions = [];
-
       // Toggle menu on button click
       const toggleClickHandler = (e) => {
         e.preventDefault();

package/js/index.js

@@ -47,6 +47,9 @@ import './components/doc-search.js';
 import './components/draggable.js';
 import './components/lazy-load.js';
 
+// Effects (glass scroll activation)
+import './components/glass.js';
+
 // Phase 10 (v1.2.7) components
 import './components/flow.js';
 import './components/bubble.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",