Project

General

Profile

Statistics
| Revision:

root / trunk / web / dojo / dojox / image / ThumbnailPicker.js

History | View | Annotate | Download (9.53 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.ThumbnailPicker"]){
9
dojo._hasResource["dojox.image.ThumbnailPicker"]=true;
10
dojo.provide("dojox.image.ThumbnailPicker");
11
dojo.experimental("dojox.image.ThumbnailPicker");
12
dojo.require("dojox.fx.scroll");
13
dojo.require("dojo.fx.easing");
14
dojo.require("dojo.fx");
15
dojo.require("dijit._Widget");
16
dojo.require("dijit._Templated");
17
dojo.declare("dojox.image.ThumbnailPicker",[dijit._Widget,dijit._Templated],{imageStore:null,request:null,size:500,thumbHeight:75,thumbWidth:100,useLoadNotifier:false,useHyperlink:false,hyperlinkTarget:"new",isClickable:true,isScrollable:true,isHorizontal:true,autoLoad:true,linkAttr:"link",imageThumbAttr:"imageUrlThumb",imageLargeAttr:"imageUrl",pageSize:20,titleAttr:"title",templateString:dojo.cache("dojox.image","resources/ThumbnailPicker.html","<div dojoAttachPoint=\"outerNode\" class=\"thumbOuter\">\n\t<div dojoAttachPoint=\"navPrev\" class=\"thumbNav thumbClickable\">\n\t  <img src=\"\" dojoAttachPoint=\"navPrevImg\"/>    \n\t</div>\n\t<div dojoAttachPoint=\"thumbScroller\" class=\"thumbScroller\">\n\t  <div dojoAttachPoint=\"thumbsNode\" class=\"thumbWrapper\"></div>\n\t</div>\n\t<div dojoAttachPoint=\"navNext\" class=\"thumbNav thumbClickable\">\n\t  <img src=\"\" dojoAttachPoint=\"navNextImg\"/>  \n\t</div>\n</div>\n"),_thumbs:[],_thumbIndex:0,_maxPhotos:0,_loadedImages:{},postCreate:function(){
18
this.widgetid=this.id;
19
this.inherited(arguments);
20
this.pageSize=Number(this.pageSize);
21
this._scrollerSize=this.size-(51*2);
22
var _1=this._sizeProperty=this.isHorizontal?"width":"height";
23
dojo.style(this.outerNode,"textAlign","center");
24
dojo.style(this.outerNode,_1,this.size+"px");
25
dojo.style(this.thumbScroller,_1,this._scrollerSize+"px");
26
if(this.useHyperlink){
27
dojo.subscribe(this.getClickTopicName(),this,function(_2){
28
var _3=_2.index;
29
var _4=this.imageStore.getValue(_2.data,this.linkAttr);
30
if(!_4){
31
return;
32
}
33
if(this.hyperlinkTarget=="new"){
34
window.open(_4);
35
}else{
36
window.location=_4;
37
}
38
});
39
}
40
if(this.isClickable){
41
dojo.addClass(this.thumbsNode,"thumbClickable");
42
}
43
this._totalSize=0;
44
this.init();
45
},init:function(){
46
if(this.isInitialized){
47
return false;
48
}
49
var _5=this.isHorizontal?"Horiz":"Vert";
50
dojo.addClass(this.navPrev,"prev"+_5);
51
dojo.addClass(this.navNext,"next"+_5);
52
dojo.addClass(this.thumbsNode,"thumb"+_5);
53
dojo.addClass(this.outerNode,"thumb"+_5);
54
dojo.attr(this.navNextImg,"src",this._blankGif);
55
dojo.attr(this.navPrevImg,"src",this._blankGif);
56
this.connect(this.navPrev,"onclick","_prev");
57
this.connect(this.navNext,"onclick","_next");
58
this.isInitialized=true;
59
if(this.isHorizontal){
60
this._offsetAttr="offsetLeft";
61
this._sizeAttr="offsetWidth";
62
this._scrollAttr="scrollLeft";
63
}else{
64
this._offsetAttr="offsetTop";
65
this._sizeAttr="offsetHeight";
66
this._scrollAttr="scrollTop";
67
}
68
this._updateNavControls();
69
if(this.imageStore&&this.request){
70
this._loadNextPage();
71
}
72
return true;
73
},getClickTopicName:function(){
74
return (this.widgetId||this.id)+"/select";
75
},getShowTopicName:function(){
76
return (this.widgetId||this.id)+"/show";
77
},setDataStore:function(_6,_7,_8){
78
this.reset();
79
this.request={query:{},start:_7.start||0,count:_7.count||10,onBegin:dojo.hitch(this,function(_9){
80
this._maxPhotos=_9;
81
})};
82
if(_7.query){
83
dojo.mixin(this.request.query,_7.query);
84
}
85
if(_8){
86
dojo.forEach(["imageThumbAttr","imageLargeAttr","linkAttr","titleAttr"],function(_a){
87
if(_8[_a]){
88
this[_a]=_8[_a];
89
}
90
},this);
91
}
92
this.request.start=0;
93
this.request.count=this.pageSize;
94
this.imageStore=_6;
95
this._loadInProgress=false;
96
if(!this.init()){
97
this._loadNextPage();
98
}
99
},reset:function(){
100
this._loadedImages={};
101
dojo.forEach(this._thumbs,function(_b){
102
if(_b&&_b.parentNode){
103
dojo.destroy(_b);
104
}
105
});
106
this._thumbs=[];
107
this.isInitialized=false;
108
this._noImages=true;
109
},isVisible:function(_c){
110
var _d=this._thumbs[_c];
111
if(!_d){
112
return false;
113
}
114
var _e=this.isHorizontal?"offsetLeft":"offsetTop";
115
var _f=this.isHorizontal?"offsetWidth":"offsetHeight";
116
var _10=this.isHorizontal?"scrollLeft":"scrollTop";
117
var _11=_d[_e]-this.thumbsNode[_e];
118
return (_11>=this.thumbScroller[_10]&&_11+_d[_f]<=this.thumbScroller[_10]+this._scrollerSize);
119
},resize:function(dim){
120
var _12=this.isHorizontal?"w":"h";
121
var _13=0;
122
if(this._thumbs.length>0&&dojo.marginBox(this._thumbs[0]).w==0){
123
return;
124
}
125
dojo.forEach(this._thumbs,dojo.hitch(this,function(_14){
126
var mb=dojo.marginBox(_14.firstChild);
127
var _15=mb[_12];
128
_13+=(Number(_15)+10);
129
if(this.useLoadNotifier&&mb.w>0){
130
dojo.style(_14.lastChild,"width",(mb.w-4)+"px");
131
}
132
dojo.style(_14,"width",mb.w+"px");
133
}));
134
dojo.style(this.thumbsNode,this._sizeProperty,_13+"px");
135
this._updateNavControls();
136
},_next:function(){
137
var pos=this.isHorizontal?"offsetLeft":"offsetTop";
138
var _16=this.isHorizontal?"offsetWidth":"offsetHeight";
139
var _17=this.thumbsNode[pos];
140
var _18=this._thumbs[this._thumbIndex];
141
var _19=_18[pos]-_17;
142
var _1a=-1,img;
143
for(var i=this._thumbIndex+1;i<this._thumbs.length;i++){
144
img=this._thumbs[i];
145
if(img[pos]-_17+img[_16]-_19>this._scrollerSize){
146
this._showThumbs(i);
147
return;
148
}
149
}
150
},_prev:function(){
151
if(this.thumbScroller[this.isHorizontal?"scrollLeft":"scrollTop"]==0){
152
return;
153
}
154
var pos=this.isHorizontal?"offsetLeft":"offsetTop";
155
var _1b=this.isHorizontal?"offsetWidth":"offsetHeight";
156
var _1c=this._thumbs[this._thumbIndex];
157
var _1d=_1c[pos]-this.thumbsNode[pos];
158
var _1e=-1,img;
159
for(var i=this._thumbIndex-1;i>-1;i--){
160
img=this._thumbs[i];
161
if(_1d-img[pos]>this._scrollerSize){
162
this._showThumbs(i+1);
163
return;
164
}
165
}
166
this._showThumbs(0);
167
},_checkLoad:function(img,_1f){
168
dojo.publish(this.getShowTopicName(),[{index:_1f}]);
169
this._updateNavControls();
170
this._loadingImages={};
171
this._thumbIndex=_1f;
172
if(this.thumbsNode.offsetWidth-img.offsetLeft<(this._scrollerSize*2)){
173
this._loadNextPage();
174
}
175
},_showThumbs:function(_20){
176
_20=Math.min(Math.max(_20,0),this._maxPhotos);
177
if(_20>=this._maxPhotos){
178
return;
179
}
180
var img=this._thumbs[_20];
181
if(!img){
182
return;
183
}
184
var _21=img.offsetLeft-this.thumbsNode.offsetLeft;
185
var top=img.offsetTop-this.thumbsNode.offsetTop;
186
var _22=this.isHorizontal?_21:top;
187
if((_22>=this.thumbScroller[this._scrollAttr])&&(_22+img[this._sizeAttr]<=this.thumbScroller[this._scrollAttr]+this._scrollerSize)){
188
return;
189
}
190
if(this.isScrollable){
191
var _23=this.isHorizontal?{x:_21,y:0}:{x:0,y:top};
192
dojox.fx.smoothScroll({target:_23,win:this.thumbScroller,duration:300,easing:dojo.fx.easing.easeOut,onEnd:dojo.hitch(this,"_checkLoad",img,_20)}).play(10);
193
}else{
194
if(this.isHorizontal){
195
this.thumbScroller.scrollLeft=_21;
196
}else{
197
this.thumbScroller.scrollTop=top;
198
}
199
this._checkLoad(img,_20);
200
}
201
},markImageLoaded:function(_24){
202
var _25=dojo.byId("loadingDiv_"+this.widgetid+"_"+_24);
203
if(_25){
204
this._setThumbClass(_25,"thumbLoaded");
205
}
206
this._loadedImages[_24]=true;
207
},_setThumbClass:function(_26,_27){
208
if(!this.autoLoad){
209
return;
210
}
211
dojo.addClass(_26,_27);
212
},_loadNextPage:function(){
213
if(this._loadInProgress){
214
return;
215
}
216
this._loadInProgress=true;
217
var _28=this.request.start+(this._noImages?0:this.pageSize);
218
var pos=_28;
219
while(pos<this._thumbs.length&&this._thumbs[pos]){
220
pos++;
221
}
222
var _29=this.imageStore;
223
var _2a=function(_2b,_2c){
224
if(_29!=this.imageStore){
225
return;
226
}
227
if(_2b&&_2b.length){
228
var _2d=0;
229
var _2e=dojo.hitch(this,function(){
230
if(_2d>=_2b.length){
231
this._loadInProgress=false;
232
return;
233
}
234
var _2f=_2d++;
235
this._loadImage(_2b[_2f],pos+_2f,_2e);
236
});
237
_2e();
238
this._updateNavControls();
239
}else{
240
this._loadInProgress=false;
241
}
242
};
243
var _30=function(){
244
this._loadInProgress=false;
245
};
246
this.request.onComplete=dojo.hitch(this,_2a);
247
this.request.onError=dojo.hitch(this,_30);
248
this.request.start=_28;
249
this._noImages=false;
250
this.imageStore.fetch(this.request);
251
},_loadImage:function(_31,_32,_33){
252
var _34=this.imageStore;
253
var url=_34.getValue(_31,this.imageThumbAttr);
254
var _35=dojo.create("div",{id:"img_"+this.widgetid+"_"+_32});
255
var img=dojo.create("img",{},_35);
256
img._index=_32;
257
img._data=_31;
258
this._thumbs[_32]=_35;
259
var _36;
260
if(this.useLoadNotifier){
261
_36=dojo.create("div",{id:"loadingDiv_"+this.widgetid+"_"+_32},_35);
262
this._setThumbClass(_36,this._loadedImages[_32]?"thumbLoaded":"thumbNotifier");
263
}
264
var _37=dojo.marginBox(this.thumbsNode);
265
var _38;
266
var _39;
267
if(this.isHorizontal){
268
_38=this.thumbWidth;
269
_39="w";
270
}else{
271
_38=this.thumbHeight;
272
_39="h";
273
}
274
_37=_37[_39];
275
var sl=this.thumbScroller.scrollLeft,st=this.thumbScroller.scrollTop;
276
dojo.style(this.thumbsNode,this._sizeProperty,(_37+_38+20)+"px");
277
this.thumbScroller.scrollLeft=sl;
278
this.thumbScroller.scrollTop=st;
279
this.thumbsNode.appendChild(_35);
280
dojo.connect(img,"onload",this,dojo.hitch(this,function(){
281
if(_34!=this.imageStore){
282
return false;
283
}
284
this.resize();
285
setTimeout(_33,0);
286
return false;
287
}));
288
dojo.connect(img,"onclick",this,function(evt){
289
dojo.publish(this.getClickTopicName(),[{index:evt.target._index,data:evt.target._data,url:img.getAttribute("src"),largeUrl:this.imageStore.getValue(_31,this.imageLargeAttr),title:this.imageStore.getValue(_31,this.titleAttr),link:this.imageStore.getValue(_31,this.linkAttr)}]);
290
return false;
291
});
292
dojo.addClass(img,"imageGalleryThumb");
293
img.setAttribute("src",url);
294
var _3a=this.imageStore.getValue(_31,this.titleAttr);
295
if(_3a){
296
img.setAttribute("title",_3a);
297
}
298
this._updateNavControls();
299
},_updateNavControls:function(){
300
var _3b=[];
301
var _3c=function(_3d,add){
302
var fn=add?"addClass":"removeClass";
303
dojo[fn](_3d,"enabled");
304
dojo[fn](_3d,"thumbClickable");
305
};
306
var pos=this.isHorizontal?"scrollLeft":"scrollTop";
307
var _3e=this.isHorizontal?"offsetWidth":"offsetHeight";
308
_3c(this.navPrev,(this.thumbScroller[pos]>0));
309
var _3f=this._thumbs[this._thumbs.length-1];
310
var _40=(this.thumbScroller[pos]+this._scrollerSize<this.thumbsNode[_3e]);
311
_3c(this.navNext,_40);
312
}});
313
}