root / trunk / web / dojo / dojox / image / SlideShow.js @ 9
History | View | Annotate | Download (10.3 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.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 | } |