Fix introjs bugs

app/pages/events/entry_list/entry_list.php

@@ -6,11 +6,12 @@
 ?>
 
 <?php if ($event_infos->open && check_auth(Access::$ADD_EVENTS)): ?>
-    <div class="entries-header"><button onclick="selectTable()"> Copier le tableau</button></div>
+    <div class="entries-header"><button onclick="selectTable()"
+            data-intro="Vous pouvez copier le contenu du tableau affiché ici"> Copier le tableau</button></div>
 <?php endif ?>
 <?php if (!$event_infos->open): ?>
     <p class="center">
-        <?php "L'évenement n'est pas encore ouvert 🙃" ?>
+        <?= "L'évenement n'est pas encore ouvert 🙃" ?>
     </p>
 <?php else: ?>
     <div id="tabs" hx-target="#tabs" hx-swap="innerHTML">

app/pages/events/entry_list/entry_list_tabs.php

@@ -9,7 +9,7 @@
     . ($isSelected ? 'aria-selected="true" class="contrast" autofocus' : 'class="secondary outline" aria-selected="false"');
 ?>
 
-<div class="tab-list" role="tablist">
+<div class="tab-list" role="tablist" data-intro="Cliquez sur un onglet pour afficher les participants">
     <button hx-get="<?= "/evenements/$eventId/participants/tabs" ?>" <?= $getProps(!$selectedActivityId) ?>>Déplacement</button>
     <?php foreach ($activities as $activity): ?>
         <button id="<?= "activity$activity->id" ?>" hx-swap="innerHTML show:#<?= "activity$activity->id" ?>:top"

app/pages/events/eventUtils.php

@@ -25,7 +25,7 @@ function RenderActivityEntry(?Activity $activity, bool $can_register = null)
         </b>
         <?php if ($can_register): ?>
             <a href="/evenements/<?= $activity->event->id ?>/inscription_simple" class="outline contrast"
-                data-intro="Cliquez ici pour " . <?= $activity_entry ? 'modifier votre inscription' : 'vous inscrire' ?>>
+                data-intro="<?= "Vous pouvez " . ($activity_entry ? 'modifier votre inscription' : 'vous inscrire') ?> ici">
                 <i class=" fas fa-pen-to-square"></i> <?= $activity_entry ? "Gérer l'inscription" : "S'inscrire" ?>
             </a>
         <?php endif ?>
@@ -68,8 +68,8 @@ function RenderEventEntry(?EventEntry $entry, Event $event, bool $can_edit)
             } ?>
         </b>
         <?php if (($event->open && $event->deadline >= date_create("today")) || $can_edit): ?>
-            <a href="/evenements/<?= $event->id ?>/inscription" class="outline contrast" data-intro="Cliquez ici pour " .
-                <?= $entry ? 'modifier votre inscription' : 'vous inscrire' ?>>
+            <a href="/evenements/<?= $event->id ?>/inscription" class="outline contrast"
+                data-intro="<?= "Vous pouvez " . ($entry ? 'modifier votre inscription' : 'vous inscrire') ?> ici">
                 <i class="fas fa-pen-to-square"></i> <?= $entry ? "Gérer l'inscription" : "S'inscrire" ?>
             </a>
         <?php endif ?>

app/pages/events/view/event_view.php

@@ -19,6 +19,20 @@
 
 page($event->name)->css("event_view.css")->css("entry_list.css")->enableHelp();
 ?>
+<script>function start_intro() {
+        const tabGroup = document.querySelector('sl-tab-group');
+        const intro = introJs();
+
+        intro.onbeforechange((element) => {
+            // Find the closest tab-panel that contains the element
+            const tabPanel = element.closest('sl-tab-panel');
+            if (tabPanel) {
+                tabGroup.show(tabPanel.name);
+            }
+        });
+
+        intro.start();
+    }</script>
 
 <?= actions()
     ->back("/evenements")
@@ -41,18 +55,20 @@
 <?= $is_simple ? RenderActivityEntry($event->activities[0], $can_register) : RenderEventEntry($entry, $event, $can_edit) ?>
 
 <sl-tab-group>
-    <sl-tab slot="nav" panel="information" <?= $tab ? "" : "active" ?>>
+    <sl-tab slot="nav" panel="information" id="information-tab" <?= $tab ? "" : "active" ?>
+        data-intro="Cet onglet contient les informations générales de l'événement">
         Informations
     </sl-tab>
-    <sl-tab slot="nav" panel="entry-list" hx-trigger="load"
+    <sl-tab slot="nav" panel="entry-list" id="entry-list-tab" hx-trigger="load"
         hx-post="/evenements/<?= $event->id ?>/participants<?= $is_simple ? "?is_simple=true" : "" ?>"
         hx-target="#entry-list" <?= ($tab == "participants") ? "active" : "" ?>
         data-intro="Cliquez ici pour accéder aux licenciés déjà inscrits à l'événement">
         Participants
     </sl-tab>
     <?php if (Feature::Carpooling->on()): ?>
         <sl-tab slot="nav" panel="vehicles" hx-trigger="load" hx-post="/evenements/<?= $event->id ?>/vehicules"
-            hx-target="#vehicles" <?= ($tab == "vehicules") ? "active" : "" ?>>
+            hx-target="#vehicles" <?= ($tab == "vehicules") ? "active" : "" ?> id="vehicles-tab"
+            data-intro="L'onglet véhicule permet de gérer le covoiturage">
             Véhicules
         </sl-tab>
     <?php endif ?>

app/pages/vehicle/vehicle_view.php

@@ -16,5 +16,6 @@
     </div>
 <?php endforeach ?>
 
-<a role=button class="secondary" href="/evenements/<?= $event->id ?>/vehicule/nouveau">
+<a role=button class="secondary" href="/evenements/<?= $event->id ?>/vehicule/nouveau"
+    data-intro="Il est possible d'ajouter votre véhicule pour covoiturer ! 🏎️">
     <i class="fas fa-plus"></i> Ajouter un véhicule</a>