[Userscript] Lesson/Review Count in Forums

rfindley · 2017-03-08 23:22:00 UTC

Lesson/Review Count in Forums

And if you don’t have reviews until later:

Instructions:

Install a script manager in your browser (TamperMonkey or GreaseMonkey)
Install this script from here: https://greasyfork.org/en/scripts/27969-wanikani-forums-lesson-review-status
Go to or refresh the forums page.
If it asks for your APIv2 key:

Click the “Find it” button, which will take you to your Account Settings.
Copy the API Version 2 key:

image.png1159x373 66.7 KB
Go back to the forums, paste the key in the box, and click the “Save” button.
The “Save” button only appears if the format of the APIv2 key is correct.

Your Lesson/Review count should now be visible.

Aleithian · 2017-03-08 23:23:45 UTC

Sweet. Thanks @rfindley Works like a charm.

Aleithian · 2017-03-08 23:32:02 UTC

@Mnemosyne

Inserio · 2017-03-08 23:46:00 UTC

Not sure if intentional, but that was exactly my sentiment, except with a lowercase w on "Works."
As in, @rfindley works like a charm. 頼るの人

tomboy · 2017-03-09 00:17:02 UTC

Thanks!

Now I only need the review timeline and the dashboard progress plus here, and I don’t have to open the wk dashboard again XD

Mnemosyne · 2017-03-09 00:32:35 UTC

Awesome! Thanks @rfindley. I wish I could use scripts at work…

kraits · 2017-03-09 01:28:57 UTC

The styling looks good! Fits right into the forums.
Is it possible to install this script without Tampermonkey on Safari?

Inserio · 2017-03-09 01:48:58 UTC

I agree, it looks so good they should just blatantly rip off rfindley’s code and make it available from the get go.
I kinda want to tag a developer, but I also think that would be a little rude.

rfindley · 2017-03-09 02:01:58 UTC

I don’t know whether it would work, but I’m sure it won’t hurt to try.

maniguigs · 2017-03-09 02:09:30 UTC

thank you!!!

kraits · 2017-03-09 02:20:37 UTC

Hmmm

I tried this*, I haven’t had any luck so far

http://stackoverflow.com/questions/29979555/how-do-i-run-site-specific-user-scripts-in-safari

xallever · 2017-03-09 02:27:10 UTC

Neat!

Avocado apple so I can post

AnimeCanuck · 2017-03-09 03:37:01 UTC

YAY! It looks and works great!

Buuuut… I was actually hoping it could remain persistent and be in that top bar (the one that has the image, turns into the thread title, and has the search bar and our gravatar/icon in it) So even when scrolled down way far on say, the Longest Thread, we can still see it.
Is there a way you can have this applied there? : D

If not, this is still cool, though.

Thanks again. You’re the BEST!

inwchaos · 2017-03-09 04:46:45 UTC

This looks beautiful. Really great to see how it is displayed.

kraits · 2017-03-09 11:18:34 UTC

I’m lost, @rfindley!

I wanted to extend the functionality a little by having the update counts grey until their is a lesson or review.

I thought it would be best to put the statements somewhere in the update counts function.
This is what I have:

function update_counts(lessons, reviews) {
  var lc = $('#lesson_count');
  var rc = $('#review_count');
  if (lc.length != 1) {
    $('head').append('<style type="text/css">'+css+'</style>');
    $('.wanikani-app-nav > ul > li:contains("Lessons")').append('<span id="lesson_count" class="dashboard_bubble">'+lessons+'</span>');
    $('.wanikani-app-nav > ul > li:contains("Reviews")').append('<span id="review_count" class="dashboard_bubble">'+reviews+'</span>');
  } else {
    lc.text(lessons);
    rc.text(reviews);
  }
  if (lessons > 0) { lc.style.backgroundColor = '#6cf'; }
  if (reviews > 0) { rc.style.backgroundColor = '#6cf'; }
}

