1. Introduction
The Uize.Widget.MagView class implements a magnifier view widget that supports a configurable number of zoom levels, with animated zoom in / zoom out.
DEVELOPERS: Chris van Rensburg
The Uize.Widget.MagView module defines the Uize.Widget.MagView widget class, a subclass of Uize.Widget.
2. Child Widgets
2.1. magImagePort
An instance of the Uize.Widget.ImagePort class, used for displaying the zoomed in image off to the side of the main image.
3. Implied Nodes
See the list of child widgets for other implied nodes that are not directly controlled by this widget.
3.1. The Root Node
The root node captures mouse events and tracks the mouse movements in order to determine the region within the main image that the user would like to magnify. The root node should contain the image node.
NOTES
| this node is required |
3.2. highResLoading
An optional node (of any type) that will be displayed when the high resolution mag image is loading and then hidden once it has completed loading.
NOTES
| this node is optional |
3.3. highlight
A div node that is sized and positioned as the user mouses over the main image and that serves to highlight the region of the image that will appear magnified in the mag image port.
NOTES
| this node is required |
3.4. image
A node that is used to display the main image. This node should be contained inside and should exactly occupy the space in the root node. The node can be either a IMG node, or a DIV node with CSS background set to the image URL.
NOTES
| this node is required |
3.5. magImageHighRes
An image node whose src will be set to the value of the magImageHighResUrl set-get property when the mag view mode is activated.
NOTES
| this node is required |
3.6. magImageLowRes
An image node whose src will be set to the src of the image being magnified, but that will be scaled up to provide a placeholder for the high resolution mag image while it is still loading in.
NOTES
| this node is required |
3.7. magImagePortShell
A node (of any type, but likely a DIV) that serves as a container for the magnified view's image port, and that is displayed when the user mouses over the main image and is hidden when the user mouses out of the main image.
NOTES
| this node is required |
4. Set-get Properties
4.1. cursorAlignX
A floating point number in the range of 0 to 1, specifying the horizontal position of the cursor in relation to the highlight box.
A value of 0 would position the cursor at the left edge of the highlight, a value of 1 would position the cursor at the right, and a value of .5 would position the cursor in the center horizontally. Other values would position the cursor along the continuum from the left edge to the right edge.
NOTES
the initial value is .5 (centered horizontally) |
4.2. cursorAlignY
A floating point number in the range of 0 to 1, specifying the vertical position of the cursor in relation to the highlight box.
A value of 0 would position the cursor at the top edge of the highlight, a value of 1 would position the cursor at the bottom, and a value of .5 would position the cursor in the center vertically. Other values would position the cursor along the continuum from the top edge to the bottom edge.
NOTES
the initial value is .75 (three quarters of the way down, vertically) |
4.3. magImageHighResUrl
A string, specifying the URL of the high resolution image, or a function that should return the URL of the high resolution image.
NOTES
the initial value is undefined |
4.4. magImageLowResUrl
A string, specifying the URL for the low resolution image.
NOTES
the initial value is undefined |
4.5. magPower
A number, specifying the current magnification power.
NOTES
the initial value is 1 |
4.6. magPowers
An array, specifying the magnification powers that should be available.
NOTES
the initial value is undefined |
4.7. resetMagPowerOnOut
A boolean, specifying whether or not the current magnification power should be reset to the lowest available magnification power when the user mouses out of the image.
NOTES
the initial value is true |