From ac7f1e9884c152e9832a97d7b0ba5c6b6890ae96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alth=C3=A9a=20Feuillet?= <123597411+altheaFeu@users.noreply.github.com> Date: Thu, 7 Mar 2024 17:44:44 +0100 Subject: [PATCH 01/49] Create README.md --- library/ui/driver_tutorial/README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 library/ui/driver_tutorial/README.md diff --git a/library/ui/driver_tutorial/README.md b/library/ui/driver_tutorial/README.md new file mode 100644 index 0000000..d65bd42 --- /dev/null +++ b/library/ui/driver_tutorial/README.md @@ -0,0 +1,10 @@ +# Interactive Step-by-Step Guided Tours + +## Introduction + +This script empowers you to craft a simple interactive guided tour using `driver.js`. + +The initial popup design for the presentation draws inspiration from the metadata information popup available at: +[Popup Metadata Info](https://github.com/3liz/lizmap-javascript-scripts/blob/master/library/ui/popup_metadata_info). + +For detailed guidance and documentation on `driver.js`, refer to the official documentation at [driverjs.com](https://driverjs.com/). From 9552a4086562babe528e011c3abf10816f192a00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alth=C3=A9a=20Feuillet?= <123597411+altheaFeu@users.noreply.github.com> Date: Thu, 7 Mar 2024 17:45:53 +0100 Subject: [PATCH 02/49] Add files via upload --- library/ui/driver_tutorial/tour.css | 74 ++++++++++++++++++++++ library/ui/driver_tutorial/tour.js | 98 +++++++++++++++++++++++++++++ 2 files changed, 172 insertions(+) create mode 100644 library/ui/driver_tutorial/tour.css create mode 100644 library/ui/driver_tutorial/tour.js diff --git a/library/ui/driver_tutorial/tour.css b/library/ui/driver_tutorial/tour.css new file mode 100644 index 0000000..d8b2f9c --- /dev/null +++ b/library/ui/driver_tutorial/tour.css @@ -0,0 +1,74 @@ +.driver-popover.driverjs-first{ + margin: 20px; + font-size:20px !important; + min-width:350px !important; + max-width:500px !important; +} + +.close-button { + position: absolute; + top: 20px; + right: 30px; + font-size: 25px; + cursor: pointer; + color:white; +} + +.driverjs-first#showTutoriel:hover { + transform: scale(1.1); + transition: 0.3s ease-in-out; +} + +/* Additional CSS */ +.driver-popover.driverjs-theme { + background-color: grey; + color: white; +} + +.driver-popover.driverjs-theme .driver-popover-title { + font-size: 20px; +} + +.driver-popover.driverjs-theme .driver-popover-title, +.driver-popover.driverjs-theme .driver-popover-description, +.driver-popover.driverjs-theme .driver-popover-progress-text { + color: white; +} + +.driver-popover.driverjs-theme .driver-popover-close-btn{ + color:white !important; + font-size:30px !important; + border:none; + background:none; +} + +.driver-popover.driverjs-theme .driver-popover-close-btn:hover{ + transform: scale(1.1); + transition: 0.3s ease-in-out; + background:none; +} + +.driver-popover.driverjs-theme button { + flex: 1; + text-align: center; + background-color: grey; + color: #ffffff; + border: 2px solid black; + text-shadow: none; + font-size: 14px; + padding: 5px 8px; + border-radius: 6px; +} + +.driver-popover.driverjs-theme button:hover { + color: #ffffff; +} + +.driver-popover.driverjs-theme .driver-popover-navigation-btns { + justify-content: space-between; + gap: 3px; +} + +.driver-popover.driverjs-theme .driver-popover-close-btn:hover { + color: #000; +} \ No newline at end of file diff --git a/library/ui/driver_tutorial/tour.js b/library/ui/driver_tutorial/tour.js new file mode 100644 index 0000000..d8d96c8 --- /dev/null +++ b/library/ui/driver_tutorial/tour.js @@ -0,0 +1,98 @@ +// Close popup at startup +function closePopup(){ + $('.driver-popover.driverjs-first').remove(); + document.body.classList.remove('driver-active', 'driver-fade'); + $(".driver-overlay").remove(); +}; + +// Start the tutorial +function startTutorial(){ + const driverObj = driver.js.driver({ + showProgress: false, + progressText: '{{current}} / {{total}}', + allowClose: true, + nextBtnText: 'Next', + prevBtnText: 'Previous', + doneBtnText: 'Close', + popoverClass: 'driverjs-theme', + + onNextClick:() => { + driverObj.moveNext(); + // You can add more functionality onNextClick + }, + onPrevClick:() => { + driverObj.movePrevious(); + // You can add more functionality onPreviousClick + }, + + steps: [ + // Select all elements inside nav.nav-list + ...$('.nav.nav-list li').map(function(index) { + return { + element: `#mapmenu ul.nav-list li:nth-child(${index + 1}) a span:first-child`, + popover: { title: `Step ${index + 1}`, description: `Description for step ${index + 1}`, side: "left", align: 'start',} + }; + }).get(), + { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } } + ] + + }); + + driverObj.drive(); +}; + +lizMap.events.on({ + uicreated: function () { + + // Include the CDN + var link = document.createElement('link'); + link.href = 'https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css'; + link.rel = 'stylesheet'; + document.head.appendChild(link); + + var script = document.createElement('script'); + script.src = 'https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js'; + script.type = 'text/javascript'; + + + script.onload = function () { + console.log('driver.js has been loaded successfully!'); + + // Create the driver for the first popup + const driverFirst = driver.js.driver({popoverClass: 'driverjs-first'}); + + var html = ''; + var title = 'My popup'; + var content = 'The content of the popup.' + + // Header + html += '
' + content + '
'; + + // Project Metadata + html+= $('#metadata').html(); + + // End of main content body + html+= '' + content + '
'; + + // Project Metadata + html+= $('#metadata').html(); + + // End of main content body + html+= '' + content + '
'; - - // Project Metadata - html+= $('#metadata').html(); - - // End of main content body - html+= '