added backend driver.js tours support

Author: mdegrandis-alpenite

app/base/abstracts/Controllers/AdminPage.php

@@ -177,6 +177,7 @@ protected function prepareTemplate(): Template
                     'mediaPasteUrl' => $this->getUrl('crud.app.base.controllers.admin.json.mediapaste'),
                     'currentLocale' => $this->getCurrentLocale(),
                     'defaultTinymceOptions' => FORMS_DEFAULT_TINYMCE_OPTIONS,
+                    'driverTourSteps' => $this->getUiTourSteps(),
                 ]
             ) . ");"
         );
@@ -325,6 +326,11 @@ public function getTemplateData(): array
         return $this->template_data;
     }
 
+    public function getUiTourSteps(): array
+    {
+        return [];
+    }
+
     /**
      * gets url by route_name and params
      *

app/base/controllers/Admin/Dashboard.php

@@ -141,4 +141,26 @@ public function getTemplateData(): array
 
         return $this->template_data;
     }
+
+    public function getUiTourSteps(): array
+    {
+        return [
+            /*
+            [
+                'element' => '#sidebar',
+                'popover' => [
+                    'title' => __('Menu Sidebar'),
+                    'description' => __('Use the sidebar to navigate through different sections of the admin panel. Click on the icons to expand and access various features and settings.'),
+                ],
+            ],
+            [
+                'element' => 'main',
+                'popover' => [
+                    'title' => __('Quick Access Links'),
+                    'description' => __('Use these links to quickly navigate to different sections of the admin panel for managing content, users, settings, and more.'),
+                ],
+            ],
+            */
+        ];
+    }
 }

js/src/admin/admin.dependencies.js

@@ -4,4 +4,5 @@
 //=include ../../../node_modules/moment/min/moment-with-locales.min.js
 //=include ./tinymce-plugin-block.js
 //=include ./tinymce-plugin-aitranslate.js
+//=include ../../../node_modules/driver.js/dist/driver.min.js
 //=include ../i18n.js

js/src/admin/admin.init.js

@@ -298,6 +298,42 @@
                         $elem.appAdmin('showTooltip', evt.target, __('Copied!'));
                     }
                 });
+            
+                // show driver.js tour if needed
+                if ($elem.appAdmin('getSettings').driverTourSteps.length > 0) {
+                    $elem.appAdmin('getUserUiSettings', function(data) {
+                        if (!data.tours || data.tours[$elem.appAdmin('getSettings').currentRoute] != 'shown') {
+                            const driverOptions = {
+                                showProgress: true,
+                                steps: $elem.appAdmin('getSettings').driverTourSteps,
+                                doneBtnText: __('Finish'),
+                                closeBtnText: __('Close'),
+                                nextBtnText: __('Next'),
+                                prevBtnText: __('Previous'),
+                            };
+                            console.log('Starting driver.js tour with options:', driverOptions);
+                            const driverObj = new Driver(driverOptions);
+                            driverObj.setSteps(driverOptions.steps);
+                            driverObj.start();
+
+                            /*
+                            driverObj.on('complete', function() {
+                                $elem.appAdmin('updateUserUiSettings', 
+                                    {'tour': {[ $elem.appAdmin('getSettings').currentRoute ]: 'shown'}},
+                                    function (data) { }
+                                );
+                            });
+
+                            driverObj.on('close', function() {
+                                $elem.appAdmin('updateUserUiSettings', 
+                                    {'tour': {[ $elem.appAdmin('getSettings').currentRoute ]: 'shown'}},
+                                    function (data) { }
+                                );
+                            });
+                            */
+                        }
+                    });
+                }
             });
         },
     }, allMethods); // Estende con tutti i metodi

package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "dependencies": {
     "dompurify": "^3.3.0",
+    "driver.js": "^0.9.8",
     "gallery": "^1.0.2",
     "gulp-header": "^2.0.9",
     "gulp-include": "^2.4.1",

scss/admin.scss

@@ -15,6 +15,7 @@
 @use "../vendor/components/font-awesome/scss/solid.scss";
 @use "../vendor/components/font-awesome/scss/regular.scss";
 
+@use "../node_modules/driver.js/dist/driver.min.css";
 
 
 @CHARSET "UTF-8";