amélioration calendrier écran tactile, selection sans touché prolongé, versionedFileURL() dispo de partout

5 files changed, 44 insertions, 19 deletions

diff --git a/public/css/calendar.css b/public/css/calendar.css
index 1cfb0fd..314a5ad 100644
--- a/public/css/calendar.css
+++ b/public/css/calendar.css
@@ -1,7 +1,10 @@
+/* !important est nécessaire pour écraser le CSS inséré par le javascript de fullcalendar */
+
 .event{
     border: 2px double;
     border-radius: 5px;
     width: max-content;
+    max-width: 250px;
     padding: 5px;
 }
 #calendar_zone{
@@ -13,16 +16,17 @@
 #calendar{
     width: 1165px; /* on enlève le "gap" */
 }
+#event_modal{}
 .event_title_box{
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 .event_close_button{
-    height: fit-content;
+    /*height: fit-content;*/
 }
 .fc-toolbar-title{
-    font-size: x-large !important;
+    /*font-size: x-large !important;*/
 }
 .fc-button{
     padding: 0.2em 0.4em !important;
@@ -60,12 +64,21 @@ td .fc-timegrid-axis{
         padding: 0;
     }
     .fc-toolbar-title{
-        font-size: large !important;
+        /*font-size: large !important;*/
+    }
+    .fc-header-toolbar{
+        font-size: smaller;
+    }
+    h3, p, .event > button{
+        font-size: smaller;
     }
 }
 @media screen and (max-width: 650px){
-    .fc-toolbar-chunk{
-        font-size: smaller;
+    .fc-header-toolbar{
+        font-size: small;
+    }
+    .fc-toolbar-title{
+        font-size: 1.5em !important; /* au lieu de 1.75em */
     }
 }
 @media screen and (max-width: 550px){
diff --git a/public/js/calendar.js b/public/js/calendar.js
index 7450a91..2275c10 100644
--- a/public/js/calendar.js
+++ b/public/js/calendar.js
@@ -29,6 +29,8 @@ document.addEventListener('DOMContentLoaded', function(){
         stickyHeaderDates: true, // garder les en-tête de colonnes lors du scroll
         fixedWeekCount: false, // avec false, affiche 4, 5 ou 6 semaines selon le mois
         selectable: true, // sélection de jours multiples
+        longPressDelay: 0, /* par défaut sur mobile, select est déclenché avec un appui d'une seconde,
+        chatgpt déconseille 0 par risque de conflit entre selection et scrolling, mettre plutôt 200 ou 300ms */
         navLinks: true, // numéros de jour et de semaines clicables
         
         // vue semaine
@@ -43,6 +45,14 @@ document.addEventListener('DOMContentLoaded', function(){
             selected_start_string = info.startStr; // variable "globale"
             hideModal();
         },
+        // méthode alternative à longPressDelay: 0 pour obtenir une sélection d'un simple "tap" sur écran tactile (mettre le if inverse dans select)
+        /*dateClick: function(info) {
+            if (window.matchMedia('(pointer: coarse)').matches) {
+                // utile sur mobile/tablette : déclenche sur un tap
+                console.log('dateClick', info.dateStr);
+                calendar.select(info.date, info.date); // hack permettant de sélectionner une journée seule uniquement
+            }
+        },*/
         //unselect: function(event, view){},
 
         eventClick: function(info){
@@ -72,14 +82,14 @@ document.addEventListener('DOMContentLoaded', function(){
                     <h3>` + info.event.title + `</h3>
                     <p><i>` + info.event.extendedProps.description + `</i></p>`;
             if(checked && (formated_start === formated_end)){ // affichage simplifié évènement d'un jour
-                aside_content = aside_content + `<p>le ` + formated_start + `</p>
-                    </div>`;
+                aside_content = aside_content + `<p>le ` + formated_start + `</p>`;
             }
             else{
                 aside_content = aside_content + `<p>du ` + formated_start + `</p>
-                        <p>au ` + formated_end + `</p>
-                    </div>`;
+                        <p>au ` + formated_end + `</p>`;
             }
+            aside_content += `<button class="event_close_button">Fermer</button>
+                </div>`;
             
             aside.innerHTML = aside_content;
             calendar.updateSize();
diff --git a/public/js/calendar_admin.js b/public/js/calendar_admin.js
index 76a1ce9..7f167a4 100644
--- a/public/js/calendar_admin.js
+++ b/public/js/calendar_admin.js
@@ -30,6 +30,8 @@ document.addEventListener('DOMContentLoaded', function(){
         stickyHeaderDates: true, // garder les en-tête de colonnes lors du scroll
         fixedWeekCount: false, // avec false, affiche 4, 5 ou 6 semaines selon le mois
         selectable: true, // sélection de jours multiples
+        longPressDelay: 0, /* par défaut sur mobile, select est déclenché avec un appui d'une seconde,
+        chatgpt déconseille 0 par risque de conflit entre selection et scrolling, mettre plutôt 200 ou 300ms */
         navLinks: true, // numéros de jour et de semaines clicables
         
         // vue semaine
diff --git a/src/view/HeadBuilder.php b/src/view/HeadBuilder.php
index f1f41ba..06a1301 100644
--- a/src/view/HeadBuilder.php
+++ b/src/view/HeadBuilder.php
@@ -26,25 +26,25 @@ class HeadBuilder extends AbstractBuilder
             $css = '';
                 foreach($css_array as $name)
                         {
-                                $css .= '<link rel="stylesheet" href="' . $this->versionedFileURL('css', $name) . '">' . "\n";
+                                $css .= '<link rel="stylesheet" href="' . self::versionedFileURL('css', $name) . '">' . "\n";
                         }
                         
             $js = '';
                 foreach($js_array as $name)
                         {
-                                $js .= '<script src="' . $this->versionedFileURL('js', $name) . '"></script>' . "\n";
+                                $js .= '<script src="' . self::versionedFileURL('js', $name) . '"></script>' . "\n";
                         }
 
             if(MainBuilder::$modif_mode){
-                $css .= '<link rel="stylesheet" href="' . $this->versionedFileURL('css', 'modif_page') . '">' . "\n";
-                $js .= '<script src="' . $this->versionedFileURL('js', 'modif_page') . '"></script>' . "\n";
+                $css .= '<link rel="stylesheet" href="' . self::versionedFileURL('css', 'modif_page') . '">' . "\n";
+                $js .= '<script src="' . self::versionedFileURL('js', 'modif_page') . '"></script>' . "\n";
             }
 
             // tinymce, nécéssite un script de copie dans composer.json
             if($_SESSION['admin']){
-                $css .= '<link rel="stylesheet" href="' . $this->versionedFileURL('css', 'tinymce') . '">' . "\n";
-                $js .= '<script src="' . $this->versionedFileURL('js', 'tinymce/tinymce.min') . '"></script>' . "\n"; // pour js/tinymce/tinymce.min.js
-                $js .= '<script src="' . $this->versionedFileURL('js', 'tinymce') . '"></script>' . "\n";
+                $css .= '<link rel="stylesheet" href="' . self::versionedFileURL('css', 'tinymce') . '">' . "\n";
+                $js .= '<script src="' . self::versionedFileURL('js', 'tinymce/tinymce.min') . '"></script>' . "\n"; // pour js/tinymce/tinymce.min.js
+                $js .= '<script src="' . self::versionedFileURL('js', 'tinymce') . '"></script>' . "\n";
             }
 
             // titre
@@ -77,7 +77,7 @@ class HeadBuilder extends AbstractBuilder
         return $this->stop;
     }
 
-    private function versionedFileURL(string $type, string $filename): string
+    static public function versionedFileURL(string $type, string $filename): string
     {
         $path = $type . '/' . $filename . '.' . $type;
 
diff --git a/src/view/templates/calendar.php b/src/view/templates/calendar.php
index 144df00..e45f631 100644
--- a/src/view/templates/calendar.php
+++ b/src/view/templates/calendar.php
@@ -8,10 +8,10 @@
     <script src='js/fullcalendar/packages/core/locales/fr.global.min.js'></script>
 <?php
 if($_SESSION['admin'] === true){
-    echo '<script src="js/calendar_admin.js"></script>' . "\n";
+    echo '<script src="' . HeadBuilder::versionedFileURL('js', 'calendar_admin') . '"></script>' . "\n";
 }
 else{
-    echo '<script src="js/calendar.js"></script>' . "\n";
+    echo '<script src="' . HeadBuilder::versionedFileURL('js', 'calendar') . '"></script>' . "\n";
 }
 ?>
         <h3><?= $title ?></h3>