Add image hover

If a user hovers over an image with their mouse, it will load the image
and display it in the corner.

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

board/static/board/post.js

@@ -215,6 +215,34 @@ $(window.top).on("load", () => {
         window.top.jsFrame = new JSFrame();
     }
 });
+$(window).on("load", (e) => {
+    $(".post_image").on("mouseover", (e) => {
+        // Load the original image and display it
+        let thumbnail = e.target;
+        let url = $(thumbnail).attr("data-url");
+        $("<img>")
+            .attr("src", url)
+            .attr("id", "image_hover")
+            .css("display", "none")
+            .appendTo("body")
+            .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;
+                $(e.target)
+                    .css("max-width", maxWidth)
+                    .css("max-height", maxHeight)
+                    .css("width", "auto")
+                    .css("height", "auto")
+                    .css("display", "block");
+            });
+    });
+
+    $(".post_image").on("mouseout", (e) => {
+        $("#image_hover").remove();
+    });
+});
 
 window.menuItemFactories = [];
 window.menuItemFactories.push(

board/static/board/style.css

@@ -140,6 +140,12 @@ th {
     text-decoration: line-through;
 }
 
+#image_hover {
+    position: fixed;
+    top: 0px;
+    right: 0px;
+}
+
 /* Misc */
 
 a:link {

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 src="{{post.thumbnail.url}}">
+    <img class="post_image" src="{{post.thumbnail.url}}" data-url="{{post.image.url}}">
     </a>
 </div>
 {% endif %}