Modal braucht Zeit fuer CSS-Transition. Erste Positionierung war falsch
weil getBoundingClientRect() waehrend Animation falsche Werte liefert.
Jetzt wird nach 450ms nochmal komplett repositioniert inkl. Clamp + Arrow.
_enterStep schliesst alle offenen Modals wenn der neue Step kein
Modal-Step ist. Verhindert Blur auf Seitenleiste und haengengebliebene
Modals bei Rueckwaerts-Navigation (z.B. Schritt 4 -> 2).
CSS: --arrow-top Variable fuer left/right Pfeile
JS: Berechnet Pfeil-Position relativ zum bubbleTarget nach Clamping
Pfeil bleibt immer zwischen 18px vom Rand der Bubble
Bubble wird auf verfuegbaren Platz (min 260px) verkleinert und immer
auf der Seite mit mehr Platz positioniert. Kein top-Fallback mehr der
die Bubble aus dem Bildschirm schiebt.
scrollIntoView scrollt den naechsten scrollbaren Container (modal-body).
Zusaetzlich wird scrollTop direkt gesetzt als Fallback via offsetTop-Berechnung.
- Step 3 onExit schliesst Modal nicht mehr wenn naechster Step Modal ist
- Bubble-Positionierung fuer Modal-Steps: prueft Platz links/rechts vom
Modal statt vom Formularfeld, faellt auf top zurueck bei schmalen Screens
_enterStep scrollt jetzt bei Modal-Steps zum bubbleTarget bevor
die Bubble positioniert wird. Damit ist das Formularfeld immer
zentriert sichtbar wenn der Schritt erscheint.
- _scrollModalTo scrollt Element in die Mitte des sichtbaren Bereichs
- _scrollModalAndReposition repositioniert Bubble nach Scroll
- Alle Modal-Simulationen nutzen zentriertes Scrolling
- Schritt 4+5 nutzen jetzt _scrollModalTo statt manuelles scrollTo
- Neuer Router /api/tutorial mit GET/PUT/DELETE für Fortschritt pro User
- DB-Migration: tutorial_step + tutorial_completed in users-Tabelle
- Resume-Dialog bei abgebrochenem Tutorial (Fortsetzen/Neu starten)
- Chat-Hinweis passt sich dem Tutorial-Status dynamisch an
- API-Methoden: getTutorialState, saveTutorialState, resetTutorialState
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Stellt das Original-Verhalten wieder her: Der Typ wird aus den
Auto-Discovery-Daten gelesen, nicht aus dem versteckten Select-Element.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Das readonly Input zeigt dem Nutzer den erkannten Quellentyp (RSS-Feed,
Web-Quelle, Telegram) nach der Auto-Erkennung an. Der hidden Select
dient weiterhin als Datenspeicher für saveSource().
Telegram-Pfad setzt jetzt ebenfalls src-type-display.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
discoverSource() und editSource() referenzierten ein nicht existierendes
DOM-Element src-type-display, was beim Hinzufügen/Bearbeiten von Quellen
den Fehler "Cannot set properties of null (setting value)" auslöste.
src-type-select wird bereits korrekt mit Null-Check gesetzt.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Problem: Wenn der Nutzer waehrend einer laufenden Demo auf Weiter klickt,
lief die async Demo im Hintergrund weiter und setzte Highlights auf
Elemente des alten Steps (z.B. Beschreibungsfeld blieb umrahmt).
Fix:
- _exitStep setzt _demoRunning = false (bricht laufende Demo ab)
- _highlightSub prueft _isActive bevor es Highlights setzt
- _highlightSub schreibt nicht mehr in _cleanupFns (vereinfacht)
- _clearSubHighlights entfernt zuverlaessig alle Highlights per
querySelectorAll
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Die Methode wurde bei einem frueheren Cleanup versehentlich entfernt.
Sie wird von allen 12 Demo-Methoden und _runDemo aufgerufen um nach
Demo-Ende das Pulsieren zu stoppen und Zurueck/Weiter-Buttons einzublenden.
Ohne diese Methode blieb "Demo laeuft..." fuer immer stehen.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
_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>
