Tutorial: Bubble-Reposition nach Modal-Transition (450ms Delay)

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.
Dieser Commit ist enthalten in:
Claude Dev
2026-03-23 22:37:28 +01:00
Ursprung ea96947d0f
Commit b712dd5572

Datei anzeigen

@@ -1400,6 +1400,41 @@ const Tutorial = {
// Bubble konfigurieren und anzeigen // Bubble konfigurieren und anzeigen
this._showBubble(step, i); this._showBubble(step, i);
// Modal-Steps: Bubble nach Modal-Transition nochmal neu positionieren
if (isModalStep) {
var self2 = this;
setTimeout(function() {
if (self2._isActive && self2._currentStep === i) {
self2._positionBubble(step);
// Clamp + Arrow nochmal ausfuehren
requestAnimationFrame(function() {
var bubble = self2._els.bubble;
var bRect = bubble.getBoundingClientRect();
var vH = window.innerHeight;
var cTop = parseFloat(bubble.style.top) || 0;
if (bRect.bottom > vH - 8) {
bubble.style.top = (cTop - (bRect.bottom - vH + 16)) + 'px';
}
bRect = bubble.getBoundingClientRect();
if (bRect.top < 8) {
bubble.style.top = (parseFloat(bubble.style.top) + (8 - bRect.top)) + 'px';
}
var at = step.bubbleTarget || step.target;
if (at && (bubble.className.indexOf('pos-left') !== -1 || bubble.className.indexOf('pos-right') !== -1)) {
var te = document.querySelector(at);
if (te) {
bRect = bubble.getBoundingClientRect();
var tR = te.getBoundingClientRect();
var ay = (tR.top + tR.height / 2) - bRect.top;
ay = Math.max(18, Math.min(ay, bRect.height - 18));
bubble.style.setProperty('--arrow-top', ay + 'px');
}
}
});
}
}, 450);
}
// onEnter-Callback // onEnter-Callback
if (step.onEnter) { if (step.onEnter) {
step.onEnter(); step.onEnter();