Sleazy Fork is available in English.

Danbooru hover preview

hover over pics to preview them à la 4chan X

  1. // ==UserScript==
  2. // @name Danbooru hover preview
  3. // @namespace makamys
  4. // @description hover over pics to preview them à la 4chan X
  5. // @match *://*.donmai.us/*
  6. // @version 7
  7. // @grant none
  8. // @license Unlicense
  9. // ==/UserScript==
  10.  
  11. // from http://greasemonkey.win-start.de/patterns/add-css.html
  12. function addGlobalStyle(css) {
  13. var head, style;
  14. head = document.getElementsByTagName('head')[0];
  15. if (!head) { return; }
  16. style = document.createElement('style');
  17. style.type = 'text/css';
  18. style.innerHTML = css;
  19. head.appendChild(style);
  20. }
  21.  
  22. addGlobalStyle(`
  23. #ihover {
  24. position: fixed;
  25. max-height: 100%;
  26. z-index: 10000;
  27. pointer-events: none;
  28. }
  29. `);
  30.  
  31. function main(){
  32. let ihover = null;
  33. let urlCache = {};
  34.  
  35. $("body").prepend(`
  36. <div id="hoverUI"></div>
  37. `);
  38.  
  39. function installListener(thumbs){
  40. thumbs.mouseenter(function(event){
  41. $("#hoverUI").append(`<img id="ihover"></img>`);
  42. ihover = $("#ihover");
  43.  
  44. let article = $(this).closest("article");
  45. let id = article.attr("data-id");
  46. let elem = $(article).find(".post-preview-image")[0];
  47.  
  48. let previewURL = urlCache[id];
  49.  
  50. ihover.attr("data-id", id)
  51. if(!previewURL){
  52. $.ajax({
  53. dataType: "json",
  54. url: "https://danbooru.donmai.us/posts/" + id + ".json",
  55. success: function(data) {
  56. previewURL = data["large_file_url"];
  57. urlCache[id] = previewURL;
  58. if(ihover.attr("data-id") == id) {
  59. ihover.attr("src", previewURL);
  60. }
  61. }
  62. });
  63. } else {
  64. ihover.attr("src", previewURL);
  65. }
  66. });
  67.  
  68. thumbs.mouseleave(function(event){
  69. $("#hoverUI").empty();
  70. });
  71. }
  72.  
  73. installListener($("article img"));
  74.  
  75. new MutationObserver(function(mutations) {
  76. mutations.forEach(function(mutation) {
  77. installListener($(mutation.addedNodes).filter("article").find("img"));
  78. });
  79. }).observe(document.querySelector('.posts-container'), {childList: true});
  80.  
  81. //TODO
  82. // thumbs.mousemove(function(event){
  83. // console.log(ihover.width());
  84. //
  85. // let x = event.pageX + (event.pageX > $(window).width() / 2 ? -0 : 0);
  86. //
  87. // ihover.css({left: x});
  88. // });
  89. }
  90.  
  91. // Inject our main script (workaround for Greasemonkey not finding the page's jQuery instance otherwise)
  92. var script = document.createElement('script');
  93. script.type = "text/javascript";
  94. script.textContent = '(' + main.toString() + ')();';
  95. document.body.appendChild(script);