@gemboss/gem-framework 0.5.2 → 0.9.0

package/dist/gem-runtime.js

@@ -549,35 +549,46 @@
   registerPlugin('promo-popup', ({ api }) => {
     const popups = document.querySelectorAll('[data-gem-promo-popup]');
     let bound = 0;
+    const shown = [];
     const storagePrefix = 'gem:promo-popup-dismissed:';
     const now = () => Date.now ? Date.now() : new Date().getTime();
-    const readDismissedUntil = (key) => {
-      try { return Number(target.localStorage && target.localStorage.getItem(storagePrefix + key) || '0'); }
+    const readDismissal = (key) => {
+      try { const value = Number(target.localStorage && target.localStorage.getItem(storagePrefix + key) || '0'); return Number.isFinite(value) && value > 0 ? value : 0; }
       catch { return 0; }
     };
-    const writeDismissedUntil = (key, timestamp) => {
+    const writeDismissedAt = (key, timestamp) => {
       try { if (target.localStorage) target.localStorage.setItem(storagePrefix + key, String(timestamp)); }
       catch { /* storage can be unavailable in private contexts */ }
     };
+    const isDismissed = (key, windowMs) => {
+      const stored = readDismissal(key);
+      if (!stored) return false;
+      const at = now();
+      if (stored > at) { if (stored - windowMs <= at) writeDismissedAt(key, stored - windowMs); return true; }
+      return at - stored < windowMs;
+    };
     popups.forEach((popup, index) => {
       if (!mark(popup, 'promo-popup')) return;
       const key = popup.id || popup.getAttribute && popup.getAttribute('data-gem-section-library-id') || String(index);
       const delaySeconds = Number(popup.getAttribute && (popup.getAttribute('data-gem-promo-delay') || '0'));
       const frequencyDays = Number(popup.getAttribute && (popup.getAttribute('data-gem-promo-frequency-days') || '7'));
+      const windowMs = (Number.isFinite(frequencyDays) ? Math.max(1, frequencyDays) : 7) * 86400000;
       const dialog = popup.querySelector && popup.querySelector('[data-gem-promo-popup-dialog]');
       const overlay = popup.querySelector && popup.querySelector('[data-gem-promo-popup-overlay]');
-      const open = (reason = 'timer') => {
-        if (readDismissedUntil(key) > now()) { popup.dataset.gemPromoPopupState = 'dismissed'; return false; }
+      const show = (reason) => {
         popup.hidden = false;
         if (dialog) dialog.hidden = false;
         if (overlay) overlay.hidden = false;
         popup.dataset.gemPromoPopupState = 'open';
         api.emit('gem:promo-popup:open', { source: 'gem-runtime', id: popup.id || undefined, reason });
+      };
+      const open = (reason = 'timer') => {
+        if (isDismissed(key, windowMs)) { popup.dataset.gemPromoPopupState = 'dismissed'; return false; }
+        show(reason);
         return true;
       };
       const close = (reason = 'dismiss') => {
-        const days = Number.isFinite(frequencyDays) ? Math.max(1, frequencyDays) : 7;
-        writeDismissedUntil(key, now() + days * 86400000);
+        writeDismissedAt(key, now());
         if (dialog) dialog.hidden = true;
         if (overlay) overlay.hidden = true;
         popup.dataset.gemPromoPopupState = 'closed';
@@ -590,10 +601,50 @@
       if (canListen(overlay)) overlay.addEventListener('click', () => close('overlay'));
       popup.dataset.gemPromoPopupState = 'ready';
       const delay = Math.max(0, Number.isFinite(delaySeconds) ? delaySeconds : 0) * 1000;
-      target.setTimeout ? target.setTimeout(() => open('timer'), delay) : open('timer');
+      const trigger = String(popup.getAttribute && popup.getAttribute('data-gem-promo-trigger') || 'delay').trim();
+      const rawPercent = String(popup.getAttribute && popup.getAttribute('data-gem-promo-scroll-percent') || '').trim();
+      const parsedPercent = rawPercent ? Number(rawPercent) : NaN;
+      const scrollPercent = Number.isFinite(parsedPercent) ? Math.min(90, Math.max(10, parsedPercent)) : 50;
+      const canHover = () => { try { return Boolean(target.matchMedia && target.matchMedia('(hover: hover) and (pointer: fine)').matches); } catch { return false; } };
+      const armed = trigger === 'exit_intent' && canHover() ? 'exit_intent' : trigger === 'scroll' ? 'scroll' : 'delay';
+      if (popup.setAttribute) popup.setAttribute('data-gem-promo-armed', armed);
+      let opened = false;
+      const disarm = [];
+      const openOnce = (reason) => { if (opened) return; opened = true; disarm.splice(0).forEach((off) => off()); open(reason); };
+      shown.push((reason) => { opened = true; disarm.splice(0).forEach((off) => off()); if (popup.dataset.gemPromoPopupState !== 'open') show(reason); });
+      if (armed === 'exit_intent') {
+        const onMouseOut = (event) => { if (event.relatedTarget || event.clientY >= 10) return; openOnce('exit_intent'); };
+        if (canListen(document)) {
+          document.addEventListener('mouseout', onMouseOut);
+          disarm.push(() => document.removeEventListener && document.removeEventListener('mouseout', onMouseOut));
+        }
+      } else if (armed === 'scroll') {
+        const room = () => Number(document.documentElement && document.documentElement.scrollHeight || 0) - Number(target.innerHeight || 0);
+        const check = () => { const r = room(); if (r > 0 && (Number(target.scrollY || target.pageYOffset || 0) / r) * 100 >= scrollPercent) openOnce('scroll'); };
+        let ticking = false;
+        const onScroll = () => {
+          if (ticking) return;
+          ticking = true;
+          const frame = target.requestAnimationFrame ? (fn) => target.requestAnimationFrame(fn) : (fn) => target.setTimeout && target.setTimeout(fn, 16);
+          frame(() => { ticking = false; check(); });
+        };
+        if (canListen(target)) {
+          target.addEventListener('scroll', onScroll, { passive: true });
+          target.addEventListener('resize', check);
+          target.addEventListener('load', check);
+          disarm.push(() => { if (!target.removeEventListener) return; target.removeEventListener('scroll', onScroll); target.removeEventListener('resize', check); target.removeEventListener('load', check); });
+        }
+        if (target.setTimeout) {
+          const fallback = target.setTimeout(() => { if (room() <= 0) openOnce('timer'); }, delay);
+          disarm.push(() => target.clearTimeout && target.clearTimeout(fallback));
+        }
+        check();
+      } else {
+        target.setTimeout ? target.setTimeout(() => openOnce('timer'), delay) : openOnce('timer');
+      }
       bound += 1;
     });
-    api.promoPopup = { open: () => popups.forEach((popup) => { popup.hidden = false; popup.dataset.gemPromoPopupState = 'open'; }) };
+    api.promoPopup = { open: () => shown.forEach((show) => show('api')) };
     api.emit('gem:promo-popup:ready', { source: 'gem-runtime', count: bound });
   });
   registerPlugin('sticky-atc', ({ api }) => {
@@ -607,7 +658,10 @@
     };
     bars.forEach((bar) => {
       if (!mark(bar, 'sticky-atc')) return;
-      const threshold = Number(bar.getAttribute && (bar.getAttribute('data-gem-sticky-threshold') || '240'));
+      const cssThreshold = () => { try { return target.getComputedStyle ? Number(target.getComputedStyle(bar).getPropertyValue('--gem-sticky-atc-threshold')) : 0; } catch { return 0; } };
+      const threshold = bar.hasAttribute && bar.hasAttribute('data-gem-sticky-atc-threshold')
+        ? (Number(bar.getAttribute('data-gem-sticky-atc-threshold')) || cssThreshold() || 360)
+        : Number(bar.getAttribute && (bar.getAttribute('data-gem-sticky-threshold') || '240'));
       const update = () => {
         const scrollY = Number(target.scrollY || target.pageYOffset || 0);
         setState(bar, scrollY >= threshold ? 'visible' : 'hidden');
@@ -662,12 +716,86 @@
       const targetNode = timer.querySelector && timer.querySelector(selector);
       if (targetNode) targetNode.textContent = pad(value);
     };
+    const clockText = (s) => {
+      const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
+      return (h ? h + ':' + pad(m) : String(m)) + ':' + pad(sec);
+    };
+    const bindDuration = (timer, total) => {
+      const scope = (timer.closest && timer.closest('[data-gem-section-id]')) || document;
+      const mode = String(timer.getAttribute('data-gem-countdown-start') || 'mount').trim() || 'mount';
+      const stopEvent = String(timer.getAttribute('data-gem-countdown-stop') || '').trim();
+      let left = total * 1000;
+      let endAt = 0;
+      let handle = null;
+      let state = 'idle';
+      let started = false;
+      let observer = null;
+      const release = () => { if (observer) { observer.disconnect(); observer = null; } };
+      const detail = () => ({ source: 'gem-runtime', id: timer.id || undefined, mode: 'duration', duration: total, remainingSeconds: Math.max(0, Math.ceil(left / 1000)) });
+      const render = () => {
+        const s = Math.max(0, Math.ceil(left / 1000));
+        timer.dataset.gemCountdownState = state;
+        timer.dataset.gemCountdownRemainingSeconds = String(s);
+        write(timer, '[data-gem-countdown-days]', Math.floor(s / 86400));
+        write(timer, '[data-gem-countdown-hours]', Math.floor((s % 86400) / 3600));
+        write(timer, '[data-gem-countdown-minutes]', Math.floor((s % 3600) / 60));
+        write(timer, '[data-gem-countdown-seconds]', s % 60);
+        const readout = timer.querySelector && timer.querySelector('[data-gem-countdown-clock]');
+        if (readout) readout.textContent = clockText(s);
+      };
+      const halt = () => { if (handle !== null && target.clearInterval) target.clearInterval(handle); handle = null; };
+      const finish = () => {
+        halt();
+        release();
+        left = 0;
+        state = 'complete';
+        render();
+        timer.setAttribute('data-gem-countdown-ended', 'true');
+        if (timer.dispatchEvent && timer.isConnected !== false) {
+          timer.dispatchEvent(new CustomEvent('gem:countdown:complete', { bubbles: true, detail: detail() }));
+          for (const callback of api.listeners['gem:countdown:complete'] || []) callback(detail());
+        } else api.emit('gem:countdown:complete', detail());
+      };
+      const tick = () => { left = endAt - Date.now(); if (left <= 0) finish(); else render(); };
+      const run = () => {
+        if (state === 'running' || state === 'complete' || state === 'stopped') return;
+        state = 'running';
+        endAt = Date.now() + left;
+        render();
+        if (target.setInterval) handle = target.setInterval(tick, 250);
+        if (!started) { started = true; api.emit('gem:countdown:start', detail()); }
+      };
+      const pause = (next) => {
+        if (state === 'running') { left = Math.max(0, endAt - Date.now()); halt(); }
+        if (state === 'complete' || state === 'stopped') return;
+        state = next;
+        if (next === 'stopped') release();
+        render();
+      };
+      render();
+      if (stopEvent && canListen(scope)) scope.addEventListener(stopEvent, () => pause('stopped'));
+      if (mode === 'visible' && target.IntersectionObserver) {
+        observer = new target.IntersectionObserver((entries) => {
+          for (const entry of entries) entry.isIntersecting ? run() : pause('paused');
+        });
+        observer.observe(timer);
+      } else if (mode === 'mount' || mode === 'visible') run();
+      else if (canListen(scope)) scope.addEventListener(mode, run);
+    };
     timers.forEach((timer) => {
       if (!mark(timer, 'countdown')) return;
+      const duration = Number(timer.getAttribute && timer.getAttribute('data-gem-countdown-duration'));
+      if (Number.isFinite(duration) && duration > 0) {
+        bindDuration(timer, Math.min(Math.round(duration), 86400));
+        bound += 1;
+        return;
+      }
       const targetTime = countdownEnd(timer.getAttribute && timer.getAttribute('data-gem-countdown-target'));
       const section = timer.closest ? timer.closest('[data-gem-section-id]') : null;
       const band = section && section.hasAttribute && section.hasAttribute('data-gem-countdown-end') ? section : null;
+      const hasSecondsCell = Boolean(timer.querySelector && (timer.querySelector('[data-gem-cd-secs]') || timer.querySelector('[data-gem-countdown-seconds]')));
       let handle = null;
+      let announced = '';
       const update = () => {
         if (!Number.isFinite(targetTime)) {
           timer.dataset.gemCountdownState = 'invalid';
@@ -678,19 +806,37 @@
         const days = Math.floor(remainingSeconds / 86400);
         const hours = Math.floor((remainingSeconds % 86400) / 3600);
         const minutes = Math.floor((remainingSeconds % 3600) / 60);
+        const seconds = remainingSeconds % 60;
         timer.dataset.gemCountdownState = ms > 0 ? 'running' : 'complete';
         timer.dataset.gemCountdownRemainingSeconds = String(remainingSeconds);
         write(timer, '[data-gem-countdown-days]', days);
         write(timer, '[data-gem-countdown-hours]', hours);
         write(timer, '[data-gem-countdown-minutes]', minutes);
+        write(timer, '[data-gem-countdown-seconds]', seconds);
+        write(timer, '[data-gem-cd-days]', days);
+        write(timer, '[data-gem-cd-hours]', hours);
+        write(timer, '[data-gem-cd-mins]', minutes);
+        write(timer, '[data-gem-cd-secs]', seconds);
         if (ms <= 0) {
           if (band) band.setAttribute('data-gem-countdown-ended', 'true');
+          if (timer.setAttribute && !(timer.hasAttribute && timer.hasAttribute('data-gem-section-id'))) timer.setAttribute('data-gem-countdown-ended', 'true');
           if (handle !== null && target.clearInterval) { target.clearInterval(handle); handle = null; }
         }
-        api.emit(ms > 0 ? 'gem:countdown:start' : 'gem:countdown:complete', { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });
+        const event = ms > 0 ? 'gem:countdown:start' : 'gem:countdown:complete';
+        if (event === announced && (event === 'gem:countdown:complete' || hasSecondsCell)) return;
+        announced = event;
+        api.emit(event, { source: 'gem-runtime', id: timer.id || undefined, remainingSeconds });
+      };
+      const onTheMinute = () => {
+        const ms = targetTime - Date.now();
+        if (!(ms > 0) || !target.setTimeout) return;
+        target.setTimeout(() => { update(); onTheMinute(); }, Math.min((ms % 60000) + 5, ms));
       };
       update();
-      if (target.setInterval && Number.isFinite(targetTime) && targetTime - Date.now() > 0) handle = target.setInterval(update, 60000);
+      if (Number.isFinite(targetTime) && targetTime - Date.now() > 0) {
+        if (!hasSecondsCell) onTheMinute();
+        else if (target.setInterval) handle = target.setInterval(update, 1000);
+      }
       const left = targetTime - Date.now();
       if (target.setTimeout && Number.isFinite(left) && left > 0 && left < 2147483647) target.setTimeout(update, left);
       bound += 1;