304 lines
11 KiB
JavaScript
304 lines
11 KiB
JavaScript
// =====================================================================
|
|
// WebGIS Citizen Participation Portal — Onboarding Tour
|
|
// Guides Users through the Participation Portal.
|
|
// On Mobile centered Overlays. On Desktop attached to User Interface.
|
|
// =====================================================================
|
|
|
|
|
|
// =================================================================
|
|
// Block 1: Onboarding Configuration
|
|
// =================================================================
|
|
|
|
// Prevents double Initialization
|
|
let onboardingStarted = false;
|
|
|
|
// Detects Mobile Viewport
|
|
function isMobile() {
|
|
return window.innerWidth < 769;
|
|
}
|
|
|
|
|
|
// =================================================================
|
|
// Block 2: Tour Definition
|
|
// =================================================================
|
|
|
|
function startTour(manual) {
|
|
// Prevents double Start
|
|
if (onboardingStarted) return;
|
|
onboardingStarted = true;
|
|
|
|
const mobile = isMobile();
|
|
|
|
const tour = new Shepherd.Tour({
|
|
useModalOverlay: !mobile,
|
|
defaultStepOptions: {
|
|
cancelIcon: { enabled: true },
|
|
scrollTo: false,
|
|
classes: 'onboarding-step',
|
|
popperOptions: {
|
|
modifiers: [
|
|
{ name: 'offset', options: { offset: [0, 14] } }
|
|
]
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// -----------------------------------------------------------------
|
|
// Step 1: Welcome — Skip Timer at automatic Start
|
|
// -----------------------------------------------------------------
|
|
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: 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);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// -----------------------------------------------------------------
|
|
// Step 2: Drawing Tools
|
|
// -----------------------------------------------------------------
|
|
var drawingStep = {
|
|
id: 'drawing-tools',
|
|
title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
|
|
buttons: [
|
|
{
|
|
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
|
|
action: tour.back,
|
|
classes: 'shepherd-button-secondary'
|
|
},
|
|
{
|
|
text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
|
|
action: tour.next,
|
|
classes: 'shepherd-button-primary'
|
|
}
|
|
]
|
|
};
|
|
|
|
if (mobile) {
|
|
drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong> ' +
|
|
'<i class="fa-solid fa-location-dot"></i> ' +
|
|
'rechts, um Hinweise als Punkte, Linien oder Flächen hinzuzufügen.';
|
|
} else {
|
|
drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.';
|
|
drawingStep.attachTo = { element: '.leaflet-pm-toolbar', on: 'left' };
|
|
drawingStep.beforeShowPromise = function () {
|
|
return new Promise(function (resolve) {
|
|
sidebar.close();
|
|
setTimeout(resolve, 300);
|
|
});
|
|
};
|
|
}
|
|
|
|
tour.addStep(drawingStep);
|
|
|
|
|
|
// -----------------------------------------------------------------
|
|
// Step 3: Address Search
|
|
// -----------------------------------------------------------------
|
|
var searchStep = {
|
|
id: 'address-search',
|
|
title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
|
|
buttons: [
|
|
{
|
|
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
|
|
action: tour.back,
|
|
classes: 'shepherd-button-secondary'
|
|
},
|
|
{
|
|
text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
|
|
action: tour.next,
|
|
classes: 'shepherd-button-primary'
|
|
}
|
|
]
|
|
};
|
|
|
|
if (mobile) {
|
|
searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong> ' +
|
|
'<i class="fa-solid fa-magnifying-glass"></i> rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
|
|
} else {
|
|
searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
|
|
searchStep.attachTo = { element: '.leaflet-control-geocoder', on: 'left' };
|
|
}
|
|
|
|
tour.addStep(searchStep);
|
|
|
|
|
|
// -----------------------------------------------------------------
|
|
// Step 4: Layer Control
|
|
// -----------------------------------------------------------------
|
|
var layerStep = {
|
|
id: 'layer-control',
|
|
title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
|
|
buttons: [
|
|
{
|
|
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
|
|
action: tour.back,
|
|
classes: 'shepherd-button-secondary'
|
|
},
|
|
{
|
|
text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
|
|
action: tour.next,
|
|
classes: 'shepherd-button-primary'
|
|
}
|
|
]
|
|
};
|
|
|
|
if (mobile) {
|
|
layerStep.text = 'Wechseln Sie über das <strong>Layer-Symbol</strong> ' +
|
|
'<i class="fa-solid fa-layer-group"></i> oben rechts zwischen verschiedenen Hintergrundkarten und Satellitenbildern.';
|
|
} else {
|
|
layerStep.text = 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.';
|
|
layerStep.attachTo = { element: '.leaflet-control-layers', on: 'left' };
|
|
}
|
|
|
|
tour.addStep(layerStep);
|
|
|
|
|
|
// -----------------------------------------------------------------
|
|
// Step 5: Sidebar
|
|
// -----------------------------------------------------------------
|
|
var sidebarStep = {
|
|
id: 'sidebar',
|
|
title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
|
|
buttons: [
|
|
{
|
|
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
|
|
action: tour.back,
|
|
classes: 'shepherd-button-secondary'
|
|
},
|
|
{
|
|
text: 'Abschließen <i class="fa-solid fa-check"></i>',
|
|
action: tour.next,
|
|
classes: 'shepherd-button-primary'
|
|
}
|
|
]
|
|
};
|
|
|
|
if (mobile) {
|
|
sidebarStep.text = 'In der <strong>Seitenleiste</strong> ' +
|
|
'<i class="fa-solid fa-house"></i> ' +
|
|
'links finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
|
|
} else {
|
|
sidebarStep.text = 'In der <strong>Seitenleiste</strong> finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
|
|
sidebarStep.attachTo = { element: '#sidebar', on: 'right' };
|
|
sidebarStep.beforeShowPromise = function () {
|
|
return new Promise(function (resolve) {
|
|
sidebar.open('tab-help');
|
|
setTimeout(resolve, 400);
|
|
});
|
|
};
|
|
}
|
|
|
|
tour.addStep(sidebarStep);
|
|
|
|
|
|
// -----------------------------------------------------------------
|
|
// Completion and Cancellation — shows Drawing Arrow
|
|
// -----------------------------------------------------------------
|
|
function onTourEnd() {
|
|
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();
|
|
}
|
|
|
|
|
|
// =================================================================
|
|
// Drawing Arrow — Points to Geoman Toolbar after Tour
|
|
// =================================================================
|
|
|
|
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 (from Info Modal or Help Tab)
|
|
// =================================================================
|
|
|
|
function restartOnboarding() {
|
|
onboardingStarted = false;
|
|
startTour(true);
|
|
} |