Goyslop/4chan-XZ
1
0
Fork 0
mirror of https://github.com/LalleSX/4chan-XZ.git synced 2025-10-07 07:22:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix image going off screen

Browse Source
This commit is contained in:
Lalle 2023-05-15 23:02:43 +02:00
parent 2fe2cb2c5c
commit 92db1462be
No known key found for this signature in database
GPG Key ID: A6583D207A8F6B0D
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/entries/contentScript/image.ts
View File

@ -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,9 +45,21 @@ 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",
})
})
})