[UserScript] SRS Grid Details

First of, thanks for taking your time to fix the problem, I appreciate it! :slight_smile:

I’m using GreaseMonkey on Firefox. Open Framework is higher in the list and I’m using Stylish (WaniKani Breeze Dark Beta user style). The script settings don’t give me much information, they just declare that the script is used on WaniKani/Dashboard.

The console is indeed giving me an error for your script, I hope this helps.

I hope I’m not intruding… Since this uses the Open Framework, I’m keen to follow how scripters start using it. I saw the console errors above, and knew what the problem was.

It’s is a race condition in the loading order of the Framework modules.

The first path:

wkof.ready('ItemData').then(get_items) --> srsGridStyling() --> access the settings

The second path:

wkof.ready('Settings').then(install_settings)  --> load the settings

There’s no guaranteed order there, so the settings are being used before they’re loaded.

One possible solution:

// Wait until *both* modules are loaded
wkof.ready('ItemData, Settings')
.then(install_settings) // <-- install_settings() returns a promise to finish loading.
.then(get_items);       // <-- This waits until that promise is finished,
                        //     then calls get_items().

// Once the settings are loaded, then call get_items.
function install_settings() {
    // Do all the normal stuff in this function, and then...

    // Note: I'm *return*ing the promise from the load(),
    // which means the ".then(get_items) in the wkof.ready() statement above
    // will wait until the settings_dialog.load() is finished.
    return settings_dialog.load().then(function(){
        wkof.settings.srsGrid= $.extend(true, {}, defaults,wkof.settings.srsGrid);

heads-up @rfindley, I’m rewriting my Notify script with open-framework. Got it to the point it doing its core thing, just need to work in the settings.

1 Like

I’ve added a link on the Open Framework Discussion thread.
That makes 3 of your scripts: Notify, Fast Abridged Wrong/Multiple Answers, SRS Grid Details.
Am I missing any others?

Nah, that’s all of them. Only got one other script that I may migrate, but its not broken and don’t see adding anything to it, so may not get to it for a while.

This script is no longer compatible with SRS Level Progress.
The other script runs just fine, but you override its data when you add yours in these lines.

$('.srs-progress #apprentice').html("<span>Apprentice</span>").append(makeTable(data.apprentice));
$('.srs-progress #guru').html("<span>Guru</span>").append(makeTable(data.guru));
$('.srs-progress #master').html("<span>Master</span>").append(makeTable(data.master));
$('.srs-progress #enlightened').html("<span>Enlightened</span>").append(makeTable(data.enlighten));
$('.srs-progress #burned').html("<span>Burned</span>").append(makeTable(data.burned));

I already patched it on my end, so it’s up to you whether it’s something you want to see to.

Never really expected anyone to run both together. I’ll look into it when I get a second.

Side note: I’ve toyed with the idea of adding the further breakdowns myself, similar to what the other script does. As if this scripts code isn’t messy enough already. Also been toying around with using Vue.js, but that’s proving to be a challenge when I only have access to js.

1 Like

The breakdown is what I’m really after, I don’t care for the leech count, so that would be great

Coming soon:

Need to come up with some styling… :thinking:

1 Like

Change is live. New setting.
Minimal testing done, so let me know if it misbehaves.

1 Like

Looks great!


What is this style you are using, please? (with the smaller font for details)

The details being small is something I added myself.

If you want the same you’ll have to edit the code. Around line 123 I changed these four lines

"<tr><td class='progressDetailTableTDFirst'>Radicals</td><td class='progressDetailTableTDSecond'>" + level.radicals() + (level.sub == undefined ? "" : breakdown(level.sub.radicals)) + "</td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Kanji</td><td class='progressDetailTableTDSecond'>" + level.kanji() + (level.sub == undefined ? "" : breakdown(level.sub.kanji)) + "</td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Vocabulary</td><td class='progressDetailTableTDSecond'>" + level.vocabulary() + (level.sub == undefined ? "" : breakdown(level.sub.vocabulary)) + "</td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Total</td><td class='progressDetailTableTDSecond'>" + level.total() + (level.sub == undefined ? "" : breakdown(level.sub.total)) + "</td></tr>" +

to this

"<tr><td class='progressDetailTableTDFirst'>Radicals</td><td class='progressDetailTableTDSecond'>" + level.radicals() + (level.sub == undefined ? "" : "<span class='SRSGBsmall'> "+breakdown(level.sub.radicals)) + "</span></td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Kanji</td><td class='progressDetailTableTDSecond'>" + level.kanji() + (level.sub == undefined ? "" : "<span class='SRSGBsmall'> "+breakdown(level.sub.kanji)) + "</span></td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Vocabulary</td><td class='progressDetailTableTDSecond'>" + level.vocabulary() + (level.sub == undefined ? "" : "<span class='SRSGBsmall'> "+breakdown(level.sub.vocabulary)) + "</span></td></tr>" +
"<tr><td class='progressDetailTableTDFirst'>Total</td><td class='progressDetailTableTDSecond'>" + level.total() + (level.sub == undefined ? "" : "<span class='SRSGBsmall'> "+breakdown(level.sub.total)) + "</span></td></tr>" +

and then I added this CSS to a personal style of dashboard edits

.SRSGBsmall {
    display: inline !important;
    font-size: 10px !important;
1 Like

@Kumirei’s smaller font mod is something I’ve been meaning to rip off, just haven’t had time. But it’ll be an option eventually.


I tried this without the CSS part and then the font is really huge. I have not figured out where to add the CSS part, it seems to give a parsing error, so i assume there is a specific part where i have to add this :thinking:

I have a separate extension for userstyles, called Stylish, so that’s where I put it. If you want it in the code itself you can just add this somewhere

$('head').append('<style id="SRSGBsmallStyle">'+
                     '.SRSGBsmall {'+
                         'display: inline !important;'+
                         'font-size: 10px !important;'+

Oh i have stylus (basically stylish without spyware), but i wouldnt know how to add that to it :thinking:

I will add this to the script itself, thanks a lot <3

A spyware a day keeps the apple at bay


Hm i added it but it looks misaligned or something. Might be to do with resolution? idk.
I will just use the default for now

Are you using the left/right setting in SRS Grid?