Merge pull request #1185 from ae-utbm/posters

Remove jquery from posters

com/static/bundled/com/slideshow-index.ts

@@ -0,0 +1,49 @@
+const INTERVAL = 10;
+
+interface Poster {
+  url: string; // URL of the poster
+  displayTime: number; // Number of seconds to display that poster
+}
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("slideshow", (posters: Poster[]) => ({
+    posters: posters,
+    progress: 0,
+    elapsed: 0,
+
+    current: 0,
+    previous: 0,
+
+    init() {
+      this.$watch("elapsed", () => {
+        const displayTime = this.posters[this.current].displayTime * 1000;
+        if (this.elapsed > displayTime) {
+          this.previous = this.current;
+          this.current = this.getNext();
+          this.elapsed = 0;
+        }
+        if (displayTime === 0) {
+          this.progress = 100;
+        } else {
+          this.progress = (100 * this.elapsed) / displayTime;
+        }
+      });
+      setInterval(() => {
+        this.elapsed += INTERVAL;
+      }, INTERVAL);
+    },
+
+    getNext() {
+      return (this.current + 1) % this.posters.length;
+    },
+
+    async toggleFullScreen(event: Event) {
+      if (document.fullscreenElement) {
+        await document.exitFullscreen();
+        return;
+      }
+      const target = event.target as HTMLElement;
+      await target.requestFullscreen();
+    },
+  }));
+});

com/static/com/css/posters.scss

@@ -111,7 +111,7 @@
             top: 0;
             left: 0;
             z-index: 10;
-            content: "Click to expand";
+            content: attr(hover);
             color: white;
             background-color: rgba(black, 0.5);
           }

com/static/com/js/poster_list.js

@@ -1,23 +0,0 @@
-$(document).ready(() => {
-  $("#poster_list #view").click(() => {
-    $("#view").removeClass("active");
-  });
-
-  $("#poster_list .poster .image").click((e) => {
-    let el = $(e.target);
-    if (el.hasClass("image")) {
-      el = el.find("img");
-    }
-    $("#poster_list #view #placeholder").html(el.clone());
-
-    $("#view").addClass("active");
-  });
-
-  $(document).keyup((e) => {
-    if (e.keyCode === 27) {
-      // escape key maps to keycode `27`
-      e.preventDefault();
-      $("#view").removeClass("active");
-    }
-  });
-});

com/static/com/js/slideshow.js

@@ -1,98 +0,0 @@
-$(document).ready(() => {
-  const transitionTime = 1000;
-
-  let i = 0;
-  const max = $("#slideshow .slide").length;
-
-  function enterFullscreen() {
-    const element = document.getElementById("slideshow");
-    $(element).addClass("fullscreen");
-    if (element.requestFullscreen) {
-      element.requestFullscreen();
-    } else if (element.mozRequestFullScreen) {
-      element.mozRequestFullScreen();
-    } else if (element.webkitRequestFullscreen) {
-      element.webkitRequestFullscreen();
-    } else if (element.msRequestFullscreen) {
-      element.msRequestFullscreen();
-    }
-  }
-
-  function exitFullscreen() {
-    const element = document.getElementById("slideshow");
-    $(element).removeClass("fullscreen");
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    } else if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen();
-    } else if (document.mozCancelFullScreen) {
-      document.mozCancelFullScreen();
-    } else if (document.msExitFullscreen) {
-      document.msExitFullscreen();
-    }
-  }
-
-  function initProgressBar() {
-    $("#slideshow #progress_bar").css("transition", "none");
-    $("#slideshow #progress_bar").removeClass("progress");
-    $("#slideshow #progress_bar").addClass("init");
-  }
-
-  function startProgressBar(displayTime) {
-    $("#slideshow #progress_bar").removeClass("init");
-    $("#slideshow #progress_bar").addClass("progress");
-    $("#slideshow #progress_bar").css("transition", `width ${displayTime}s linear`);
-  }
-
-  function next() {
-    initProgressBar();
-    const slide = $($("#slideshow .slide").get(i % max));
-    slide.removeClass("center");
-    slide.addClass("left");
-
-    const nextSlide = $($("#slideshow .slide").get((i + 1) % max));
-    nextSlide.removeClass("right");
-    nextSlide.addClass("center");
-    const displayTime = nextSlide.attr("display_time") || 2;
-
-    $("#slideshow .bullet").removeClass("active");
-    const bullet = $("#slideshow .bullet")[(i + 1) % max];
-    $(bullet).addClass("active");
-
-    i = (i + 1) % max;
-
-    setTimeout(() => {
-      const othersLeft = $("#slideshow .slide.left");
-      othersLeft.removeClass("left");
-      othersLeft.addClass("right");
-
-      startProgressBar(displayTime);
-      setTimeout(next, displayTime * 1000);
-    }, transitionTime);
-  }
-
-  const displayTime = $("#slideshow .center").attr("display_time");
-  initProgressBar();
-  setTimeout(() => {
-    if (max > 1) {
-      startProgressBar(displayTime);
-      setTimeout(next, displayTime * 1000);
-    }
-  }, 10);
-
-  $("#slideshow").click(() => {
-    if ($("#slideshow").hasClass("fullscreen")) {
-      exitFullscreen();
-    } else {
-      enterFullscreen();
-    }
-  });
-
-  $(document).keyup((e) => {
-    if (e.keyCode === 27) {
-      // escape key maps to keycode `27`
-      e.preventDefault();
-      exitFullscreen();
-    }
-  });
-});

