☰

gurochan - image hover

Image hover for gurochan

  1. // ==UserScript==
  2. // @name        gurochan - image hover
  3. // @match       https://boards.guro.cx/*
  4. // @grant       none
  5. // @version     1.0
  6. // @author      -
  7. // @grant       GM_addStyle
  8. // @description Image hover for gurochan
  9. // @namespace https://greasyfork.org/users/1292388
  10. // ==/UserScript==
  11.  
  12. let img = document.createElement('img')
  13. img.id = 'hoverImage'
  14.  
  15. document['body'].append(img)
  16.  
  17. document.addEventListener('mouseover', function(event) {
  18.   if (event.target.classList.contains('post-image')) {
  19.     document.getElementById('hoverImage').classList.add('active');
  20.     img.src = event.target.parentNode.href
  21.   }
  22. });
  23.  
  24. document.addEventListener('mouseout', function(event) {
  25.   if (event.target.classList.contains('post-image')) {
  26.     document.getElementById('hoverImage').classList.remove('active');
  27.     img.src = ''
  28.   }
  29. });
  30.  
  31.  
  32. document.addEventListener('mousemove', (e) => {
  33.   const targetX = e.clientX+20
  34.   const targetY = e.clientY/2
  35.   const scrollbarWidth = 18
  36.  
  37.   if (targetX + img.offsetWidth > (window.innerWidth - scrollbarWidth)) {
  38.     img.style.left = (window.innerWidth - img.offsetWidth - scrollbarWidth) + 'px';
  39.   }
  40.   else {
  41.     img.style.left = targetX + 'px';
  42.   }
  43.  
  44.   if (targetY + img.offsetHeight > window.innerHeight) {
  45.     img.style.top = (window.innerHeight - img.offsetHeight) + 'px';
  46.   }
  47.   else {
  48.     img.style.top = targetY + 'px';
  49.   }
  50. });
  51.  
  52. GM_addStyle(`
  53.  
  54.   #hoverImage {
  55.     position: fixed;
  56.     pointer-events: none;
  57.     max-width: 100vw;
  58.     max-height: 100vh;
  59.     z-index: 1000;
  60.   }
  61.  
  62.   #hoverImage:not(.active) {
  63.     display: none;
  64.   }
  65.  
  66. `)