☰

Danbooru Previewer

Put on your mouse cursor on the image to preview

当前为 2018-01-14 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Danbooru Previewer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Put on your mouse cursor on the image to preview
// @author       rung-rung
// @match        http://danbooru.donmai.us/*
// @grant        none
// @lacal        en
// ==/UserScript==

(function() {
    //画像サイズの倍率 1で100%
    var IMAGE_SIZE = 1;

    //プレビュー画像の不透明度 1にすると全く透過せず、0に近づくほど透明になる
    var OPACITY = 0.9;

    //プレビューを表示する待機時間 単位はミリ秒
    var WAIT_TIME = 1000;

    function openPreview() {
		var rect = thumb.getBoundingClientRect();
		var screenHeight = document.documentElement.clientHeight;
		if (rect.height < rect.width) {
			img.style.height = 'auto';
			img.style.width = `${screenHeight * IMAGE_SIZE}px`;
		} else {
			img.style.width = 'auto';
			img.style.height = `${screenHeight * IMAGE_SIZE}px`;
		}
        var parent = thumb.parentNode.parentNode;
        img.setAttribute('src', parent.getAttribute('data-large-file-url'));
        previewWindow.style.display = 'block';
	}

    var previewWindow = document.createElement("div");
    previewWindow.setAttribute('id', 'preview-window');
    var img = document.createElement('img');
    previewWindow.appendChild(img);
    document.body.appendChild(previewWindow);

    //スタイルシートをまとめて動的に設定するhttp://d.hatena.ne.jp/acid-panda/20110307/1299517528
    var css = (function() {
        var s = document.createElement('style');
        s.setAttribute("type", "text/css");
        document.getElementsByTagName('head').item(0).appendChild(s);
        var ss = s.sheet;
        return function(sel, sty) {
            ss.insertRule(sel + "{" + sty + "}", 0);
        };
    })();

    css('#preview-window', `
        display: none;
        position: fixed;
        z-index: 99;
        pointer-events: none;
        top: 0px;
        left: 0px;
    `);
    css('#preview-window img', `
        opacity: ${OPACITY};
        pointer-events: none;
    `);

    var timeOutID;
    var thumb;
	function addPreviewEventToThumbnail() {
		thumbnail = document.evaluate('//article//img[not(contains(@preview, "true"))]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
		for (var i = 0; i < thumbnail.snapshotLength; i++) {
            thumbnail.snapshotItem(i).onmouseover = function() {thumb = this;
                                                                timeOutID = setTimeout(function() {openPreview();}, WAIT_TIME);
                                                               };
            thumbnail.snapshotItem(i).onmouseout = function() {clearTimeout(timeOutID);
                                                               previewWindow.style.display = 'none';
                                                              };
		    thumbnail.snapshotItem(i).setAttribute('preview', 'true');
        }
	}

	addPreviewEventToThumbnail();
	//Autopagerizeに対応
	window.onmousemove = (function () {
		addPreviewEventToThumbnail();
	});
})();