_runDemo hat jetzt drei Sicherheitsnetze:
1. .then() - Wenn Demo-Promise resolved aber _demoRunning noch true:
Navigation wird trotzdem freigegeben
2. .catch() - Bei Fehler: Navigation wird sofort freigegeben
3. Fallback-Timeout (30s) - Falls Demo komplett haengt: Automatische
Freigabe nach 30 Sekunden
done()-Funktion ist idempotent (kann mehrfach aufgerufen werden).
Handles auch den Fall dass fn.call() kein Promise zurueckgibt.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Neuer Helfer _runDemo(fn): Fuehrt async Demo-Methoden aus und faengt
alle Fehler ab. Bei Fehler wird _demoRunning zurueckgesetzt und
_enableNavAfterDemo aufgerufen, sodass der Weiter-Button immer erscheint.
Alle 12 Demo-Aufrufe (FormTitleDesc, TypeSwitch, FormSources,
FormVisibility, FormRefresh, FormRetention, FormNotifications,
MapDemo, Drag, Resize, SourcesInfoIcon, SourcesActions) verwenden
jetzt _runDemo statt direktem Aufruf.
Zusaetzlich:
- _cursorToElement gibt sichere Fallback-Koordinaten zurueck wenn
Element nicht sichtbar (getBoundingClientRect width/height = 0)
- _simulateFormTitleDesc wartet 600ms auf Modal-Rendering
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Resize-Demo (Schritt 25):
- Nutzt jetzt CSS transform:scale() statt width/height-Aenderung
- GridStack wird gar nicht beruehrt, Kachel bleibt nach Demo
exakt in Originalgroesse (kein Schrumpfen mehr)
Karte (Schritt 23):
- Verwendet jetzt tile.openstreetmap.de (gleiche Quelle wie echte App)
- Kein Dark/Light-Tile-Unterschied mehr (App nutzt auch nur einen Server)
- Tiles laden jetzt korrekt statt grauem Hintergrund
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Fullscreen-Overlay z-index auf 9998 (ueber Chat-Button 9999 -> Chat
wird mit display:none versteckt waehrend Karten-Step)
- Map-Container bekommt explizite flex:1 + min-height:400px damit
Leaflet die Container-Groesse korrekt erkennt
- Mehrere invalidateSize-Aufrufe (100/300/600ms) vor dem Zoom
- flyTo erst nach 1200ms (Tiles muessen erst laden bei Zoom 5)
- Bubble target auf .map-fullscreen-header statt ganzen Overlay
- fsContainer Styles werden beim Schliessen zurueckgesetzt
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Step 17 (Lagebild): Quellenverweise [1]-[5] jetzt in Gold (var(--accent))
wie echte Links im Original.
Step 20 (Faktencheck-Detail): Scrollt beim Betreten ans Ende der
Faktencheck-Liste um auch unbestaetigte/widerlegte Eintraege zu zeigen,
scrollt dann zurueck nach oben.
Step 22 (Timeline): Komplett ueberarbeitete Demo-Timeline mit echtem
Achsen-basiertem Layout (ht-axis, ht-points, ht-day-markers, ht-detail-panel)
statt einfacher Listenansicht. Entspricht dem Original-Rendering.
Step 23 (Karte): Startet jetzt bei Europa-Zoom (Zoom 5), dann animierter
flyTo auf Hamburg (Zoom 13, 2.5s Dauer). Marker und Legende wie bisher.
Step 25 (Resize): Stellt exakte Originalgroesse nach Demo wieder her,
entfernt CSS-Werte erst nach 100ms damit GridStack uebernehmen kann.
Step 27+30 (Bubble-Position): Post-Render-Check verhindert dass Bubbles
unter den Viewport-Rand rutschen, verschiebt sie automatisch nach oben.
Layout: Tutorial erzwingt Standard-Layout beim Start (DEFAULT_LAYOUT),
stellt das vom Nutzer angepasste Layout nach Tutorial-Ende wieder her.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Step 28 (Quellendetails): Cursor faehrt zum Info-Icon, Tooltip wird
angezeigt und bleibt stehen bis der Nutzer manuell auf Weiter klickt.
So hat der Nutzer Zeit, den Tooltip in Ruhe zu lesen.
Step 29 (Quellen verwalten): Cursor zeigt + Quelle Button und
Ausschliessen Button nacheinander, mit Erklaerungen in der Bubble.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Die Karten-Kachel zeigte nur grau, weil die Leaflet-Map erst im
Vollbild-Step erstellt wird. Jetzt zeigt die Kachel wieder einen
visuellen Platzhalter mit Globus-Icon und erkannten Orten.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Ohne GridStack-Init werden alle Kacheln uebereinander gestapelt,
da die Positionierung fehlt. Jetzt wird LayoutManager.init()
aufgerufen und ein Compact-Layout erzwungen.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Bei Steps die auf ein Modal zeigen (#modal-new, #modal-sources) wird
der Spotlight-Overlay nicht angezeigt. Das Modal hat bereits einen
eigenen Abdunkelungs-Hintergrund, der zusaetzliche Spotlight-Shadow
verdunkelte das Formular unlesbar.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Quellen-Modal-Step (22) ist jetzt eine interaktive Demo:
- Wartet bis Quellen per API geladen sind (max 3s)
- Cursor faehrt zum ersten Info-Icon einer Quelle
- Tooltip wird manuell erzeugt und zeigt Typ, Sprache, Ausrichtung
- Tooltip bleibt 3s sichtbar, dann Cursor weiter zu:
- "+ Quelle" Button wird gehighlightet (neue Quellen hinzufuegen)
- "Ausschliessen" Button der ersten Quelle wird gehighlightet
- Alle Funktionen werden in der Bubble-Beschreibung erklaert
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Karte (Step 17):
- Oeffnet jetzt die Karten-Vollbild-Ansicht mit eigenem Leaflet-Map
- Zoomt auf Hamburg (Zoom 13) mit 3 farbcodierten Markern
- Cursor faehrt zu Markern, oeffnet Popups (Burchardkai, Innenstadt)
- Legende erklaert Kategorien (Hauptereignisort/Erwaehnt/Kontext)
- Funktionen Orte einlesen + Vollbild werden in der Bubble erklaert
- Map wird beim Step-Exit sauber aus dem Fullscreen entfernt
Drag-Demo (Step 18):
- Kachel bewegt sich jetzt visuell per CSS transform mit dem Cursor
- 150px nach rechts, dann zurueck - echte Verschiebe-Animation
- Kachel erhaelt erhoehten z-index waehrend der Animation
Resize-Demo (Step 19):
- Kachel aendert visuell Breite/Hoehe mit dem Cursor
- 80px breiter + 50px hoeher, dann zurueck
- Echte Groessenaenderung sichtbar statt nur Cursor-Bewegung
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Formular-Steps komplett ueberarbeitet (Steps 2-9):
- Step 3: Titel + Beschreibung mit Tipp-Animation
- Step 4: Art der Lage (Live vs Recherche) mit Cursor-Demo + Erklaerung
- Step 5: Quellen (International + Telegram) einzeln gehighlightet + erklaert
- Step 6: Sichtbarkeit (Oeffentlich/Privat) mit Toggle-Demo
- Step 7: Aktualisierung + Intervall, Hinweis auf Creditverbrauch
- Step 8: Aufbewahrung erklaert
- Step 9: E-Mail-Benachrichtigungen (alle 3 Optionen einzeln gehighlightet)
Jedes Feld wird mit Cursor angesteuert, gehighlightet und erklaert.
Modal-Body scrollt automatisch zu den jeweiligen Feldern.
Klick-Blockierung: Waehrend des Tutorials sind alle Dashboard-Elemente
nicht anklickbar (pointer-events:none auf body.tutorial-active).
Nur die Tutorial-Bubble mit Navigation bleibt bedienbar.
Duplikate der alten Methoden entfernt.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Step 3 ist jetzt eine interaktive Demo:
- Cursor faehrt zum Titel-Feld, tippt "Explosion in Hamburger Hafen"
Zeichen fuer Zeichen ein
- Cursor wechselt zur Beschreibung, tippt Kurztext
- Modal scrollt nach unten, Cursor wechselt Aktualisierung auf Auto
- Jedes Feld wird beim Ausfuellen gehighlightet
- _simulateTyping(): Neue Helfer-Methode fuer Zeichen-fuer-Zeichen-Eingabe
- Step 4 (Typ-Wechsel) scrollt Modal zurueck nach oben zum Typ-Feld
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- _stepTimeout() ersetzt setTimeout in onEnter-Callbacks: Wird beim
Step-Wechsel automatisch gecancelt, kein verspaetetes Modal-Oeffnen mehr
- _exitStep() raeumt alle Step-Timer auf bevor onExit laeuft
- stop() schliesst alle Modals (modal-new, modal-sources) und setzt
Formular-Inputs zurueck
- Sources-Button-Step hat jetzt onExit zum Modal-Schliessen
- Behebt: Modal bleibt offen bei Zurueck-Klick, Modal erscheint erneut
nach Zurueck-Navigation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Initialisiert eine echte Leaflet-Map auf Hamburg (Zoom 13) mit 3 Demo-Markern:
Burchardkai Terminal (Hauptereignisort), Hamburg Innenstadt, Elbe/Hafengebiet
- Farbcodierte Marker mit Legende (Hauptereignisort/Erwaehnt/Kontext)
- Marker-Popups mit Artikelanzahl, Hauptmarker oeffnet automatisch
- Karten-Step ist jetzt eine interaktive Demo (disableNav):
Cursor faehrt zum Marker und klickt ihn, dann werden Geoparse-Button
und Vollbild-Button nacheinander gehighlightet
- Theme-abhaengige Tile-Layer (dark/light)
- Map wird beim Tutorial-Ende sauber entfernt
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Spotlight wird auf den sichtbaren Teil des Elements geclippt statt
ueber den Viewport hinauszuragen
- Bubble-Position nutzt sichtbaren Elementbereich statt voller Rect
- Demo-Summary-Text gekuerzt, damit er in die Lagebild-Kachel passt
- Behebt das Problem, dass bei grossen Kacheln (Lagebild, Timeline, Karte)
die Sprechblase ausserhalb des sichtbaren Bereichs landete
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Cursor faehrt zum Select-Feld, wechselt von Live-Monitoring zu Recherche
und zurueck. Nav-Buttons erst nach Demo-Ende aktiv.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
