wow, that’s going to be really helpful! I assume you get a lot of these requests.
I do want to say the input box for the API key looks a bit strange. There’s nothing you can manually input/change about it after all.
Yeah… Maybe it should just be text? We used to have it as a disabled input box, but I think in Firefox you can select the text to copy and paste.
If I end up changing the mark up, you all will need to update your scripts again. Heh.
Given the unusually high proliferation of userscripting on WK, it may be woth considering whether features like account reset and deletion, which are irreversable, might need an extra confirmation step that isn’t easily scriptable. Maybe generate an email with confirmation link or something.
I trust (but verify) our current script writers, but it would be easy for an unsavory wolf to mislead some sheep into installing a fork of a trusted script.
(Having done some work in security has permanently changed how I look at things…)
2 Likes
No problem… Just keep making WK better, and we’ll keep up 
. Maybe we could have a thread for scripters to Track, where new or upcoming changes are described?
That would be best, I think. Disabled inputs can work too, but DANG why do browsers change your cursor when hovering it?!
Meh, don’t worry about that ;p
Yea, that’s probably a good idea! Maybe Viet thought of that already?
There is a confirmation input for users having to fill out. Very similar to how Github does their repo deletions
But the email idea sounds better. Will have to give it some reconsideration on how to approach it now.
Thanks, it worked for me!!!
@Tizzysawr’s solution is good and works for most people, but it’s not quite complete.
You can download the latest version of the script for complete fix.
Mainly, the latest version fixes cases where the user hasn’t yet generated an API key.
1 Like
Just downloaded this. Thank you! It is very useful.
Hey, sorry to bug you, but my script has been broken for a while and I can’t work it out. Console is full of errors:
Uncaught RangeError: Maximum call stack size exceeded
at String.replace (<anonymous>)
at t (https://cdn.wanikani.com/assets/v03/review/application-e53fadb7049396d72ef6b3b456c1217e36bff8dc1528077b1d90d18b286b30f4.js:1:19568)
at Function.t.matches (https://cdn.wanikani.com/assets/v03/review/application-e53fadb7049396d72ef6b3b456c1217e36bff8dc1528077b1d90d18b286b30f4.js:1:28821)
at Function.pe.filter (https://cdn.wanikani.com/assets/v03/review/application-e53fadb7049396d72ef6b3b456c1217e36bff8dc1528077b1d90d18b286b30f4.js:2:4993)
at i (https://cdn.wanikani.com/assets/v03/review/application-e53fadb7049396d72ef6b3b456c1217e36bff8dc1528077b1d90d18b286b30f4.js:1:628)
at pe.fn.init.not (https://cdn.wanikani.com/assets/v03/review/application-e53fadb7049396d72ef6b3b456c1217e36bff8dc1528077b1d90d18b286b30f4.js:2:5459)
at Object.highestPriorityType (eval at <anonymous> (:1:1), <anonymous>:573:27)
at Math.newRandom (eval at <anonymous> (:1:1), <anonymous>:593:45)
at o (https://cdn.wanikani.com/assets/v03/review/application-e53fadb7049396d72ef6b3b456c1217e36bff8dc1528077b1d90d18b286b30f4.js:1:22624)
at t.select (https://cdn.wanikani.com/assets/v03/review/application-e53fadb7049396d72ef6b3b456c1217e36bff8dc1528077b1d90d18b286b30f4.js:2:3550)
I don’t have any other scripts running on this page. On Mac, OSX, using Chrome Version 58.0.3029.110 (64-bit).
Has anyone else reported issues? I’m not even sure that error is from your script or something else.
Thanks
Edited to add: Actually, nevermind, I manually uploaded to the latest version and it’s fixed Leaving this here for anyone else who has an issue. Thank you!
Hey so I’m finally going to update to Ultimate Timeline from your original Timeline Script (now that I’ve got Windows 7, and the API change has made the old one load unbearably slow, and sometimes doesn’t appear at all)…
I think you pointed out to me previously how to set up (in this thread) the Ultimate Timeline to look and function like the old one, but could you point me at the right post again?
I really just want it to be super basic (as before), and don’t wish to know which burns are coming up, for instance (just the black arrow to tell me burns are in that pile is great!).
Also, when looking at your latest update (I think it’s the latest) as linked from the “API is slow lately” thread, I noticed when about to download it that this version seems to run on a few more pages than simply the dashboard (I think it has some kind of function on the reviews and lessons pages???) This (new?) functionality/inclusion confuses me a bit.
I’m going to scroll back up to the OP to see what I can figure out from there, but… ??? Thanks!
Love all your scripts I’ve been using, and really appreciate all the coding you do (as well as grammatical help and other help) around the forum. You’re just a swell person! ^^
EDIT: I know you can turn some things off (and I found the post, from late January)… but I guess I want more than that, and by more I really mean less. I think what I’m really asking you for, is a “WaniKani Ultimate Timeline: Classic Edition”, where it really is pretty much just the old Timeline but with all the updates to the API stuff so it works well. Or this one, but (manually) deleting swathes of code that contain all the bells and whistles and other stuff so that this already faster version loads even faster… Does that make sense? Just really, really basic.
I’m on my tablet, so I can’t open the script, but I’ve got this screenshot from earlier in the thread.
Click on the gear icon to open settings, then change “Show Review Details” to ‘No’.
It’s been so long, I can’t remember for sure if that removes all of the additional info, and the screenshot may not be the latest. So, if that doesn’t get it to where you want it to be, let me know. I think removing any additional info should be a super quick change if it comes to that.
The additional pages (lesson and/or review page) are just so it can know when you’ve done lessons and reviews, so the timeline can update more efficiently, rather than having to requery every time you go to the dashboard. It doesn’t actually interact in the foreground.
Ooohhh…
Yeah, please see my edit (above). I’d love for the script to not even have that entire settings box. Super basic. XD
I kind of just want to set it and leave it alone, and not have all that code trying to be processed/loaded/loading in the background, if you know what I mean. I pretty much always set the original to 36 hours, and would occasionally expand it to 48 or 72 hours just to have a quick look ahead, and then pop it back down to 36 hours. *shrugs*
Thanks for the quick reply!
EDIT: Being that you’re on your tablet and can’t get into the code at the moment, I can wait a few more days. It’s cool. ^^
EDIT 2: As an example, on Windows 7 it’s still currently working. (However since the API update last week or whatever, it’s really slowed down to a crawl to load.) The old one, I mean.
EDIT 3: And because I mentioned speed in my edit the post above this one, it’s not even really about the speed… I just like the simplicity of the old one. Simple and Clean.
[Ultimate Timeline (Basic Edition)]
I ripped through the code in a matter of minutes, so let me know if there are problems. It seemed to work okay on my test account.
There are still some options embedded in the script, but you’ll need to edit them manually at the top of the code:
- Timeline height (default: 150px)
- Whether to show a white arrow/bar for current-level items (default: yes)
- Whether to show a black arrow/bar for burn items (default: yes)
- The max value of the slider (default: 7 days)
1 Like
Oh sweet! Thanks, Robin! I’ll be installing this next time I’m at my computer for sure. Probably changing the height to shorter. Totally want the white and black arrows, thanks for keeping them in as default. : D I’ll let you know how it goes.
Hey Robin,
Just installed it. Sorry to be nit-picky, but I’m missing some of the functionality of the old Timeline - namely, the pop-up that tells me a) the precise time of the reviews and b) the amount of radicals vs. kanji vs. vocab, as well as current level or not… I still have regular Timeline installed, but disabled at the moment.
Also 1.5 days instead of 36 hours confused me for a second. (Weird that it shows up as 1.50 days… how many people express time like that? O.o ???) I would also like to get rid of the grid in the background. I’m going to try seeing if I can figure out and fiddle with the code myself (since I was going to change the height anyway…)… But it sounds like you removed some of that functionality?
(And I’m not a coder… other than BASIC and basic HTML (and a wee bit of PHP and CSS), I’m a copy-paste-modify-er.)
Going to mess with it and see what happens for now…
EDIT: I have to say, looking at the old code (which you said was mostly Kyle’s), is much harder than looking at yours. I cannot figure out what is going on there, most of the time. Whereas with yours, I have some vague idea at least of what I’m looking at, and that I haven’t yet found what I’m looking for. I was thinking of copy+pasting some old code back into yours, but I see now that many of the tags are labelled completely differently (plus I don’t understand 90+% what I’m looking at when it comes to the old script)… so I know that is not going to work.
I did manage to adjust the height to my liking: 118 px. (And did that thing where they were all blue, then switched it back when I realized what it was.) Wasn’t sure the first place I saw the height was the right place, but it was. Thanks for making your code so easy! ^_^;
EDIT 2:
Posting this both as a comparison (notice the off-set that they don’t line up?) but also to point out the info box pop-up to which I was speaking of. Still searching through your code…
EDIT 3: I just succeeded in making the red date lines and corresponding texts go away. Buahahaha! XD Fiddling around line 120 and 122…
4: Finally found most of the grid… took away a bit too much at first, but now got it right, modified lines 118 and 119 to opacity 0, then “major” back again to 0.05. Still more lines than I’d like (just every 12 hours was good)… but looks so much less cluttered… if only I could find the number of reviews on the left…
After having completed 100 Reviews just now, I noticed something else weird… The new Timeline, seems to show more reviews. It also has more “current level” flags than the old one.
This is somewhat confusing. Take a look at the outlined areas.
EDIT (much later): Seems a refresh of the page much later had the old timeline finally drawing those other bars in that weren’t in their before - again proving the superiority of the newer timeline over the old.
Now that I have a better grasp of what you want, I’ve made a second pass through the code.
[WaniKani Ultimate Timeline (Basic Edition) v6.3.4.2]
I left a few things as-is still, so you have a better starting point for figuring out what you want to do next.
Just for reference, in case you want to do more fiddling…
Re: graph height…
It’s a setting at the top of the script, line 27:
'graph_height': 150,
Re: grid…
The grid is designed to change based on maximum grid density. If you just want it to always show every 12 hours, then change the following two lines. It will always show a major tic at 12hrs, and no minor ticks (because 48 15-minute intervals == 12 hrs)
var major_tic_choices = [12]; // Hours
var minor_tic_choices = [48]; // 15min intervals
For the horizontal grid, you can make it look like the old script with this (search for “Draw vertical graph”):
// Draw vertical graph tics (# of Reviews).
var tic, tic_class, y;
graph_reviews = max_reviews;
var inc_s = max_reviews/2, inc_l = max_reviews;
for (tic = 0; tic <= graph_reviews; tic += inc_s) {
tic_class = ((tic % inc_l) === 0 ? 'major' : 'minor');
y = (graph_height_top + graph_height) - Math.round(graph_height * (tic / graph_reviews));
if (tic > 0)
grid += '<polyline class="'+tic_class+'" points="'+graph_width_left+','+y+' '+(graph_width_panel-1)+','+y+'" />';
if (tic === max_reviews)
label_y += '<text class="'+tic_class+'" x="'+(graph_width_left-4)+'" y="'+y+'" dy="0.4em">'+tic+'</text>';
}
Re: “1.5 days”…
If you get above 2 or 3 days, the number of hours starts to lose meaning (e.g. 120hrs, 168hrs). Right now, it uses ‘hours’ for anything 24hrs or less, and switches to days if it’s >1day. The transition point is easy to change, though. If you always want hours, change (hours <= 24) to (hours <= 99999):
function slider_label(hours) {
if (hours <= 24)
return hours+' hours';
else
return (Number(hours)/24).toFixed(2) + ' days';
}
1 Like
Thanks a bunch!
I think I’ll set the hours to 72 or 73… because after 3 days, I don’t know how many hours it is anymore. XD That’s usually the farthest I put the slider anyway.
EDIT: Also line 27 was where I had changed the height before. As I said, you make your code easy to read, and well organized. THANK YOU! ^^ I just ended up changing the opacity again of the major and minor horizontal lines. EDIT 2: Also may I say a HUGE thank you for putting the simplified pop-ups back in.
It appears you’ve done that already. I found the section, and it’s identical to what you’ve posted here. Thanks again!
EDIT: Fiddling with the Current and Burn arrows now… around lines 135 and 136… outline stroke back to 1 px from .5. Going to adjust height around line 400 something. Just that small change already has made the current arrows stand out more and be more obvious to me. I’m actually pretty excited to post a screenshot when I’m done. Hoping to find out how to get the 12 hours later marker back (rather than “this is when midnight is” with actual times). This is actually pretty fun trying to parse your code. ^^ Hmm… back down to “ah” where I was… somehow adjusting it from 7 to 10 pixels, while making current item flags taller, it weirdly made burn flags much smaller. This confuses me. (line 477)
// If current timeslot has current-level items, or items ready for Burning, draw indicator arrows.
var ay = graph_height_top+graph_height+1;
var ac = graph_width_left+(x1+x2)/2;
var ah = 10;
var aw = Math.min(x2-x1, ah);
var ax1 = ac-(aw/2);
var ax2 = ax1+aw;
if (slot.has_current) {
if (get_setting('show_current_bars'))
bars += '<rect class="cur" x="'+x1+'" y="'+base+'" width="'+(x2-x1)+'" height="'+(graph_reviews-base)+'" />';
arrows += '<polygon class="cur" points="'+ac+','+ay+' '+ax1+','+(ay+ah)+' '+ax2+','+(ay+ah)+'" />';
}
ay += ah+1;
if (slot.has_burn) {
if (get_setting('show_burn_bars') && !(slot.has_current && get_setting('show_current_bars')))
bars += '<rect class="bur" x="'+x1+'" y="'+base+'" width="'+(x2-x1)+'" height="'+(graph_reviews-base)+'" />';
arrows += '<polygon class="bur" points="'+ac+','+ay+' '+ax1+','+(ay+ah)+' '+ax2+','+(ay+ah)+'" />';
}
bars += '<rect class="clr" x="'+x1+'" y="0" width="'+(x2-x1)+'" height="'+graph_reviews+'" data-slot="'+tic+'" />';
}
}
What am I missing, or is it in the next area that says “use above when drawing” that I have to also change something?
