JAVASCRIPT EXAMPLES Coupled Zooming Collection Items
In this example, the Uize.Widget.CollectionItem.Zooming widget class is being used to add a JavaScript animation zoom in effect to a pair of thumbnails. The two instances are coupled together using an instance of the Uize.Util.Coupler class, so that the values of the alignX, alignY, and inUse state properties are synchronized between the two. This means that if you rest the mouse over one of the thumbnails and the zoom in behavior is activated for that instance, it will also be activated for the other instance. Similarly, when you move the mouse around on one of the instances, the other instance follows the lead of the one you're mousing over. This coupling facility is made possible as a result of the state oriented design of the UIZE JavaScript Framework. Using the Uize.Util.Coupler class is easy: all you have to do is create an instance of it, specifying which properties of which instances you would like to be coupled together. This example demonstrates coupling two instances, but the Uize.Util.Coupler class supports coupling an arbitrary number of instances.
Now, the widget on the left uses a low resolution image and stretches it larger for the zoomed in effect. The widget on the right uses a high resolution image. By coupling the two widgets together so that the one drives the other, you can inspect the zoomed in image on both sides at once, and you can compare them region by region to see the affect of the browser's image stretching process. Load this example in different browsers to see how the image stretching of different browsers stack up. Finally, a checkbox is provided to easily activate or de-activate the coupling of the two instances. Try interacting with the widgets in both modes: coupled, and decoupled.