lukas.uptmoor/webgis-lohne
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

optimized onboarding tutorial for mobile screens

Browse Source
This commit is contained in:
patrickzerhusen
2026-06-11 15:58:03 +02:00
parent 5e10d19bbd
commit 23027d54d7
1 changed files with 80 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
public/js/onboarding.js
View File

@@ -1,6 +1,7 @@
// =====================================================================
// WebGIS Citizen Participation Portal — Onboarding Tour
// Guides Users through the Participation Portal
// Guides Users through the Participation Portal.
// On Mobile centered Overlays. On Desktop attached to User Interface.
// =====================================================================
@@ -17,6 +18,11 @@ const ONBOARDING_MODE = 'once';
// Prevents double Initialization
let onboardingStarted = false;
// Detects Mobile Viewport
function isMobile() {
return window.innerWidth < 769;
}
// =================================================================
// Block 2: Tour Initialization
@@ -40,7 +46,7 @@ function initOnboardingTour() {
// =================================================================
// Block 3: Modal Watcher — Starts Tour other Welcome and Login Modals closed
// Block 3: Modal Watcher — Starts Tour after Welcome and Login Modals closed
// =================================================================
function waitForModalsToClose(callback) {
@@ -74,8 +80,10 @@ function startTour() {
if (onboardingStarted) return;
onboardingStarted = true;
const mobile = isMobile();
const tour = new Shepherd.Tour({
useModalOverlay: true,
useModalOverlay: !mobile,
defaultStepOptions: {
cancelIcon: { enabled: true },
scrollTo: false,
@@ -90,13 +98,13 @@ function startTour() {
// -----------------------------------------------------------------
// Step 1: Welcome
// Step 1: Welcome (identical on Mobile and Desktop)
// -----------------------------------------------------------------
tour.addStep({
id: 'welcome',
title: '<i class="fa-solid fa-hand-wave"></i> Wilkommen bei der Mitmachkarte!',
text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
'<br><br><span style="font-size:0.8rem;color:var(--color-text-secondary);">Sie können das Tutorial jederzeit durch den Hilfe-Tab der Seitenleiste wiederholen.</span>',
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',
@@ -115,20 +123,9 @@ function startTour() {
// -----------------------------------------------------------------
// Step 2: Drawing Tools
// -----------------------------------------------------------------
tour.addStep({
var drawingStep = {
id: 'drawing-tools',
title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
text: 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.',
attachTo: {
element: '.leaflet-pm-toolbar',
on: 'left'
},
beforeShowPromise: function () {
return new Promise(function (resolve) {
sidebar.close();
setTimeout(resolve, 300);
});
},
buttons: [
{
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -141,20 +138,32 @@ function startTour() {
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
// -----------------------------------------------------------------
tour.addStep({
var searchStep = {
id: 'address-search',
title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
text: 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.',
attachTo: {
element: '.leaflet-control-geocoder',
on: 'left'
},
buttons: [
{
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -167,20 +176,25 @@ function startTour() {
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
// -----------------------------------------------------------------
tour.addStep({
var layerStep = {
id: 'layer-control',
title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
text: 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.',
attachTo: {
element: '.leaflet-control-layers',
on: 'left'
},
buttons: [
{
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -193,26 +207,25 @@ function startTour() {
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
// -----------------------------------------------------------------
tour.addStep({
var sidebarStep = {
id: 'sidebar',
title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
text: 'In der Seitenleiste finden Sie <strong>Hilfestellungen</strong>, <strong>Listenansichten</strong> und <strong>Neuigkeiten</strong>.',
attachTo: {
element: '#sidebar',
on: 'right'
},
beforeShowPromise: function () {
return new Promise(function (resolve) {
sidebar.open('tab-help');
setTimeout(resolve, 400);
});
},
buttons: [
{
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -220,12 +233,29 @@ function startTour() {
classes: 'shepherd-button-secondary'
},
{
text: 'Tutorial abschließen <i class="fa-solid fa-check"></i>',
text: 'Beenden <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);
// -----------------------------------------------------------------
@@ -234,11 +264,13 @@ function startTour() {
tour.on('complete', function () {
markOnboardingDone();
onboardingStarted = false;
if (mobile) sidebar.close();
});
tour.on('cancel', function () {
markOnboardingDone();
onboardingStarted = false;
if (mobile) sidebar.close();
});
tour.start();