A guided tour created with shepherd.js

README.md

@@ -62,6 +62,7 @@ If you are developing a new feature, do not hesitate to let us know so that we c
 * [Measure tool custom style](./library/ui/measure_tool_custom_style)
 * [Move filter in new panel](./library/ui/move_filter_in_new_panel)
 * [Popup when opening the project with metadata information](./library/ui/popup_metadata_info)
+* [Interactive guided tour](./library/ui/driver_tutorial)
 * [Remove button](./library/ui/remove_button) to make the UI lighter and easier
 * [Resize Dock with splitter](./library/ui/resize_dock_with_splitter)
 * [Resize Dock with splitter 2 (interact.js)](./library/ui/resize_dock_2)

library/ui/driver_tutorial/README.md

@@ -0,0 +1,16 @@
+# Interactive Step-by-Step Guided Tours
+![guided-tour](./demo.gif)
+## Introduction
+
+This script empowers you to craft a simple interactive guided tour using [shepherd.js](https://shepherdjs.dev/).
+
+The initial popup design for the presentation draws inspiration from the metadata information popup available at:
+[Popup Metadata Info](../library/ui/popup_metadata_info).
+
+You can use the provided CSS file to style your tour or customize the theme by modifying the default settings. If you prefer the original theme, update the initialization code as follows:
+```javascript
+const tour = new Shepherd.Tour({
+        defaultStepOptions: {
+            classes: 'shepherd-theme-default',
+``` 
+For detailed guidance and documentation on `shepherd.js`, refer to the official documentation at [shepherdjs.dev](https://shepherdjs.dev/).

library/ui/driver_tutorial/tour.css

@@ -0,0 +1,66 @@
+/* Additional CSS */
+.shepherd-theme-custom button {
+  text-align: center;
+  background-color: grey;
+  color: #ffffff;
+  border: 2px solid black;
+  text-shadow: none;
+  font-size: 14px;
+  padding: 5px 8px;
+  border-radius: 6px;
+}
+
+.shepherd-theme-custom button:hover {
+  transform: scale(1.1); 
+  transition: 0.3s ease-in-out;
+  color:grey;
+}
+
+.shepherd-cancel-icon {
+  background-color:transparent !important;
+  color:black !important;
+  border:none !important;
+  font-size:25px !important;
+}
+
+.shepherd-cancel-icon:hover{
+  transform: scale(1.5) !important; 
+  transition: 0.3s ease-in-out !important;
+  color:black !important;
+  background:transparent !important;
+}
+
+.shepherd-enabled.shepherd-element {
+  margin-left:15px !important;
+}
+
+.shepherd-enabled.shepherd-element[data-shepherd-step-id="move-map"]{
+  margin-left:0px !important;
+  margin-right:20px !important;
+}
+
+.shepherd-enabled.shepherd-element[data-shepherd-step-id="overview"]{
+  margin-left:0px !important;
+  margin-bottom:20px !important; 
+  margin-right:20px !important;
+}
+
+.shepherd-progress-bar {
+  position: absolute;
+  left: 2%;
+  bottom: 9%;
+  font-size: 14px;
+  border-radius: 9px;
+  height: 20px;
+  width: 100%;
+  max-width: 180px;
+  padding: 3px;
+  background: #e6e6e6
+}
+.shepherd-progress-bar span {
+  display: block;
+  background: grey;
+  width: 50%;
+  height: 100%;
+  border-radius: 9px;
+}

library/ui/driver_tutorial/tour.js

@@ -0,0 +1,185 @@
+// Enable you to create an HTML Popup startup
+function htmlPopup(tour) {
+    var html = '';
+    var title = 'My popup';
+    var content = 'The content of the popup.'
+
+    // Header
+    html += '<div class="modal-header" style="background-color:rgba(0, 0, 0, 0.7);">';
+    html += '<h3 style="color:white;">' + title + '</h3></div>';
+
+    // Main content : body
+    html += '<div class="modal-body">';
+    html += '<p>' + content + '</p>';
+
+    // Project Metadata
+    html += $('#metadata').html();
+
+    // End of main content body
+    html += '</div>';
+
+    // Footer
+    html += '<div class="modal-footer" style="background-color:rgba(0, 0, 0, 0.7);"></div>';
+
+    // Return shepherd
+    return {
+        id: 'Popup Startup',
+        text: html,
+        attachTo: {
+            element: 'body',
+        },
+        buttons: [{ text: 'See tutorial', action: tour.next }],
+    }
+}
+
+// Check the browser's localstorage
+function dismissTour() {
+    if (!localStorage.getItem('shepherd-tour')) {
+        localStorage.setItem('shepherd-tour', 'yes');
+    }
+}
+
+// Start the tutorial
+function startTutorial() {
+    // Create a tour
+    const tour = new Shepherd.Tour({
+        useModalOverlay: true,
+        defaultStepOptions: {
+            classes: 'shepherd-theme-custom',
+            scrollTo: true,
+            cancelIcon: { enabled: true },
+            keyboardNavigation: true,
+            exitOnEsc: true,
+            when: {
+
+                show() {
+
+                    // Don't show the progress bar on first and final step
+                    if (tour.steps.indexOf(tour.currentStep) != 0 && tour.steps.indexOf(tour.currentStep) != tour.steps.length - 1) {
+                        const currentStepElement = tour.currentStep.el;
+                        const header = currentStepElement.querySelector('.shepherd-footer');
+                        const progress = document.createElement('div');
+                        const innerBar = document.createElement('span');
+                        const progressPercentage = ((tour.steps.indexOf(tour.currentStep) + 1) / tour.steps.length) * 100 + '%';
+
+                        progress.className = 'shepherd-progress-bar';
+                        innerBar.style.width = progressPercentage;
+
+                        progress.style.minWidth = '10px';
+
+                        progress.appendChild(innerBar);
+                        header.insertBefore(progress, currentStepElement.querySelector('.shepherd-button'));
+                    }
+                }
+            }
+        },
+
+    });
+
+    tour.addStep(htmlPopup(tour));
+
+    // Add automatic tour steps
+    const tourSteps = $('.nav.nav-list li').filter(function () {
+        return this.style.display !== 'none' && !this.classList.contains('hide');
+    }).map(function (index, element) {
+
+        const aElement = $(element).find('a')[0];
+
+        return {
+            id: `Step ${index + 1}`,
+            title: `Step ${index + 1}`,
+            text: $(aElement).attr('data-original-title'),
+            attachTo: {
+                element: aElement,
+                on: 'right',
+            },
+            buttons: [{ text: 'Previous', action: tour.back }, { text: 'Next', action: tour.next }],
+        };
+    }
+    ).get();
+
+    // Add 3 more personal tour steps
+    const stepHappyCoding = [
+        {
+            id: 'move-map',
+            title: 'Move the map',
+            text: 'Move the map',
+            attachTo: {
+                element: 'span#navbar',
+                on: 'left',
+            },
+            buttons: [{ text: 'Previous', action: tour.back }, { text: 'Next', action: tour.next }],
+        },
+
+        {
+            id: 'overview',
+            title: 'Overview box',
+            text: 'Overview box',
+            attachTo: {
+                element: '#overview-box',
+                on: 'top',
+            },
+            buttons: [{ text: 'Previous', action: tour.back }, { text: 'Next', action: tour.next }],
+        },
+
+        {
+            id: 'happy-coding',
+            title: 'Happy Coding',
+            text: 'And that is all, go ahead and start adding tours to your applications.',
+            attachTo: {
+                element: 'body',
+            },
+            buttons: [
+                { text: 'Previous', action: tour.back },
+                {
+                    text: 'Finish',
+                    action() {
+                        // Dismiss the tour when the finish button is clicked
+                        dismissTour();
+                        return this.hide();
+                    }
+                }],
+        }
+    ];
+
+    // Spread the steps into the tour array
+    tourSteps.push(...stepHappyCoding);
+    tour.addSteps(tourSteps);
+
+    // Return the
+    return tour;
+}
+
+lizMap.events.on({
+    uicreated: function () {
+        // Include the CSS CDN of shepherd
+        var link = document.createElement('link');
+        link.href = 'https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/css/shepherd.css';
+        link.rel = 'stylesheet';
+        document.head.appendChild(link);
+
+        // Include the JS CDN of shepherd
+        var script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/js/shepherd.min.js';
+        script.type = 'text/javascript';
+
+        script.onload = function () {
+            console.log('Shepherd.js has been loaded successfully!');
+            const tour = startTutorial();
+
+            // Dismiss the tour when the cancel icon is clicked
+            tour.on('cancel', dismissTour);
+
+            // Start the tour
+            if (!localStorage.getItem('shepherd-tour')) {
+                tour.start();
+            }
+        };
+
+        script.onerror = function () {
+            console.error('Error when loading shepherd.js');
+        };
+
+        document.head.appendChild(script);
+    }
+});