root / trunk / web / dojo / dojox / image / SlideShow.js @ 9
History | View | Annotate | Download (10.3 KB)
| 1 |
/*
|
|---|---|
| 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.image.SlideShow"]){ |
| 9 |
dojo._hasResource["dojox.image.SlideShow"]=true; |
| 10 |
dojo.provide("dojox.image.SlideShow");
|
| 11 |
dojo.require("dojo.string");
|
| 12 |
dojo.require("dojo.fx");
|
| 13 |
dojo.require("dijit._Widget");
|
| 14 |
dojo.require("dijit._Templated");
|
| 15 |
dojo.declare("dojox.image.SlideShow",[dijit._Widget,dijit._Templated],{imageHeight:375,imageWidth:500,title:"",titleTemplate:"${title} <span class=\"slideShowCounterText\">(${current} of ${total})</span>",noLink:false,loop:true,hasNav:true,images:[],pageSize:20,autoLoad:true,autoStart:false,fixedHeight:false,imageStore:null,linkAttr:"link",imageLargeAttr:"imageUrl",titleAttr:"title",slideshowInterval:3,templateString:dojo.cache("dojox.image","resources/SlideShow.html","<div dojoAttachPoint=\"outerNode\" class=\"slideShowWrapper\">\n\t<div style=\"position:relative;\" dojoAttachPoint=\"innerWrapper\">\n\t\t<div class=\"slideShowNav\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<div class=\"dijitInline slideShowTitle\" dojoAttachPoint=\"titleNode\">${title}</div>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"navNode\" class=\"slideShowCtrl\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<span dojoAttachPoint=\"navPrev\" class=\"slideShowCtrlPrev\"></span>\n\t\t\t<span dojoAttachPoint=\"navPlay\" class=\"slideShowCtrlPlay\"></span>\n\t\t\t<span dojoAttachPoint=\"navNext\" class=\"slideShowCtrlNext\"></span>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"largeNode\" class=\"slideShowImageWrapper\"></div>\t\t\n\t\t<div dojoAttachPoint=\"hiddenNode\" class=\"slideShowHidden\"></div>\n\t</div>\n</div>\n"),_imageCounter:0,_tmpImage:null,_request:null,postCreate:function(){ |
| 16 |
this.inherited(arguments); |
| 17 |
var _1=document.createElement("img"); |
| 18 |
_1.setAttribute("width",this.imageWidth); |
| 19 |
_1.setAttribute("height",this.imageHeight); |
| 20 |
if(this.hasNav){ |
| 21 |
dojo.connect(this.outerNode,"onmouseover",this,function(_2){ |
| 22 |
try{
|
| 23 |
this._showNav();
|
| 24 |
} |
| 25 |
catch(e){
|
| 26 |
} |
| 27 |
}); |
| 28 |
dojo.connect(this.outerNode,"onmouseout",this,function(_3){ |
| 29 |
try{
|
| 30 |
this._hideNav(_3);
|
| 31 |
} |
| 32 |
catch(e){
|
| 33 |
} |
| 34 |
}); |
| 35 |
} |
| 36 |
this.outerNode.style.width=this.imageWidth+"px"; |
| 37 |
_1.setAttribute("src",this._blankGif); |
| 38 |
var _4=this; |
| 39 |
this.largeNode.appendChild(_1);
|
| 40 |
this._tmpImage=this._currentImage=_1; |
| 41 |
this._fitSize(true); |
| 42 |
this._loadImage(0,dojo.hitch(this,"showImage",0)); |
| 43 |
this._calcNavDimensions();
|
| 44 |
},setDataStore:function(_5,_6,_7){ |
| 45 |
this.reset();
|
| 46 |
var _8=this; |
| 47 |
this._request={query:{},start:_6.start||0,count:_6.count||this.pageSize,onBegin:function(_9,_a){ |
| 48 |
_8.maxPhotos=_9; |
| 49 |
}}; |
| 50 |
if(_6.query){
|
| 51 |
dojo.mixin(this._request.query,_6.query);
|
| 52 |
} |
| 53 |
if(_7){
|
| 54 |
dojo.forEach(["imageLargeAttr","linkAttr","titleAttr"],function(_b){ |
| 55 |
if(_7[_b]){
|
| 56 |
this[_b]=_7[_b];
|
| 57 |
} |
| 58 |
},this);
|
| 59 |
} |
| 60 |
var _c=function(_d){ |
| 61 |
_8.maxPhotos=_d.length; |
| 62 |
_8._request.onComplete=null;
|
| 63 |
if(_8.autoStart){
|
| 64 |
_8.imageIndex=-1;
|
| 65 |
_8.toggleSlideShow(); |
| 66 |
}else{
|
| 67 |
_8.showImage(0);
|
| 68 |
} |
| 69 |
}; |
| 70 |
this.imageStore=_5;
|
| 71 |
this._request.onComplete=_c;
|
| 72 |
this._request.start=0; |
| 73 |
this.imageStore.fetch(this._request); |
| 74 |
},reset:function(){ |
| 75 |
dojo.query("> *",this.largeNode).orphan(); |
| 76 |
this.largeNode.appendChild(this._tmpImage); |
| 77 |
dojo.query("> *",this.hiddenNode).orphan(); |
| 78 |
dojo.forEach(this.images,function(_e){ |
| 79 |
if(_e&&_e.parentNode){
|
| 80 |
_e.parentNode.removeChild(_e); |
| 81 |
} |
| 82 |
}); |
| 83 |
this.images=[];
|
| 84 |
this.isInitialized=false; |
| 85 |
this._imageCounter=0; |
| 86 |
},isImageLoaded:function(_f){ |
| 87 |
return this.images&&this.images.length>_f&&this.images[_f]; |
| 88 |
},moveImageLoadingPointer:function(_10){ |
| 89 |
this._imageCounter=_10;
|
| 90 |
},destroy:function(){ |
| 91 |
if(this._slideId){ |
| 92 |
this._stop();
|
| 93 |
} |
| 94 |
this.inherited(arguments); |
| 95 |
},showNextImage:function(_11,_12){ |
| 96 |
if(_11&&this._timerCancelled){ |
| 97 |
return false; |
| 98 |
} |
| 99 |
if(this.imageIndex+1>=this.maxPhotos){ |
| 100 |
if(_11&&(this.loop||_12)){ |
| 101 |
this.imageIndex=-1; |
| 102 |
}else{
|
| 103 |
if(this._slideId){ |
| 104 |
this._stop();
|
| 105 |
} |
| 106 |
return false; |
| 107 |
} |
| 108 |
} |
| 109 |
this.showImage(this.imageIndex+1,dojo.hitch(this,function(){ |
| 110 |
if(_11){
|
| 111 |
this._startTimer();
|
| 112 |
} |
| 113 |
})); |
| 114 |
return true; |
| 115 |
},toggleSlideShow:function(){ |
| 116 |
if(this._slideId){ |
| 117 |
this._stop();
|
| 118 |
}else{
|
| 119 |
dojo.toggleClass(this.domNode,"slideShowPaused"); |
| 120 |
this._timerCancelled=false; |
| 121 |
var idx=this.imageIndex; |
| 122 |
if(idx<0||(this.images[idx]&&this.images[idx]._img.complete)){ |
| 123 |
var _13=this.showNextImage(true,true); |
| 124 |
if(!_13){
|
| 125 |
this._stop();
|
| 126 |
} |
| 127 |
}else{
|
| 128 |
var _14=dojo.subscribe(this.getShowTopicName(),dojo.hitch(this,function(_15){ |
| 129 |
setTimeout(dojo.hitch(this,function(){ |
| 130 |
if(_15.index==idx){
|
| 131 |
var _16=this.showNextImage(true,true); |
| 132 |
if(!_16){
|
| 133 |
this._stop();
|
| 134 |
} |
| 135 |
dojo.unsubscribe(_14); |
| 136 |
} |
| 137 |
}),this.slideshowInterval*1000); |
| 138 |
})); |
| 139 |
dojo.publish(this.getShowTopicName(),[{index:idx,title:"",url:""}]); |
| 140 |
} |
| 141 |
} |
| 142 |
},getShowTopicName:function(){ |
| 143 |
return (this.widgetId||this.id)+"/imageShow"; |
| 144 |
},getLoadTopicName:function(){ |
| 145 |
return (this.widgetId?this.widgetId:this.id)+"/imageLoad"; |
| 146 |
},showImage:function(_17,_18){ |
| 147 |
if(!_18&&this._slideId){ |
| 148 |
this.toggleSlideShow();
|
| 149 |
} |
| 150 |
var _19=this; |
| 151 |
var _1a=this.largeNode.getElementsByTagName("div"); |
| 152 |
this.imageIndex=_17;
|
| 153 |
var _1b=function(){ |
| 154 |
if(_19.images[_17]){
|
| 155 |
while(_19.largeNode.firstChild){
|
| 156 |
_19.largeNode.removeChild(_19.largeNode.firstChild); |
| 157 |
} |
| 158 |
dojo.style(_19.images[_17],"opacity",0); |
| 159 |
_19.largeNode.appendChild(_19.images[_17]); |
| 160 |
_19._currentImage=_19.images[_17]._img; |
| 161 |
_19._fitSize(); |
| 162 |
var _1c=function(a,b,c){ |
| 163 |
var img=_19.images[_17].firstChild;
|
| 164 |
if(img.tagName.toLowerCase()!="img"){ |
| 165 |
img=img.firstChild; |
| 166 |
} |
| 167 |
var _1d=img.getAttribute("title")||""; |
| 168 |
if(_19._navShowing){
|
| 169 |
_19._showNav(true);
|
| 170 |
} |
| 171 |
dojo.publish(_19.getShowTopicName(),[{index:_17,title:_1d,url:img.getAttribute("src")}]);
|
| 172 |
if(_18){
|
| 173 |
_18(a,b,c); |
| 174 |
} |
| 175 |
_19._setTitle(_1d); |
| 176 |
}; |
| 177 |
dojo.fadeIn({node:_19.images[_17],duration:300,onEnd:_1c}).play();
|
| 178 |
}else{
|
| 179 |
_19._loadImage(_17,function(){
|
| 180 |
_19.showImage(_17,_18); |
| 181 |
}); |
| 182 |
} |
| 183 |
}; |
| 184 |
if(_1a&&_1a.length>0){ |
| 185 |
dojo.fadeOut({node:_1a[0],duration:300,onEnd:function(){
|
| 186 |
_19.hiddenNode.appendChild(_1a[0]);
|
| 187 |
_1b(); |
| 188 |
}}).play(); |
| 189 |
}else{
|
| 190 |
_1b(); |
| 191 |
} |
| 192 |
},_fitSize:function(_1e){ |
| 193 |
if(!this.fixedHeight||_1e){ |
| 194 |
var _1f=(this._currentImage.height+(this.hasNav?20:0)); |
| 195 |
dojo.style(this.innerWrapper,"height",_1f+"px"); |
| 196 |
return;
|
| 197 |
} |
| 198 |
dojo.style(this.largeNode,"paddingTop",this._getTopPadding()+"px"); |
| 199 |
},_getTopPadding:function(){ |
| 200 |
if(!this.fixedHeight){ |
| 201 |
return 0; |
| 202 |
} |
| 203 |
return (this.imageHeight-this._currentImage.height)/2; |
| 204 |
},_loadNextImage:function(){ |
| 205 |
if(!this.autoLoad){ |
| 206 |
return;
|
| 207 |
} |
| 208 |
while(this.images.length>=this._imageCounter&&this.images[this._imageCounter]){ |
| 209 |
this._imageCounter++;
|
| 210 |
} |
| 211 |
this._loadImage(this._imageCounter); |
| 212 |
},_loadImage:function(_20,_21){ |
| 213 |
if(this.images[_20]||!this._request){ |
| 214 |
return;
|
| 215 |
} |
| 216 |
var _22=_20-(_20%(this._request.count||this.pageSize)); |
| 217 |
this._request.start=_22;
|
| 218 |
this._request.onComplete=function(_23){ |
| 219 |
var _24=_20-_22;
|
| 220 |
if(_23&&_23.length>_24){
|
| 221 |
_25(_23[_24]); |
| 222 |
}else{
|
| 223 |
} |
| 224 |
}; |
| 225 |
var _26=this; |
| 226 |
var _27=this.imageStore; |
| 227 |
var _25=function(_28){ |
| 228 |
var url=_26.imageStore.getValue(_28,_26.imageLargeAttr);
|
| 229 |
var img=new Image(); |
| 230 |
var div=dojo.create("div",{id:_26.id+"_imageDiv"+_20}); |
| 231 |
div._img=img; |
| 232 |
var _29=_26.imageStore.getValue(_28,_26.linkAttr);
|
| 233 |
if(!_29||_26.noLink){
|
| 234 |
div.appendChild(img); |
| 235 |
}else{
|
| 236 |
var a=dojo.create("a",{"href":_29,"target":"_blank"},div); |
| 237 |
a.appendChild(img); |
| 238 |
} |
| 239 |
dojo.connect(img,"onload",function(){ |
| 240 |
if(_27!=_26.imageStore){
|
| 241 |
return;
|
| 242 |
} |
| 243 |
_26._fitImage(img); |
| 244 |
dojo.attr(div,{"width":_26.imageWidth,"height":_26.imageHeight});
|
| 245 |
dojo.publish(_26.getLoadTopicName(),[_20]); |
| 246 |
setTimeout(function(){
|
| 247 |
_26._loadNextImage(); |
| 248 |
},1);
|
| 249 |
if(_21){
|
| 250 |
_21(); |
| 251 |
} |
| 252 |
}); |
| 253 |
_26.hiddenNode.appendChild(div); |
| 254 |
var _2a=dojo.create("div",{className:"slideShowTitle"},div); |
| 255 |
_26.images[_20]=div; |
| 256 |
dojo.attr(img,"src",url);
|
| 257 |
var _2b=_26.imageStore.getValue(_28,_26.titleAttr);
|
| 258 |
if(_2b){
|
| 259 |
dojo.attr(img,"title",_2b);
|
| 260 |
} |
| 261 |
}; |
| 262 |
this.imageStore.fetch(this._request); |
| 263 |
},_stop:function(){ |
| 264 |
if(this._slideId){ |
| 265 |
clearTimeout(this._slideId);
|
| 266 |
} |
| 267 |
this._slideId=null; |
| 268 |
this._timerCancelled=true; |
| 269 |
dojo.removeClass(this.domNode,"slideShowPaused"); |
| 270 |
},_prev:function(){ |
| 271 |
if(this.imageIndex<1){ |
| 272 |
return;
|
| 273 |
} |
| 274 |
this.showImage(this.imageIndex-1); |
| 275 |
},_next:function(){ |
| 276 |
this.showNextImage();
|
| 277 |
},_startTimer:function(){ |
| 278 |
var id=this.id; |
| 279 |
this._slideId=setTimeout(function(){ |
| 280 |
dijit.byId(id).showNextImage(true);
|
| 281 |
},this.slideshowInterval*1000); |
| 282 |
},_calcNavDimensions:function(){ |
| 283 |
dojo.style(this.navNode,"position","absolute"); |
| 284 |
dojo.style(this.navNode,"top","-10000px"); |
| 285 |
dojo._setOpacity(this.navNode,99); |
| 286 |
this.navPlay._size=dojo.marginBox(this.navPlay); |
| 287 |
this.navPrev._size=dojo.marginBox(this.navPrev); |
| 288 |
this.navNext._size=dojo.marginBox(this.navNext); |
| 289 |
dojo._setOpacity(this.navNode,0); |
| 290 |
dojo.style(this.navNode,{"position":"",top:""}); |
| 291 |
},_setTitle:function(_2c){ |
| 292 |
this.titleNode.innerHTML=dojo.string.substitute(this.titleTemplate,{title:_2c,current:1+this.imageIndex,total:this.maxPhotos||""}); |
| 293 |
},_fitImage:function(img){ |
| 294 |
var _2d=img.width;
|
| 295 |
var _2e=img.height;
|
| 296 |
if(_2d>this.imageWidth){ |
| 297 |
_2e=Math.floor(_2e*(this.imageWidth/_2d));
|
| 298 |
img.height=_2e; |
| 299 |
img.width=_2d=this.imageWidth;
|
| 300 |
} |
| 301 |
if(_2e>this.imageHeight){ |
| 302 |
_2d=Math.floor(_2d*(this.imageHeight/_2e));
|
| 303 |
img.height=this.imageHeight;
|
| 304 |
img.width=_2d; |
| 305 |
} |
| 306 |
},_handleClick:function(e){ |
| 307 |
switch(e.target){
|
| 308 |
case this.navNext: |
| 309 |
this._next();
|
| 310 |
break;
|
| 311 |
case this.navPrev: |
| 312 |
this._prev();
|
| 313 |
break;
|
| 314 |
case this.navPlay: |
| 315 |
this.toggleSlideShow();
|
| 316 |
break;
|
| 317 |
} |
| 318 |
},_showNav:function(_2f){ |
| 319 |
if(this._navShowing&&!_2f){ |
| 320 |
return;
|
| 321 |
} |
| 322 |
dojo.style(this.navNode,"marginTop","0px"); |
| 323 |
var _30=dojo.style(this.navNode,"width")/2-this.navPlay._size.w/2-this.navPrev._size.w; |
| 324 |
dojo.style(this.navPlay,"marginLeft",_30+"px"); |
| 325 |
var _31=dojo.marginBox(this.outerNode); |
| 326 |
var _32=this._currentImage.height-this.navPlay._size.h-10+this._getTopPadding(); |
| 327 |
if(_32>this._currentImage.height){ |
| 328 |
_32+=10;
|
| 329 |
} |
| 330 |
dojo[this.imageIndex<1?"addClass":"removeClass"](this.navPrev,"slideShowCtrlHide"); |
| 331 |
dojo[this.imageIndex+1>=this.maxPhotos?"addClass":"removeClass"](this.navNext,"slideShowCtrlHide"); |
| 332 |
var _33=this; |
| 333 |
if(this._navAnim){ |
| 334 |
this._navAnim.stop();
|
| 335 |
} |
| 336 |
if(this._navShowing){ |
| 337 |
return;
|
| 338 |
} |
| 339 |
this._navAnim=dojo.fadeIn({node:this.navNode,duration:300,onEnd:function(){ |
| 340 |
_33._navAnim=null;
|
| 341 |
}}); |
| 342 |
this._navAnim.play();
|
| 343 |
this._navShowing=true; |
| 344 |
},_hideNav:function(e){ |
| 345 |
if(!e||!this._overElement(this.outerNode,e)){ |
| 346 |
var _34=this; |
| 347 |
if(this._navAnim){ |
| 348 |
this._navAnim.stop();
|
| 349 |
} |
| 350 |
this._navAnim=dojo.fadeOut({node:this.navNode,duration:300,onEnd:function(){ |
| 351 |
_34._navAnim=null;
|
| 352 |
}}); |
| 353 |
this._navAnim.play();
|
| 354 |
this._navShowing=false; |
| 355 |
} |
| 356 |
},_overElement:function(_35,e){ |
| 357 |
if(typeof (dojo)=="undefined"){ |
| 358 |
return false; |
| 359 |
} |
| 360 |
_35=dojo.byId(_35); |
| 361 |
var m={x:e.pageX,y:e.pageY}; |
| 362 |
var bb=dojo._getBorderBox(_35);
|
| 363 |
var _36=dojo.coords(_35,true); |
| 364 |
var _37=_36.x;
|
| 365 |
return (m.x>=_37&&m.x<=(_37+bb.w)&&m.y>=_36.y&&m.y<=(top+bb.h));
|
| 366 |
}}); |
| 367 |
} |