root / trunk / web / dojo / dojox / mobile / app / ImageView.js
History | View | Annotate | Download (9.8 KB)
| 1 | 9 | andrej.cim | /*
|
|---|---|---|---|
| 2 | Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
|
||
| 3 | Available via Academic Free License >= 2.1 OR the modified BSD license.
|
||
| 4 | see: http://dojotoolkit.org/license for details
|
||
| 5 | */
|
||
| 6 | |||
| 7 | |||
| 8 | if(!dojo._hasResource["dojox.mobile.app.ImageView"]){ |
||
| 9 | dojo._hasResource["dojox.mobile.app.ImageView"]=true; |
||
| 10 | dojo.provide("dojox.mobile.app.ImageView");
|
||
| 11 | dojo.experimental("dojox.mobile.app.ImageView");
|
||
| 12 | dojo.require("dojox.mobile.app._Widget");
|
||
| 13 | dojo.require("dojo.fx.easing");
|
||
| 14 | dojo.declare("dojox.mobile.app.ImageView",dojox.mobile.app._Widget,{zoom:1,zoomCenterX:0,zoomCenterY:0,maxZoom:5,autoZoomLevel:3,disableAutoZoom:false,disableSwipe:false,autoZoomEvent:null,_leftImg:null,_centerImg:null,_rightImg:null,_leftSmallImg:null,_centerSmallImg:null,_rightSmallImg:null,constructor:function(){ |
||
| 15 | this.panX=0; |
||
| 16 | this.panY=0; |
||
| 17 | this.handleLoad=dojo.hitch(this,this.handleLoad); |
||
| 18 | this._updateAnimatedZoom=dojo.hitch(this,this._updateAnimatedZoom); |
||
| 19 | this._updateAnimatedPan=dojo.hitch(this,this._updateAnimatedPan); |
||
| 20 | this._onAnimPanEnd=dojo.hitch(this,this._onAnimPanEnd); |
||
| 21 | },buildRendering:function(){ |
||
| 22 | this.inherited(arguments); |
||
| 23 | this.canvas=dojo.create("canvas",{},this.domNode); |
||
| 24 | dojo.addClass(this.domNode,"mblImageView"); |
||
| 25 | },postCreate:function(){ |
||
| 26 | this.inherited(arguments); |
||
| 27 | this.size=dojo.marginBox(this.domNode); |
||
| 28 | dojo.style(this.canvas,{width:this.size.w+"px",height:this.size.h+"px"}); |
||
| 29 | this.canvas.height=this.size.h; |
||
| 30 | this.canvas.width=this.size.w; |
||
| 31 | var _1=this; |
||
| 32 | this.connect(this.domNode,"onmousedown",function(_2){ |
||
| 33 | if(_1.isAnimating()){
|
||
| 34 | return;
|
||
| 35 | } |
||
| 36 | if(_1.panX){
|
||
| 37 | _1.handleDragEnd(); |
||
| 38 | } |
||
| 39 | _1.downX=_2.targetTouches?_2.targetTouches[0].clientX:_2.clientX;
|
||
| 40 | _1.downY=_2.targetTouches?_2.targetTouches[0].clientY:_2.clientY;
|
||
| 41 | }); |
||
| 42 | this.connect(this.domNode,"onmousemove",function(_3){ |
||
| 43 | if(_1.isAnimating()){
|
||
| 44 | return;
|
||
| 45 | } |
||
| 46 | if((!_1.downX&&_1.downX!==0)||(!_1.downY&&_1.downY!==0)){ |
||
| 47 | return;
|
||
| 48 | } |
||
| 49 | if((!_1.disableSwipe&&_1.zoom==1)||(!_1.disableAutoZoom&&_1.zoom!=1)){ |
||
| 50 | var x=_3.targetTouches?_3.targetTouches[0].clientX:_3.pageX; |
||
| 51 | var y=_3.targetTouches?_3.targetTouches[0].clientY:_3.pageY; |
||
| 52 | _1.panX=x-_1.downX; |
||
| 53 | _1.panY=y-_1.downY; |
||
| 54 | if(_1.zoom==1){ |
||
| 55 | if(Math.abs(_1.panX)>10){ |
||
| 56 | _1.render(); |
||
| 57 | } |
||
| 58 | }else{
|
||
| 59 | if(Math.abs(_1.panX)>10||Math.abs(_1.panY)>10){ |
||
| 60 | _1.render(); |
||
| 61 | } |
||
| 62 | } |
||
| 63 | } |
||
| 64 | }); |
||
| 65 | this.connect(this.domNode,"onmouseout",function(_4){ |
||
| 66 | if(!_1.isAnimating()&&_1.panX){
|
||
| 67 | _1.handleDragEnd(); |
||
| 68 | } |
||
| 69 | }); |
||
| 70 | this.connect(this.domNode,"onmouseover",function(_5){ |
||
| 71 | _1.downX=_1.downY=null;
|
||
| 72 | }); |
||
| 73 | this.connect(this.domNode,"onclick",function(_6){ |
||
| 74 | if(_1.isAnimating()){
|
||
| 75 | return;
|
||
| 76 | } |
||
| 77 | if(_1.downX==null||_1.downY==null){ |
||
| 78 | return;
|
||
| 79 | } |
||
| 80 | var x=(_6.targetTouches?_6.targetTouches[0].clientX:_6.pageX); |
||
| 81 | var y=(_6.targetTouches?_6.targetTouches[0].clientY:_6.pageY); |
||
| 82 | if(Math.abs(_1.panX)>14||Math.abs(_1.panY)>14){ |
||
| 83 | _1.downX=_1.downY=null;
|
||
| 84 | _1.handleDragEnd(); |
||
| 85 | return;
|
||
| 86 | } |
||
| 87 | _1.downX=_1.downY=null;
|
||
| 88 | if(!_1.disableAutoZoom){
|
||
| 89 | if(!_1._centerImg||!_1._centerImg._loaded){
|
||
| 90 | return;
|
||
| 91 | } |
||
| 92 | if(_1.zoom!=1){ |
||
| 93 | _1.set("animatedZoom",1); |
||
| 94 | return;
|
||
| 95 | } |
||
| 96 | var _7=dojo._abs(_1.domNode);
|
||
| 97 | var _8=_1.size.w/_1._centerImg.width;
|
||
| 98 | var _9=_1.size.h/_1._centerImg.height;
|
||
| 99 | _1.zoomTo(((x-_7.x)/_8)-_1.panX,((y-_7.y)/_9)-_1.panY,_1.autoZoomLevel); |
||
| 100 | } |
||
| 101 | }); |
||
| 102 | dojo.connect(this.domNode,"flick",this,"handleFlick"); |
||
| 103 | },isAnimating:function(){ |
||
| 104 | return this._anim&&this._anim.status()=="playing"; |
||
| 105 | },handleDragEnd:function(){ |
||
| 106 | this.downX=this.downY=null; |
||
| 107 | if(this.zoom==1){ |
||
| 108 | if(!this.panX){ |
||
| 109 | return;
|
||
| 110 | } |
||
| 111 | var _a=(this._leftImg&&this._leftImg._loaded)||(this._leftSmallImg&&this._leftSmallImg._loaded); |
||
| 112 | var _b=(this._rightImg&&this._rightImg._loaded)||(this._rightSmallImg&&this._rightSmallImg._loaded); |
||
| 113 | var _c=!(Math.abs(this.panX)<this._centerImg._baseWidth/2)&&((this.panX>0&&_a?1:0)||(this.panX<0&&_b?1:0)); |
||
| 114 | if(!_c){
|
||
| 115 | this._animPanTo(0,dojo.fx.easing.expoOut,700); |
||
| 116 | }else{
|
||
| 117 | this.moveTo(this.panX); |
||
| 118 | } |
||
| 119 | }else{
|
||
| 120 | if(!this.panX&&!this.panY){ |
||
| 121 | return;
|
||
| 122 | } |
||
| 123 | this.zoomCenterX-=(this.panX/this.zoom); |
||
| 124 | this.zoomCenterY-=(this.panY/this.zoom); |
||
| 125 | this.panX=this.panY=0; |
||
| 126 | } |
||
| 127 | },handleFlick:function(_d){ |
||
| 128 | if(this.zoom==1&&_d.duration<500){ |
||
| 129 | if(_d.direction=="ltr"){ |
||
| 130 | this.moveTo(1); |
||
| 131 | }else{
|
||
| 132 | if(_d.direction=="rtl"){ |
||
| 133 | this.moveTo(-1); |
||
| 134 | } |
||
| 135 | } |
||
| 136 | this.downX=this.downY=null; |
||
| 137 | } |
||
| 138 | },moveTo:function(_e){ |
||
| 139 | _e=_e>0?1:-1; |
||
| 140 | var _f;
|
||
| 141 | if(_e<1){ |
||
| 142 | if(this._rightImg&&this._rightImg._loaded){ |
||
| 143 | _f=this._rightImg;
|
||
| 144 | }else{
|
||
| 145 | if(this._rightSmallImg&&this._rightSmallImg._loaded){ |
||
| 146 | _f=this._rightSmallImg;
|
||
| 147 | } |
||
| 148 | } |
||
| 149 | }else{
|
||
| 150 | if(this._leftImg&&this._leftImg._loaded){ |
||
| 151 | _f=this._leftImg;
|
||
| 152 | }else{
|
||
| 153 | if(this._leftSmallImg&&this._leftSmallImg._loaded){ |
||
| 154 | _f=this._leftSmallImg;
|
||
| 155 | } |
||
| 156 | } |
||
| 157 | } |
||
| 158 | this._moveDir=_e;
|
||
| 159 | var _10=this; |
||
| 160 | if(_f&&_f._loaded){
|
||
| 161 | this._animPanTo(this.size.w*_e,null,500,function(){ |
||
| 162 | _10.panX=0;
|
||
| 163 | _10.panY=0;
|
||
| 164 | if(_e<0){ |
||
| 165 | _10._switchImage("left","right"); |
||
| 166 | }else{
|
||
| 167 | _10._switchImage("right","left"); |
||
| 168 | } |
||
| 169 | _10.render(); |
||
| 170 | _10.onChange(_e*-1);
|
||
| 171 | }); |
||
| 172 | }else{
|
||
| 173 | this._animPanTo(0,dojo.fx.easing.expoOut,700); |
||
| 174 | } |
||
| 175 | },_switchImage:function(_11,_12){ |
||
| 176 | var _13="_"+_11+"SmallImg"; |
||
| 177 | var _14="_"+_11+"Img"; |
||
| 178 | var _15="_"+_12+"SmallImg"; |
||
| 179 | var _16="_"+_12+"Img"; |
||
| 180 | this[_14]=this._centerImg; |
||
| 181 | this[_13]=this._centerSmallImg; |
||
| 182 | this[_14]._type=_11;
|
||
| 183 | if(this[_13]){ |
||
| 184 | this[_13]._type=_11;
|
||
| 185 | } |
||
| 186 | this._centerImg=this[_16]; |
||
| 187 | this._centerSmallImg=this[_15]; |
||
| 188 | this._centerImg._type="center"; |
||
| 189 | if(this._centerSmallImg){ |
||
| 190 | this._centerSmallImg._type="center"; |
||
| 191 | } |
||
| 192 | this[_16]=this[_15]=null; |
||
| 193 | },_animPanTo:function(to,_17,_18,_19){ |
||
| 194 | this._animCallback=_19;
|
||
| 195 | this._anim=new dojo.Animation({curve:[this.panX,to],onAnimate:this._updateAnimatedPan,duration:_18||500,easing:_17,onEnd:this._onAnimPanEnd}); |
||
| 196 | this._anim.play();
|
||
| 197 | return this._anim; |
||
| 198 | },onChange:function(_1a){ |
||
| 199 | },_updateAnimatedPan:function(_1b){ |
||
| 200 | this.panX=_1b;
|
||
| 201 | this.render();
|
||
| 202 | },_onAnimPanEnd:function(){ |
||
| 203 | this.panX=this.panY=0; |
||
| 204 | if(this._animCallback){ |
||
| 205 | this._animCallback();
|
||
| 206 | } |
||
| 207 | },zoomTo:function(_1c,_1d,_1e){ |
||
| 208 | this.set("zoomCenterX",_1c); |
||
| 209 | this.set("zoomCenterY",_1d); |
||
| 210 | this.set("animatedZoom",_1e); |
||
| 211 | },render:function(){ |
||
| 212 | var cxt=this.canvas.getContext("2d"); |
||
| 213 | cxt.clearRect(0,0,this.canvas.width,this.canvas.height); |
||
| 214 | this._renderImg(this._centerSmallImg,this._centerImg,this.zoom==1?(this.panX<0?1:this.panX>0?-1:0):0); |
||
| 215 | if(this.zoom==1&&this.panX!=0){ |
||
| 216 | if(this.panX>0){ |
||
| 217 | this._renderImg(this._leftSmallImg,this._leftImg,1); |
||
| 218 | }else{
|
||
| 219 | this._renderImg(this._rightSmallImg,this._rightImg,-1); |
||
| 220 | } |
||
| 221 | } |
||
| 222 | },_renderImg:function(_1f,_20,_21){ |
||
| 223 | var img=(_20&&_20._loaded)?_20:_1f;
|
||
| 224 | if(!img||!img._loaded){
|
||
| 225 | return;
|
||
| 226 | } |
||
| 227 | var cxt=this.canvas.getContext("2d"); |
||
| 228 | var _22=img._baseWidth;
|
||
| 229 | var _23=img._baseHeight;
|
||
| 230 | var _24=_22*this.zoom; |
||
| 231 | var _25=_23*this.zoom; |
||
| 232 | var _26=Math.min(this.size.w,_24); |
||
| 233 | var _27=Math.min(this.size.h,_25); |
||
| 234 | var _28=this.dispWidth=img.width*(_26/_24); |
||
| 235 | var _29=this.dispHeight=img.height*(_27/_25); |
||
| 236 | var _2a=this.zoomCenterX-(this.panX/this.zoom); |
||
| 237 | var _2b=this.zoomCenterY-(this.panY/this.zoom); |
||
| 238 | var _2c=Math.floor(Math.max(_28/2,Math.min(img.width-_28/2,_2a))); |
||
| 239 | var _2d=Math.floor(Math.max(_29/2,Math.min(img.height-_29/2,_2b))); |
||
| 240 | var _2e=Math.max(0,Math.round((img.width-_28)/2+(_2c-img._centerX))); |
||
| 241 | var _2f=Math.max(0,Math.round((img.height-_29)/2+(_2d-img._centerY))); |
||
| 242 | var _30=Math.round(Math.max(0,this.canvas.width-_26)/2); |
||
| 243 | var _31=Math.round(Math.max(0,this.canvas.height-_27)/2); |
||
| 244 | var _32=_26;
|
||
| 245 | var _33=_28;
|
||
| 246 | if(this.zoom==1&&_21&&this.panX){ |
||
| 247 | if(this.panX<0){ |
||
| 248 | if(_21>0){ |
||
| 249 | _26-=Math.abs(this.panX);
|
||
| 250 | _30=0;
|
||
| 251 | }else{
|
||
| 252 | if(_21<0){ |
||
| 253 | _26=Math.max(1,Math.abs(this.panX)-5); |
||
| 254 | _30=this.size.w-_26;
|
||
| 255 | } |
||
| 256 | } |
||
| 257 | }else{
|
||
| 258 | if(_21>0){ |
||
| 259 | _26=Math.max(1,Math.abs(this.panX)-5); |
||
| 260 | _30=0;
|
||
| 261 | }else{
|
||
| 262 | if(_21<0){ |
||
| 263 | _26-=Math.abs(this.panX);
|
||
| 264 | _30=this.size.w-_26;
|
||
| 265 | } |
||
| 266 | } |
||
| 267 | } |
||
| 268 | _28=Math.max(1,Math.floor(_28*(_26/_32)));
|
||
| 269 | if(_21>0){ |
||
| 270 | _2e=(_2e+_33)-(_28); |
||
| 271 | } |
||
| 272 | _2e=Math.floor(_2e); |
||
| 273 | } |
||
| 274 | try{
|
||
| 275 | cxt.drawImage(img,Math.max(0,_2e),_2f,Math.min(_33,_28),_29,_30,_31,Math.min(_32,_26),_27);
|
||
| 276 | } |
||
| 277 | catch(e){
|
||
| 278 | } |
||
| 279 | },_setZoomAttr:function(_34){ |
||
| 280 | this.zoom=Math.min(this.maxZoom,Math.max(1,_34)); |
||
| 281 | if(this.zoom==1&&this._centerImg&&this._centerImg._loaded){ |
||
| 282 | if(!this.isAnimating()){ |
||
| 283 | this.zoomCenterX=this._centerImg.width/2; |
||
| 284 | this.zoomCenterY=this._centerImg.height/2; |
||
| 285 | } |
||
| 286 | this.panX=this.panY=0; |
||
| 287 | } |
||
| 288 | this.render();
|
||
| 289 | },_setZoomCenterXAttr:function(_35){ |
||
| 290 | if(_35!=this.zoomCenterX){ |
||
| 291 | if(this._centerImg&&this._centerImg._loaded){ |
||
| 292 | _35=Math.min(this._centerImg.width,_35);
|
||
| 293 | } |
||
| 294 | this.zoomCenterX=Math.max(0,Math.round(_35)); |
||
| 295 | } |
||
| 296 | },_setZoomCenterYAttr:function(_36){ |
||
| 297 | if(_36!=this.zoomCenterY){ |
||
| 298 | if(this._centerImg&&this._centerImg._loaded){ |
||
| 299 | _36=Math.min(this._centerImg.height,_36);
|
||
| 300 | } |
||
| 301 | this.zoomCenterY=Math.max(0,Math.round(_36)); |
||
| 302 | } |
||
| 303 | },_setZoomCenterAttr:function(_37){ |
||
| 304 | if(_37.x!=this.zoomCenterX||_37.y!=this.zoomCenterY){ |
||
| 305 | this.set("zoomCenterX",_37.x); |
||
| 306 | this.set("zoomCenterY",_37.y); |
||
| 307 | this.render();
|
||
| 308 | } |
||
| 309 | },_setAnimatedZoomAttr:function(_38){ |
||
| 310 | if(this._anim&&this._anim.status()=="playing"){ |
||
| 311 | return;
|
||
| 312 | } |
||
| 313 | this._anim=new dojo.Animation({curve:[this.zoom,_38],onAnimate:this._updateAnimatedZoom,onEnd:this._onAnimEnd}); |
||
| 314 | this._anim.play();
|
||
| 315 | },_updateAnimatedZoom:function(_39){ |
||
| 316 | this._setZoomAttr(_39);
|
||
| 317 | },_setCenterUrlAttr:function(_3a){ |
||
| 318 | this._setImage("center",_3a); |
||
| 319 | },_setLeftUrlAttr:function(_3b){ |
||
| 320 | this._setImage("left",_3b); |
||
| 321 | },_setRightUrlAttr:function(_3c){ |
||
| 322 | this._setImage("right",_3c); |
||
| 323 | },_setImage:function(_3d,_3e){ |
||
| 324 | var _3f=null; |
||
| 325 | var _40=null; |
||
| 326 | if(dojo.isString(_3e)){
|
||
| 327 | _40=_3e; |
||
| 328 | }else{
|
||
| 329 | _40=_3e.large; |
||
| 330 | _3f=_3e.small; |
||
| 331 | } |
||
| 332 | if(this["_"+_3d+"Img"]&&this["_"+_3d+"Img"]._src==_40){ |
||
| 333 | return;
|
||
| 334 | } |
||
| 335 | var _41=this["_"+_3d+"Img"]=new Image(); |
||
| 336 | _41._type=_3d; |
||
| 337 | _41._loaded=false;
|
||
| 338 | _41._src=_40; |
||
| 339 | _41._conn=dojo.connect(_41,"onload",this.handleLoad); |
||
| 340 | if(_3f){
|
||
| 341 | var _42=this["_"+_3d+"SmallImg"]=new Image(); |
||
| 342 | _42._type=_3d; |
||
| 343 | _42._loaded=false;
|
||
| 344 | _42._conn=dojo.connect(_42,"onload",this.handleLoad); |
||
| 345 | _42._isSmall=true;
|
||
| 346 | _42._src=_3f; |
||
| 347 | _42.src=_3f; |
||
| 348 | } |
||
| 349 | _41.src=_40; |
||
| 350 | },handleLoad:function(evt){ |
||
| 351 | var img=evt.target;
|
||
| 352 | img._loaded=true;
|
||
| 353 | dojo.disconnect(img._conn); |
||
| 354 | var _43=img._type;
|
||
| 355 | switch(_43){
|
||
| 356 | case "center": |
||
| 357 | this.zoomCenterX=img.width/2; |
||
| 358 | this.zoomCenterY=img.height/2; |
||
| 359 | break;
|
||
| 360 | } |
||
| 361 | var _44=img.height;
|
||
| 362 | var _45=img.width;
|
||
| 363 | if(_45/this.size.w<_44/this.size.h){ |
||
| 364 | img._baseHeight=this.canvas.height;
|
||
| 365 | img._baseWidth=_45/(_44/this.size.h);
|
||
| 366 | }else{
|
||
| 367 | img._baseWidth=this.canvas.width;
|
||
| 368 | img._baseHeight=_44/(_45/this.size.w);
|
||
| 369 | } |
||
| 370 | img._centerX=_45/2;
|
||
| 371 | img._centerY=_44/2;
|
||
| 372 | this.render();
|
||
| 373 | this.onLoad(img._type,img._src,img._isSmall);
|
||
| 374 | },onLoad:function(_46,url,_47){ |
||
| 375 | }}); |
||
| 376 | } |