From 925c17675fc1100c3b85e0c3c395792b3ece00fd Mon Sep 17 00:00:00 2001
From: Alek Ratzloff <alekratz@gmail.com>
Date: Tue, 12 Jul 2022 22:26:51 -0700
Subject: [PATCH] Add inline image expansion

Clicking an image will expand it.

Signed-off-by: Alek Ratzloff <alekratz@gmail.com>
---
 board/static/board/post.js              | 25 ++++++++++++++++++++++++-
 board/templates/board/post_snippet.html |  2 +-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/board/static/board/post.js b/board/static/board/post.js
index 37e4433..0468346 100644
--- a/board/static/board/post.js
+++ b/board/static/board/post.js
@@ -220,6 +220,11 @@ $(window).on("load", (e) => {
         // Load the original image and display it
         let thumbnail = e.target;
         let url = $(thumbnail).attr("data-url");
+        let imgSrc = $(thumbnail).attr("src");
+        if (url === imgSrc) {
+            // don't do hover if the image is already expanded
+            return;
+        }
         $("<img>")
             .attr("src", url)
             .attr("id", "image_hover")
@@ -229,7 +234,7 @@ $(window).on("load", (e) => {
                 let thumbRect = thumbnail.getBoundingClientRect();
                 // get max width based on thumbnail size so there isn't overlap
                 let maxWidth = window.innerWidth - thumbRect.right - 10;
-                let maxHeight = window.innerHeight;
+                let maxHeight = window.innerHeight - 10;
                 $(e.target)
                     .css("max-width", maxWidth)
                     .css("max-height", maxHeight)
@@ -242,6 +247,24 @@ $(window).on("load", (e) => {
     $(".post_image").on("mouseout", (e) => {
         $("#image_hover").remove();
     });
+
+    $(".post_image").on("click", (e) => {
+        e.preventDefault();
+        let url = $(e.target).attr("data-url");
+        let thumbUrl = $(e.target).attr("data-thumb");
+        let imgSrc = $(e.target).attr("src");
+        if (imgSrc === thumbUrl) {
+            let thumbRect = e.target.getBoundingClientRect();
+            let maxWidth = window.innerWidth - thumbRect.left - 20;
+            let maxHeight = window.innerHeight - 10;
+            $(e.target).attr("src", url)
+                .css("max-width", maxWidth)
+                .css("max-height", maxHeight);
+            $("#image_hover").remove();
+        } else {
+            $(e.target).attr("src", thumbUrl);
+        }
+    });
 });
 
 window.menuItemFactories = [];
diff --git a/board/templates/board/post_snippet.html b/board/templates/board/post_snippet.html
index 2c5ec20..c60a9b2 100644
--- a/board/templates/board/post_snippet.html
+++ b/board/templates/board/post_snippet.html
@@ -50,7 +50,7 @@ at {{post_created}}
 {# Image thumbnail #}
 <div class="post_image_thumbnail">
     <a href="{{post.image.url}}" target="_blank">
-    <img class="post_image" src="{{post.thumbnail.url}}" data-url="{{post.image.url}}">
+    <img class="post_image" src="{{post.thumbnail.url}}" data-url="{{post.image.url}}" data-thumb="{{post.thumbnail.url}}">
     </a>
 </div>
 {% endif %}