dojo_app/js/library/dojox/image/MagnifierLite.js

define(["dojo/_base/kernel", "dojo/_base/declare", "dijit/_Widget", "dojo/dom-construct", "dojo/dom-style", "dojo/dom-geometry", "dojo/_base/window", "dojo/_base/lang"], function(kernel, declare, _Widget, construct, style, geometry, window, lang){

	kernel.experimental("dojox.image.MagnifierLite");
	
	return declare("dojox.image.MagnifierLite", _Widget, {
		// summary:
		//		Adds magnification on a portion of an image element
		// description:
		//		An unobtrusive way to add an unstyled overlay
		//		above the srcNode image element. The overlay/glass is a
		//		scaled version of the src image (so larger images sized down
		//		are clearer).
		//
		//		The logic behind requiring the src image to be large is
		//		"it's going to be downloaded, anyway" so this method avoids
		//		having to make thumbnails and 2 http requests among other things.

		// glassSize: Int
		//		the width and height of the bounding box
		glassSize: 125,

		// scale: Decimal
		//		the multiplier of the Mangification.
		scale: 6,

		postCreate: function(){
			this.inherited(arguments);

			// images are hard to make into workable templates, so just add outer overlay
			// and skip using dijit._Templated
			this._adjustScale();
			this._createGlass();

			this.connect(this.domNode,"onmouseenter","_showGlass");
			this.connect(this.glassNode,"onmousemove","_placeGlass");
			this.connect(this.img,"onmouseout","_hideGlass");

			// when position of domNode changes, _adjustScale needs to run.
			// window.resize isn't it always, FIXME:
			this.connect(window,"onresize","_adjustScale");
		},

		_createGlass: function(){
			// summary:
			//		make img and glassNode elements as children of the body

			var node = this.glassNode = construct.create('div', {
				style: {
					height: this.glassSize + "px",
					width: this.glassSize + "px"
				},
				className: "glassNode"
			}, window.body());

			this.surfaceNode = node.appendChild(construct.create('div'));

			this.img = construct.place(lang.clone(this.domNode), node);
			// float the image around inside the .glassNode
			style.set(this.img, {
				position: "relative",
				top: 0, left: 0,
				width: this._zoomSize.w + "px",
				height: this._zoomSize.h + "px"
			});
		},

		_adjustScale: function(){
			// summary:
			//		update the calculations should this.scale change

			this.offset = geometry.position(this.domNode, true);
			console.dir(this.offset);
			this._imageSize = { w: this.offset.w, h:this.offset.h };
			this._zoomSize = {
				w: this._imageSize.w * this.scale,
				h: this._imageSize.h * this.scale
			};
		},

		_showGlass: function(e){
			// summary:
			//		show the overlay
			this._placeGlass(e);
			style.set(this.glassNode, {
				visibility: "visible",
				display:""
			});
		},

		_hideGlass: function(e){
			// summary:
			//		hide the overlay
			style.set(this.glassNode, {
				visibility: "hidden",
				display:"none"
			});
		},

		_placeGlass: function(e){
			// summary:
			//		position the overlay centered under the cursor

			this._setImage(e);
			var sub = Math.floor(this.glassSize / 2);
			style.set(this.glassNode,{
				top: Math.floor(e.pageY - sub) + "px",
				left:Math.floor(e.pageX - sub) + "px"
			});
		},

		_setImage: function(e){
			// summary:
			//		set the image's offset in the clipping window relative to the mouse position

			var xOff = (e.pageX - this.offset.x) / this.offset.w,
				yOff = (e.pageY - this.offset.y) / this.offset.h,
				x = (this._zoomSize.w * xOff * -1) + (this.glassSize * xOff),
				y = (this._zoomSize.h * yOff * -1) + (this.glassSize * yOff);

			style.set(this.img, {
				top: y + "px",
				left: x + "px"
			});
		},

		destroy: function(finalize){
			construct.destroy(this.glassNode);
			this.inherited(arguments);
		}

	});
});