☰

Greasy Fork is available in English.

WaniKani Mini Item Marker

Another Item Marker for WaniKani

// ==UserScript==
// @name         WaniKani Mini Item Marker
// @namespace    wk_mtm
// @version      0.2
// @description  Another Item Marker for WaniKani
// @author       polv
// @match        https://www.wanikani.com/review/session
// @match        https://www.wanikani.com/dashboard
// @grant        none
// ==/UserScript==

var word = {id: ''};
var marker_array = $.jStorage.get('wk_marker_array', []);
var marked_text = ['Usage', 'Reading'];
var marked_color = ['#CCCCCC', 'green'];
var num_click = 0;
var url = document.URL;

(function() {
    'use strict';
    $('head').append(`<style>
.marked {
	border: solid 5px;
	padding: 4px;
	margin: 4px 4px 0px 4px;
}
.marked-text {
    position : absolute;
    top : -1em;
    right : 0em;
    font-size : 0.2em;
}
.marked-parent {
    position: relative;
    width: 0;
    height: 0;
}
pre{
    -moz-tab-size: 15;
    -o-tab-size:   15;
    tab-size:      15;
}
</style>`);

    if(url.indexOf('review') != -1){
        $('#character span').click(function(){
            word = $.jStorage.get("currentItem");

            if(num_click >= marked_text.length){
                num_click = -1;
                $(this).removeClass('marked');
                $('.marked-parent').remove();
                for(var i=0; i<marked_text.length; i++) {
                    var index_splice = getMarkerIndex(marked_text[i], word);
                    if(index_splice !== -1)
                        marker_array.splice(index_splice,1);
                }
                $.jStorage.set('wk_marker_array', marker_array);
            } else {
                $(this).addClass('marked');
                $(this).css('border-color', marked_color[num_click]);
            }

            if($(this).hasClass('marked')) {
                $('.marked-parent').remove();
                $('.marked').after('<span class="marked-parent"><span class="marked-text">' + marked_text[num_click] + '</span></span>');
                for(var i=0; i<marked_text.length; i++) {
                    var index_splice = getMarkerIndex(marked_text[i], word);
                    if(index_splice !== -1)
                        marker_array.splice(index_splice,1);
                }
                marker_array.push([marked_text[num_click], word]);
                $.jStorage.set('wk_marker_array', marker_array);
            }
            num_click++;
        });

        $.jStorage.listenKeyChange('currentItem', function(key) {
            if(markedWord($('#character span:first').text())){
                $('.marked-parent').remove();
                num_click = marked_text.indexOf(markedWord($('#character span:first').text()));
                $('#character span').css('border-color', marked_color[num_click]);
                $('#character span').addClass('marked');
                $('.marked').after('<span class="marked-parent"><span class="marked-text">' + marked_text[num_click] + '</span></span>');
            }
            else {
                num_click = 0;
                $('.marked-parent').remove();
                $('#character span').removeClass('marked');
            }
        });
    } else {
        $('.progression').after('<section class="item-marker"/>');
        for(var i=0; i<marked_text.length; i++){
            $('.item-marker').append('<h2 class="' + marked_text[i] + '"></h2><pre class="' + marked_text[i] + '"></pre>');
            $('.item-marker h2.' + marked_text[i]).append(marked_text[i]);
        }

        marker_array.sort(function(a,b){
            return a[1].level-b[1].level;
        });
        
        for(i=0; i<marker_array.length; i++){
            $('.item-marker pre.' + marker_array[i][0]).append(formatCurrentItem(marker_array[i][1]));
        }

        $('.item-marker-remove').click(function(){
            word.id = $(this).parent('div').attr('class');
            for(var i=0; i<marked_text.length; i++) {
                var index_splice = getMarkerIndex(marked_text[i], word);
                if(index_splice !== -1)
                    marker_array.splice(index_splice,1);
            }
            $.jStorage.set('wk_marker_array', marker_array);
            $(this).parent('div').remove();
            debugger;
        });
    }
})();

function markedWord(word){
    for(var i=0; i<marker_array.length; i++){
        var check;
        if(marker_array[i][1].voc)
            check = marker_array[i][1].voc;
        else if(marker_array[i][1].kan)
            check = marker_array[i][1].kan;
        else
            check = marker_array[i][1].rad;

        if(check === word)
            return marker_array[i][0];
    }
    return false;
}

function getMarkerIndex(text, word){
    for(var i=0; i<marker_array.length; i++){
        if(marker_array[i][0]===text && marker_array[i][1].id==word.id)
            return i;
    }
    return -1;
}

function formatCurrentItem(currentItem){
    var output = '<div class="'+currentItem.id+'">';

    if(currentItem.voc)
        output += 'Vocabulary\t' + currentItem.voc;
    else if(currentItem.kan)
        output += 'Kanji\t' + currentItem.kan;
    else if(currentItem.rad)
        output += 'Radical\t' + currentItem.rad;

    if(currentItem.voc)
        output += '\t' + currentItem.kana.join(',');
    else if(currentItem.kan)
        output += '\t[On]' + currentItem.on.join(',') + '[Kun]' + currentItem.kun.join(',');
    else if(currentItem.rad)
        output += '\t';

    output += '\t' + currentItem.en.join(',');

    output += '\tLevel ' + currentItem.level;

    output += '\t<a class="item-marker-remove">Remove</a>';

    output += '\n</div>';

    return output;
}