Versie 0.2.0

client/ui/splash.js

@@ -0,0 +1,97 @@
+// Generated, do not edit. sha256:a433ae61cf1d51dd5a396f13922a2aaa329bfea96e00b35d9456a671a84c5e04
+import { CONFIG } from '../../shared/config.js';
+import { t } from '../i18n/index.js';
+
+const bootT0 = performance.now();
+
+(function splashGateFallback() {
+  const html = document.documentElement;
+  if (html.dataset.splash === 'on') return;
+  try {
+    const KEY = 'splash_last_shown';
+    const d = new Date();
+    const today = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    const force = location.search.includes('splash') || location.hash.includes('splash');
+    if (force || localStorage.getItem(KEY) !== today) {
+      console.warn('[splash] boot-gate.js draaide niet (niet geladen of oude index.html uit de cache?); vangnet in ui/splash.js toont de splash.');
+      localStorage.setItem(KEY, today);
+      html.dataset.splash = 'on';
+    }
+  } catch { html.dataset.splash = 'on'; }
+})();
+
+let typeTimer = 0;
+
+const reducedMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+function fadeOut(splash) {
+  splash.style.transitionDuration = `${CONFIG.SPLASH.FADE_MS}ms`;
+  splash.classList.add('is-done');
+  setTimeout(() => reset(splash), CONFIG.SPLASH.FADE_MS + 50);
+}
+
+function reset(splash) {
+  clearTimeout(typeTimer);
+  delete document.documentElement.dataset.splash;
+  splash.classList.remove('is-done', 'is-manual', 'is-typed');
+  splash.style.transitionDuration = '';
+  const out = splash.querySelector('.splash-quote-text');
+  if (out) out.textContent = '';
+}
+
+export function finishSplash() {
+  const splash = document.getElementById('splash');
+  if (!splash || document.documentElement.dataset.splash !== 'on') return;
+  const wait = Math.max(0, CONFIG.SPLASH.MIN_MS - (performance.now() - bootT0));
+  setTimeout(() => fadeOut(splash), wait);
+}
+
+function showManualSplash() {
+  const splash = document.getElementById('splash');
+  if (!splash || document.documentElement.dataset.splash === 'on') return;
+  splash.classList.add('is-manual');
+  document.documentElement.dataset.splash = 'on';
+
+  const out = splash.querySelector('.splash-quote-text');
+  if (!out) console.warn('[splash] Citaat-element ontbreekt (oude index.html uit de cache?); één keer hard verversen.');
+  const text = t('splash.quote');
+  const done = () => splash.classList.add('is-typed');
+  if (!out) {
+  } else if (reducedMotion()) {
+    out.textContent = text;
+    done();
+  } else {
+    let i = 0;
+    const step = () => {
+      out.textContent = text.slice(0, ++i);
+      if (i >= text.length) return done();
+      const pause = CONFIG.SPLASH.QUOTE_CHAR_MS
+        + (text[i - 1] === ' ' ? CONFIG.SPLASH.QUOTE_WORD_PAUSE_MS : 0);
+      typeTimer = setTimeout(step, pause);
+    };
+    typeTimer = setTimeout(step, CONFIG.SPLASH.QUOTE_START_MS);
+  }
+
+  const ctl = new AbortController();
+  const close = () => { ctl.abort(); fadeOut(splash); };
+  splash.addEventListener('click', close, { signal: ctl.signal });
+  window.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); }, { signal: ctl.signal });
+}
+
+export function splashMarkHtml() {
+  return `<div class="splash-mini" aria-hidden="true">
+    <div class="splash-band">
+      <div class="splash-wing splash-wing--l"><span></span><span></span><span></span></div>
+      <div class="splash-logo"></div>
+      <div class="splash-wing splash-wing--r"><span></span><span></span><span></span></div>
+    </div>
+    <div class="splash-title">${t('app.name')}</div>
+  </div>`;
+}
+
+export function initSplashReplay() {
+  for (const el of document.querySelectorAll('.sidebar-logo, .mobile-topbar-logo')) {
+    el.title = t('splash.logoHint');
+    el.addEventListener('click', showManualSplash);
+  }
+}