I talk a lot in this post; go to the end for the code!

I contemplated what my (official) first blog post should be about.

It could be my life, philosophies, or other things I like that didn't really fit on my about page. But I think that's a little redundant, or too much of a hassle to write down and I'd rather save it for next time.

So it ended up being my implementation to Drawbox which included a few new features, but since the moderation bit was very largely lifted from the guide to Virtual Observer's comment box there's not really much point in talking about it. If you really wanted to know what exactly I changed, you can always ping me on the Nekoweb Discord—the changes aren't really that much.

Instead I'll talk about the feature with colours I added.

My first encounter on Drawbox was on June's website, where there was a really neat selection of colours I could pick from. When drawing on it, there later came a pain point where I didn't save a custom colour I selected, and could no longer get it back at a later point.

Which wasn't his fault, I was the one who dug my own grave! I personally thought his Drawbox layout was really neat, and I even took a small bit of inspiration when it came to styling my own.

The Drawbox source code came with a basic colour picker, albeit commented out. Using that as a base, I started taking random colours for the palette—honestly I just picked one out of every shade of the rainbow + black/white/grey lmao.

I didn't know how I wanted to style it, so doing this actually occupied most of my time during implementation. As mentioned earlier I did take some inspiration from June's styling, it looks pretty different now but the 'compact' look was an end goal. I really like my end result now! It works on both web and mobile, so definitely give it a shot.

Ok, rambling aside. Let me talk about the implementation of what I'm going to temporarily dub the "drawbox colour system".

It starts with a simple array of colours, all taken from colour names because I didn't want to confuse myself during testing.

This will serve as the system's "memory", so to speak. Whenever a colour is selected, it will adjust to "push" it to the front of the list:

Black - White - Grey

Grey - Black - White

Black - Grey - White

Kind of like a ticket queue... not really, but you get it.

Then created the colour selection in the DOM. I used jQuery because I'm pathetic, but the code at the end will have been revised for vanilla Javascript. My jQuery version will still be linked, though.

The custom colour picker is directly rendered in HTML, since it doesn't really do anything special. The only change was to update the onchange attribute.

I'm starting to contemplate why I'm writing all of this down. Explaining code isn't my forte...

Onto the colour change function: This was where the true struggle began. Clicking on the colours in the queue selects the element's background colour, which if isn't a named colour, comes in RGB format. I needed to be able to handle that.

My solution was pretty hacky, but it worked: I just save the original colour inside the id attribute. That way whether it was saving or reading, the format won't change. Which came with another hack: Since the custom colour picker returns the hexcode, I replaced the # symbol with a placeholder string. Yeah. Just put the symbol back in when re-rendering the DOM. lmao.

The flow is pretty straightforward once everything has been put together: Update colour -> Update queue -> Re-render DOM

There's still some minor issues, but I don't think they're enough of a concern to be addressed. The first is using colour names: 'black' and '#000000' are two different colours to the browser, so if for whatever reason you select #000000 in the custom colour picker, you'll have two black buttons.

The other is that well, you'll lose the colours at the end of the queue once it's been overwritten. Hopefully you don't plan on using big palettes.

... Man, I can't believe I'm a professional programmer sometimes.

So as promised, here's the final code.

Javascript: view the code on Pastebin

If you'd like the jQuery version instead, you can take a direct look at my source code. It's at the very end of the file.

HTML:

Put this wherever you want your colours to be and style it.

Base CSS:

You can choose whether you want to credit me, but it'd be neat to link back to this blog post for other people to find.

You can reach out to me either through email or the Nekoweb Discord if there's any concern.