Unexpected behaviour when pulling sliders to 100%

[blinry]

When pulling a slider to 100% using the mouse, and then releasing the mouse button outside of the iframe, the slider does not receive the mouseup event, so when moving the mouse back into the iframe, the slider is still active. The user has to aim for a small are where the slider is at 100%, but the mouse is still inside the iframe and click there.

I don't see any obvious ways to fix this. I guess you could extend the iframe to the full width of the browser window?

[ncase]

Good catch! This has been fixed, by doing sorta what you said -- I extended the iframe by 20px, then shifted its position 10px to the right to account for center-aligning. Thanks!

[laughinghan]

Hey did you know the One Weird Trick to listen to mouse events outside of an iframe, or, in fact, even the browser window? (Web developers hate him!) If you listen for mousemove and mouseup event handlers on the document or window, and you mousedown on the page and then drag out, your listeners will still be called even while the mouse is outside the window, until you let go with the mouse (so it's not like webpages can find out where your mouse is at all times, you have to have initially mousedown-ed on the page).

You can see on http://www.quirksmode.org/js/dragdrop.html , for example, that you can drag the examples even while your mouse is outside the browser window, until you mouseup. (Interestingly, Quirksmode makes no specific mention of this feature, the reasoning PPK describes for listening on the document applies equally well to listening on document.body, which doesn't have this feature.)

Complication: you're in an iframe and you do preventDefault, which breaks this feature (well, in "IE11, Chrome 34, and Safari 7, but not Firefox 28", just to make things more fun for us), but there are often alternatives. In this case, for instance, I assume the only reason to preventDefault is to prevent selecting while dragging, but you can instead use the CSS user-select property and, for IE, the unselectable attribute: http://stackoverflow.com/a/4358620/362030

I was thinking about submitting a Pull Request but am a little confused by the code organization: js/Mouse.js appears to be identical to the mouse-related code in play/mini/mini_cooperate.html, while play/intro/MouseBlah.js and play/outro/MouseBlah.js are exactly identical and appear to be identical to the mouse-related code in play/lib/Mouse.js?

[ncase]

Oh wow, thanks! That One Weird Trick actually would really help.

And haha... yeaaahhhhhh when someone starts making filenames like "MouseBlah.js", and with commit messages like "HAHAHAHAHAHA", you know they're gonna have pret-ty messy code.