Greasemonkey/User Script for translations [Updated: Jun. 25, 2012]

For some reason, the translation bookmarklet doesn't work in Chrome, so I decided to bite the bullet and write a user script to make note creation somewhat easier for large images (while we wait for Danbooru 2):

http://userscripts.org/scripts/show/72662

It turns the "Add translation" link into a "Toggle translation mode" link; while translation mode is on, you can click and drag on the image to create new notes. It also includes a "Preview" button which allows you to view notes before they're saved, useful for avoiding formatting mistakes in HTML-heavy notes. It's not perfect, but I find it a great deal more convenient than the bookmarklet and far less likely to give me repetitive stress injuries from pressing Ctrl+Z dozens of times.

It seems to work as intended (with a few bug sightings) in Firefox 3.5, Opera 10, and Chrome 4 (as of April 6). If you like, try it out and let me know if there are any bugs or things that need improved.

Edit (12/12/10):

Added a small form which appears in the comments/edit section and allows the user to automatically retag the post as translated (or partially_translated, with the option of adding check_translation as well) with a single button, rather than typing it out every time. Naturally, tagging translated automatically removes the partially_translated and translation_request tags, and tagging partially_translated automatically adds translation_request and removes translated.

Edit (01/20/11):

Added an "Eyedropper" button which returns the hex-encoded RGB color of any pixel in the image, for use in the color attribute of a <font> tag.

Edit (06/25/12):

Removed (now non-functional) eyedropper function. Added "Special Characters" menu for easy insertion of special characters.

You may be able to use something from what I do in http://trac.donmai.us/browser/danbooruup/branches/zatchii/userjs/danbooruNotes.user.js

The relevant code is in makeNote(), where I abuse some very internal details of the API. It is rather prone to breakage if something changes, but it works while it works.

Worked like a charm. Thanks a bunch.

glasnost said:
(Before you say "click and drag instead of two clicks", I have code for that that works perfectly in Opera, but when I run it in Firefox, it tries to drag the image itself, overriding the script.)

I believe calling event.preventDefault() inside your mousedown handler will fix that.

...the only way I see to do this is by using the functions in /javascripts/application-min.js (that is, native Danbooru code) to move and resize notes without using the GUI, but is such a thing possible?

There's nothing technical stopping you from using any of Note's methods, or anything else from application-min.js. They're all public methods.

As an aside, I would also encourage you to take advantage of Prototype in your script. It's quite useful, and you get it for free since Danbooru already includes it. You'll need to know Prototype anyway if you plan on understanding Danbooru's code.

evazion said:
I believe calling event.preventDefault() inside your mousedown handler will fix that.

Sure enough. Thanks for the tip.

evazion said:
There's nothing technical stopping you from using any of Note's methods, or anything else from application-min.js. They're all public methods.

Yeah, the problem was that I was reading the source without color coding or indentation and simply overlooked Note.find(), which left me rather confused as to how to access a note once I'd created it.

evazion said:
As an aside, I would also encourage you to take advantage of Prototype in your script. It's quite useful, and you get it for free since Danbooru already includes it. You'll need to know Prototype anyway if you plan on understanding Danbooru's code.

I was actually avoiding this intentionally at first, given that albert mentioned that he might be changing to jQuery for Danbooru 2, but now that I think about it, Danbooru 2 will probably obsolete this script with its own functionality anyway, so I've added it back. (And deleted my homebrew mouse location detection code. I think I may sue the W3C for those hours of my life back.)

So now that click and drag is working and it's starting to look somewhat professional, would anyone be opposed to me adding this script to howto:translate along with the bookmarklet?

glasnost said:
So now that click and drag is working and it's starting to look somewhat professional, would anyone be opposed to me adding this script to howto:translate along with the bookmarklet?

Nah.

Suggestion: allow the user to click and drag new notes that overlap already existing notes.

It doesn't work correctly on resized images.

0xCCBA696 said:
Suggestion: allow the user to click and drag new notes that overlap already existing notes.

zatchii said:
It doesn't work correctly on resized images.

Fixed and fixed.

It'd be useful if the note as you drag to create it was transparent. It's not currently, at least not in Chrome. As soon as you release the mouse button, it turns transparent though.

葉月 said:
It'd be useful if the note as you drag to create it was transparent. It's not currently, at least not in Chrome. As soon as you release the mouse button, it turns transparent though.

Really? The selection region is transparent for me when I use the script in Chrome 4.1.249.1045 (which is actually my main browser at this point), and the code for that feature is just setting a CSS style which any browser should respect. Are you running any other user scripts or extensions which might modify styles? That's the only thing that springs to mind immediately as a possible cause.

glasnost said:
Really? The selection region is transparent for me when I use the script in Chrome 4.1.249.1045 (which is actually my main browser at this point), and the code for that feature is just setting a CSS style which any browser should respect. Are you running any other user scripts or extensions which might modify styles? That's the only thing that springs to mind immediately as a possible cause.

AFAIK, only better tooltips and child post thumbnails.

Checked it with those installed and I still get transparent selection areas.

If you would, try this: start a selection and drag all the way off the page until the mouse is above the address bar (which shouldn't trigger the 'selection end' event), then paste this in the address bar and hit Enter:

javascript:$$('div#note-container .note-box').each( function(div) { alert(div.getStyle('opacity')) } );

If that gives you a dialog box that says "0.2", it's a browser-side rendering problem of some sort; if you get "1", then the problem is somewhere in the script. I'm not really sure how to proceed in either case, but this at least narrows it down to "my fault" or "not my fault".

In unrelated news, I updated the script so that toggling translation mode works properly in Chrome now. It seems Chrome reloads all user scripts whenever you click a link, even if that link is href="#", so you have to add "return false;" to the onclick to avoid that.

glasnost said:
If you would, try this: start a selection and drag all the way off the page until the mouse is above the address bar (which shouldn't trigger the 'selection end' event), then paste this in the address bar and hit Enter:

1

Updated, because I'm tired of tagging posts check_translated and partially_translation accidentally. See OP for details.

Glasnost, you are amazing.

Hm, I updated my version of the script, and now it isn't working anymore. Not really sure if it's my own fault. Using Firefox 3.6.

EDIT: Clicking "Toggle Translation Mode" clears the area under the image.

Got the same problem as Mysterio.

Aww, and here I thought I was going to be able to get away with not testing this one in anything but Chrome.

At any rate, it turns out Firefox says you have to actually pass the null for the third argument of style.setProperty and not just call it with two arguments. Standards compliance; bah, humbug. (No, not really.)

Should be fixed now.

Good to go now, glasnost. Thumbs up.