Danbooru hover preview

hover over pics to preview them à la 4chan X

Verzia zo dňa 06.10.2023. Pozri najnovšiu verziu.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name        Danbooru hover preview
// @namespace   makamys
// @description hover over pics to preview them à la 4chan X
// @match       *://*.donmai.us/*
// @version     7
// @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 urlCache = {};

  $("body").prepend(`
<div id="hoverUI"></div>
`);

  function installListener(thumbs){
    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 previewURL = urlCache[id];

      ihover.attr("data-id", id)
      if(!previewURL){
        $.ajax({
          dataType: "json",
          url: "https://danbooru.donmai.us/posts/" + id + ".json",
          success: function(data) {
            previewURL = data["large_file_url"];
            urlCache[id] = previewURL;
            if(ihover.attr("data-id") == id) {
              ihover.attr("src", previewURL);
            }
          }
        });
      } else {
        ihover.attr("src", previewURL);
      }
    });

    thumbs.mouseleave(function(event){
      $("#hoverUI").empty();
    });
  }

  installListener($("article img"));

  new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      installListener($(mutation.addedNodes).filter("article").find("img"));
    });
  }).observe(document.querySelector('.posts-container'), {childList: true});

//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);