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);
|
}, 1500);
|
||||||
},
|
},
|
||||||
onExit: function() {
|
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');
|
var overlay = document.getElementById('modal-new');
|
||||||
if (overlay) overlay.classList.remove('active');
|
if (overlay) overlay.classList.remove('active');
|
||||||
|
}
|
||||||
// Target zuruecksetzen
|
// Target zuruecksetzen
|
||||||
var step = Tutorial._steps[2];
|
var step = Tutorial._steps[2];
|
||||||
if (step && step._origTarget) {
|
if (step && step._origTarget) {
|
||||||
@@ -1575,11 +1580,28 @@ const Tutorial = {
|
|||||||
// Automatische Positionswahl falls nicht genug Platz
|
// Automatische Positionswahl falls nicht genug Platz
|
||||||
var pos = step.position || 'bottom';
|
var pos = step.position || 'bottom';
|
||||||
var bubbleHeight = 300;
|
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 === 'bottom' && (visBottom + gap + bubbleHeight > vh)) pos = 'top';
|
||||||
if (pos === 'top' && (visTop - gap - bubbleHeight < 0)) pos = 'bottom';
|
if (pos === 'top' && (visTop - gap - bubbleHeight < 0)) pos = 'bottom';
|
||||||
if (pos === 'right' && (visRight + gap + bw > vw)) pos = 'left';
|
if (pos === 'right' && (visRight + gap + bw > vw)) pos = 'left';
|
||||||
if (pos === 'left' && (visLeft - gap - bw < 0)) pos = 'right';
|
if (pos === 'left' && (visLeft - gap - bw < 0)) pos = 'right';
|
||||||
|
}
|
||||||
|
|
||||||
bubble.className = 'tutorial-bubble visible tutorial-pos-' + pos;
|
bubble.className = 'tutorial-bubble visible tutorial-pos-' + pos;
|
||||||
|
|
||||||
|
|||||||
In neuem Issue referenzieren
Einen Benutzer sperren