com/static/css/slideshow.scss

@@ -1,4 +1,4 @@
-body{
+body {
   position: absolute;
   width: 100vw;
   height: 100vh;
@@ -7,22 +7,22 @@ body{
   margin: 0;
 }
 
-#slideshow{
+#slideshow {
   position: relative;
   background-color: lightgrey;
 
   height: 100%;
 
-  *{
+  * {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
 
-  &:hover{
+  &:hover {
 
-    &::before{
+    &::before {
 
       position: absolute;
       width: 100%;
@@ -34,7 +34,7 @@ body{
 
       z-index: 10;
 
-      content: "Click to expand";
+      content: attr(hover);
 
       color: white;
       background-color: rgba(black, 0.5);
@@ -43,7 +43,7 @@ body{
 
   }
 
-  &.fullscreen{
+  &:fullscreen {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -51,57 +51,78 @@ body{
     left: 0;
     background: none;
 
-    &:before{
-      display:none;
+    &:before {
+      display: none;
     }
 
-    #slides{
+    #slides {
       height: 100vh;
     }
 
   }
 
-  #slides{
+  #slides {
     position: relative;
     height: 100%;
     overflow: hidden;
+    background-color: grey;
 
-    .slide{
+    .slide {
       position: absolute;
       width: 100%;
       height: 100%;
 
-      display: inline-flex;
+      display: none;
       justify-content: center;
 
       top: 0px;
+      left: 0%;
 
-      background-color: grey;
-      transition: left 1s ease-out;
-
-      img{
+      img {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
       }
-    }
 
-    .slide.left{
-      left: -100%;
-    }
+      &.current {
+        display: inline-flex;
+        left: 0%;
+        animation: scrolling-in 1s linear;
+      }
 
-    .slide.center{
-      left: 0px;
-    }
+      &.previous {
+        display: inline-flex;
+        animation: scrolling-out 1s linear;
+        opacity: 0;
+        transition: opacity 0.1s;
+        transition-delay: 0.9s;
+      }
+
+      @keyframes scrolling-in {
+        0% {
+          transform: translateX(100%);
+        }
+
+        100% {
+          transform: translateX(0%);
+        }
+      }
+
+      @keyframes scrolling-out {
+        0% {
+          transform: translateX(0%);
+        }
+
+        100% {
+          transform: translateX(-100%);
+        }
+      }
 
-    .slide.right{
-      left: 100%;
-      transition: none;
     }
   }
 
 
-  #progress_bullets{
+  #progress_bullets {
     position: absolute;
     bottom: 10px;
     width: 100%;
@@ -112,7 +133,7 @@ body{
 
     margin-bottom: 10px;
 
-    .bullet{
+    .bullet {
       height: 10px;
       width: 10px;
 
@@ -123,27 +144,33 @@ body{
 
       background-color: grey;
 
-      &.active{
+      &.active {
         background-color: #c99836;
       }
     }
   }
 
-  #progress_bar{
+  progress {
+    --color: #304c83;
+
     position: absolute;
     bottom: 0px;
     height: 10px;
-    background-color: #304c83;
+    color: var(--color);
+    width: 100%;
+    margin-bottom: 0px;
+    border: none;
 
-    &.init{
-      width: 0px;
-      transition: none;
+    &::-moz-progress-bar {
+      background: var(--color);
     }
 
-    &.progress{
-      width: 100%;
-      transition: width 10s linear;
+    &::-webkit-progress-value {
+      background: var(--color);
+    }
+
+    &[value] {
+      background-color: transparent;
     }
   }
 }
-

com/templates/com/poster_list.jinja

@@ -1,11 +1,5 @@
 {% extends "core/base.jinja" %}
 
-{% block script %}
-  {{ super() }}
-  <script src="{{ static('com/js/poster_list.js') }}"></script>
-{% endblock %}
-
-
 {% block title %}
   {% trans %}Poster{% endtrans %}
 {% endblock %}
@@ -15,7 +9,7 @@
 {% endblock %}
 
 {% block content %}
-  <div id="poster_list">
+  <div id="poster_list" x-data="{ active: null }">
 
     <div id="title">
       <h3>{% trans %}Posters{% endtrans %}</h3>
@@ -38,7 +32,13 @@
         {% for poster in poster_list %}
           <div class="poster{% if not poster.is_moderated %} not_moderated{% endif %}">
             <div class="name">{{ poster.name }}</div>
-            <div class="image"><img src="{{ poster.file.url }}"></img></div>
+            <div
+              class="image"
+              hover="{% trans %}Click to expand{% endtrans %}"
+              @click="(e) => active = e.target.firstElementChild"
+            >
+              <img src="{{ poster.file.url }}"></img>
+            </div>
             <div class="dates">
               <div class="begin">{{ poster.date_begin | localtime | date("d/M/Y H:m") }}</div>
               <div class="end">{{ poster.date_end | localtime | date("d/M/Y H:m") }}</div>
@@ -62,7 +62,14 @@
 
     </div>
 
-    <div id="view"><div id="placeholder"></div></div>
+    <div
+      id="view"
+      @keyup.escape.window="active = null"
+      @click="active = null"
+      :class="{active: active !== null}"
+    >
+      <div id="placeholder"><img :src="active?.src"></div>
+    </div>
 
   </div>
 {% endblock %}

com/templates/com/screen_slideshow.jinja

@@ -2,28 +2,44 @@
 <html lang="fr">
   <head>
     <title>{% trans %}Slideshow{% endtrans %}</title>
+    <link rel="shortcut icon" href="{{ static('core/img/favicon.ico') }}">
     <link href="{{ static('css/slideshow.scss') }}" rel="stylesheet" type="text/css" />
-    <script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>
-    <script src="{{ static('com/js/slideshow.js') }}"></script>
+    <script type="module" src="{{ static('bundled/alpine-index.js') }}"></script>
+    <script type="module" src="{{ static('bundled/com/slideshow-index.ts') }}"></script>
   </head>
-  <body>
-    <div id="slideshow">
+  <body x-data="slideshow([
+                {% for poster in posters %}
+                  {
+                  url: '{{ poster.file.url }}',
+                  displayTime: {{ poster.display_time }}
+                  },
+                {% endfor %}
+                ])">
+    <div
+      id="slideshow"
+      @click="toggleFullScreen"
+      hover="{% trans %}Click to expand{% endtrans %}"
+      @keyup.f.window="toggleFullScreen"
+    >
 
       <div id="slides">
-        {% for poster in posters %}
-          <div class="slide {% if loop.first %}center{% else %}right{% endif %}" display_time="{{ poster.display_time }}">
-            <img src="{{ poster.file.url }}">
+        <template x-for="(poster, index) in posters">
+          <div class="slide" :class="{
+                                     current: index === current,
+                                     previous: index !== current && index === previous,
+                                     }">
+            <img :src="poster.url">
           </div>
-        {% endfor %}
+        </template>
       </div>
 
       <div id="progress_bullets">
-        {% for poster in posters %}
-          <div class="bullet {% if loop.first %}active{% endif %}"></div>
-        {% endfor %}
+        <template x-for="(poster, index) in posters">
+          <div class="bullet" :class="{active: current === index}"></div>
+        </template>
       </div>
 
-      <div id="progress_bar"></div>
+      <progress :value="progress" max="100" x-show="posters.length > 1 && progress > 0"></progress>
 
     </div>
   </body>

locale/fr/LC_MESSAGES/django.po

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-09-19 17:22+0200\n"
+"POT-Creation-Date: 2025-09-22 14:29+0200\n"
 "PO-Revision-Date: 2016-07-18\n"
 "Last-Translator: Maréchal <thomas.girod@utbm.fr\n"
 "Language-Team: AE info <ae.info@utbm.fr>\n"
@@ -1103,6 +1103,10 @@ msgstr "Modération"
 msgid "No posters"
 msgstr "Aucune affiche"
 
+#: com/templates/com/poster_list.jinja com/templates/com/screen_slideshow.jinja
+msgid "Click to expand"
+msgstr "Cliquez pour agrandir"
+
 #: com/templates/com/poster_moderate.jinja
 msgid "Posters - moderation"
 msgstr "Affiches - modération"