From e44a7e37b6c7b5961adaffc62b9042b8d442938e Mon Sep 17 00:00:00 2001
From: mensonge
Date: Thu, 13 Nov 2008 09:49:11 +0000
Subject: New feature: basic Ajax suggestion for tags and implementation of
 Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
---
 includes/js/dojox/image/MagnifierLite.js | 126 +++++++++++++++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 includes/js/dojox/image/MagnifierLite.js

(limited to 'includes/js/dojox/image/MagnifierLite.js')

diff --git a/includes/js/dojox/image/MagnifierLite.js b/includes/js/dojox/image/MagnifierLite.js
new file mode 100644
index 0000000..2e37340
--- /dev/null
+++ b/includes/js/dojox/image/MagnifierLite.js
@@ -0,0 +1,126 @@
+if(!dojo._hasResource["dojox.image.MagnifierLite"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.MagnifierLite"] = true;
+dojo.provide("dojox.image.MagnifierLite");
+dojo.experimental("dojox.image.MagnifierLite");
+
+dojo.require("dijit._Widget");
+
+dojo.declare("dojox.image.MagnifierLite",
+	[dijit._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
+
+		this.glassNode = dojo.doc.createElement('div');
+		this.surfaceNode = this.glassNode.appendChild(dojo.doc.createElement('div'));
+		dojo.addClass(this.glassNode,"glassNode");
+		dojo.body().appendChild(this.glassNode);
+		with(this.glassNode.style){
+			height = this.glassSize + "px";
+			width = this.glassSize + "px";
+		}
+		
+		this.img = dojo.doc.createElement('img');
+		this.glassNode.appendChild(this.img);
+		this.img.src = this.domNode.src;
+		// float the image around inside the .glassNode 
+		with(this.img.style){
+			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 = dojo.coords(this.domNode,true);
+		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);		
+		with(this.glassNode.style){
+			visibility = "visible";
+			display = "";
+		}			
+		
+	},
+	
+	_hideGlass: function(e){
+		// summary: hide the overlay
+		this.glassNode.style.visibility = "hidden";
+		this.glassNode.style.display = "none";
+	},
+	
+	_placeGlass: function(e){
+		// summary: position the overlay centered under the cursor
+
+		this._setImage(e);
+		var t = Math.floor(e.pageY - (this.glassSize/2));
+		var l = Math.floor(e.pageX - (this.glassSize/2));
+		dojo.style(this.glassNode,"top",t);
+		dojo.style(this.glassNode,"left",l);
+
+	},
+
+	_setImage: function(e){
+		// summary: set the image's offset in the clipping window relative to the mouse position
+
+		var xOff = (e.pageX - this.offset.l) / this.offset.w;
+		var yOff = (e.pageY - this.offset.t) / this.offset.h;
+		var x = (this._zoomSize.w * xOff * -1)+(this.glassSize*xOff);
+		var y = (this._zoomSize.h * yOff * -1)+(this.glassSize*yOff);
+		with(this.img.style){
+			top = y+"px";
+			left = x+"px";
+		}
+
+	}
+
+});
+
+}
-- 
cgit v1.2.3-54-g00ecf