Danbooru hover preview

hover over pics to preview them à la 4chan X
2022-03-10 या दिनांकाला. सर्वात नवीन आवृत्ती पाहा.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name        Danbooru hover preview
// @namespace   makamys
// @description hover over pics to preview them à la 4chan X
// @match       *://*.donmai.us/*
// @version     4
// @grant       none
// @license     Unlicense
// ==/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;
}
`);

function main(){
  let ihover = null;
  let thumbs = $("article img");
  let urlCache = {};
  
  let debug = false;
  
  $("body").prepend(`
<div id="hoverUI"></div>
`);
  
  function getFirstExistingURL(elems){
    let good_url = null;
    
    for(url of elems){
     	$.ajax({
        type: "HEAD",
        async: false,
        url: url,
      }).done(function(){
          good_url = url;
      });
      if(good_url != null) break;
    }
    
    return good_url;
  }
  
  thumbs.mouseenter(function(event){
    $("#hoverUI").append(`<img id="ihover"></img>`);
    ihover = $("#ihover");
    
    let article = $(this).closest("article");
    let id = article.attr("data-id");
    let elem = $(article).find(".post-preview-image")[0];
    
    let url = $(elem).attr("src");
    let lastSlash1 = url.lastIndexOf("/");
    let lastSlash2 = url.lastIndexOf("/", lastSlash1 - 1);
    let lastSlash3 = url.lastIndexOf("/", lastSlash2 - 1);
    let lastSlash4 = url.lastIndexOf("/", lastSlash3 - 1);
    
    urlSampleJPG = url.slice(0, lastSlash4) + "/sample/" + url.slice(lastSlash3 + 1, lastSlash1 + 1) + "sample-" + url.slice(lastSlash1 + 1);
    urlOriginalJPG = url.slice(0, lastSlash4) + "/original/" + url.slice(lastSlash3 + 1, lastSlash1 + 1) + "" + url.slice(lastSlash1 + 1);
    urlSamplePNG = urlSampleJPG.slice(0, -4) + ".png"
    urlOriginalPNG = urlOriginalJPG.slice(0, -4) + ".png"
    
    let useAPI = true; // guessing the preview image's URL is significantly faster on average than asking the API according to my testing, but it also causes bugs for some reason
    
    let previewURL = urlCache[id];
    
    if(!previewURL){
      let t0 = debug ? new Date() : null;
      if(!useAPI){
          previewURL = getFirstExistingURL([urlSampleJPG, urlOriginalJPG, urlOriginalPNG]);
      } else {
        $.ajax({
          dataType: "json",
          async: false,
          url: "https://danbooru.donmai.us/posts/" + id + ".json",
          success: function(data) {
          	previewURL = data["large_file_url"];
          }
        });
      }
      if(debug){
       	let t1 = new Date();
      	console.log((t1-t0) + "ms (id: " + id + ", url:" + previewURL + ", urlSampleJPG: " + urlSampleJPG + " event: " + $(event.target).attr("src") + ")");
      }
      urlCache[id] = previewURL;
    }
    
    ihover.attr("src", previewURL);
  });
  
  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});
//  });
}

// Inject our main script (workaround for Greasemonkey not finding the page's jQuery instance otherwise)
var script = document.createElement('script');
script.type = "text/javascript";
script.textContent = '(' + main.toString() + ')();';
document.body.appendChild(script);