I can’t get anything functioning for the life of me!

I’ve tried many different approaches; appending a new variable with style information like you did above, directly manipulating the element’s style information by selecting it’s ID.

I always seem to find it hard to wrap my head around these problems, it’s even harder when it’s someone else’s code.

obskyr · 2017-03-09 12:53:22 UTC

Your approach doesn’t work because the default state of the little badges are to have the blue background. Basically, what you’re doing in those two extra lines is adding a blue background to something that already has a blue background. In addition, once you’ve set it to blue, if the numbers return to 0 you’ve got nothing that sets them back to gray. That’s the pure logic of it, but also lc and rc are jQuery objects and not DOM objects, so you set CSS properties with .css(property, value) and not with .style.

If you want to solve them with that approach, you can do something like this (or literally this):

lc.css('background-color', lessons > 0 ? '#6cf' : ' #ccc');
rc.css('background-color', reviews > 0 ? '#6cf' : ' #ccc');

You also need to change a couple of earlier lines (the ones with “append”) so lc and rc get set even initially, since they’re undefined when first adding the elements - it looks like this:

lc = $('<span id="lesson_count" class="dashboard_bubble">'+lessons+'</span>').appendTo('.wanikani-app-nav > ul > li:contains("Lessons")');
rc = $('<span id="review_count" class="dashboard_bubble">'+reviews+'</span>').appendTo('.wanikani-app-nav > ul > li:contains("Reviews")');

Personally I think I’d have the colors in the CSS in the initial style tag, and either have a zero class or even have the number of lessons and reviews in a data-number attribute with the actual numbers displayed being in a pseudo-element with content: attr(data-number);… but that’s the “separate style, content, and logic” web developer in me talking.

Milennin · 2017-03-09 12:56:38 UTC

This looks really nice and helpful. I hope it’ll become an official addition sometime, but for now, thanks for the userscript.

kraits · 2017-03-09 12:57:58 UTC

Sorry for the confusion, I had edited the css line above that function to change the default colour of the badges.

My initial approach was just to look at the already written code and see if I could replicate it. That’s why I tried appending a predefined CSS variable, like in this example:

var css = '.dashboard_bubble ... 

... $('head').append('<style type="text/css">'+css+'</style>');

I’ll try implementing it once again with what you’ve suggested.

I think that was the issue, as the console was showing a element undefined error. I didn’t want to look at the rest of the code, it was too intimidating.

rfindley · 2017-03-09 13:12:01 UTC

I’ll add this next time I’m at my computer. Will also look at adding an option to anchor the Dashboard section to the menu so it’s still visible when you’re scrolled down, like @AnimeCanuck suggested.

obskyr · 2017-03-09 13:12:20 UTC

Ah, well, you still have to go through the steps I mentioned so it gets set back to gray again if the numbers hit 0.

Oh, and I couldn’t help it - here’s my solution - how about it, @rfindley?

var css = '.dashboard_bubble {background-color:#6cf; font-size:0.8em; border-radius:0.5em; padding:0 6px; margin:0 4px; color:#fff; font-weight:bold;} ' +
          '.dashboard_bubble[data-number="0"] {background-color: #ccc;} .dashboard_bubble::after {content: attr(data-number);}';
    
function update_counts(lessons, reviews) {
    var lc = $('#lesson_count');
    var rc = $('#review_count');
    if (lc.length != 1) {
        $('head').append('<style type="text/css">'+css+'</style>');
        $('.wanikani-app-nav > ul > li:contains("Lessons")').append('<span id="lesson_count" class="dashboard_bubble" data-number="'+lessons+'"></span>');
        $('.wanikani-app-nav > ul > li:contains("Reviews")').append('<span id="review_count" class="dashboard_bubble" data-number="'+reviews+'"></span>');
    } else {
        lc.attr('data-number', lessons);
        rc.attr('data-number', reviews);
    }
}