Tutorial: Modal-Flash beseitigt + Bubble korrekt am Modal positioniert
- 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
Dieser Commit ist enthalten in:
@@ -577,8 +577,13 @@ const Tutorial = {
|
||||
}, 1500);
|
||||
},
|
||||
onExit: function() {
|
||||
// Modal nur schliessen wenn naechster Step kein Modal-Step ist
|
||||
var nextStep = Tutorial._steps[Tutorial._currentStep];
|
||||
var nextIsModal = nextStep && nextStep.target && nextStep.target.indexOf('#modal-') !== -1;
|
||||
if (!nextIsModal) {
|
||||
var overlay = document.getElementById('modal-new');
|
||||
if (overlay) overlay.classList.remove('active');
|
||||
}
|
||||
// Target zuruecksetzen
|
||||
var step = Tutorial._steps[2];
|
||||
if (step && step._origTarget) {
|
||||
@@ -1575,11 +1580,28 @@ const Tutorial = {
|
||||
// Automatische Positionswahl falls nicht genug Platz
|
||||
var pos = step.position || 'bottom';
|
||||
var bubbleHeight = 300;
|
||||
var isModalBubble = step.bubbleTarget && step.target && step.target.indexOf('#modal-') !== -1;
|
||||
|
||||
if (isModalBubble) {
|
||||
// Fuer Modal-Steps: Platz links/rechts vom Modal pruefen
|
||||
var modalEl = document.querySelector(step.target);
|
||||
var mRect = modalEl ? modalEl.getBoundingClientRect() : rect;
|
||||
var spaceLeft = mRect.left;
|
||||
var spaceRight = vw - mRect.right;
|
||||
if (spaceRight >= bw + gap) {
|
||||
pos = 'right';
|
||||
} else if (spaceLeft >= bw + gap) {
|
||||
pos = 'left';
|
||||
} else {
|
||||
// Kein Platz links/rechts: Bubble ueber dem Feld im Modal platzieren
|
||||
pos = 'top';
|
||||
}
|
||||
} else {
|
||||
if (pos === 'bottom' && (visBottom + gap + bubbleHeight > vh)) pos = 'top';
|
||||
if (pos === 'top' && (visTop - gap - bubbleHeight < 0)) pos = 'bottom';
|
||||
if (pos === 'right' && (visRight + gap + bw > vw)) pos = 'left';
|
||||
if (pos === 'left' && (visLeft - gap - bw < 0)) pos = 'right';
|
||||
}
|
||||
|
||||
bubble.className = 'tutorial-bubble visible tutorial-pos-' + pos;
|
||||
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren