☰

Danbooru Previewer

Put on your mouse cursor on the image to preview

Ekde 2018/08/10. Vidu La ĝisdata versio. 

  1. // ==UserScript==
  2. // @name         Danbooru Previewer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4
  5. // @description  Put on your mouse cursor on the image to preview
  6. // @author       rung-rung
  7. // @match        http://danbooru.donmai.us/*
  8. // @match        https://danbooru.donmai.us/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     //画像サイズの倍率 1で100%
  14.     var IMAGE_SIZE = 1;
  15.  
  16.     //プレビュー画像の不透明度 1にすると全く透過せず、0に近づくほど透明になる
  17.     var OPACITY = 0.8;
  18.  
  19.     //プレビューを表示する待機時間 単位はミリ秒
  20.     var WAIT_TIME = 1000;
  21.  
  22.     var isMouseMove = false;
  23.     function openPreview() {
  24.         if (isMouseMove == true) {
  25.             var rect = thumb.getBoundingClientRect();
  26.             var screenHeight = document.documentElement.clientHeight;
  27.             if (rect.height < rect.width) {
  28.                 img.style.height = 'auto';
  29.                 img.style.width = `${screenHeight * IMAGE_SIZE}px`;
  30.             } else {
  31.                 img.style.width = 'auto';
  32.                 img.style.height = `${screenHeight * IMAGE_SIZE}px`;
  33.             }
  34.             var parent = thumb.parentNode.parentNode.parentNode;
  35.             img.setAttribute('src', parent.getAttribute('data-large-file-url'));
  36.             previewWindow.style.display = 'block';
  37.         }
  38. 	}
  39.  
  40.     var previewWindow = document.createElement("div");
  41.     previewWindow.setAttribute('id', 'preview-window');
  42.     var img = document.createElement('img');
  43.     previewWindow.appendChild(img);
  44.     document.body.appendChild(previewWindow);
  45.  
  46.     //スタイルシートをまとめて動的に設定するhttp://d.hatena.ne.jp/acid-panda/20110307/1299517528
  47.     var css = (function() {
  48.         var s = document.createElement('style');
  49.         s.setAttribute("type", "text/css");
  50.         document.getElementsByTagName('head').item(0).appendChild(s);
  51.         var ss = s.sheet;
  52.         return function(sel, sty) {
  53.             ss.insertRule(sel + "{" + sty + "}", 0);
  54.         };
  55.     })();
  56.  
  57.     css('#preview-window', `
  58.         display: none;
  59.         position: fixed;
  60.         z-index: 99999;
  61.         pointer-events: none;
  62.         top: 0px;
  63.         left: 0px;
  64.     `);
  65.     css('#preview-window img', `
  66.         opacity: ${OPACITY};
  67.         pointer-events: none;
  68.     `);
  69.  
  70.     var timeOutID;
  71.     var thumb;
  72. 	function addPreviewEventToThumbnail() {
  73. 		thumbnail = document.evaluate('//article//img[not(contains(@preview, "true"))]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  74. 		for (var i = 0; i < thumbnail.snapshotLength; i++) {
  75. 			const imgEle = thumbnail.snapshotItem(i)
  76. 		    imgEle.setAttribute('preview', 'true');
  77.  
  78. 			const tags = imgEle.getAttribute('alt')
  79. 			if (tags.match(/animated/)) {continue}
  80.  
  81. 			imgEle.onmouseover = function() {thumb = this;
  82. 											 timeOutID = setTimeout(function() {openPreview();}, WAIT_TIME);
  83. 											};
  84. 			imgEle.onmouseout = function() {clearTimeout(timeOutID);
  85. 											previewWindow.style.display = 'none';
  86. 										   };
  87.         }
  88. 	}
  89.  
  90. 	addPreviewEventToThumbnail();
  91. 	//Autopagerizeに対応
  92.     var mouseMoveTimeout;
  93. 	window.onmousemove = (function (e) {
  94.         clearTimeout(mouseMoveTimeout);
  95. 		addPreviewEventToThumbnail();
  96.         isMouseMove = true;
  97.         mouseMoveTimeout = setTimeout(function() {isMouseMove = false;}, WAIT_TIME+500);
  98. 	});
  99. })();