From 24c7160e70f6386c1a20ff85a6ffa64cf466f32a Mon Sep 17 00:00:00 2001
From: Jean-Marie Favreau <j-marie.favreau@uca.fr>
Date: Sun, 15 Sep 2024 19:09:24 +0200
Subject: [PATCH] Navigation vers une autre semaine

Fix #138
---
 .../static/js/calendar-buttons.js             | 25 ++++++++++++++-----
 src/agenda_culturel/static/style.scss         |  7 ++++--
 .../templates/agenda_culturel/page-month.html | 15 +++++++++--
 .../templates/agenda_culturel/page-week.html  | 16 ++++++++++--
 4 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/agenda_culturel/static/js/calendar-buttons.js b/src/agenda_culturel/static/js/calendar-buttons.js
index 61dcf2a..00181e7 100644
--- a/src/agenda_culturel/static/js/calendar-buttons.js
+++ b/src/agenda_culturel/static/js/calendar-buttons.js
@@ -2,26 +2,39 @@
 
 
 function displayButtons() {
+    delta = 60
     agenda = document.getElementById("calendar");
     grid   = agenda.querySelector(".grid");
-    buttonLeft = agenda.querySelector(".slider-button.button-left");
-    buttonRight = agenda.querySelector(".slider-button.button-right");
+    buttonLeft = agenda.querySelector(".slider-button.slider-button-inside.button-left");
+    buttonRight = agenda.querySelector(".slider-button.slider-button-inside.button-right");
+    buttonLeftPage = agenda.querySelector(".slider-button.slider-button-page.button-left");
+    buttonRightPage = agenda.querySelector(".slider-button.slider-button-page.button-right");
 
     if (agenda.offsetWidth < grid.offsetWidth) {
-        if (agenda.scrollLeft == 0) 
+        if (agenda.scrollLeft < delta) {
             buttonLeft.classList.add("hidden");
-        else
+            buttonLeftPage.classList.remove("hidden");
+        }
+        else {
             buttonLeft.classList.remove("hidden");
-        if (agenda.scrollLeft + agenda.offsetWidth - grid.offsetWidth == 0) 
+            buttonLeftPage.classList.add("hidden");
+        }
+        if (agenda.scrollLeft + agenda.offsetWidth - grid.offsetWidth >= -2) {
             buttonRight.classList.add("hidden");
-        else
+            buttonRightPage.classList.remove("hidden");
+        }
+        else {
             buttonRight.classList.remove("hidden");
+            buttonRightPage.classList.add("hidden");
+        }
             
         
     }
     else {
         buttonLeft.classList.add("hidden");
         buttonRight.classList.add("hidden");
+        buttonLeftPage.classList.add("hidden");
+        buttonRightPage.classList.add("hidden");
     }
 }
 
diff --git a/src/agenda_culturel/static/style.scss b/src/agenda_culturel/static/style.scss
index 6c77f39..a858164 100644
--- a/src/agenda_culturel/static/style.scss
+++ b/src/agenda_culturel/static/style.scss
@@ -312,10 +312,13 @@ footer [data-tooltip] {
         border-radius: 1em;
         line-height: 2em;
         text-align: center;
-        position: absolute;
-        top: 75vh;
+        position: fixed;
+        top: 65vh;
         z-index: 10;
         opacity: 0.9;
+        a {
+            color: var(--primary-inverse);
+        }
     }
     .slider-button.hidden {
         display: none;
diff --git a/src/agenda_culturel/templates/agenda_culturel/page-month.html b/src/agenda_culturel/templates/agenda_culturel/page-month.html
index 06c9f9d..cdcd681 100644
--- a/src/agenda_culturel/templates/agenda_culturel/page-month.html
+++ b/src/agenda_culturel/templates/agenda_culturel/page-month.html
@@ -54,7 +54,13 @@
         </div>
     </header>
     <div id="calendar">
-        <div class="slider-button button-left hidden">{% picto_from_name "arrow-left" %}</div>
+        <div class="slider-button slider-button-inside button-left hidden">{% picto_from_name "arrow-left" %}</div>
+        {% if calendar.firstdate|shift_day:-1|not_before_first %}
+        {% if calendar.lastdate|not_after_last %}
+        <div class="slider-button slider-button-page button-left hidden"><a href="{% url 'month_view' calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a></div>
+        {% endif %}
+        {% endif %}
+
         <div class="grid week-in-month">
         {% for d in calendar.calendar_days_list %}
         {% if forloop.counter0|divisibleby:7 %}
@@ -64,7 +70,12 @@
         {% include "agenda_culturel/day-inc.html" with day=d resume=1 fixed_style=calendar.all_in_past filter=filter headers="h3" %}
         {% endfor %}
         </div>
-        <div class="slider-button button-right hidden">{% picto_from_name "arrow-right" %}</div>
+        {% if calendar.lastdate|shift_day:+1|not_after_last %}
+        {% if calendar.lastdate|not_before_first %}
+        <div class="slider-button slider-button-page button-right hidden"><a href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a></div>
+        {% endif %}
+        {% endif %}
+        <div class="slider-button slider-button-inside button-right hidden">{% picto_from_name "arrow-right" %}</div>
     </div>
 
 
diff --git a/src/agenda_culturel/templates/agenda_culturel/page-week.html b/src/agenda_culturel/templates/agenda_culturel/page-week.html
index c8ed2c2..48b2708 100644
--- a/src/agenda_culturel/templates/agenda_culturel/page-week.html
+++ b/src/agenda_culturel/templates/agenda_culturel/page-week.html
@@ -55,13 +55,25 @@
         </div>
     </header>
     <div id="calendar">
-        <div class="slider-button button-left hidden">{% picto_from_name "arrow-left" %}</div>
+        <div class="slider-button slider-button-inside button-left hidden">{% picto_from_name "arrow-left" %}</div>
+        {% if calendar.firstdate|shift_day:-1|not_before_first %}
+        {% if calendar.lastdate|not_after_last %}
+        <div class="slider-button slider-button-page button-left hidden"><a href="{% url 'week_view' calendar.previous_week.year calendar.previous_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a></div>
+        {% endif %}
+        {% endif %}
+
         <div class="grid">
         {% for d in calendar.calendar_days_list %}
         {% include "agenda_culturel/day-inc.html" with day=d fixed_style=calendar.all_in_past filter=filter %}
         {% endfor %}
         </div>
-        <div class="slider-button button-right hidden">{% picto_from_name "arrow-right" %}</div>
+        <div class="slider-button slider-button-inside button-right hidden">{% picto_from_name "arrow-right" %}</div>
+        {% if calendar.lastdate|shift_day:+1|not_after_last %}
+        {% if calendar.lastdate|not_before_first %}
+        <div class="slider-button slider-button-page button-right hidden"><a href="{% url 'week_view' calendar.next_week.year calendar.next_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a></div>
+        {% endif %}
+        {% endif %}
+
     </div>
 
     <footer>