Nicopedia-Resanchor-Popup

ニコニコ大百科 掲示板のレスアンカーをポップアップ表示する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name      Nicopedia-Resanchor-Popup
// @namespace https://github.com/kosh04/userscript
// @version   0.20190308
// @description  ニコニコ大百科 掲示板のレスアンカーをポップアップ表示する
// @grant     GM_addStyle
// @grant     GM_getResourceURL
// @grant     GM_getResourceText
// @match     http://dic.nicovideo.jp/*
// @match     https://dic.nicovideo.jp/*
// @require   https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @require   https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js
// @resource  jquery-ui.css https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery-ui.css
// @resource  images/ui-bg_flat_75_ffffff_40x100.png https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/images/ui-bg_flat_75_ffffff_40x100.png
// @author    kosh (mono)
// @license   Public domain
// @noframes
// ==/UserScript==

// ChangeLog
// =========
// * 0.20190308 PC版サイトのデザインリニューアルに伴うCSSセレクタの修正
// * 0.20141021 初版

/* global jQuery, $ */

// https://stackoverflow.com/a/17606289/4499880
String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.split(search).join(replacement);
};

let css = GM_getResourceText("jquery-ui.css");
[
    "images/ui-bg_flat_75_ffffff_40x100.png",
].forEach(resource => {
    css = css.replaceAll(resource, GM_getResourceURL(resource));
});
GM_addStyle(css);
GM_addStyle(`
.ui-tooltip {
  min-width: 600px;
  font-size: small;
  line-height: 1.3em;
  text-align: left;
}
`);

function getAnchorContent(id, context) {
    let doc = document;
    // jQueryによるHTML解析は<script>が実行されるらしい
    // var $anchor = $(context || document).find("a[name=" + id + "]");

    if (typeof context === "string") {
        let parser = new DOMParser();
        doc = parser.parseFromString(context, "text/html");
    }

    let $anchor = $(doc).find(`a[name=${id}]`);
    if ($anchor.length === 0) {
        return null;
    }

    let $parent = $anchor.parent();
    let dt = $parent[0].outerHTML;
    let dd = $parent.next()[0].outerHTML;
    return `<dl>${dt}${dd}</dl>`;
}

$(".st-bbs_resbody a.dic").filter(function() {
    return this.hash.match(/^#[0-9]+$/);
}).tooltip({
    items: "[href]",
    content: "読み込み中",
    open: function(event, ui) {
        let $elem = $(this);
        let url = this.href;
        let anchor_id = this.hash.substring(1);
        let content = getAnchorContent(anchor_id);
        let popup = function(content) {
            $elem.tooltip("option", "content", content);
        };
        if (content && !content.includes("全て読むにはこのリンクをクリック!")) {
            // console.log("同じページ");
            popup(content);
        } else {
            // console.log("別のページ");
            $.get(url, null, function(data) {
                let content = getAnchorContent(anchor_id, data) || "見つかりません";
                popup(content);
            });
        }
    },
    /*
    // 表示位置をカーソルの右上にするとレスと被らなくて見やすい
    // ただし、カーソルのフォーカスと表示が引っかかる気がする
    position: {
        at: "right top-20",
        my: "right bottom"
    }
*/
});