From 1ad62fda75d7fe88e52099377c30166a21a58a97 Mon Sep 17 00:00:00 2001
From: Mathieu Perrin <mathieu.perrin@insa-lyon.fr>
Date: Sat, 14 Dec 2024 14:22:28 +0100
Subject: [PATCH] 340: fix introjs bugs

---
 app/pages/events/entry_list/entry_list.php    |  5 +++--
 .../events/entry_list/entry_list_tabs.php     |  2 +-
 app/pages/events/eventUtils.php               |  6 ++---
 app/pages/events/view/event_view.php          | 22 ++++++++++++++++---
 app/pages/vehicle/vehicle_view.php            |  3 ++-
 assets/css/introjs.css                        |  3 ++-
 6 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/app/pages/events/entry_list/entry_list.php b/app/pages/events/entry_list/entry_list.php
index 03e8ffca..dabf56f0 100644
--- a/app/pages/events/entry_list/entry_list.php
+++ b/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">
diff --git a/app/pages/events/entry_list/entry_list_tabs.php b/app/pages/events/entry_list/entry_list_tabs.php
index 5179daf0..eb27b0cd 100644
--- a/app/pages/events/entry_list/entry_list_tabs.php
+++ b/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"
diff --git a/app/pages/events/eventUtils.php b/app/pages/events/eventUtils.php
index 5f93ca5c..303ca287 100644
--- a/app/pages/events/eventUtils.php
+++ b/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 ?>
diff --git a/app/pages/events/view/event_view.php b/app/pages/events/view/event_view.php
index e80ac10f..3a841bd0 100644
--- a/app/pages/events/view/event_view.php
+++ b/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,10 +55,11 @@
 <?= $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">
@@ -52,7 +67,8 @@
     </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 ?>
diff --git a/app/pages/vehicle/vehicle_view.php b/app/pages/vehicle/vehicle_view.php
index 9c50801e..2d16271c 100644
--- a/app/pages/vehicle/vehicle_view.php
+++ b/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>
\ No newline at end of file
diff --git a/assets/css/introjs.css b/assets/css/introjs.css
index 162b69bc..a429ce87 100644
--- a/assets/css/introjs.css
+++ b/assets/css/introjs.css
@@ -44,7 +44,8 @@ tr.introjs-showElement > th {
 .introjs-tooltipReferenceLayer {
   box-sizing: content-box;
   position: absolute;
-  visibility: hidden;
+  /* fix for IOS 18 */
+  visibility: visible;
   z-index: 100000000;
   background-color: transparent;
   transition: all 0.3s ease-out;