Tutorial Schritt 3: Kein Auto-Open mehr, Modal oeffnet erst bei Weiter
Step zeigt nur den Button mit Erklaerung. Modal oeffnet sich erst beim Klick auf Weiter (im onExit wenn naechster Step ein Modal-Step ist).
Dieser Commit ist enthalten in:
@@ -555,41 +555,15 @@ const Tutorial = {
|
|||||||
target: '#new-incident-btn',
|
target: '#new-incident-btn',
|
||||||
title: 'Neue Lage anlegen',
|
title: 'Neue Lage anlegen',
|
||||||
text: 'Mit diesem Button \u00f6ffnen Sie das Formular zur Erstellung einer neuen Lage. '
|
text: 'Mit diesem Button \u00f6ffnen Sie das Formular zur Erstellung einer neuen Lage. '
|
||||||
+ 'Wir gehen jetzt gemeinsam alle Felder durch.',
|
+ 'Klicken Sie auf <strong>Weiter</strong>, um das Formular zu \u00f6ffnen und alle Felder durchzugehen.',
|
||||||
position: 'right',
|
position: 'right',
|
||||||
onEnter: function() {
|
|
||||||
Tutorial._stepTimeout(function() {
|
|
||||||
var overlay = document.getElementById('modal-new');
|
|
||||||
if (overlay && !overlay.classList.contains('active')) overlay.classList.add('active');
|
|
||||||
// Spotlight ausblenden - Modal hat eigene Abdunkelung
|
|
||||||
Tutorial._els.spotlight.style.opacity = '0';
|
|
||||||
// Bubble auf Modal umpositionieren
|
|
||||||
Tutorial._stepTimeout(function() {
|
|
||||||
var modal = document.querySelector('#modal-new .modal');
|
|
||||||
if (modal) {
|
|
||||||
var step = Tutorial._steps[Tutorial._currentStep];
|
|
||||||
step._origTarget = step.target;
|
|
||||||
step.target = '#modal-new .modal';
|
|
||||||
step.position = 'left';
|
|
||||||
Tutorial._positionBubble(step);
|
|
||||||
}
|
|
||||||
}, 400);
|
|
||||||
}, 1500);
|
|
||||||
},
|
|
||||||
onExit: function() {
|
onExit: function() {
|
||||||
// Modal nur schliessen wenn naechster Step kein Modal-Step ist
|
// Modal oeffnen fuer den naechsten Step
|
||||||
var nextStep = Tutorial._steps[Tutorial._currentStep];
|
var nextStep = Tutorial._steps[Tutorial._currentStep];
|
||||||
var nextIsModal = nextStep && nextStep.target && nextStep.target.indexOf('#modal-') !== -1;
|
var nextIsModal = nextStep && nextStep.target && nextStep.target.indexOf('#modal-') !== -1;
|
||||||
if (!nextIsModal) {
|
if (nextIsModal) {
|
||||||
var overlay = document.getElementById('modal-new');
|
var overlay = document.getElementById('modal-new');
|
||||||
if (overlay) overlay.classList.remove('active');
|
if (overlay && !overlay.classList.contains('active')) overlay.classList.add('active');
|
||||||
}
|
|
||||||
// Target zuruecksetzen
|
|
||||||
var step = Tutorial._steps[2];
|
|
||||||
if (step && step._origTarget) {
|
|
||||||
step.target = step._origTarget;
|
|
||||||
step.position = 'right';
|
|
||||||
delete step._origTarget;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
In neuem Issue referenzieren
Einen Benutzer sperren