便捷查找汉字读音

基于 yomikatawa 开发。
当前为 2023-10-25 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         便捷查找汉字读音
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  基于 yomikatawa 开发。
// @author       kOda
// @match        *://*/*
// @license MIT
// @connect         yomikatawa.com
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bing.com
// @require       https://code.jquery.com/jquery-3.7.1.min.js
// @grant GM_xmlhttpRequest
// ==/UserScript==

const CONST = {
    popupDelayTime: 1500,
    kanjiTrans: false,
    defaultTitle: "<h1><span>「<strong></strong>」</span>の読み方</h1>",
    errorTitle: `<h1>
                    <span><strong>读法获取失败！</strong></span>
                    <br>原因可能是非支持的汉字，可以在开启汉字转换功能 kanjiTrans 后尝试...
                </h1>`,
    html: `
    <div id="yomikata-wrap">
        <button>
            <img src="https://yomikatawa.com/static/img/favicon.ico">
        </button>

        <article id="yomikata-get" class="content text-center"></article>
    </div>`,
    style: `
        <style>
            #yomikata-wrap {
                position: absolute;
                z-index: 2147483647;
            }

            #yomikata-wrap button {
                position: fixed;
                display: none;
                padding: 0px;
                border: 0px;
            }

            #yomikata-wrap button img {
                width: 20px;
            }

            #yomikata-get {
                position: fixed;
                display: none;
                text-align: center;
                border-radius: 10px 20px;
                background-color: #71777d;
                color: #FFFFFF;
                width: 320px;
                height: auto;
            }

            #yomikata-get .content h1 {
                font-weight: normal;
                font-size: 1.1rem;
                margin: 20px 0;
            }

            #yomikata-get .content h1 span {
                font-size: 1.4rem;
            }

            #yomikata-get .table {
                margin: auto;
                width: auto;
                min-width: 320px;
            }

            #yomikata-get .table td, .table th {
                padding: 12px 8px;
            }
        </style>`,
}

var _global = {
    yomikata: null
    ,head: null
    ,body: null
    ,yomikataBtn: null
    ,yomikataTitle: null
    ,preSelect: null
    ,popupDelay: null
    ,newText: false
}

var document = unsafeWindow.document;

unsafeWindow.onload = function _main() {
    initScript();

    _global.yomikataBtn.on("click", function() {
        if (_global.newText) {
            fillYomikata()
        }
        _global.newText = false;
    })

    $(document).on("mouseup", function(e) {
        var selection = document.getSelection();
        _global.selectText = selection.toString().trim();

        if (!$(e.target).parents("#yomikata-wrap").length){
            _global.yomikataBtn.css("display", "none");
            _global.yomikata.css("display", "none");

            if (_global.selectText && _global.selectText != _global.preSelect) {
                console.log(e)
                console.log(_global);

                _global.preSelect = _global.selectText;
                _global.newText = true;
                _global.yomikataBtn.css({top: `${e.clientY + 5}px`, left: `${e.clientX}px`, display: "block"});
                _global.yomikata.css({top: `${e.clientY + 5}px`, left: `${e.clientX}px`});
            } else {
                // 选择文本为空 或 为上一次框选过的....
                _global.preSelect = null;
            }
        }
    })
}

function initScript() {
    _global.head = $(document).find("head");
    _global.body = $(document).find("body");

    $("head").append(CONST.style);
    $("body").append(CONST.html);

    _global.yomikata = $(document).find("#yomikata-get");
    _global.yomikataBtn = $(document).find("#yomikata-wrap button")
    _global.yomikataTitle = $(document).find("#yomikata-get strong");
}

function fillYomikata() {
    GM_xmlhttpRequest({
        method: "get",
        url: `https://yomikatawa.com/kanji/${_global.selectText}`,
        onload: (resp) => {
            if (resp.status == 200) {
                var dom = new DOMParser().parseFromString(resp.response, "text/html");
                var article = $(dom).find("body > main > article");

                _global.yomikata.empty();
                _global.yomikata.append(article.find("h1")).append(article.find("#yomikata"));
            } else {
                _global.yomikata.empty();
                _global.yomikata.append(CONST.errorTitle);
            }

            _global.yomikata.css("display", "block");
            _global.yomikataBtn.css("display", "none");
        }
    })
}

function kanjiTrans() {
    // 本来是想做的，思路也有着，但就是有点担心被站主真实。
    // 按理说用yomikatawa也有被真实的风险，但好在该站站主远在异国，与国内的网站相比，还是用国外的安心些....
    // 找到符合要求的api后会加上这功能的，有推荐的可以告诉我。
}