From d866ef1b4a72cef0f14ca7ce196aaca4151e341f Mon Sep 17 00:00:00 2001 From: Remco Date: Thu, 12 Oct 2023 16:12:11 +0200 Subject: [PATCH 01/16] feat: product tour --- package-lock.json | 11 +++++ package.json | 1 + src/App.vue | 4 ++ src/components/AppHeader.vue | 4 +- src/components/AppTour/AppTour.js | 0 src/components/AppTour/MapViewTour.vue | 0 src/components/LayerControl.vue | 1 + src/tour/use-app-tour.js | 12 +++++ src/tour/use-map-tour.js | 11 +++++ src/tour/use-tour.js | 67 ++++++++++++++++++++++++++ src/views/About.vue | 2 +- src/views/Accessibility.vue | 2 +- src/views/Combine.vue | 2 +- src/views/Contact.vue | 2 +- src/views/Maps.vue | 2 +- src/views/Viewer.vue | 6 ++- 16 files changed, 119 insertions(+), 8 deletions(-) create mode 100644 src/components/AppTour/AppTour.js create mode 100644 src/components/AppTour/MapViewTour.vue create mode 100644 src/tour/use-app-tour.js create mode 100644 src/tour/use-map-tour.js create mode 100644 src/tour/use-tour.js diff --git a/package-lock.json b/package-lock.json index cc341645..8db5b265 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@vue-a11y/skip-to": "^3.0.3", "dom-to-image": "^2.6.0", + "driver.js": "^1.3.0", "fast-equals": "^5.0.1", "file-saver": "^2.0.5", "focus-trap": "^7.5.2", @@ -3173,6 +3174,11 @@ "node": ">=8" } }, + "node_modules/driver.js": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.0.tgz", + "integrity": "sha512-ilUkVc5iMIYfMd8FdWy8n5Wv//gsJuRP+lo8QfWpwP9c0UGOgD7P9nVQMZwcdW84aqAZHHUHrV7GgiopAN6HUQ==" + }, "node_modules/duplexer2": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz", @@ -14618,6 +14624,11 @@ "is-obj": "^2.0.0" } }, + "driver.js": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.0.tgz", + "integrity": "sha512-ilUkVc5iMIYfMd8FdWy8n5Wv//gsJuRP+lo8QfWpwP9c0UGOgD7P9nVQMZwcdW84aqAZHHUHrV7GgiopAN6HUQ==" + }, "duplexer2": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz", diff --git a/package.json b/package.json index 629605b8..7809f14a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "@vue-a11y/skip-to": "^3.0.3", "dom-to-image": "^2.6.0", + "driver.js": "^1.3.0", "fast-equals": "^5.0.1", "file-saver": "^2.0.5", "focus-trap": "^7.5.2", diff --git a/src/App.vue b/src/App.vue index e93e0786..1214a5b0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -40,6 +40,7 @@ import { mapGetters } from 'vuex' import AppHeader from '../src/components/AppHeader.vue' import CookieLaw from './components/CookieLaw.vue' +import { useAppTour } from '@/tour/use-app-tour' import mapConfig from './map.config.js' @@ -48,6 +49,9 @@ export default { AppHeader, CookieLaw }, + setup() { + useAppTour().start() + }, data () { return { cookieBanner: false diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index a6cc8078..b99fe02b 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -24,8 +24,8 @@

{{ this.pageTitle }}

