hover over pics to preview them à la 4chan X
От
// ==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);