@vanduo-oss/framework 1.3.5 → 1.3.7

package/js/components/expanding-cards.js

@@ -0,0 +1,136 @@
+/**
+ * Vanduo Framework — Expanding flex cards
+ * Click / Enter / Space / Arrow keys to change the active card.
+ *
+ * Usage:
+ *   <div class="vd-expanding-cards" data-vd-expanding-cards>
+ *   Use data-vd-expanding-cards="manual" to skip auto-init.
+ */
+
+(function () {
+  'use strict';
+
+  const ExpandingCards = {
+    instances: new Map(),
+
+    init: function () {
+      document.querySelectorAll('.vd-expanding-cards').forEach(function (el) {
+        if (el.getAttribute('data-vd-expanding-cards') === 'manual') return;
+        if (ExpandingCards.instances.has(el)) return;
+        ExpandingCards.initContainer(el);
+      });
+    },
+
+    initContainer: function (container) {
+      const cleanup = [];
+
+      const getCards = function () {
+        return Array.prototype.slice.call(container.querySelectorAll('.vd-expanding-card'));
+      };
+
+      const setActive = function (card) {
+        const cards = getCards();
+        if (!card || cards.indexOf(card) === -1) return;
+        cards.forEach(function (c) {
+          c.classList.toggle('is-active', c === card);
+        });
+        card.focus({ preventScroll: true });
+      };
+
+      const onClick = function (e) {
+        const t = e.target;
+        const card = t.closest ? t.closest('.vd-expanding-card') : null;
+        if (!card || !container.contains(card)) return;
+        setActive(card);
+      };
+
+      const onKeydown = function (e) {
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End') {
+          return;
+        }
+        const cards = getCards().filter(function (c) {
+          return c.offsetParent !== null || c.getClientRects().length > 0;
+        });
+        if (!cards.length) return;
+        const activeEl = document.activeElement;
+        let idx = cards.indexOf(activeEl);
+        if (idx < 0) {
+          idx = cards.findIndex(function (c) {
+            return c.classList.contains('is-active');
+          });
+        }
+        if (idx < 0) idx = 0;
+
+        if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          setActive(cards[Math.max(0, idx - 1)]);
+        } else if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          setActive(cards[Math.min(cards.length - 1, idx + 1)]);
+        } else if (e.key === 'Home') {
+          e.preventDefault();
+          setActive(cards[0]);
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          setActive(cards[cards.length - 1]);
+        }
+      };
+
+      container.addEventListener('click', onClick);
+      cleanup.push(function () {
+        container.removeEventListener('click', onClick);
+      });
+
+      container.addEventListener('keydown', onKeydown);
+      cleanup.push(function () {
+        container.removeEventListener('keydown', onKeydown);
+      });
+
+      getCards().forEach(function (card) {
+        if (!card.hasAttribute('tabindex')) {
+          card.setAttribute('tabindex', '0');
+        }
+        card.setAttribute('role', 'button');
+        if (!card.hasAttribute('aria-pressed')) {
+          card.setAttribute('aria-pressed', card.classList.contains('is-active') ? 'true' : 'false');
+        }
+      });
+
+      const syncAria = function () {
+        getCards().forEach(function (card) {
+          card.setAttribute('aria-pressed', card.classList.contains('is-active') ? 'true' : 'false');
+        });
+      };
+
+      const mo = new MutationObserver(syncAria);
+      mo.observe(container, { attributes: true, subtree: true, attributeFilter: ['class'] });
+      cleanup.push(function () {
+        mo.disconnect();
+      });
+      syncAria();
+
+      ExpandingCards.instances.set(container, { cleanup: cleanup });
+    },
+
+    destroy: function (container) {
+      const inst = this.instances.get(container);
+      if (!inst) return;
+      inst.cleanup.forEach(function (fn) {
+        fn();
+      });
+      this.instances.delete(container);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach(function (_, el) {
+        ExpandingCards.destroy(el);
+      });
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('expandingCards', ExpandingCards);
+  }
+
+  window.VanduoExpandingCards = ExpandingCards;
+})();

package/js/components/morph.js

@@ -120,9 +120,6 @@
           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);
     }

package/js/components/timeline.js

