WK Overlay

try to take over the world!

目前為 2017-03-14 提交的版本,檢視 最新版本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name         WK Overlay
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.wanikani.com/review/session
// @grant        none
// ==/UserScript==

var isKanji = function(ch){
    return /^[\u4e00-\u9faf]+$/.test(ch);
};
/** Gets the Kanji characters in a given string.
	* @param {string} vocabString -
	* @return {Array.<string>} An array of the kanji components in the given string
	*/
var getComponents = function(vocabString){
    return Array.prototype.filter.call(vocabString, function(ch){
        return isKanji(ch);
    }, this);
};


(function() {
    'use strict';
    var parentElement = $("#question");
    var overlay = document.createElement('div');
    overlay.style.display = 'none';
    var descOverlay = document.createElement('div');
    
    var respComps = {};
    var prompt;
    parentElement[0].appendChild(overlay);
    parentElement[0].appendChild(descOverlay);

    $.jStorage.listenKeyChange('currentItem', function(){
        // Runs after span is changed, but is this guaranteed?
        prompt = $.jStorage.get('currentItem');
        if (prompt.voc){

            while (overlay.firstChild){
                overlay.removeChild(overlay.firstChild);
            }
            for (var ch in prompt.voc){
                var chSpan = document.createElement('span');
                chSpan.innerText = prompt.voc[ch];
                console.info(respComps, prompt.voc[ch], respComps[prompt.voc[ch]]);
                if (respComps[prompt.voc[ch]]){
//                    console.info(respComps[prompt[ch]]);
                }
                chSpan.style.fontSize = document.defaultView.getComputedStyle($("#character")[0], "").fontSize; // and lineHeight
        
                //overlay.appendChild(chSpan);

                //$("#character").append(chSpan);
                if (!isKanji(prompt.voc[ch])){
                    chSpan.style.visibility = 'hidden';
                }
                else{
                    chSpan.style.backgroundColor = "cyan";
                }
            }
        }
        // Show overlay when info is being shown.
    });

    $("#item-info").on('show', function(){
        // Array of nodelists
        while (overlay.firstChild){
            overlay.removeChild(overlay.firstChild);
        }
        $("#related-items .kanji a").each(function(i, comp){
            console.log(comp);

            respComps[comp.childNodes[0].textContent] = comp.childNodes[1].textContent;
        });
        overlay.style.display = 'block';

        while (descOverlay.firstChild){
            descOverlay.removeChild(descOverlay.firstChild);
        }

        if (prompt.voc){
            for (var ch in prompt.voc){
                var chSpan = document.createElement('span');
                chSpan.className = "wkOverlayChar";
                chSpan.innerText = prompt.voc[ch];
                
                console.info(respComps, prompt.voc[ch], respComps[prompt.voc[ch]]);
                chSpan.style.fontSize = document.defaultView.getComputedStyle($("#character")[0], "").fontSize; // and lineHeight

                overlay.style.height = $("#character span").height() + 'px';
                overlay.style.top = $("#character span").position().top + 'px';
                overlay.style.left = $("#character span").position().left + 'px';
                overlay.setAttribute('lang', "ja");
                overlay.style.position = "absolute";

                //overlay.style.display = 'none';
                overlay.style.height = $("#character span").height() + 'px';
                descOverlay.style.top = $("#character span").position().top + 'px';
                descOverlay.style.left = $("#character span").position().left + 'px';
                //descOverlay.setAttribute('lang', "ja");
                descOverlay.style.position = "absolute";
                descOverlay.style.color = "black";

                overlay.appendChild(chSpan);
                //$("#character").append(chSpan);
                if (!isKanji(prompt.voc[ch])){
                    chSpan.style.visibility = 'hidden';
                }
                else{
                    chSpan.style.backgroundColor = "cyan";
                }
                
                var t = chSpan.offsetTop; //document.defaultView.getComputedStyle(chSpan, "").top;
                var l = chSpan.offsetLeft; //document.defaultView.getComputedStyle(chSpan, "").left;
                    
                if (respComps[prompt.voc[ch]]){
                    var spInf = document.createElement('div');
                    console.info("t and l", t, spInf.style.top, l,  spInf.style.left);
                    spInf.innerText = respComps[prompt.voc[ch]];

                    descOverlay.appendChild(spInf);
                    spInf.style.left = l;
                //    spInf.style.top = t;
                    
                }
                
            }
        }
        descOverlay.style.display = 'block';
        //console.log($("#character span"));
    });

    $("#item-info").on('hide', function(){
        overlay.style.display = 'none';
        descOverlay.style.display = 'none';
    });
})();