☰

Danbooru hover preview

hover over pics to preview them à la 4chan X

当前为 2020-11-27 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Danbooru hover preview
// @namespace   makamys
// @description hover over pics to preview them à la 4chan X
// @match       *://*.donmai.us/*
// @version     2
// @grant       none
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
// ==/UserScript==

// from http://greasemonkey.win-start.de/patterns/add-css.html
function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle(`
#ihover {
  position: fixed;
  max-height: 100%;
  z-index: 10000;
  pointer-events: none;
}
`);
$(document).ready(function(){
  let ihover = null;
  let thumbs = $("article img");
  
  $("body").prepend(`
<div id="hoverUI"></div>
`);
  
  thumbs.mouseenter(function(event){
    $("#hoverUI").append(`<img id="ihover"></img>`);
    ihover = $("#ihover");
    
    let article = $(this).closest("article");
    ihover.attr("src", article.attr("data-large-file-url"));
  });
  
  thumbs.mouseleave(function(event){
    $("#hoverUI").empty();
  });
  
//TODO
//  thumbs.mousemove(function(event){
//    console.log(ihover.width());
//  
//    let x = event.pageX + (event.pageX > $(window).width() / 2 ? -0 : 0);
//  
//    ihover.css({left: x});
//  });
});