[Userscript] WK Extra study mover

[Gorbit99]

If you like the new extra study feature, but think that the positioning of the ui item isn’t convenient or hides other stuff, this script is for you.

Features

After adding the script, a small cog will appear in the corner of the extra studies panel. Clicking on this will let you set the position and the style of the panel and possibly remove the info questionmarks.

The different positions

Top:

Above level progress (the original):

Below level progress (the default):

Above item breakdown:

Below item breakdown (and heatmap):

Above review forecast (I recommend using a reduced or minimal style for this):

Below review forecast:

In the header:

None is pretty self explanatory (The settings button gets put into the user menu this way)

The different styles

Normal (the usual and the default):

Text only:

Image only:

Reduced (the text and the image removed):

Minimal (only what’s necessary):

With and without the info questionmarks

Button orientations

Horizontal

Vertical

My personal favourite combination

Below review forecast, reduced, vertical orientation:

Installation

Guide on how to install a userscript
Link to the userscript

Feedback

If you want a different position or style, or one of the existing ones is acting up for you, feel free to leave a reply, preferably with an example image, and I’ll see what I can do

For userscript authors wanting to support the script

I’ve added some classes to the extra study element to signal that extra study mover is in operation. These are:

• es-mover: the script is running
• es-mover-header/top/above-lp/…: The exact positioning of the box
• es-mover-normal/reduced/minimal: The current style of the box

Changelog

• v0.6.2: Now supports Kumirei’s “Lessons & Reviews in header” script
• v0.6.1: Added a small gap between items in horizontal mode
• v0.6.0: Fixed compatibility issues, added button orientation
• v0.5.0: Added a none option to the position
• v0.4.2: Bumped CIDDWA dependency
• v0.4.1: Fixed several smaller bugs
• v0.4.0: Big compatibility and code changes
• v0.3.3: Removed the leftover button from the user menu
• v0.3.2: Solved some minor issues and added dashboard compatibility for header mode
• v0.3.1: The header option is now a dropdown with all the buttons inside
• v0.3.0: Now there’s an option to put the buttons in the header
• v0.2.2: Now supports breezy dark out of the box
• v0.2.1: Below item breakdown was missing
• v0.2: You can now select the positioning and the style
• v0.1: Initial

[Rowena]

Thank you for reading my mind!

[Hubbit200]

Really useful!
Any chance this surplus margin could be fixed?

[Gorbit99]

I don’t get that, I assume the settings are below level progress reduced. With those I have this:

Maybe your dark mode script is affecting it. Can you check and if I’m right, can you link it for me?

[Hubbit200]

Ah yep - it does indeed seem to be Breeze Dark. As you say, I’m using below lp reduced. Here’s the link to the dark mode script, but I’ve also found that changing the margin on line 48 of your script to 0px fixes it, so don’t worry too much about it. Thanks!

[Gorbit99]

Fixed it. It might modify the original look a bit, but 仕方がない. It seems fine for me at least.

[cmoncrab]

Love this. Thank you!

[Gorbit99]

Now there’s an option to put the 2 buttons right into the header:

Disclaimer:
There’s a surprising lack of space in the header if you also scroll down. If you have any other userscripts that put in buttons, it might not look so hot.
With this mode the settings button will be moved to the user menu (click profile picture).

Idea by @UInt2048

[Kumirei]

Amazing!!!

[UInt2048]

I was already using this script & I’m pleasantly surprised to discover you implemented this! Here’s how the WK dashboard looks for me now:

My only concern is that WK could add more categories to Extra Study in the future. You might consider making it a drop-down something like the Levels dropdown (bonus: takes even less space!)

[Gorbit99]

That’s actually a great idea, I don’t have the time to implement this today, but maybe next week sometime. Would solve the settings placement issue too.

[UInt2048]

No worries! It’s not super important right now; I only brought it up since you said you wanted some more coding practice

[evandcs]

great!

It really bothered me seeing the recent mistakes count right on my face every time!

using the personal recomendation

[UInt2048]

You might be interested in this post if you would rather see categories or 42+ instead of the actual number…

[Kumirei]

Do you also move the Reorder Omega self study button?

[Gorbit99]

Not currently, because it just doesn’t fit, but once I implement that drop down, I’ll try to move every button in there to that new location.

[Kumirei]

Sounds good!

[Gorbit99]

@UInt2048 so that was a lie apparently, I had plenty of time tonight:

@Kumirei I’ve taken steps to make sure all the buttons make their way into the dropdown, as long as a userscript inserts buttons in a similar way, you did, it should work out fine

@Sinyaven I made sure to support the audio button userscript as well, in the future if you change the userscript and want to support extra study mover, I’ve added the class “es-mover” to the .extra-study node

[Kumirei]

Very cool!

[Gorbit99]

Somewhat unexpectedly (a pleasant surprise you might say) the script (and by extension, CIDWWA) works with phone mode: