☰

Image On Hover

Umożliwia podgląd obrazka po najechaniu.

As of 26/09/2024. See the latest version.

  1. // ==UserScript==
  2. // @name         Image On Hover
  3. // @namespace    https://wilchan.org
  4. // @version      0.2
  5. // @description  Umożliwia podgląd obrazka po najechaniu.
  6. // @author       Anonimas
  7. // @match        https://wilchan.org/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=wilchan.org
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. if (viewConfiguration.boardViewType === BoardViewType.ClassicBoard || viewConfiguration.boardViewType === BoardViewType.ClassicThread) {
  14.     let iCss = document.createElement("style");
  15.     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;}`;
  16.     document.head.appendChild(iCss);
  17.  
  18.     document.querySelectorAll(".file[data-mime] > a").forEach(el => {
  19.         el.addEventListener("mouseenter", imageHover);
  20.     })
  21.  
  22.     let div = document.createElement("div");
  23.     div.setAttribute("id", "hover-container");
  24.     document.body.appendChild(div);
  25.  
  26.     let navH = document.querySelector("body > nav").offsetHeight;
  27.  
  28.     function imageHover(event) {
  29.         let target = event.currentTarget,
  30.             src = target.getAttribute("href"),
  31.             mime = target.parentNode.getAttribute("data-mime"),
  32.             image = ["image/jpeg", "image/png", "image/gif", "image/svg+xml"];
  33.  
  34.         div.innerHTML = "";
  35.         if (image.indexOf(mime) > -1) {
  36.             let img = document.createElement("img");
  37.             img.setAttribute("src", src);
  38.             div.appendChild(img);
  39.             target.addEventListener("mouseleave", () => {
  40.                 img.remove();
  41.             });
  42.  
  43.             img.addEventListener("load", () => {
  44.                 let width, height, left, top, maxWidth, maxHeight, scale, rect, pos;
  45.                 rect = target.getBoundingClientRect();
  46.                 left = rect.left + rect.width + 10;
  47.                 maxWidth = window.document.body.scrollWidth - left - 10;
  48.                 maxHeight = window.innerHeight - (navH + 10 + 25);
  49.                 width = img.width;
  50.                 height = img.height;
  51.                 scale = Math.min(1, maxWidth / width, maxHeight / height);
  52.  
  53.                 pos = (rect.top - (navH + 10))/(maxHeight - (rect.height));
  54.                 if (pos > 1) pos = 1;
  55.                 else if (pos < 0) pos = 0;
  56.                 top = navH + 10 + pos * (maxHeight - height * scale);
  57.  
  58.                 img.style.left = left + "px";
  59.                 img.style.top = top + "px";
  60.                 img.style.maxHeight = maxHeight + "px";
  61.                 img.style.maxWidth = maxWidth + "px";
  62.                 img.style.display = "unset";
  63.             });
  64.         }
  65.     }
  66.  
  67.     window.addEventListener("after-create-thread-article-element-event", function (event) {
  68.         let section = event.detail.element;
  69.         let file = section.querySelector(".file[data-mime] > a");
  70.         if(file)
  71.             file.addEventListener("mouseenter", imageHover);
  72.     }, false);
  73.  
  74.     window.addEventListener("after-create-post-section-element-event", function (event) {
  75.         let section = event.detail.element;
  76.         let file = section.querySelector(".file[data-mime] > a");
  77.         if(file)
  78.             file.addEventListener("mouseenter", imageHover);
  79.     }, false);
  80. }