From 925ff6edcd05a39c669e25d2ead51afbd5d35161 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Sun, 8 Jan 2023 02:34:11 +0900
Subject: [PATCH] Implement image viewer (#363)

---
 static/css/style.css                   | 41 ++++++++++++++++++++++++++
 templates/activities/_modal_image.html | 34 +++++++++++++++++++++
 templates/activities/_post.html        |  5 ++--
 templates/base.html                    |  1 +
 templates/base_plain.html              |  1 +
 5 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 templates/activities/_modal_image.html

diff --git a/static/css/style.css b/static/css/style.css
index bb8ab07..e0e6a8a 100644
--- a/static/css/style.css
+++ b/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 {
diff --git a/templates/activities/_modal_image.html b/templates/activities/_modal_image.html
new file mode 100644
index 0000000..9aff88c
--- /dev/null
+++ b/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>
diff --git a/templates/activities/_post.html b/templates/activities/_post.html
index 38c0bc6..e3a6922 100644
--- a/templates/activities/_post.html
+++ b/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">
-                  <img src="{{ attachment.thumbnail_url.relative }}" title="{{ attachment.name }}" alt="{{ attachment.name }}" loading="lazy" />
+                <a href="{{ attachment.full_url.relative }}" class="image" target="_blank"
+                  _="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">
diff --git a/templates/base.html b/templates/base.html
index 264beea..28014e7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -73,6 +73,7 @@
         </header>
 
         {% block full_content %}
+            {% include 'activities/_modal_image.html' %}
             {% block pre_content %}
             {% endblock %}
             <div class="columns">
diff --git a/templates/base_plain.html b/templates/base_plain.html
index 53d77e8..e5496b4 100644
--- a/templates/base_plain.html
+++ b/templates/base_plain.html
@@ -27,6 +27,7 @@
     </header>
 
     <div id="main-content">
+        {% include "activities/_modal_image.html" %}
         {% block content %}
         {% endblock %}
     </div>