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.
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
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.
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):
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.
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.
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.
