Umożliwia podgląd obrazka po najechaniu.
// ==UserScript==
// @name Image On Hover
// @namespace https://wilchan.org
// @version 0.2
// @description Umożliwia podgląd obrazka po najechaniu.
// @author Anonimas
// @match https://wilchan.org/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=wilchan.org
// @grant none
// @license MIT
// ==/UserScript==
if (viewConfiguration.boardViewType === BoardViewType.ClassicBoard || viewConfiguration.boardViewType === BoardViewType.ClassicThread) {
let iCss = document.createElement("style");
iCss.innerHTML = `#hover-container > img{border-radius:4px;filter: drop-shadow(0 0 4px rgba(0,0,0,.5));display:none;pointer-events:none;position:fixed;z-index:300;}#hover-containter{z-index:300;}`;
document.head.appendChild(iCss);
document.querySelectorAll(".file[data-mime] > a").forEach(el => {
el.addEventListener("mouseenter", imageHover);
})
let div = document.createElement("div");
div.setAttribute("id", "hover-container");
document.body.appendChild(div);
let navH = document.querySelector("body > nav").offsetHeight;
function imageHover(event) {
let target = event.currentTarget,
src = target.getAttribute("href"),
mime = target.parentNode.getAttribute("data-mime"),
image = ["image/jpeg", "image/png", "image/gif", "image/svg+xml"];
div.innerHTML = "";
if (image.indexOf(mime) > -1) {
let img = document.createElement("img");
img.setAttribute("src", src);
div.appendChild(img);
target.addEventListener("mouseleave", () => {
img.remove();
});
img.addEventListener("load", () => {
let width, height, left, top, maxWidth, maxHeight, scale, rect, pos;
rect = target.getBoundingClientRect();
left = rect.left + rect.width + 10;
maxWidth = window.document.body.scrollWidth - left - 10;
maxHeight = window.innerHeight - (navH + 10 + 25);
width = img.width;
height = img.height;
scale = Math.min(1, maxWidth / width, maxHeight / height);
pos = (rect.top - (navH + 10))/(maxHeight - (rect.height));
if (pos > 1) pos = 1;
else if (pos < 0) pos = 0;
top = navH + 10 + pos * (maxHeight - height * scale);
img.style.left = left + "px";
img.style.top = top + "px";
img.style.maxHeight = maxHeight + "px";
img.style.maxWidth = maxWidth + "px";
img.style.display = "unset";
});
}
}
window.addEventListener("after-create-thread-article-element-event", function (event) {
let section = event.detail.element;
let file = section.querySelector(".file[data-mime] > a");
if(file)
file.addEventListener("mouseenter", imageHover);
}, false);
window.addEventListener("after-create-post-section-element-event", function (event) {
let section = event.detail.element;
let file = section.querySelector(".file[data-mime] > a");
if(file)
file.addEventListener("mouseenter", imageHover);
}, false);
}