From 23027d54d77f67ecb3340d7a99ca6ed445b1c824 Mon Sep 17 00:00:00 2001 From: patrickzerhusen Date: Thu, 11 Jun 2026 15:58:03 +0200 Subject: [PATCH] optimized onboarding tutorial for mobile screens --- public/js/onboarding.js | 128 +++++++++++++++++++++++++--------------- 1 file changed, 80 insertions(+), 48 deletions(-) diff --git a/public/js/onboarding.js b/public/js/onboarding.js index b517dfd..eff5ccd 100644 --- a/public/js/onboarding.js +++ b/public/js/onboarding.js @@ -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: ' Wilkommen bei der Mitmachkarte!', - text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' + - '

Sie können das Tutorial jederzeit durch den Hilfe-Tab der Seitenleiste wiederholen.', + title: ' Willkommen bei der Mitmachkarte!', + text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' + + '

Sie können das Tutorial jederzeit über den Hilfe-Tab der Seitenleiste wiederholen.', buttons: [ { text: 'Überspringen', @@ -115,20 +123,9 @@ function startTour() { // ----------------------------------------------------------------- // Step 2: Drawing Tools // ----------------------------------------------------------------- - tour.addStep({ + var drawingStep = { id: 'drawing-tools', title: ' Beitrag hinzufügen', - text: 'Verwenden Sie die Zeichenwerkzeuge, 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: ' Zurück', @@ -141,20 +138,32 @@ function startTour() { classes: 'shepherd-button-primary' } ] - }); + }; + + if (mobile) { + drawingStep.text = 'Verwenden Sie die Zeichenwerkzeuge ' + + ' ' + + 'rechts, um Hinweise als Punkte, Linien oder Flächen hinzuzufügen.'; + } else { + drawingStep.text = 'Verwenden Sie die Zeichenwerkzeuge, 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: ' Adresssuche', - text: 'Verwenden Sie die Adresssuche, um schnell den richtigen Ort auf der Mitmachkarte zu finden.', - attachTo: { - element: '.leaflet-control-geocoder', - on: 'left' - }, buttons: [ { text: ' Zurück', @@ -167,20 +176,25 @@ function startTour() { classes: 'shepherd-button-primary' } ] - }); + }; + + if (mobile) { + searchStep.text = 'Verwenden Sie die Adresssuche ' + + ' rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.'; + } else { + searchStep.text = 'Verwenden Sie die Adresssuche, 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: ' Kartenansicht', - text: 'Wechseln Sie zwischen verschiedenen Hintergrundkarten und Satellitenbildern.', - attachTo: { - element: '.leaflet-control-layers', - on: 'left' - }, buttons: [ { text: ' Zurück', @@ -193,26 +207,25 @@ function startTour() { classes: 'shepherd-button-primary' } ] - }); + }; + + if (mobile) { + layerStep.text = 'Wechseln Sie über das Layer-Symbol ' + + ' oben rechts zwischen verschiedenen Hintergrundkarten und Satellitenbildern.'; + } else { + layerStep.text = 'Wechseln Sie zwischen verschiedenen Hintergrundkarten und Satellitenbildern.'; + layerStep.attachTo = { element: '.leaflet-control-layers', on: 'left' }; + } + + tour.addStep(layerStep); // ----------------------------------------------------------------- // Step 5: Sidebar // ----------------------------------------------------------------- - tour.addStep({ + var sidebarStep = { id: 'sidebar', title: ' Seitenleiste', - text: 'In der Seitenleiste finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.', - attachTo: { - element: '#sidebar', - on: 'right' - }, - beforeShowPromise: function () { - return new Promise(function (resolve) { - sidebar.open('tab-help'); - setTimeout(resolve, 400); - }); - }, buttons: [ { text: ' Zurück', @@ -220,12 +233,29 @@ function startTour() { classes: 'shepherd-button-secondary' }, { - text: 'Tutorial abschließen ', + text: 'Beenden ', action: tour.next, classes: 'shepherd-button-primary' } ] - }); + }; + + if (mobile) { + sidebarStep.text = 'In der Seitenleiste ' + + ' ' + + 'links finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.'; + } else { + sidebarStep.text = 'In der Seitenleiste 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();