WK Overlay

try to take over the world!
目前為 2017-03-13 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==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');
    var respComps = {};
    var prompt;
    overlay.setAttribute('lang', "ja");
  //  overlay.style.borderStyle = 'solid';
  //  overlay.style.borderColor = "lightblue";
    overlay.style.position = "absolute";
    parentElement[0].appendChild(overlay);

    $.jStorage.listenKeyChange('currentItem', function(){
        while (overlay.firstChild){
            overlay.removeChild(overlay.firstChild);
        }
        // Runs after span is changed, but is this guaranteed?
        overlay.style.display = 'none';
//        overlay.style.width =  $("#character span").width() + 'px';
        overlay.style.height = $("#character span").height() + 'px';
        overlay.style.top = $("#character span").position().top + 'px';
        overlay.style.left = $("#character span").position().left + 'px';
        prompt = $.jStorage.get('currentItem');
        if (prompt.voc){
            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
        $("#related-items .kanji a").each(function(i, comp){
            console.log(comp);

            respComps[comp.childNodes[0].textContent] = comp.childNodes[1].textContent;
        });
        if (prompt.voc){
            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";
                }
            }
        }
        overlay.style.display = 'block';
        //console.log($("#character span"));
    });

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