[Userscript] WaniKani Lesson Hover Details

[seanblue]

This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely.

What is it?

This script lets you see the lesson breakdown by type (radicals, kanji, vocab) when you hover over the Lessons icon in the menu bar.

Settings

By default the script will show the total number of lessons available per type, followed by the total number of lessons for the current level in parentheses. This can be changed by modifying the variable levelSetting in the script. The following settings are available:

• None - Only show the totals, with nothing in parentheses. This is equivalent to the behavior the script had before this feature was introduced.
• CurrentLevel - Shows the total number of lessons for the current level in parentheses. This is the default setting for the script.
• PriorLevels - Shows the total number of lessons for all prior levels in parentheses instead of showing the total number of lessons for the current level.

How to Install?

1. As always, make sure you have a script manager installed. If you don’t, follow these instructions.
2. This script depends on the WaniKani Open Framework. Make sure you have that installed by following these instructions.
3. Get the script here: WaniKani Lesson Hover Details

Support

• This script has only been tested in Chrome using Tampermonkey, but will likely work in Firefox as well.
• Please post any bugs/requests and I’ll get back to you as soon as I can.

Revision History

1.2.1 - Show a count for kana vocab.
1.2.0 - Add config to optionally show current level or prior level counts in parentheses. The default is to show current level counts.
1.1.0 - Added support for new dashboard buttons.
1.0.4 - Fixed for the new WaniKani header… again.
1.0.3 - Fixed for the new WaniKani header.
1.0.2 - Only redirect users to install the Open Framework if they want to.
1.0.1 - Fixed a layout issue.
1.0.0 - Initial release.

[gojarappe]

Thank you so much, seanblue! I can’t wait to use this!

[jprspereira]

Why do I have the impression that people will release a bunch of crazy awesome scripts these coming days??

[Raionus]

I feel like this website is 95% CS majors.

[Powerpuncher]

I don’t know why, but when your script is active, it does this to the layout:

Edit: Seems to only happen with the breeze dark skin, so it’s probably not your fault.

[seanblue]

That would definitely be odd since I didn’t change anything on the page other than when you hover. So the layout shouldn’t change when the script is active. Does this not happen with the dark layout when my script is disabled?

[Aeioryu]

The layout does indeed seem to shift a little when the script is active. I am using Mozilla Firefox!

[musera]

It shifts on mine as well, using the default layout on chrome. It shifted to the left by about 30 pixels. Doesn’t bother me but I figured I would chime in as well.

Awesome script regardless. I’m getting get a lot of use out of it.

[Powerpuncher]

It only happens when your script is enabled, yes. And as @chrisjwelly said, the entire site body shifts a little to the right. For some reason it shifts before the script is even loaded, though, and the shift doesn’t happen when the script is diasbled.

Edit: It actually shifts to the right.
Edit2: Made some screenshots showing the script enabled and disabled:

Enabled

Disabled

[Kumirei]

@seanblue in case you haven’t figured it out already it’s the display: table-row on .row which causes it.

If anyone wants a temporary manual fix change line 23 to

			'.lessonHoverDetails .row { display: table-row; margin: 0; padding: 0; }' +

and line 82 to

		return `<div class="table lessonHoverDetails">

[seanblue]

Thanks, I’ll look into it more when I’m done work. I want to make sure the hover box is formatted nicely, but obviously I don’t want to change the rest of layout at all.

I’m open to suggestions if you have css that formats the hover box nicely and doesn’t have any side effects. My main goal is to have the numbers lined up nicely.

[Kumirei]

This should make sure the css doesn’t affect anything else. Using the class you already put on the popover (which I missed in my previous post):

	var style =
		'<style>' +
			'.review-time .table { display: table; margin: 0; padding: 0; }' +
			'.review-time .row { display: table-row; margin: 0; padding: 0; }' +
			'.review-time .cell { display: table-cell; margin: 0; }' +
			'.review-time .cell-title { font-weight: bold; padding: 0 10px 0 0; text-align: right; }' +
			'.review-time .cell-value { text-align: left; }' +
		'</style>';

[Radish8]

Ah, finally. The script I never knew I needed.

[seanblue]

Ah, I see now. That’s a big shame on me. When I made my lesson filter script I made sure all class names would be unique. But I grabbed this html from some sample code online and forgot to clean it up.

[seanblue]

I have an update ready, but greasyfork is having trouble syncing from github for some reason. I’ll post an update when it’s available.

[seanblue]

Version 1.0.1 is available to fix the issue with the layout shifting to the right. Greasyfork is still being weird, but you should be able to get the update. You may have to update manually from greasyfork to get the latest changes.

CC: @Powerpuncher @chrisjwelly @musera @Kumirei

[Aeioryu]

完璧だ！ありがとう。

Layout’s all good now. Will keep reporting if I find anything else.

[anon93783493]

Thank you seanblue

[seanblue]

Version 1.0.3 is out to work with the new WaniKani dashboard.

cc: @lbbtc06

[lbbtc06]

thank you!