To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.
Test purpose
- Crerate a Picture entity that displays a large image asset
- Add event listeners that allow the user to zoom the image in/out within the Picture. Zooming out should be constrained so that no blank space appears at the Picture's edges: when the image edge zooms past the Picture edge, it sticks to the edge. Wherever possible (as constrained by edges), the zoom effect should center on the mouse cursor.
- Add event listeners that allow the user to drag the image within the Picture; again, drag should be constrained so that no blank space appears at the Picture's edges
Touch test: TODO: find a way to allow touch users to zoom in on the image while not zooming the rest of the browser output; differentiate between single touch (pan dragging) and multiple touches (for zoom/pinch)
Annotated code