From 04c41a4f4aa1801276f42c5ffd63ff9b2eed92a6 Mon Sep 17 00:00:00 2001 From: discomrade Date: Sun, 4 Jul 2021 00:11:07 +0000 Subject: [PATCH] Fix image hover for catalog --- js/image-hover.js | 62 ++++++++++++++++++++++++++--------------------- 1 file changed, 34 insertions(+), 28 deletions(-) diff --git a/js/image-hover.js b/js/image-hover.js index 3e294d1c..7d4ac846 100644 --- a/js/image-hover.js +++ b/js/image-hover.js @@ -34,6 +34,7 @@ if (getSetting('catalogImageHover')) $('#catalogImageHover>input').prop('checked if (getSetting('imageHoverFollowCursor')) $('#imageHoverFollowCursor>input').prop('checked', 'checked'); function getFileExtension(filename) { //Pashe, WTFPL + if (filename == undefined) {return "unknown";} // catalog if (filename.match(/\.([a-z0-9]+)(&loop.*)?$/i) !== null) { return filename.match(/\.([a-z0-9]+)(&loop.*)?$/i)[1]; } else if (filename.match(/https?:\/\/(www\.)?youtube.com/)) { @@ -67,6 +68,33 @@ function getSetting(key) { return (localStorage[key] == 'true'); } +function followCursor(e, hoverImage) { + var scrollTop = $(window).scrollTop(); + var imgWidth = Number(hoverImage.css("max-width").slice(0,-2)) + var imgHeight = Number(hoverImage.css("max-height").slice(0,-2)) + var imgTop = e.pageY - (imgHeight/2); + var windowWidth = $(window).width(); + var imgEnd = imgWidth + e.pageX; + + if (imgTop < scrollTop + 15) { + imgTop = scrollTop + 15; + } else if (imgTop > scrollTop + $(window).height() - imgHeight - 15) { + imgTop = scrollTop + $(window).height() - imgHeight - 15; + } + + if (imgEnd > windowWidth) { + hoverImage.css({ + 'left': (e.pageX + (windowWidth - imgEnd)), + 'top' : imgTop, + }); + } else { + hoverImage.css({ + 'left': e.pageX, + 'top' : imgTop, + }); + } +} + function initImageHover() { //Pashe, influenced by tux, et al, WTFPL if (!getSetting("imageHover") && !getSetting("catalogImageHover")) {return;} @@ -101,30 +129,7 @@ function imageHoverStart(e) { //Pashe, anonish, WTFPL if (hoverImage.length) { if (getSetting("imageHoverFollowCursor")) { - var scrollTop = $(window).scrollTop(); - var imgY = e.pageY; - var imgTop = imgY; - var windowWidth = $(window).width(); - var imgWidth = hoverImage.width() + e.pageX; - - if (imgY < scrollTop + 15) { - imgTop = scrollTop; - } else if (imgY > scrollTop + $(window).height() - hoverImage.height() - 15) { - imgTop = scrollTop + $(window).height() - hoverImage.height() - 15; - } - - if (imgWidth > windowWidth) { - hoverImage.css({ - 'left': (e.pageX + (windowWidth - imgWidth)), - 'top' : imgTop, - }); - } else { - hoverImage.css({ - 'left': e.pageX, - 'top' : imgTop, - }); - } - + followCursor(e, hoverImage); hoverImage.appendTo($("body")); } @@ -145,7 +150,7 @@ function imageHoverStart(e) { //Pashe, anonish, WTFPL hoverImage = $(''); - if (getSetting("imageHoverFollowCursor")) { + if (getSetting("imageHoverFollowCursor") && active_page !== "catalog") { var size = $this.parents('.file').find('.unimportant').text().match(/\b(\d+)x(\d+)\b/), maxWidth = $(window).width(), maxHeight = $(window).height(); @@ -158,9 +163,7 @@ function imageHoverStart(e) { //Pashe, anonish, WTFPL "width" : size[1] + "px", "height" : size[2] + "px", "max-width" : (size[1] * scale) + "px", - "max-height" : (size[2] * scale) + "px", - 'left' : e.pageX, - 'top' : imgTop, + "max-height" : (size[2] * scale) + "px" }); } else { hoverImage.css({ @@ -173,6 +176,9 @@ function imageHoverStart(e) { //Pashe, anonish, WTFPL "max-height" : "100%", }); } + if (getSetting("imageHoverFollowCursor")) { + followCursor(e, hoverImage); + } hoverImage.appendTo($("body")); if (isOnThread()) {$this.css("cursor", "none");} }