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:
@@ -1400,6 +1400,41 @@ const Tutorial = {
|
||||
// Bubble konfigurieren und anzeigen
|
||||
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
|
||||
if (step.onEnter) {
|
||||
step.onEnter();
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren