@vanduo-oss/framework 1.3.3 → 1.3.5

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/morph.js

@@ -0,0 +1,137 @@
+/**
+ * Vanduo Framework - Water Morph Effect Component
+ * Liquid wave content-swap animation on click
+ *
+ * Usage:
+ *   Add .vd-morph or [data-vd-morph] to any element.
+ *   Provide .vd-morph-content.vd-morph-current and .vd-morph-content.vd-morph-next children.
+ *   Wave and shine layers are auto-created if absent.
+ *
+ * JS API:
+ *   VanduoMorph.morph(el)       — trigger morph programmatically (from center)
+ *   VanduoMorph.destroy(el)     — tear down listeners for one element
+ *   VanduoMorph.destroyAll()    — tear down all instances
+ */
+
+(function () {
+  'use strict';
+
+  const MORPH_DURATION_MS = 750;
+
+  const Morph = {
+    instances: new Map(),
+
+    init: function () {
+      const elements = document.querySelectorAll('.vd-morph, [data-vd-morph]');
+      elements.forEach(function (el) {
+        if (Morph.instances.has(el)) return;
+        if (el.getAttribute('data-vd-morph') === 'manual') return;
+        Morph.initInstance(el);
+      });
+    },
+
+    initInstance: function (el) {
+      Morph._ensureLayers(el);
+
+      const cleanup = [];
+      let morphing = false;
+
+      const handleClick = function (e) {
+        if (morphing) return;
+        Morph._runMorph(el, e, function () { morphing = false; });
+        morphing = true;
+      };
+
+      el.addEventListener('click', handleClick);
+      cleanup.push(function () { el.removeEventListener('click', handleClick); });
+
+      this.instances.set(el, { cleanup: cleanup });
+    },
+
+    morph: function (el) {
+      if (!el) return;
+      if (!this.instances.has(el)) this.initInstance(el);
+      this._runMorph(el, null, null);
+    },
+
+    destroy: function (el) {
+      const instance = this.instances.get(el);
+      if (!instance) return;
+      instance.cleanup.forEach(function (fn) { fn(); });
+      this.instances.delete(el);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach(function (_, el) { Morph.destroy(el); });
+    },
+
+    /* ── Internal helpers ── */
+
+    _ensureLayers: function (el) {
+      if (!el.querySelector('.vd-morph-wave')) {
+        const wave = document.createElement('span');
+        wave.className = 'vd-morph-wave';
+        wave.setAttribute('aria-hidden', 'true');
+        el.insertBefore(wave, el.firstChild);
+      }
+      if (!el.querySelector('.vd-morph-shine')) {
+        const shine = document.createElement('span');
+        shine.className = 'vd-morph-shine';
+        shine.setAttribute('aria-hidden', 'true');
+        const waveEl = el.querySelector('.vd-morph-wave');
+        if (waveEl && waveEl.nextSibling) {
+          el.insertBefore(shine, waveEl.nextSibling);
+        } else {
+          el.insertBefore(shine, el.firstChild);
+        }
+      }
+    },
+
+    _runMorph: function (el, pointerEvent, onComplete) {
+      const wave = el.querySelector('.vd-morph-wave');
+      if (wave) {
+        const rect = el.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const px = pointerEvent ? (pointerEvent.clientX || cx) : cx;
+        const py = pointerEvent ? (pointerEvent.clientY || cy) : cy;
+        wave.style.left = (px - rect.left) + 'px';
+        wave.style.top  = (py - rect.top)  + 'px';
+      }
+
+      el.classList.add('is-morphing');
+
+      let duration = MORPH_DURATION_MS;
+      const custom = getComputedStyle(el).getPropertyValue('--morph-duration');
+      if (custom) {
+        const parsed = parseFloat(custom);
+        if (!isNaN(parsed)) duration = parsed * (custom.indexOf('ms') !== -1 ? 1 : 1000);
+      }
+
+      setTimeout(function () {
+        el.classList.remove('is-morphing');
+
+        const current = el.querySelector('.vd-morph-current');
+        const next    = el.querySelector('.vd-morph-next');
+        if (current && next) {
+          current.classList.remove('vd-morph-current');
+          current.classList.add('vd-morph-next');
+          next.classList.remove('vd-morph-next');
+          next.classList.add('vd-morph-current');
+        }
+
+        el.classList.add('morph-done');
+        setTimeout(function () { el.classList.remove('morph-done'); }, 350);
+
+        if (typeof onComplete === 'function') onComplete();
+      }, duration);
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('morph', Morph);
+  }
+
+  window.VanduoMorph = Morph;
+
+})();

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,10 @@ import './components/doc-search.js';
 import './components/draggable.js';
 import './components/lazy-load.js';
 
+// Effects (glass scroll activation, water morph)
+import './components/glass.js';
+import './components/morph.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.5",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",