Danbooru Previewer

Put on your mouse cursor on the image to preview

目前為 2018-01-14 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==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();
	});
})();