[For UserScript Authors] CIDWWA - Code I Don't Want to Write Again

I’ve put together a small script where I intend to put all of the components that are difficult enough to write on their own, and I find myself redoing them over and over again.

I’m publishing it in the hopes that maybe it will help speed up the work of somebody else as well.

Link to the script and instructions on how to use it can be found here.

A few screenshots demonstrating the tool itself

Modals:

Buttons:
image
image

The components are meant to imitate the WK style in general so they shouldn’t feel out of place. Besides this they try to be minimalistic and simple to pick up and use.

In case you don’t intend to contribute, but have an idea about a feature you would use if it had it, feel free to leave a reply and I’ll see what I can do.

12 Likes

I believe it is also possible to use Tags / Releases + jsDelivr to link to Github, for older versions.

Also, forking and editing without pushing to Greasyfork works as well, with jsDelivr.

Linking directly to raw Github user content might result in wrong mimetype, I think.

1 Like

I changed the link to use the greasyfork library system because it told me that I’m not allowed to use github links (I didn’t investigate other options) and frankly, this was exactly what it was made for, innit

3 Likes

Now buttons support the standard dropdown menus that all the other buttons show, check out the github link for details.

2 Likes

I now have first class Breezy Dark support for the modal, though it blends into the background a bit:
image

2 Likes

FYI Valeth is not the current maintainer of Breeze Dark. The current maintainer is very proactive though, so you could ask in its thread

2 Likes

Now the modals are more feature rich. Added in support for movable modals, tinted backgrounds and click out actions, such as closing the modal, when the user click out of it. All of these are configurable.

Example of dragging:
Peek 2022-03-23 04-02

4 Likes

Now when clicking outside a dropdown, it will automatically close.

2 Likes

This is causing select elements not to work properly in WKOF settings. I see that you are using e.preventDefault() in event listeners on the window, so I suspect that’s the cause. Perhaps you want to scope those listeners? Also while looking for the cause I found that you are defining the modal inside the conditional for preventing dragging, which means that the modal is undefined for the event listener after the if statement.

Can you explain the issue with wkof? I can’t reproduce any sort of error.

If you open the Reorder Omega or Self Study Quiz settings (the two scripts I tested with) with Extra Study Mover enabled, clicking on a preset in the preset list of either script does not update the dialog content

Nvm, misunderstood, which presets you were talking about. I’ll try to solve this

1 Like

image
That z-index tho, I need to start scoping mine higher

@Kumirei welp, not sure why I had those preventDefaults in there. The only place that needs it is actually the mousemove one, because it causes weird glitches.

While I was at it, I fixed some other issues, like that z index above causing issues and the fact that my dragging didn’t work when you scrolled. Fun

1 Like

I added the feature to add subtext to buttons, and I just so happen to have made it the exact same as Kumirei’s Level duration 2 script. Weird how these things happen.

image

2 Likes

Great minds

1 Like

(especially if one great mind would get incredibly annoyed if those wouldn’t match up XD)

1 Like

New feature update, had enough of writing either style elements or doing inline styles, so wrote a simple style handler.

Basically you can now write styles as style objects, with simple nesting (this feature still needs some time in the oven, but it works) included like so:

const style = window.createStyle();
style.setStyle({
  ".my-element": {
    display: "flex",
    flexDirection: "column",

    "&.locked": {
      color: "gray",
    }
  },
});

makes it way easier to abuse the ide autoindent features, than writing the whole thing in a template

Also added size and overflow properties to modals, so that’s way less hacky now

2 Likes