From 713e2872107e320b82cad78d9a9d5ea5e0de0c76 Mon Sep 17 00:00:00 2001 From: Jean-Marie Favreau Date: Mon, 6 Nov 2023 00:38:58 +0100 Subject: [PATCH] =?UTF-8?q?Changement=20de=20pr=C3=A9sentation=20(en=20cou?= =?UTF-8?q?rs)=20apr=C3=A8s=20discussion=20avec=20Alice?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/agenda_culturel/models.py | 3 + src/agenda_culturel/static/js/modal.js | 76 +++++++ src/agenda_culturel/static/style.scss | 22 ++ .../templates/agenda_culturel/day-inc.html | 66 ++++++ .../templates/agenda_culturel/event-inc.html | 141 +++++++----- .../templates/agenda_culturel/page-day.html | 66 ++++++ .../templates/agenda_culturel/page-month.html | 56 +++++ .../templates/agenda_culturel/page-week.html | 65 ++++++ .../templates/agenda_culturel/page.html | 19 +- src/agenda_culturel/templatetags/cat_extra.py | 11 +- .../templatetags/utils_extra.py | 24 ++- src/agenda_culturel/urls.py | 10 +- src/agenda_culturel/views.py | 204 +++++++++++++----- 13 files changed, 647 insertions(+), 116 deletions(-) create mode 100644 src/agenda_culturel/static/js/modal.js create mode 100644 src/agenda_culturel/templates/agenda_culturel/day-inc.html create mode 100644 src/agenda_culturel/templates/agenda_culturel/page-day.html create mode 100644 src/agenda_culturel/templates/agenda_culturel/page-month.html create mode 100644 src/agenda_culturel/templates/agenda_culturel/page-week.html diff --git a/src/agenda_culturel/models.py b/src/agenda_culturel/models.py index 49c8f04..e4f597a 100644 --- a/src/agenda_culturel/models.py +++ b/src/agenda_culturel/models.py @@ -86,6 +86,9 @@ class Event(models.Model): tags = ArrayField(models.CharField(max_length=64), verbose_name=_('Tags'), help_text=_("A list of tags that describe the event."), blank=True, null=True) + def single_day(self): + return not self.end_day or self.end_day == self.start_day + def get_absolute_url(self): return reverse("view_event", kwargs={"pk": self.pk, "extra": self.title}) diff --git a/src/agenda_culturel/static/js/modal.js b/src/agenda_culturel/static/js/modal.js new file mode 100644 index 0000000..1a7f83d --- /dev/null +++ b/src/agenda_culturel/static/js/modal.js @@ -0,0 +1,76 @@ +const isOpenClass = "modal-is-open"; +const openingClass = "modal-is-opening"; +const closingClass = "modal-is-closing"; +let visibleModal = null; + +// Toggle modal +const toggleModal = (event) => { + event.preventDefault(); + const modal = document.getElementById(event.currentTarget.getAttribute("data-target")); + typeof modal != "undefined" && modal != null && isModalOpen(modal) + ? closeModal(modal) + : openModal(modal); +}; + +// Is modal open +const isModalOpen = (modal) => { + return modal.hasAttribute("open") && modal.getAttribute("open") != "false" ? true : false; +}; + +// Open modal +const openModal = (modal) => { + if (isScrollbarVisible()) { + document.documentElement.style.setProperty("--scrollbar-width", `${getScrollbarWidth()}px`); + } + modal.setAttribute("open", true); +}; + +// Close modal +const closeModal = (modal) => { + visibleModal = null; + document.documentElement.style.removeProperty("--scrollbar-width"); + modal.removeAttribute("open"); +}; + +// Close with a click outside +document.addEventListener("click", (event) => { + if (visibleModal != null) { + const modalContent = visibleModal.querySelector("article"); + const isClickInside = modalContent.contains(event.target); + !isClickInside && closeModal(visibleModal); + } +}); + +// Close with Esc key +document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && visibleModal != null) { + closeModal(visibleModal); + } +}); + +// Get scrollbar width +const getScrollbarWidth = () => { + // Creating invisible container + const outer = document.createElement("div"); + outer.style.visibility = "hidden"; + outer.style.overflow = "scroll"; // forcing scrollbar to appear + outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps + document.body.appendChild(outer); + + // Creating inner element and placing it in the container + const inner = document.createElement("div"); + outer.appendChild(inner); + + // Calculating difference between container's full width and the child width + const scrollbarWidth = outer.offsetWidth - inner.offsetWidth; + + // Removing temporary elements from the DOM + outer.parentNode.removeChild(outer); + + return scrollbarWidth; +}; + +// Is scrollbar visible +const isScrollbarVisible = () => { + return document.body.scrollHeight > screen.height; +}; \ No newline at end of file diff --git a/src/agenda_culturel/static/style.scss b/src/agenda_culturel/static/style.scss index f1f8940..6a0a441 100644 --- a/src/agenda_culturel/static/style.scss +++ b/src/agenda_culturel/static/style.scss @@ -160,4 +160,26 @@ footer { .infos-and-buttons .buttons { flex: auto; +} + +article.day { + margin: 0; + padding: 0.3em; +} + +article.day>ul { + margin: 0; + padding: 0; + + >li { + list-style: none; + } +} + + +.right { + text-align: right; +} +.navigation { + margin: 1em 0; } \ No newline at end of file diff --git a/src/agenda_culturel/templates/agenda_culturel/day-inc.html b/src/agenda_culturel/templates/agenda_culturel/day-inc.html new file mode 100644 index 0000000..141a31f --- /dev/null +++ b/src/agenda_culturel/templates/agenda_culturel/day-inc.html @@ -0,0 +1,66 @@ + +{% load cat_extra %} +{% load static %} + +{% with day.date|date:"Y-m-d" as daytag %} +{% with "date-"|add:daytag as daytag %} + +
+

{{ day.date | date:"l j" }}

+ {% if day.events %} + {% if resume %} + +
+ +{% endwith %} +{% endwith %} \ No newline at end of file diff --git a/src/agenda_culturel/templates/agenda_culturel/event-inc.html b/src/agenda_culturel/templates/agenda_culturel/event-inc.html index e65a369..9162bb3 100644 --- a/src/agenda_culturel/templates/agenda_culturel/event-inc.html +++ b/src/agenda_culturel/templates/agenda_culturel/event-inc.html @@ -45,83 +45,120 @@ {% include "agenda_culturel/date-times-inc.html" with event=event %}

{% endif %} + {% elif display == "modal" %} + +
+ +

{{ event.category | small_cat }} {{ event.title }}

+ +

+ + + + {{ event.location }} +

+

+ + + {% if event.end_day %}du{% else %}le{% endif %} + {% include "agenda_culturel/date-times-inc.html" with event=event %} +

+
+ {% else %}
{% include "agenda_culturel/ephemeris-inc.html" with event=event %}

{{ event.title }}

-

- - - - {{ event.location }} -

{% if event.end_day %}du{% else %}le{% endif %} {% include "agenda_culturel/date-times-inc.html" with event=event %}

+

+ + + + {{ event.location }} +

{% endif %} - {% if event.image %} + {% if event.image and display != "modal" %}
{{ event.image_alt }}
{% endif %} - {% if display in "in list by day" %} + {% if display in "in list by day" or display == "modal" %}

{{ event.description |truncatewords:20 }}

{% else %}

{{ event.description }}

{% endif %} - - - {% comment %} - On affiche le pied qui contient les informations de tags, catégories, etc - {% endcomment %} -