progress bar skip button, labeled arrow hint
This commit is contained in:
@@ -9,12 +9,6 @@
|
||||
// Block 1: Onboarding Configuration
|
||||
// =================================================================
|
||||
|
||||
// ONBOARDING_MODE — Controls when the Tutorial is shown:
|
||||
const ONBOARDING_MODE = 'once';
|
||||
// 'once' — Shown on first Visit, stored in localStorage
|
||||
// 'session' — Shown per Browser Session, stored in sessionStorage
|
||||
// 'always' — Shows always, nothing stored
|
||||
|
||||
// Prevents double Initialization
|
||||
let onboardingStarted = false;
|
||||
|
||||
@@ -25,57 +19,10 @@ function isMobile() {
|
||||
|
||||
|
||||
// =================================================================
|
||||
// Block 2: Tour Initialization
|
||||
// Block 2: Tour Definition
|
||||
// =================================================================
|
||||
|
||||
function initOnboardingTour() {
|
||||
|
||||
// Checks if Tutorial should be shown based on Onboarding Mode
|
||||
if (ONBOARDING_MODE === 'once' && localStorage.getItem('webgis_onboarding_done')) {
|
||||
return;
|
||||
}
|
||||
if (ONBOARDING_MODE === 'session' && sessionStorage.getItem('webgis_onboarding_done')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Waits for Welcome and Login Modals to be closed
|
||||
waitForModalsToClose(function () {
|
||||
setTimeout(startTour, 600);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// =================================================================
|
||||
// Block 3: Modal Watcher — Starts Tour after Welcome and Login Modals closed
|
||||
// =================================================================
|
||||
|
||||
function waitForModalsToClose(callback) {
|
||||
const welcomeModal = document.getElementById('welcome-modal');
|
||||
const loginModal = document.getElementById('login-modal');
|
||||
|
||||
const checkInterval = setInterval(function () {
|
||||
const welcomeHidden = !welcomeModal || welcomeModal.style.display === 'none' || welcomeModal.style.display === '';
|
||||
const loginHidden = !loginModal || loginModal.style.display === 'none' || loginModal.style.display === '';
|
||||
|
||||
if (welcomeHidden && loginHidden) {
|
||||
clearInterval(checkInterval);
|
||||
callback();
|
||||
}
|
||||
}, 300);
|
||||
|
||||
// Safety Timeout
|
||||
setTimeout(function () {
|
||||
clearInterval(checkInterval);
|
||||
callback();
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
|
||||
// =================================================================
|
||||
// Block 4: Tour Definition
|
||||
// =================================================================
|
||||
|
||||
function startTour() {
|
||||
function startTour(manual) {
|
||||
// Prevents double Start
|
||||
if (onboardingStarted) return;
|
||||
onboardingStarted = true;
|
||||
@@ -97,26 +44,45 @@ function startTour() {
|
||||
});
|
||||
|
||||
|
||||
// -----------------------------------------------------------------
|
||||
// Step 1: Welcome — Skip Timer at automatic Start
|
||||
// -----------------------------------------------------------------
|
||||
// Step 1: Welcome (identical on Mobile and Desktop)
|
||||
// -----------------------------------------------------------------
|
||||
var welcomeButtons = [
|
||||
{
|
||||
text: 'Überspringen',
|
||||
action: tour.cancel,
|
||||
classes: 'shepherd-button-secondary' + (manual ? '' : ' skip-btn-locked')
|
||||
},
|
||||
{
|
||||
text: 'Los geht\'s <i class="fa-solid fa-arrow-right"></i>',
|
||||
action: tour.next,
|
||||
classes: 'shepherd-button-primary'
|
||||
}
|
||||
];
|
||||
|
||||
tour.addStep({
|
||||
id: 'welcome',
|
||||
title: '<i class="fa-solid fa-hand-wave"></i> Willkommen bei der Mitmachkarte!',
|
||||
text: 'Dieses <strong>interaktive Tutorial</strong> zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
|
||||
'<br><br><span style=color:var(--color-text-secondary);">Sie können das Tutorial jederzeit über den Hilfe-Tab der Seitenleiste wiederholen.</span>',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Überspringen',
|
||||
action: tour.cancel,
|
||||
classes: 'shepherd-button-secondary'
|
||||
},
|
||||
{
|
||||
text: 'Los geht\'s <i class="fa-solid fa-arrow-right"></i>',
|
||||
action: tour.next,
|
||||
classes: 'shepherd-button-primary'
|
||||
'<br><br><span style="color:var(--color-text-secondary);">Sie können das Tutorial jederzeit über den Hilfe-Tab der Seitenleiste wiederholen.</span>',
|
||||
buttons: welcomeButtons,
|
||||
when: {
|
||||
show: function () {
|
||||
if (manual) return;
|
||||
|
||||
// Locks Skip Button with Progress Bar for 5 Seconds
|
||||
var skipBtn = document.querySelector('.skip-btn-locked');
|
||||
if (!skipBtn) return;
|
||||
skipBtn.disabled = true;
|
||||
skipBtn.style.pointerEvents = 'none';
|
||||
|
||||
setTimeout(function () {
|
||||
skipBtn.disabled = false;
|
||||
skipBtn.style.pointerEvents = '';
|
||||
skipBtn.classList.remove('skip-btn-locked');
|
||||
}, 5000);
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -233,7 +199,7 @@ function startTour() {
|
||||
classes: 'shepherd-button-secondary'
|
||||
},
|
||||
{
|
||||
text: 'Beenden <i class="fa-solid fa-check"></i>',
|
||||
text: 'Abschließen <i class="fa-solid fa-check"></i>',
|
||||
action: tour.next,
|
||||
classes: 'shepherd-button-primary'
|
||||
}
|
||||
@@ -259,51 +225,80 @@ function startTour() {
|
||||
|
||||
|
||||
// -----------------------------------------------------------------
|
||||
// Completion and Cancellation
|
||||
// Completion and Cancellation — shows Drawing Arrow
|
||||
// -----------------------------------------------------------------
|
||||
tour.on('complete', function () {
|
||||
markOnboardingDone();
|
||||
function onTourEnd() {
|
||||
onboardingStarted = false;
|
||||
if (mobile) sidebar.close();
|
||||
});
|
||||
|
||||
tour.on('cancel', function () {
|
||||
markOnboardingDone();
|
||||
onboardingStarted = false;
|
||||
if (mobile) sidebar.close();
|
||||
});
|
||||
// Shows Arrow Hint
|
||||
if (!localStorage.getItem('webgis_onboarding_done')) {
|
||||
localStorage.setItem('webgis_onboarding_done', 'true');
|
||||
showDrawingArrow();
|
||||
}
|
||||
}
|
||||
|
||||
tour.on('complete', onTourEnd);
|
||||
tour.on('cancel', onTourEnd);
|
||||
|
||||
tour.start();
|
||||
}
|
||||
|
||||
|
||||
// =================================================================
|
||||
// Marks Onboarding as completed
|
||||
// Drawing Arrow — Points to Geoman Toolbar after Tour
|
||||
// =================================================================
|
||||
|
||||
function markOnboardingDone() {
|
||||
if (ONBOARDING_MODE === 'once') {
|
||||
localStorage.setItem('webgis_onboarding_done', 'true');
|
||||
} else if (ONBOARDING_MODE === 'session') {
|
||||
sessionStorage.setItem('webgis_onboarding_done', 'true');
|
||||
function showDrawingArrow() {
|
||||
var hint = document.createElement('div');
|
||||
hint.id = 'drawing-hint-arrow';
|
||||
hint.innerHTML = '<span class="drawing-hint-label">' +
|
||||
'<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen' +
|
||||
'</span>' +
|
||||
'<span class="drawing-hint-chevrons">' +
|
||||
'<i class="fa-solid fa-chevron-right"></i>' +
|
||||
'<i class="fa-solid fa-chevron-right"></i>' +
|
||||
'</span>';
|
||||
document.body.appendChild(hint);
|
||||
|
||||
// Positions Hint centered on Geoman Toolbar
|
||||
function positionHint() {
|
||||
var toolbar = document.querySelector('.leaflet-pm-toolbar');
|
||||
if (!toolbar) { removeDrawingArrow(); return; }
|
||||
|
||||
var rect = toolbar.getBoundingClientRect();
|
||||
var hintHeight = hint.offsetHeight || 32;
|
||||
hint.style.top = (rect.top + (rect.height / 2) - (hintHeight / 2)) + 'px';
|
||||
hint.style.right = (window.innerWidth - rect.left + 10) + 'px';
|
||||
}
|
||||
|
||||
positionHint();
|
||||
window.addEventListener('resize', positionHint);
|
||||
|
||||
var timeout = setTimeout(removeDrawingArrow, 60000);
|
||||
|
||||
map.on('pm:globaldrawmodetoggled', function onDraw() {
|
||||
clearTimeout(timeout);
|
||||
removeDrawingArrow();
|
||||
map.off('pm:globaldrawmodetoggled', onDraw);
|
||||
window.removeEventListener('resize', positionHint);
|
||||
});
|
||||
}
|
||||
|
||||
function removeDrawingArrow() {
|
||||
var arrow = document.getElementById('drawing-hint-arrow');
|
||||
if (arrow) {
|
||||
arrow.classList.add('fade-out');
|
||||
setTimeout(function () { arrow.remove(); }, 300);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// =================================================================
|
||||
// Manual Tour Restart
|
||||
// Manual Tour Restart (from Info Modal or Help Tab)
|
||||
// =================================================================
|
||||
|
||||
function restartOnboarding() {
|
||||
localStorage.removeItem('webgis_onboarding_done');
|
||||
sessionStorage.removeItem('webgis_onboarding_done');
|
||||
onboardingStarted = false;
|
||||
startTour();
|
||||
}
|
||||
|
||||
|
||||
// =================================================================
|
||||
// Auto-Start on Page Load
|
||||
// =================================================================
|
||||
|
||||
initOnboardingTour();
|
||||
startTour(true);
|
||||
}
|
||||
Reference in New Issue
Block a user