rileylark/activeprompt — pull request #13 by aschmitz (2012-12-01 08:27:55+00:00)
Title: Handle Scaled Images

I accidentally did all of this in one branch, so there are a few changes in the one pull request. If you like, I can probably back them out into separate branches for separate pull requests.

**First up:** I added a "bundle install" step to your README. You might consider noting that Ruby 1.9.2+ is required (by Paperclip), but that's your call.

**Next:** I removed images that were left in public/system/prompts/images for some reason, and cleaned up the spacing and indentation in the _studentView and _teacherView partials (they had mixed spaces and tabs).

**Finally:** I made the application transmit the fractional location of the marker with respect to the image, and then use the same on the teacher side to place the markers, so large images should "just work" even if people have different window sizes.

Things it doesn't do:

1. Handle custom or differently-sized markers. I initially pulled the marker size from the browser, but that returns 0 if the image hasn't loaded yet. Instead, I hard-code the marker size. This should probably be changed, either by setting it from a database or by having some loading process where a marker is loaded, measured, and then normal operations begin (this would have to be before Firebase is instantiated). Either change seemed too large to mix in here without prior discussion.
2. [Gracefully] handle the window being resized while it is open. Nothing terrible happens if you resize a window, but the markers remain where they are. For students, this isn't an issue: they simply have to move the marker to the right spot again. For teachers, the markers will be placed correctly as soon as they move. (Alternatively, a teacher can refresh the page to redraw all of the markers. I couldn't find a way to do this nicely with Firebase, but I didn't look into the API too much.)
3. Cache the #prompt_image size. Because I was expecting that the window could be resized, I just call .width() and .height() on the prompt image object each time it's needed. Because markers moving is likely far more common than resizing a window, these values could be cached in a call to promptImage.resize(function) to avoid a pair of DOM calls each time a marker is moved. I didn't do this because it runs into the same "initial size" issue as the markers, and the proper fix is of a slightly larger scope than I wanted to tackle at 2am.

**Note:** the jQuery documentation says that $.load() calls on images may or may not fire depending on a variety of cases, which is why I avoided them.