Migrate poster view to alpine

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/css/slideshow.scss

@@ -34,7 +34,7 @@ body {
 
       z-index: 10;
 
-      content: "Click to expand";
+      content: attr(hover);
 
       color: white;
       background-color: rgba(black, 0.5);

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

@@ -14,7 +14,7 @@
                   },
                 {% endfor %}
                 ])">
-    <div id="slideshow" @click="toggleFullScreen">
+    <div id="slideshow" @click="toggleFullScreen" hover="{% trans %}Click to expand{% endtrans %}">
 
       <div id="slides">
         <template x-for="(poster, index) in posters">