Tutorial: Timeline Spotlight-Fix + Karten-Marker pulsieren

Schritt 21: Spotlight+Bubble werden 300ms nach GridStack-Update neu
positioniert. Kein falscher Rahmen mehr auf der Karte.

Schritt 23: Alle Marker pulsieren kurz (scale 1.8x) bevor der Cursor
sie besucht, damit Nutzer sieht was anklickbar ist.
Dieser Commit ist enthalten in:
Claude Dev
2026-03-23 23:08:01 +01:00
Ursprung 073c11431d
Commit 360f6bb872

Datei anzeigen

@@ -927,8 +927,16 @@ const Tutorial = {
LayoutManager._grid.compact();
}
}
// Kachel in den sichtbaren Bereich scrollen
if (tile) tile.scrollIntoView({ behavior: 'smooth', block: 'start' });
// Nach GridStack-Update: Spotlight + Bubble neu positionieren
Tutorial._stepTimeout(function() {
if (tile) tile.scrollIntoView({ behavior: 'smooth', block: 'start' });
var step = Tutorial._steps[Tutorial._currentStep];
if (step && step.id === 'timeline') {
Tutorial._spotlightElement(step.target);
Tutorial._positionBubble(step);
Tutorial._els.bubble.classList.add('visible');
}
}, 300);
Tutorial._runDemo(Tutorial._simulateTimeline);
},
onExit: function() {
@@ -1838,6 +1846,23 @@ const Tutorial = {
if (!mapEl) { this._demoRunning = false; this._enableNavAfterDemo(); return; }
var mapRect = mapEl.getBoundingClientRect();
// Marker kurz pulsieren lassen damit Nutzer sie sieht
this._demoMapMarkers.forEach(function(m) {
var icon = m._icon;
if (icon) {
icon.style.transition = 'transform 0.3s ease';
icon.style.transform = 'scale(1.8)';
}
});
await this._wait(600);
this._demoMapMarkers.forEach(function(m) {
var icon = m._icon;
if (icon) {
icon.style.transform = 'scale(1)';
}
});
await this._wait(400);
// Alle 3 Marker nacheinander besuchen
var names = ['Burchardkai Terminal (Hauptereignisort)', 'Hamburg Innenstadt (Erwähnt)', 'Elbe / Hafengebiet (Kontext)'];
var prevX, prevY;