From 0d6b6ca5b5e73cda10869efa493ec65e76186bbc Mon Sep 17 00:00:00 2001
From: Alek Ratzloff <alekratz@gmail.com>
Date: Tue, 12 Jul 2022 22:02:51 -0700
Subject: [PATCH] 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              | 28 +++++++++++++++++++++++++
 board/static/board/style.css            |  6 ++++++
 board/templates/board/post_snippet.html |  2 +-
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/board/static/board/post.js b/board/static/board/post.js
index 906a449..37e4433 100644
--- a/board/static/board/post.js
+++ b/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(
diff --git a/board/static/board/style.css b/board/static/board/style.css
index d3f2c05..959e4a8 100644
--- a/board/static/board/style.css
+++ b/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 {
diff --git a/board/templates/board/post_snippet.html b/board/templates/board/post_snippet.html
index 768540e..2c5ec20 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 src="{{post.thumbnail.url}}">
+    <img class="post_image" src="{{post.thumbnail.url}}" data-url="{{post.image.url}}">
     </a>
 </div>
 {% endif %}