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