[Userscript/Prototoype] EmbeddedNotesImprovements

EmbeddedNotesImprovements removes distracting styles, adjusts to background styles, supports note resizing, and adds note nudging. The goal for this prototype is to have something to port over to mainline Danbooru.

Installation

• Chrome/Firefox: Install Tampermonkey

Project page

• https://gist.github.com/BrokenEagle

Main script

• https://gist.github.com/BrokenEagle/3b76e849ad50614ecbc917d2651bfe33/raw/EmbeddedNotesImprovements.user.js

Usage notes

This script only activates on post pages with embedded notes.

Style differences

• 1. Box borders have been hidden
• 2. Resize icons have been hidden

Hovering over the box will restore both the borders and the resize icon.

• 4. Boxes are completely opaque normally
• 5. Boxes have reduced opacity on note editing (0.5 -> 0.25)

Hovering over the box while editing will restore the box to full opacity.

Background styles

Several styles can be mirrored on the box container when the note contains a container with the "note-box-attributes" class

Example:

Some text.
<div class="note-box-attributes" style="background-color:white"></div>

Anything outside that parent container including text will count as another node and thus the background styles will not be copied.

• 1. background-color

The background color gets copied from the note attributes element onto the outer container. This makes it so that the margins don't have to be messed with to have the background color extend to the borders.

• 2. border-radius

The border radius gets copied from the parent note attributes element onto the outer container and note box. This allows for rounded containers to be created.

• 3. transform

The transform gets copied from the note attributes element onto the note box. This allows for the note box itself to be transformed.

NOTE: Since this functionality is not currently on Danbooru, others will not see the note box as you see it. So using only the preview function to experiment with is recommended at this time.

Image resizing

When clicking the "view original" link at the top of an image, the text and other attributes for all elements of a note will now scale along with the note boxes and the image. The same is true for when the "Resize to window" in the Options section gets clicked.

• font-size
• line-height
• letter-spacing
• padding
• margin

Note nudging

Now when hovering the mouse pointer over a note box, the note box can be moved by using the directional arrow keys. Clicking a key once will move it one pixel, and holding the key will slide it over. Once the note is in the desired place, open up the note dialogue as usual and save the note.

Note resizing

Now when hovering the mouse pointer over the top-left or bottom-right corners, the note box can be resized using the directional arrow keys. Clicking a key once will move it one pixel, and holding the key will slide it over. Once the note is in the desired place, open up the note dialogue as usual and save the note.

Final

Any suggestions or feedback is appreciated, as they will go into making the mainline function better as well. After the script is stable for about a week, the final product will eventually be ported over to Danbooru.

Latest edits

• (2020-01-23)
• Created OP.
• Version 1 Initial commit
• (2020-01-24)
• Updated note resizing section (Ver. 1.2)
• (2020-01-27)
• Added incremental note resizing (Ver. 1.4)
• (2020-01-30)
• Reworked how font sizes get rescaled to be simpler (Ver. 1.5)
• (2020-01-31)
• Have the popup box be the same dimensions as the note box (Ver. 1.6)
• This helps for cases where transformations and such make the text unreadable
• This also facilitate users that use CSS to make embedded notes non-embedded

Unless I am misinformed, a number of danbooru userscripts have been developed with the intention of being prototypes for permanent, official features on the site, but that many of them have never been implemented. I think that there's a large amount of potential for improving embedded notes on the site and perhaps all of these changes would be good. I'd like for changes in the official functionality to be made, but even failing any large-scale changes I'd really like for note box resizing icons to either be hidden or only appear on mouseover (as BrokenEagle has suggested).

I think that simple change could really improve the versatility and readability of small-sized notes where the text fills at least almost the entire note box. That's the one feature I really don't want to get stuck in development hell.

Zurreak said:

Unless I am misinformed, a number of danbooru userscripts have been developed with the intention of being prototypes for permanent, official features on the site, but that many of them have never been implemented. I think that there's a large amount of potential for improving embedded notes on the site and perhaps all of these changes would be good. I'd like for changes in the official functionality to be made, but even failing any large-scale changes I'd really like for note box resizing icons to either be hidden or only appear on mouseover (as BrokenEagle has suggested).

I think that simple change could really improve the versatility and readability of small-sized notes where the text fills at least almost the entire note box. That's the one feature I really don't want to get stuck in development hell.

Well, considering that I'm actually doing development for Danbooru myself now, I'd say that the likelihood for stuff getting implemented is a lot higher. There's an open issue for it right now with issue #4235. Also, the current completion level on this script is above 90%, and I'm just wanting for things to be stable for a while before porting it over.

As for other userscripts, for myself at least, the only one that I labeled as a prototype was SiteTagSearches (topic #14958) which is still open as issue #3503. I plan on doing development work for that as well, but wanted to get through this one first before going back to that one. Another one that has the potential for working as a prototype is DtextStyle (topic #14229). The rest of my userscripts weren't intended to ever be implemented by the site, as they add additional overhead which isn't really scalable to the full userbase.

I pushed a new minor version (1.6) which should be the final bit of noticeable changes. I've also started porting the code over to Danbooru. Hopefully I'll have it done over this weekend.

Created issue #4281 which will add most of the improvements provided by this script. One thing left out was resizing the note popup box, mostly because it was a lot of extra complicated code, especially since it would only help a very small subset of the population that disables embedded notes with their CSS. Once the changes for the script get merged though, I'll change the script so that it still provides that functionality to the users that want to have it.