root / trunk / web / dojo / dojox / image / SlideShow.js
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 |
} |