WaniKani Nippongrammar Extension

Greasy Fork is available in English.
WaniKani Nippongrammar Extension

Svg Canvas used to draw Kanji on reviews and lessons, using website code.
当前为 2015-08-28 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         WaniKani Nippongrammar Extension
// @namespace    WK-nippongrammar
// @version      0.4
// @website      http://nippongrammar.appspot.com/
// @description  Svg Canvas used to draw Kanji on reviews and lessons, using website code.
// @author       Code by Aaron Drew, Wanikani adaption by Ethan McCoy
// @include      *.wanikani.com/review/session*
// @include      *.wanikani.com/lesson/session*
// @grant        none
// run-at       document-end
// @license        MIT
// ==/UserScript==

$("head").prepend('<script type="text/javascript" src="http://greasyfork.icu/scripts/11949-kanjisvg/code/kanjiSvg.js?version=69799"></script>');
$("head").prepend('<script type="text/javascript" src="http://greasyfork.icu/scripts/11951-kanjirender/code/kanjirender.js"></script>');

var strokesShown = true;

showStrokes = function(){
    strokesShown = true;
        strokeDiv && (strokeDiv.style.display = "block");
        charDiv && (charDiv.style.display = "none");
}

showOriginal = function(){
    strokesShown = false;
     strokeDiv && (strokeDiv.style.display = "none");
     charDiv && (charDiv.style.display = "block");    
}

switchViews = function(e){
    e.shiftKey && e.keyCode === 37 && showStrokes();
    e.shiftKey && e.keyCode === 39 && showOriginal();
}
animateStrokes = function(){
            
    if(text.indexOf(".png") === -1){ //weed out picture radicals for now, extend svg library later
        animateWriting(text,'strokeChar',15),

        //introduce hotkey switching
        document.addEventListener("keyup", switchViews);
        
                if (strokesShown)
        showStrokes();        
    }else{
        //remove hotkey switching
        document.removeEventListener("keyup", switchViews);
        showOriginal();
    }

}

function handleKeyChange(key, action){
    
    console.group("animate strokes userscript"),
console.log("key", key),
    cur = $.jStorage.get(key),
    text = cur.voc || cur.kan || cur.rad || "",
    console.log("text", text);

    strokeDiv = document.getElementById('strokeChar') || document.createElement('div'), strokeDiv.style.padding = "20px 20px 0", strokeDiv.id = "strokeChar";
    
    //add replay functionality
    strokeDiv.addEventListener("click", animateStrokes);
    
    
    if (key === "l/currentLesson" || key === "l/currentQuizItem"){
        //console.log(charDiv.childNodes[0].nodeType === 3),
        
        charDiv = document.getElementById("character");
        
        console.log("parent", charDiv.parentNode);
        

        }else{
            
            //Reviews 'charDiv' is actually a span
            charDiv = document.getElementById("character").getElementsByTagName("span")[0];
        }
        charDiv.parentNode.insertBefore(strokeDiv, charDiv);
    
       // console.log("text for "+key+"?",[charDiv.childNodes[0].nodeType]),
//    itemSpan = charDiv.getElementsByTagName("span")[0];

    
    animateStrokes();
    
console.groupEnd();
};

$.jStorage.listenKeyChange("currentItem", handleKeyChange);
$.jStorage.listenKeyChange("l/currentQuizItem", handleKeyChange);
$.jStorage.listenKeyChange("l/currentLesson", handleKeyChange);