Image hover for gurochan
// ==UserScript==
// @name gurochan - image hover
// @match https://boards.guro.cx/*
// @grant none
// @version 1.0
// @author -
// @grant GM_addStyle
// @description Image hover for gurochan
// @namespace https://greasyfork.org/users/1292388
// ==/UserScript==
let img = document.createElement('img')
img.id = 'hoverImage'
document['body'].append(img)
document.addEventListener('mouseover', function(event) {
if (event.target.classList.contains('post-image')) {
document.getElementById('hoverImage').classList.add('active');
img.src = event.target.parentNode.href
}
});
document.addEventListener('mouseout', function(event) {
if (event.target.classList.contains('post-image')) {
document.getElementById('hoverImage').classList.remove('active');
img.src = ''
}
});
document.addEventListener('mousemove', (e) => {
const targetX = e.clientX+20
const targetY = e.clientY/2
const scrollbarWidth = 18
if (targetX + img.offsetWidth > (window.innerWidth - scrollbarWidth)) {
img.style.left = (window.innerWidth - img.offsetWidth - scrollbarWidth) + 'px';
}
else {
img.style.left = targetX + 'px';
}
if (targetY + img.offsetHeight > window.innerHeight) {
img.style.top = (window.innerHeight - img.offsetHeight) + 'px';
}
else {
img.style.top = targetY + 'px';
}
});
GM_addStyle(`
#hoverImage {
position: fixed;
pointer-events: none;
max-width: 100vw;
max-height: 100vh;
z-index: 1000;
}
#hoverImage:not(.active) {
display: none;
}
`)