Add inline image expansion

Clicking an image will expand it.

Signed-off-by: Alek Ratzloff <alekratz@gmail.com>

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 = [];

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 %}