Webklar-Kundenbereich/public/neu/startbild.js

/* Kundenansicht neu: Startbild der installierten App. Beim ersten Öffnen je App-Start (sessionStorage) deckt eine weiße
   Fläche die Seite ab, darauf spielt das Glas-Logo (glas-logo.js); danach blendet die Fläche weich aus. Nur in der
   installierten App (display-mode standalone, iPhone navigator.standalone), nie im Browser.
   Klassisches Skript im <head> von dashboard.html und der Anmeldung: es läuft vor dem ersten Bild, damit die Seite nie
   kurz aufblitzt. Ein Tipp auf die Fläche überspringt das Startbild; hängt etwas, blendet es spätestens nach SICHERHEIT_MS aus. */
;(function () {
  var SCHLUESSEL = 'kn-startbild'
  var TEMPO = 1.25 // etwas schneller als auf der Anmeldung: das Startbild soll kurz bleiben
  var HALTEN_MS = 120 // das ruhende Logo bleibt so lange stehen, bevor die Fläche ausblendet
  var AUSBLENDEN_MS = 450
  var SICHERHEIT_MS = 6500
  var html = document.documentElement

  var standalone = false
  try {
    standalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true
  } catch (e) {
    standalone = false
  }
  if (!standalone) return
  // Ohne sessionStorage kein Startbild: sonst käme es bei jedem Seitenwechsel (Anmelden → Übersicht) erneut
  try {
    if (window.sessionStorage.getItem(SCHLUESSEL)) return
    window.sessionStorage.setItem(SCHLUESSEL, '1')
  } catch (e) {
    return
  }

  var stil = document.createElement('style')
  stil.textContent =
    'html[data-kn-startbild="deckt"]::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483646;background:#fff}' +
    '#kn-startbild{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;background:#fff;' +
    'opacity:1;transition:opacity ' + AUSBLENDEN_MS + 'ms ease;-webkit-tap-highlight-color:transparent}' +
    '#kn-startbild.kn-startbild-weg{opacity:0;pointer-events:none}' +
    '#kn-startbild .kn-startbild-logo{width:min(300px,80vw);height:min(300px,80vw)}' +
    '@media (prefers-reduced-motion:reduce){#kn-startbild{transition-duration:200ms}}'
  document.head.appendChild(stil)
  // Bis die Fläche im <body> steht, deckt das Pseudo-Element am <html> die Seite ab ("deckt"); danach liegt die Fläche
  // selbst darüber ("spielt"), damit beim Ausblenden die Seite darunter schon sichtbar ist. Die Anmeldung liest das Attribut: Logo ruht.
  html.setAttribute('data-kn-startbild', 'deckt')
  // Das Modul schon jetzt laden, nicht erst wenn die Seite fertig ist
  var modul = import('/neu/glas-logo.js')
  modul.catch(function () { /* unten behandelt */ })

  var flaeche = null
  var logo = null
  var vorbei = false

  function ausblenden() {
    if (vorbei) return
    vorbei = true
    if (!flaeche) return html.removeAttribute('data-kn-startbild')
    flaeche.classList.add('kn-startbild-weg')
    var weg = function () {
      if (!flaeche) return
      try { if (logo) logo.entfernen() } catch (e) { /* Zeichenfläche schon weg */ }
      flaeche.remove()
      flaeche = null
      html.removeAttribute('data-kn-startbild')
    }
    flaeche.addEventListener('transitionend', weg, { once: true })
    setTimeout(weg, AUSBLENDEN_MS + 150)
  }

  function zeigen() {
    flaeche = document.createElement('div')
    flaeche.id = 'kn-startbild'
    flaeche.setAttribute('aria-hidden', 'true')
    var feld = document.createElement('div')
    feld.className = 'kn-startbild-logo'
    flaeche.appendChild(feld)
    document.body.appendChild(flaeche)
    html.setAttribute('data-kn-startbild', 'spielt')
    flaeche.addEventListener('click', ausblenden)
    setTimeout(ausblenden, SICHERHEIT_MS)
    modul
      .then(function (m) {
        if (vorbei) return
        logo = m.glasLogo(feld, { tempo: TEMPO, einstellungen: { finalScale: 0.9 } })
        return logo.fertig
      })
      .catch(function () { /* ohne Modul: die weiße Fläche blendet einfach aus */ })
      .then(function () { setTimeout(ausblenden, HALTEN_MS) })
  }

  if (document.body) zeigen()
  else document.addEventListener('DOMContentLoaded', zeigen, { once: true })
})()