Context Navigation

source: Dev/trunk/src/client/dojox/mobile/app/ImageView.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 19.0 KB

Rev	Line
[483]	1	dojo.provide("dojox.mobile.app.ImageView");
	2	dojo.experimental("dojox.mobile.app.ImageView");
	3	dojo.require("dojox.mobile.app._Widget");
	4
	5	dojo.require("dojo.fx.easing");
	6
	7	dojo.declare("dojox.mobile.app.ImageView", dojox.mobile.app._Widget, {
	8
	9	// zoom: Number
	10	// The current level of zoom. This should not be set manually.
	11	zoom: 1,
	12
	13	// zoomCenterX: Number
	14	// The X coordinate in the image where the zoom is focused
	15	zoomCenterX: 0,
	16
	17	// zoomCenterY: Number
	18	// The Y coordinate in the image where the zoom is focused
	19	zoomCenterY: 0,
	20
	21	// maxZoom: Number
	22	// The highest degree to which an image can be zoomed. For example,
	23	// a maxZoom of 5 means that the image will be 5 times larger than normal
	24	maxZoom: 5,
	25
	26	// autoZoomLevel: Number
	27	// The degree to which the image is zoomed when auto zoom is invoked.
	28	// The higher the number, the more the image is zoomed in.
	29	autoZoomLevel: 3,
	30
	31	// disableAutoZoom: Boolean
	32	// Disables auto zoom
	33	disableAutoZoom: false,
	34
	35	// disableSwipe: Boolean
	36	// Disables the users ability to swipe from one image to the next.
	37	disableSwipe: false,
	38
	39	// autoZoomEvent: String
	40	// Overrides the default event listened to which invokes auto zoom
	41	autoZoomEvent: null,
	42
	43	// _leftImg: Node
	44	// The full sized image to the left
	45	_leftImg: null,
	46
	47	// _centerImg: Node
	48	// The full sized image in the center
	49	_centerImg: null,
	50
	51	// _rightImg: Node
	52	// The full sized image to the right
	53	_rightImg: null,
	54
	55	// _leftImg: Node
	56	// The small sized image to the left
	57	_leftSmallImg: null,
	58
	59	// _centerImg: Node
	60	// The small sized image in the center
	61	_centerSmallImg: null,
	62
	63	// _rightImg: Node
	64	// The small sized image to the right
	65	_rightSmallImg: null,
	66
	67	constructor: function(){
	68
	69	this.panX = 0;
	70	this.panY = 0;
	71
	72	this.handleLoad = dojo.hitch(this, this.handleLoad);
	73	this._updateAnimatedZoom = dojo.hitch(this, this._updateAnimatedZoom);
	74	this._updateAnimatedPan = dojo.hitch(this, this._updateAnimatedPan);
	75	this._onAnimPanEnd = dojo.hitch(this, this._onAnimPanEnd);
	76	},
	77
	78	buildRendering: function(){
	79	this.inherited(arguments);
	80
	81	this.canvas = dojo.create("canvas", {}, this.domNode);
	82
	83	dojo.addClass(this.domNode, "mblImageView");
	84	},
	85
	86	postCreate: function(){
	87	this.inherited(arguments);
	88
	89	this.size = dojo.marginBox(this.domNode);
	90
	91	dojo.style(this.canvas, {
	92	width: this.size.w + "px",
	93	height: this.size.h + "px"
	94	});
	95	this.canvas.height = this.size.h;
	96	this.canvas.width = this.size.w;
	97
	98	var _this = this;
	99
	100	// Listen to the mousedown/touchstart event. Record the position
	101	// so we can use it to pan the image.
	102	this.connect(this.domNode, "onmousedown", function(event){
	103	if(_this.isAnimating()){
	104	return;
	105	}
	106	if(_this.panX){
	107	_this.handleDragEnd();
	108	}
	109
	110	_this.downX = event.targetTouches ? event.targetTouches[0].clientX : event.clientX;
	111	_this.downY = event.targetTouches ? event.targetTouches[0].clientY : event.clientY;
	112	});
	113
	114	// record the movement of the mouse.
	115	this.connect(this.domNode, "onmousemove", function(event){
	116	if(_this.isAnimating()){
	117	return;
	118	}
	119	if((!_this.downX && _this.downX !== 0) \|\| (!_this.downY && _this.downY !== 0)){
	120	// If the touch didn't begin on this widget, ignore the movement
	121	return;
	122	}
	123
	124	if((!_this.disableSwipe && _this.zoom == 1)
	125	\|\| (!_this.disableAutoZoom && _this.zoom != 1)){
	126	var x = event.targetTouches ?
	127	event.targetTouches[0].clientX : event.pageX;
	128	var y = event.targetTouches ?
	129	event.targetTouches[0].clientY : event.pageY;
	130
	131	_this.panX = x - _this.downX;
	132	_this.panY = y - _this.downY;
	133
	134	if(_this.zoom == 1){
	135	// If not zoomed in, then try to move to the next or prev image
	136	// but only if the mouse has moved more than 10 pixels
	137	// in the X direction
	138	if(Math.abs(_this.panX) > 10){
	139	_this.render();
	140	}
	141	}else{
	142	// If zoomed in, pan the image if the mouse has moved more
	143	// than 10 pixels in either direction.
	144	if(Math.abs(_this.panX) > 10 \|\| Math.abs(_this.panY) > 10){
	145	_this.render();
	146	}
	147	}
	148	}
	149	});
	150
	151	this.connect(this.domNode, "onmouseout", function(event){
	152	if(!_this.isAnimating() && _this.panX){
	153	_this.handleDragEnd();
	154	}
	155	});
	156
	157	this.connect(this.domNode, "onmouseover", function(event){
	158	_this.downX = _this.downY = null;
	159	});
	160
	161	// Set up AutoZoom, which zooms in a fixed amount when the user taps
	162	// a part of the canvas
	163	this.connect(this.domNode, "onclick", function(event){
	164	if(_this.isAnimating()){
	165	return;
	166	}
	167	if(_this.downX == null \|\| _this.downY == null){
	168	return;
	169	}
	170
	171	var x = (event.targetTouches ?
	172	event.targetTouches[0].clientX : event.pageX);
	173	var y = (event.targetTouches ?
	174	event.targetTouches[0].clientY : event.pageY);
	175
	176	// If the mouse/finger has moved more than 14 pixels from where it
	177	// started, do not treat it as a click. It is a drag.
	178	if(Math.abs(_this.panX) > 14 \|\| Math.abs(_this.panY) > 14){
	179	_this.downX = _this.downY = null;
	180	_this.handleDragEnd();
	181	return;
	182	}
	183	_this.downX = _this.downY = null;
	184
	185	if(!_this.disableAutoZoom){
	186
	187	if(!_this._centerImg \|\| !_this._centerImg._loaded){
	188	// Do nothing until the image is loaded
	189	return;
	190	}
	191	if(_this.zoom != 1){
	192	_this.set("animatedZoom", 1);
	193	return;
	194	}
	195
	196	var pos = dojo._abs(_this.domNode);
	197
	198	// Translate the clicked point to a point on the source image
	199	var xRatio = _this.size.w / _this._centerImg.width;
	200	var yRatio = _this.size.h / _this._centerImg.height;
	201
	202	// Do an animated zoom to the point which was clicked.
	203	_this.zoomTo(
	204	((x - pos.x) / xRatio) - _this.panX,
	205	((y - pos.y) / yRatio) - _this.panY,
	206	_this.autoZoomLevel);
	207	}
	208	});
	209
	210	// Listen for Flick events
	211	dojo.connect(this.domNode, "flick", this, "handleFlick");
	212	},
	213
	214	isAnimating: function(){
	215	// summary:
	216	// Returns true if an animation is in progress, false otherwise.
	217	return this._anim && this._anim.status() == "playing";
	218	},
	219
	220	handleDragEnd: function(){
	221	// summary:
	222	// Handles the end of a dragging event. If not zoomed in, it
	223	// determines if the next or previous image should be transitioned
	224	// to.
	225	this.downX = this.downY = null;
	226	console.log("handleDragEnd");
	227
	228	if(this.zoom == 1){
	229	if(!this.panX){
	230	return;
	231	}
	232
	233	var leftLoaded = (this._leftImg && this._leftImg._loaded)
	234	\|\| (this._leftSmallImg && this._leftSmallImg._loaded);
	235	var rightLoaded = (this._rightImg && this._rightImg._loaded)
	236	\|\| (this._rightSmallImg && this._rightSmallImg._loaded);
	237
	238	// Check if the drag has moved the image more than half its length.
	239	// If so, move to either the previous or next image.
	240	var doMove =
	241	!(Math.abs(this.panX) < this._centerImg._baseWidth / 2) &&
	242	(
	243	(this.panX > 0 && leftLoaded ? 1 : 0) \|\|
	244	(this.panX < 0 && rightLoaded ? 1 : 0)
	245	);
	246
	247
	248	if(!doMove){
	249	// If not moving to another image, animate the sliding of the
	250	// image back into place.
	251	this._animPanTo(0, dojo.fx.easing.expoOut, 700);
	252	}else{
	253	// Move to another image.
	254	this.moveTo(this.panX);
	255	}
	256	}else{
	257	if(!this.panX && !this.panY){
	258	return;
	259	}
	260	// Recenter the zoomed image based on where it was panned to
	261	// previously
	262	this.zoomCenterX -= (this.panX / this.zoom);
	263	this.zoomCenterY -= (this.panY / this.zoom);
	264
	265	this.panX = this.panY = 0;
	266	}
	267
	268	},
	269
	270	handleFlick: function(event){
	271	// summary:
	272	// Handle a flick event.
	273	if(this.zoom == 1 && event.duration < 500){
	274	// Only handle quick flicks here, less than 0.5 seconds
	275
	276	// If not zoomed in, then check if we should move to the next photo
	277	// or not
	278	if(event.direction == "ltr"){
	279	this.moveTo(1);
	280	}else if(event.direction == "rtl"){
	281	this.moveTo(-1);
	282	}
	283	// If an up or down flick occurs, it means nothing so ignore it
	284	this.downX = this.downY = null;
	285	}
	286	},
	287
	288	moveTo: function(direction){
	289	direction = direction > 0 ? 1 : -1;
	290	var toImg;
	291
	292	if(direction < 1){
	293	if(this._rightImg && this._rightImg._loaded){
	294	toImg = this._rightImg;
	295	}else if(this._rightSmallImg && this._rightSmallImg._loaded){
	296	toImg = this._rightSmallImg;
	297	}
	298	}else{
	299	if(this._leftImg && this._leftImg._loaded){
	300	toImg = this._leftImg;
	301	}else if(this._leftSmallImg && this._leftSmallImg._loaded){
	302	toImg = this._leftSmallImg;
	303	}
	304	}
	305
	306	this._moveDir = direction;
	307	var _this = this;
	308
	309	if(toImg && toImg._loaded){
	310	// If the image is loaded, make a linear animation to show it
	311	this._animPanTo(this.size.w * direction, null, 500, function(){
	312	_this.panX = 0;
	313	_this.panY = 0;
	314
	315	if(direction < 0){
	316	// Moving to show the right image
	317	_this._switchImage("left", "right");
	318	}else{
	319	// Moving to show the left image
	320	_this._switchImage("right", "left");
	321	}
	322
	323	_this.render();
	324	_this.onChange(direction * -1);
	325	});
	326
	327	}else{
	328	// If the next image is not loaded, make an animation to
	329	// move the center image to half the width of the widget and back
	330	// again
	331
	332	console.log("moveTo image not loaded!", toImg);
	333
	334	this._animPanTo(0, dojo.fx.easing.expoOut, 700);
	335	}
	336	},
	337
	338	_switchImage: function(toImg, fromImg){
	339	var toSmallImgName = "_" + toImg + "SmallImg";
	340	var toImgName = "_" + toImg + "Img";
	341
	342	var fromSmallImgName = "_" + fromImg + "SmallImg";
	343	var fromImgName = "_" + fromImg + "Img";
	344
	345	this[toImgName] = this._centerImg;
	346	this[toSmallImgName] = this._centerSmallImg;
	347
	348	this[toImgName]._type = toImg;
	349
	350	if(this[toSmallImgName]){
	351	this[toSmallImgName]._type = toImg;
	352	}
	353
	354	this._centerImg = this[fromImgName];
	355	this._centerSmallImg = this[fromSmallImgName];
	356	this._centerImg._type = "center";
	357
	358	if(this._centerSmallImg){
	359	this._centerSmallImg._type = "center";
	360	}
	361	this[fromImgName] = this[fromSmallImgName] = null;
	362	},
	363
	364	_animPanTo: function(to, easing, duration, callback){
	365	this._animCallback = callback;
	366	this._anim = new dojo.Animation({
	367	curve: [this.panX, to],
	368	onAnimate: this._updateAnimatedPan,
	369	duration: duration \|\| 500,
	370	easing: easing,
	371	onEnd: this._onAnimPanEnd
	372	});
	373
	374	this._anim.play();
	375	return this._anim;
	376	},
	377
	378	onChange: function(direction){
	379	// summary:
	380	// Stub function that can be listened to in order to provide
	381	// new images when the displayed image changes
	382	},
	383
	384	_updateAnimatedPan: function(amount){
	385	this.panX = amount;
	386	this.render();
	387	},
	388
	389	_onAnimPanEnd: function(){
	390	this.panX = this.panY = 0;
	391
	392	if(this._animCallback){
	393	this._animCallback();
	394	}
	395	},
	396
	397	zoomTo: function(centerX, centerY, zoom){
	398	this.set("zoomCenterX", centerX);
	399	this.set("zoomCenterY", centerY);
	400
	401	this.set("animatedZoom", zoom);
	402	},
	403
	404	render: function(){
	405	var cxt = this.canvas.getContext('2d');
	406
	407	cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
	408
	409	// Render the center image
	410	this._renderImg(
	411	this._centerSmallImg,
	412	this._centerImg,
	413	this.zoom == 1 ? (this.panX < 0 ? 1 : this.panX > 0 ? -1 : 0) : 0);
	414
	415	if(this.zoom == 1 && this.panX != 0){
	416	if(this.panX > 0){
	417	// Render the left image, showing the right side of it
	418	this._renderImg(this._leftSmallImg, this._leftImg, 1);
	419	}else{
	420	// Render the right image, showing the left side of it
	421	this._renderImg(this._rightSmallImg, this._rightImg, -1);
	422	}
	423	}
	424	},
	425
	426	_renderImg: function(smallImg, largeImg, panDir){
	427	// summary:
	428	// Renders a single image
	429
	430
	431	// If zoomed, we just display the center img
	432	var img = (largeImg && largeImg._loaded) ? largeImg : smallImg;
	433
	434	if(!img \|\| !img._loaded){
	435	// If neither the large or small image is loaded, display nothing
	436	return;
	437	}
	438	var cxt = this.canvas.getContext('2d');
	439
	440	var baseWidth = img._baseWidth;
	441	var baseHeight = img._baseHeight;
	442
	443	// Calculate the size the image would be if there were no bounds
	444	var desiredWidth = baseWidth * this.zoom;
	445	var desiredHeight = baseHeight * this.zoom;
	446
	447	// Calculate the actual size of the viewable image
	448	var destWidth = Math.min(this.size.w, desiredWidth);
	449	var destHeight = Math.min(this.size.h, desiredHeight);
	450
	451
	452	// Calculate the size of the window on the original image to use
	453	var sourceWidth = this.dispWidth = img.width * (destWidth / desiredWidth);
	454	var sourceHeight = this.dispHeight = img.height * (destHeight / desiredHeight);
	455
	456	var zoomCenterX = this.zoomCenterX - (this.panX / this.zoom);
	457	var zoomCenterY = this.zoomCenterY - (this.panY / this.zoom);
	458
	459	// Calculate where the center of the view should be
	460	var centerX = Math.floor(Math.max(sourceWidth / 2,
	461	Math.min(img.width - sourceWidth / 2, zoomCenterX)));
	462	var centerY = Math.floor(Math.max(sourceHeight / 2,
	463	Math.min(img.height - sourceHeight / 2, zoomCenterY)));
	464
	465
	466	var sourceX = Math.max(0,
	467	Math.round((img.width - sourceWidth)/2 + (centerX - img._centerX)) );
	468	var sourceY = Math.max(0,
	469	Math.round((img.height - sourceHeight) / 2 + (centerY - img._centerY))
	470	);
	471
	472	var destX = Math.round(Math.max(0, this.canvas.width - destWidth)/2);
	473	var destY = Math.round(Math.max(0, this.canvas.height - destHeight)/2);
	474
	475	var oldDestWidth = destWidth;
	476	var oldSourceWidth = sourceWidth;
	477
	478	if(this.zoom == 1 && panDir && this.panX){
	479
	480	if(this.panX < 0){
	481	if(panDir > 0){
	482	// If the touch is moving left, and the right side of the
	483	// image should be shown, then reduce the destination width
	484	// by the absolute value of panX
	485	destWidth -= Math.abs(this.panX);
	486	destX = 0;
	487	}else if(panDir < 0){
	488	// If the touch is moving left, and the left side of the
	489	// image should be shown, then set the displayed width
	490	// to the absolute value of panX, less some pixels for
	491	// a padding between images
	492	destWidth = Math.max(1, Math.abs(this.panX) - 5);
	493	destX = this.size.w - destWidth;
	494	}
	495	}else{
	496	if(panDir > 0){
	497	// If the touch is moving right, and the right side of the
	498	// image should be shown, then set the destination width
	499	// to the absolute value of the pan, less some pixels for
	500	// padding
	501	destWidth = Math.max(1, Math.abs(this.panX) - 5);
	502	destX = 0;
	503	}else if(panDir < 0){
	504	// If the touch is moving right, and the left side of the
	505	// image should be shown, then reduce the destination width
	506	// by the widget width minus the absolute value of panX
	507	destWidth -= Math.abs(this.panX);
	508	destX = this.size.w - destWidth;
	509	}
	510	}
	511
	512	sourceWidth = Math.max(1,
	513	Math.floor(sourceWidth * (destWidth / oldDestWidth)));
	514
	515	if(panDir > 0){
	516	// If the right side of the image should be displayed, move
	517	// the sourceX to be the width of the image minus the difference
	518	// between the original sourceWidth and the new sourceWidth
	519	sourceX = (sourceX + oldSourceWidth) - (sourceWidth);
	520	}
	521	sourceX = Math.floor(sourceX);
	522	}
	523
	524	try{
	525
	526	// See https://developer.mozilla.org/en/Canvas_tutorial/Using_images
	527	cxt.drawImage(
	528	img,
	529	Math.max(0, sourceX),
	530	sourceY,
	531	Math.min(oldSourceWidth, sourceWidth),
	532	sourceHeight,
	533	destX, // Xpos
	534	destY, // Ypos
	535	Math.min(oldDestWidth, destWidth),
	536	destHeight
	537	);
	538	}catch(e){
	539	console.log("Caught Error",e,
	540
	541	"type=", img._type,
	542	"oldDestWidth = ", oldDestWidth,
	543	"destWidth", destWidth,
	544	"destX", destX
	545	, "oldSourceWidth=",oldSourceWidth,
	546	"sourceWidth=", sourceWidth,
	547	"sourceX = " + sourceX
	548	);
	549	}
	550	},
	551
	552	_setZoomAttr: function(amount){
	553	this.zoom = Math.min(this.maxZoom, Math.max(1, amount));
	554
	555	if(this.zoom == 1
	556	&& this._centerImg
	557	&& this._centerImg._loaded){
	558
	559	if(!this.isAnimating()){
	560	this.zoomCenterX = this._centerImg.width / 2;
	561	this.zoomCenterY = this._centerImg.height / 2;
	562	}
	563	this.panX = this.panY = 0;
	564	}
	565
	566	this.render();
	567	},
	568
	569	_setZoomCenterXAttr: function(value){
	570	if(value != this.zoomCenterX){
	571	if(this._centerImg && this._centerImg._loaded){
	572	value = Math.min(this._centerImg.width, value);
	573	}
	574	this.zoomCenterX = Math.max(0, Math.round(value));
	575	}
	576	},
	577
	578	_setZoomCenterYAttr: function(value){
	579	if(value != this.zoomCenterY){
	580	if(this._centerImg && this._centerImg._loaded){
	581	value = Math.min(this._centerImg.height, value);
	582	}
	583	this.zoomCenterY = Math.max(0, Math.round(value));
	584	}
	585	},
	586
	587	_setZoomCenterAttr: function(value){
	588	if(value.x != this.zoomCenterX \|\| value.y != this.zoomCenterY){
	589	this.set("zoomCenterX", value.x);
	590	this.set("zoomCenterY", value.y);
	591	this.render();
	592	}
	593	},
	594
	595	_setAnimatedZoomAttr: function(amount){
	596	if(this._anim && this._anim.status() == "playing"){
	597	return;
	598	}
	599
	600	this._anim = new dojo.Animation({
	601	curve: [this.zoom, amount],
	602	onAnimate: this._updateAnimatedZoom,
	603	onEnd: this._onAnimEnd
	604	});
	605
	606	this._anim.play();
	607	},
	608
	609	_updateAnimatedZoom: function(amount){
	610	this._setZoomAttr(amount);
	611	},
	612
	613	_setCenterUrlAttr: function(urlOrObj){
	614	this._setImage("center", urlOrObj);
	615	},
	616	_setLeftUrlAttr: function(urlOrObj){
	617	this._setImage("left", urlOrObj);
	618	},
	619	_setRightUrlAttr: function(urlOrObj){
	620	this._setImage("right", urlOrObj);
	621	},
	622
	623	_setImage: function(name, urlOrObj){
	624	var smallUrl = null;
	625
	626	var largeUrl = null;
	627
	628	if(dojo.isString(urlOrObj)){
	629	// If the argument is a string, then just load the large url
	630	largeUrl = urlOrObj;
	631	}else{
	632	largeUrl = urlOrObj.large;
	633	smallUrl = urlOrObj.small;
	634	}
	635
	636	if(this["_" + name + "Img"] && this["_" + name + "Img"]._src == largeUrl){
	637	// Identical URL, ignore it
	638	return;
	639	}
	640
	641	// Just do the large image for now
	642	var largeImg = this["_" + name + "Img"] = new Image();
	643	largeImg._type = name;
	644	largeImg._loaded = false;
	645	largeImg._src = largeUrl;
	646	largeImg._conn = dojo.connect(largeImg, "onload", this.handleLoad);
	647
	648	if(smallUrl){
	649	// If a url to a small version of the image has been provided,
	650	// load that image first.
	651	var smallImg = this["_" + name + "SmallImg"] = new Image();
	652	smallImg._type = name;
	653	smallImg._loaded = false;
	654	smallImg._conn = dojo.connect(smallImg, "onload", this.handleLoad);
	655	smallImg._isSmall = true;
	656	smallImg._src = smallUrl;
	657	smallImg.src = smallUrl;
	658	}
	659
	660	// It's important that the large url's src is set after the small image
	661	// to ensure it's loaded second.
	662	largeImg.src = largeUrl;
	663	},
	664
	665	handleLoad: function(evt){
	666	// summary:
	667	// Handles the loading of an image, both the large and small
	668	// versions. A render is triggered as a result of each image load.
	669
	670	var img = evt.target;
	671	img._loaded = true;
	672
	673	dojo.disconnect(img._conn);
	674
	675	var type = img._type;
	676
	677	switch(type){
	678	case "center":
	679	this.zoomCenterX = img.width / 2;
	680	this.zoomCenterY = img.height / 2;
	681	break;
	682	}
	683
	684	var height = img.height;
	685	var width = img.width;
	686
	687	if(width / this.size.w < height / this.size.h){
	688	// Fit the height to the height of the canvas
	689	img._baseHeight = this.canvas.height;
	690	img._baseWidth = width / (height / this.size.h);
	691	}else{
	692	// Fix the width to the width of the canvas
	693	img._baseWidth = this.canvas.width;
	694	img._baseHeight = height / (width / this.size.w);
	695	}
	696	img._centerX = width / 2;
	697	img._centerY = height / 2;
	698
	699	this.render();
	700
	701	this.onLoad(img._type, img._src, img._isSmall);
	702	},
	703
	704	onLoad: function(type, url, isSmall){
	705	// summary:
	706	// Dummy function that is called whenever an image loads.
	707	// type: String
	708	// The position of the image that has loaded, either
	709	// "center", "left" or "right"
	710	// url: String
	711	// The src of the image
	712	// isSmall: Boolean
	713	// True if it is a small version of the image that has loaded,
	714	// false otherwise.
	715	}
	716	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: