Implement image viewer (#363)

static/css/style.css

@@ -1699,6 +1699,47 @@ form .post {
     transition: 0.2s;
 }
 
+/* Image viewer */
+#image-viewer {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+    width: 100dvw;
+    height: 100dvh;
+    background: rgb(0 0 0 / 75%);
+    transition: opacity 350ms;
+    z-index: 100;
+}
+
+#image-viewer picture, #image-viewer img {
+    display: block;
+}
+
+#image-viewer img {
+    max-height: calc(100dvh - 8em);
+    max-width: 100dvw;
+}
+
+#image-viewer figcaption {
+    width: 100%;
+    padding: 1em;
+    background-color: black;
+    color: var(--color-text-main);
+    text-align: center;
+}
+
+#image-viewer button {
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    color: var(--color-text-main);
+    background: transparent;
+    cursor: pointer;
+}
 
 /* Accessibility */
 .screenreader-text {

templates/activities/_modal_image.html

@@ -0,0 +1,34 @@
+<script type="text/hyperscript">
+    def imageviewer.show(source)
+        set source_url to (<img /> in source) @data-original-url
+        set source_alt to (<img /> in source) @alt
+        set image to <#image-viewer img />
+        set figcaption to <#image-viewer figcaption />
+
+        -- fill information
+        set image@src to source_url
+        set image@alt to source_alt
+        set figcaption's textContent to source_alt
+
+        -- show image viewer
+        show #image-viewer with display:flex
+        transition #image-viewer's opacity from 0 to 1 over 300ms
+        focus() on first <#image-viewer button />
+    end
+    def imageviewer.close()
+        transition #image-viewer's opacity to 0 over 300ms
+        hide #image-viewer
+        set <#image-viewer img /> @src to ''
+        set <#image-viewer img /> @alt to ''
+        set <#image-viewer figcaption />'s textContent to ''
+    end
+</script>
+<figure id="image-viewer" style="display: none" _="on click imageviewer.close()">
+    <picture>
+        <img src="" alt=""/>
+    </picture>
+    <figcaption></figcaption>
+    <button aria-label="Close">
+        <i class="fa fa-3x fa-times"></i>
+    </button>
+</figure>

templates/activities/_post.html

@@ -43,8 +43,9 @@
           <div class="attachments">
             {% for attachment in post.attachments.all %}
               {% if attachment.is_image %}
-                <a href="{{ attachment.full_url.relative }}" class="image">
+                <a href="{{ attachment.full_url.relative }}" class="image" target="_blank"
-                  <img src="{{ attachment.thumbnail_url.relative }}" title="{{ attachment.name }}" alt="{{ attachment.name }}" loading="lazy" />
+                  _="on click halt the event then call imageviewer.show(me)">
+                  <img src="{{ attachment.thumbnail_url.relative }}" title="{{ attachment.name }}" alt="{{ attachment.name|default:'(no description)' }}" loading="lazy" data-original-url="{{ attachment.full_url.relative }}">
                 </a>
               {% elif attachment.is_video %}
                 <a href="{{ attachment.full_url.relative }}" class="video">

templates/base.html

@@ -73,6 +73,7 @@
         </header>
 
         {% block full_content %}
+            {% include 'activities/_modal_image.html' %}
             {% block pre_content %}
             {% endblock %}
             <div class="columns">

templates/base_plain.html

@@ -27,6 +27,7 @@
     </header>
 
     <div id="main-content">
+        {% include "activities/_modal_image.html" %}
         {% block content %}
         {% endblock %}
     </div>