@@ -0,0 +1,226 @@
+/**
+ * Vanduo Framework — Timeline animated reveal
+ * Opt-in: add `.vd-timeline-animated` to a `.vd-timeline` container.
+ * Uses IntersectionObserver to add `.is-revealed` per item with staggered delays.
+ * Optional: `.vd-timeline-playback` with `[data-vd-timeline-prev|next|play|pause]` for stepped control.
+ */
+
+(function () {
+  'use strict';
+
+  const STAGGER_MS = 140;
+  const MAX_STAGGER_INDEX = 7;
+  const PLAY_INTERVAL_MS = 800;
+
+  function countRevealedPrefix(items) {
+    let count = 0;
+    for (let i = 0; i < items.length; i++) {
+      if (!items[i].classList.contains('is-revealed')) break;
+      count++;
+    }
+    return count;
+  }
+
+  function findPlaybackControls(container) {
+    return container.parentElement || document.body;
+  }
+
+  function initPlayback(container, items, cleanup) {
+    items.forEach(function (item) {
+      item.classList.remove('is-revealed');
+    });
+
+    const scope = findPlaybackControls(container);
+    const prevBtn = scope.querySelector('[data-vd-timeline-prev]');
+    const nextBtn = scope.querySelector('[data-vd-timeline-next]');
+    const playBtn = scope.querySelector('[data-vd-timeline-play]');
+    const pauseBtn = scope.querySelector('[data-vd-timeline-pause]');
+
+    let playTimer = null;
+
+    function updateNavButtons() {
+      const k = countRevealedPrefix(items);
+      const n = items.length;
+      if (prevBtn) {
+        const atStart = k === 0;
+        prevBtn.disabled = atStart;
+        prevBtn.setAttribute('aria-disabled', atStart ? 'true' : 'false');
+      }
+      if (nextBtn) {
+        const atEnd = k >= n;
+        nextBtn.disabled = atEnd;
+        nextBtn.setAttribute('aria-disabled', atEnd ? 'true' : 'false');
+      }
+      if (playBtn) {
+        playBtn.setAttribute('aria-pressed', playTimer ? 'true' : 'false');
+      }
+      if (pauseBtn) {
+        pauseBtn.disabled = !playTimer;
+      }
+    }
+
+    function stepNext() {
+      const k = countRevealedPrefix(items);
+      if (k < items.length) {
+        items[k].classList.add('is-revealed');
+      }
+      updateNavButtons();
+    }
+
+    function stepPrev() {
+      const k = countRevealedPrefix(items);
+      if (k > 0) {
+        items[k - 1].classList.remove('is-revealed');
+      }
+      updateNavButtons();
+    }
+
+    function play() {
+      if (playTimer) return;
+      playTimer = setInterval(function () {
+        if (countRevealedPrefix(items) >= items.length) {
+          pause();
+          return;
+        }
+        stepNext();
+      }, PLAY_INTERVAL_MS);
+      updateNavButtons();
+    }
+
+    function pause() {
+      if (playTimer) {
+        clearInterval(playTimer);
+        playTimer = null;
+      }
+      updateNavButtons();
+    }
+
+    function addClick(el, fn) {
+      if (!el) return;
+      const handler = function (e) {
+        e.preventDefault();
+        fn();
+      };
+      el.addEventListener('click', handler);
+      cleanup.push(function () {
+        el.removeEventListener('click', handler);
+      });
+    }
+
+    addClick(prevBtn, stepPrev);
+    addClick(nextBtn, stepNext);
+    addClick(playBtn, play);
+    addClick(pauseBtn, pause);
+
+    cleanup.push(function () {
+      pause();
+    });
+
+    updateNavButtons();
+
+    return {
+      stepNext: stepNext,
+      stepPrev: stepPrev,
+      play: play,
+      pause: pause
+    };
+  }
+
+  const Timeline = {
+    instances: new Map(),
+
+    init: function () {
+      document.querySelectorAll('.vd-timeline.vd-timeline-animated').forEach(function (el) {
+        if (Timeline.instances.has(el)) return;
+        Timeline.initInstance(el);
+      });
+    },
+
+    reinit: function () {
+      Timeline.destroyAll();
+      Timeline.init();
+    },
+
+    initInstance: function (container) {
+      const cleanup = [];
+      const items = Array.prototype.filter.call(container.children, function (child) {
+        return child.classList && child.classList.contains('vd-timeline-item');
+      });
+
+      items.forEach(function (item, i) {
+        const idx = Math.min(i, MAX_STAGGER_INDEX);
+        item.style.setProperty('--vd-timeline-reveal-delay', (idx * STAGGER_MS) + 'ms');
+      });
+
+      const reducedMotion = typeof window.matchMedia === 'function'
+        && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+      if (reducedMotion) {
+        items.forEach(function (item) {
+          item.classList.add('is-revealed');
+        });
+        Timeline.instances.set(container, { cleanup: cleanup });
+        return;
+      }
+
+      const playback = container.classList && container.classList.contains('vd-timeline-playback');
+
+      if (playback) {
+        const playbackApi = initPlayback(container, items, cleanup);
+        Timeline.instances.set(container, { cleanup: cleanup, playback: playbackApi });
+        return;
+      }
+
+      if (typeof IntersectionObserver === 'undefined') {
+        items.forEach(function (item) {
+          item.classList.add('is-revealed');
+        });
+        Timeline.instances.set(container, { cleanup: cleanup });
+        return;
+      }
+
+      const observer = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add('is-revealed');
+          observer.unobserve(entry.target);
+        });
+      }, {
+        root: null,
+        rootMargin: '0px 0px -10% 0px',
+        threshold: 0.15
+      });
+
+      items.forEach(function (item) {
+        observer.observe(item);
+      });
+
+      cleanup.push(function () {
+        observer.disconnect();
+      });
+
+      Timeline.instances.set(container, { cleanup: cleanup });
+    },
+
+    destroy: function (container) {
+      const inst = this.instances.get(container);
+      if (!inst) return;
+      inst.cleanup.forEach(function (fn) {
+        fn();
+      });
+      this.instances.delete(container);
+    },
+
+    destroyAll: function () {
+      this.instances.forEach(function (_, el) {
+        Timeline.destroy(el);
+      });
+    }
+  };
+
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('timeline', Timeline);
+  }
+
+  window.VanduoTimeline = Timeline;
+})();

package/js/index.js

@@ -50,6 +50,8 @@ import './components/lazy-load.js';
 // Effects (glass scroll activation, water morph)
 import './components/glass.js';
 import './components/morph.js';
+import './components/expanding-cards.js';
+import './components/timeline.js';
 
 // Phase 10 (v1.2.7) components
 import './components/flow.js';

package/package.json

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