From 92db1462be076ded10d13fc81c3c5fb74c4bbaea Mon Sep 17 00:00:00 2001
From: Lalle <29478339+LalleSX@users.noreply.github.com>
Date: Mon, 15 May 2023 23:02:43 +0200
Subject: [PATCH] fix image going off screen

---
 src/entries/contentScript/image.ts | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/entries/contentScript/image.ts b/src/entries/contentScript/image.ts
index 52513ee..50a1d1d 100644
--- a/src/entries/contentScript/image.ts
+++ b/src/entries/contentScript/image.ts
@@ -14,21 +14,23 @@ export function initImageHovering(): void {
         return
     }
 
-
     // Find all thumbnail images on the page
-    const thumbnails = $("a.fileThumb")
+    const thumbnails = $("a.fileThumb") as JQuery<HTMLAnchorElement>
 
     // Attach hover events to each thumbnail image
     thumbnails.each(function () {
         const thumbnail = $(this)
         const imageUrl = thumbnail.attr("href") as string
+
         // Create a new image element to be displayed on hover
         const hoverImage = $("<img>")
             .attr("src", imageUrl)
             .css({
-                position: "absolute",
+                position: "fixed",
                 display: "none",
-                border: "1px solid #000",
+                border: "none",
+                maxWidth: "100%",
+                maxHeight: "100%",
             })
             .appendTo("body")
 
@@ -43,10 +45,22 @@ export function initImageHovering(): void {
 
         // Update the hover image position based on the mouse cursor
         thumbnail.on("mousemove", (event) => {
+            const offsetX = 10
+            const offsetY = 10
+
+            const imageWidth = hoverImage.width() as number
+            const imageHeight = hoverImage.height() as number
+
+            const windowWidth = $(window).width() as number
+            const windowHeight = $(window).height() as number
+
+            const left = Math.min(event.pageX + offsetX, windowWidth - imageWidth - offsetX)
+            const top = Math.min(event.pageY + offsetY, windowHeight - imageHeight - offsetY)
+
             hoverImage.css({
-                left: event.pageX + 10 + "px",
-                top: event.pageY + 10 + "px",
+                left: left + "px",
+                top: top + "px",
             })
         })
     })
-}
\ No newline at end of file
+}