diff --git a/src/components/AppTour/AppTour.js b/src/components/AppTour/AppTour.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/AppTour/MapViewTour.vue b/src/components/AppTour/MapViewTour.vue new file mode 100644 index 00000000..e69de29b diff --git a/src/components/LayerControl.vue b/src/components/LayerControl.vue index 22a3a962..0d24a034 100644 --- a/src/components/LayerControl.vue +++ b/src/components/LayerControl.vue @@ -17,6 +17,7 @@ class="layer-control__vis-label" :for="`layer-${id}-vis`" v-test="'layer-control'" + data-tour-id="layer-visibility" > diff --git a/src/tour/use-app-tour.js b/src/tour/use-app-tour.js new file mode 100644 index 00000000..2db67bac --- /dev/null +++ b/src/tour/use-app-tour.js @@ -0,0 +1,12 @@ +import { useTour } from "./use-tour"; + +export function useAppTour() { + return useTour([ + { element: selector('kaarten-link'), popover: { title: 'Kaarten', description: 'Hier kunt u alle kaarten vinden' } }, + { element: selector('over-liwo-link'), popover: { title: 'Over LIWO', description: 'Hier leest uw meer over LIWO' } }, + ]) +} + +function selector(id) { + return `[data-tour-id="${id}"]` +} diff --git a/src/tour/use-map-tour.js b/src/tour/use-map-tour.js new file mode 100644 index 00000000..ae1732c9 --- /dev/null +++ b/src/tour/use-map-tour.js @@ -0,0 +1,11 @@ +import { useTour } from "./use-tour"; + +export function useMapTour() { + return useTour([ + { element: selector('layer-visibility'), popover: { description: 'Hiermee kunt uw lagen aan en uit zetten' } }, + ]) +} + +function selector(id) { + return `[data-tour-id="${id}"]` +} diff --git a/src/tour/use-tour.js b/src/tour/use-tour.js new file mode 100644 index 00000000..0a017cc5 --- /dev/null +++ b/src/tour/use-tour.js @@ -0,0 +1,67 @@ +import { driver } from 'driver.js' +import { onMounted, onUnmounted } from 'vue' +import "driver.js/dist/driver.css"; + +export function useTour(steps) { + let driverInstance + let autoStart = false + + onMounted(() => { + driverInstance = driver({ + steps + }) + + if(autoStart) { + waitUntilVisible(steps[0].element).then(() => { + driverInstance.drive() + }) + } + }) + + onUnmounted(() => { + driverInstance.destroy() + }) + + return { + start() { + autoStart = true + if(driverInstance) { + waitUntilVisible(steps[0].element).then(() => { + driverInstance.drive() + }) + } + }, + } +} + + +function waitUntilVisible(element) { + const timeInterval = 300 + const timeout = 2000 + let timeTaken = 0 + return new Promise((resolve, reject) => { + const interval = setInterval(() => { + return checkIfVisible(element) + .then(el => { + clearInterval(interval) + resolve(el) + }) + .catch(() => { + timeTaken += timeInterval + if (timeTaken > timeout) { + clearInterval(interval) + reject('waitUntilVisible timed out') + } + }) + }, timeInterval) + }) +} + +function checkIfVisible(element) { + const foundElement = document.querySelector(element) + if (foundElement) { + return Promise.resolve(foundElement) + } else { + return Promise.reject() + } +} diff --git a/src/views/About.vue b/src/views/About.vue index 3e465a36..d9c2c622 100644 --- a/src/views/About.vue +++ b/src/views/About.vue @@ -58,7 +58,7 @@ import mapConfig from '../map.config' export default { - name: 'About', + name: 'AboutView', data () { return { version: 'not set' diff --git a/src/views/Accessibility.vue b/src/views/Accessibility.vue index 1b9d9000..d10813b5 100644 --- a/src/views/Accessibility.vue +++ b/src/views/Accessibility.vue @@ -49,7 +49,7 @@ diff --git a/src/views/Combine.vue b/src/views/Combine.vue index 2315c292..00d1e2fe 100644 --- a/src/views/Combine.vue +++ b/src/views/Combine.vue @@ -185,7 +185,7 @@ import { EPSG_3857 } from '@/lib/leaflet-utils/projections' import { showLayerInfoPopup, showCombinedLayerInfoPopup } from '@/lib/leaflet-utils/popup' export default { - name: 'Combine', + name: 'CombineView', components: { CombinePopup, ExportCombinePopup, diff --git a/src/views/Contact.vue b/src/views/Contact.vue index f4169917..1f4c778f 100644 --- a/src/views/Contact.vue +++ b/src/views/Contact.vue @@ -22,7 +22,7 @@ diff --git a/src/views/Maps.vue b/src/views/Maps.vue index 3247ad48..c11e050a 100644 --- a/src/views/Maps.vue +++ b/src/views/Maps.vue @@ -38,7 +38,7 @@ import LayerSetList from '@/components/LayerSetList.vue' import { loadLayerSets } from '@/lib/load-layersets' export default { - name: 'Maps', + name: 'MapsView', data () { return { layerSets: [], diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index 100d9eea..313e641e 100644 --- a/src/views/Viewer.vue +++ b/src/views/Viewer.vue @@ -68,9 +68,13 @@ import { extractUnit } from '@/lib/load-layersets' import { EPSG_28992 } from '@/lib/leaflet-utils/projections' import { showLayerInfoPopup } from '@/lib/leaflet-utils/popup' +import { useMapTour } from '@/tour/use-map-tour' export default { - name: 'Viewer', + name: 'ViewerView', + setup() { + useMapTour().start() + }, components: { ExportPopup, LayerPanel, From a010eabaea459683a44d0215810e575f23663540 Mon Sep 17 00:00:00 2001 From: Remco Date: Thu, 12 Oct 2023 16:35:33 +0200 Subject: [PATCH 02/16] feat: more tours --- src/components/LayerControl.vue | 4 ++++ src/tour/use-map-tour.js | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/LayerControl.vue b/src/components/LayerControl.vue index 0d24a034..24def440 100644 --- a/src/components/LayerControl.vue +++ b/src/components/LayerControl.vue @@ -44,6 +44,7 @@ :modelValue="selectedVariantIndexByBreachBandId[breachBandId][title]" @update:modelValue="setLayerVariant(breachBandId, title, $event)" v-test="'variant-select'" + data-tour-id="layer-variant-select" /> @@ -59,6 +60,7 @@ :modelValue="selectedLayerIndex" @update:modelValue="selectLayerOption($event)" v-test="'variant-select'" + data-tour-id="layer-variant-select" /> @@ -73,6 +75,7 @@ :name="`layer-${id}-trans`" value="0" @change.stop="setTransparancy" + data-tour-id="layer-transparency" />

Hoe werken wij aan toegankelijkheid?

-

Rijkswaterstaat zorgt voor een continue verbetering in toegankelijkheid door diverse maatregelen binnen onze (dagelijkse) processen: -

-

+

Rijkswaterstaat zorgt voor een continue verbetering in toegankelijkheid door diverse maatregelen binnen onze (dagelijkse) processen:

+

Overzicht toegankelijkheidsverklaringen Rijkswaterstaat

From 28c383853439857d8dedc4fbd52569cb54ebfa76 Mon Sep 17 00:00:00 2001 From: velomovies <22169955+velomovies@users.noreply.github.com> Date: Tue, 8 Oct 2024 16:25:04 +0200 Subject: [PATCH 07/16] feat(components): add driverjs stuff --- src/App.vue | 4 - src/components/AppHeader.vue | 78 +++++++++++++++++--- src/components/CombineChangeVariantPopup.vue | 24 +++++- src/components/CombineLayerControl.vue | 1 + src/components/CombineLayerPanelItem.vue | 23 +++++- src/components/ExportPopup.vue | 31 ++++++-- src/components/LayerPanel.vue | 2 +- src/components/LayerSetList.vue | 18 ++++- src/components/LegendPanel.vue | 4 +- src/components/NotificationBar.vue | 6 +- src/components/PopUp.vue | 14 +++- src/lib/leaflet-utils/markers.js | 1 + src/views/Combine.vue | 1 + src/views/Maps.vue | 3 +- src/views/Viewer.vue | 7 +- 15 files changed, 175 insertions(+), 42 deletions(-) diff --git a/src/App.vue b/src/App.vue index a1d73a02..2ef3bcf8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -40,7 +40,6 @@ import { mapGetters } from 'vuex' import AppHeader from '../src/components/AppHeader.vue' import CookieLaw from './components/CookieLaw.vue' -import { useAppTour } from '@/tour/use-app-tour' import mapConfig from './map.config.js' @@ -49,9 +48,6 @@ export default { AppHeader, CookieLaw }, - setup() { - useAppTour().start() - }, data () { return { cookieBanner: false diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 04dfdf31..85636e6f 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -2,11 +2,26 @@