Project

General

Profile

Statistics
| Revision:

root / trunk / web / dojo / dojox / image / SlideShow.js @ 12

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
}