root / trunk / web / dojo / dojox / widget / Pager.js @ 12
History | View | Annotate | Download (12.5 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.widget.Pager"]){ |
||
9 | dojo._hasResource["dojox.widget.Pager"]=true; |
||
10 | dojo.provide("dojox.widget.Pager");
|
||
11 | dojo.experimental("dojox.widget.Pager");
|
||
12 | dojo.require("dijit._Widget");
|
||
13 | dojo.require("dijit._Templated");
|
||
14 | dojo.require("dojo.fx");
|
||
15 | dojo.declare("dojox.widget.Pager",[dijit._Widget,dijit._Templated],{templateString:dojo.cache("dojox.widget","Pager/Pager.html","<div dojoAttachPoint=\"pagerContainer\" tabIndex=\"0\" dojoAttachEvent=\"onkeypress: _handleKey, onfocus: _a11yStyle, onblur:_a11yStyle\" class=\"${orientation}PagerContainer\">\n <div class=\"pagerContainer\">\n\t\t<div dojoAttachPoint=\"pagerContainerStatus\" class=\"${orientation}PagerStatus\"></div>\n\t\t<div dojoAttachPoint=\"pagerContainerView\" class=\"${orientation}PagerView\">\n\t\t <div dojoAttachPoint=\"pagerItemContainer\"><ul dojoAttachPoint=\"pagerItems\" class=\"pagerItems\"></ul></div>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"pagerContainerPager\" class=\"${orientation}PagerPager\">\n\t\t\t<div tabIndex=\"0\" dojoAttachPoint=\"pagerNext\" class=\"pagerIconContainer\" dojoAttachEvent=\"onclick: _pagerNext\"><img dojoAttachPoint=\"pagerIconNext\" src=\"${iconNext}\" alt=\"Next\" /></div>\n\t\t\t<div tabIndex=\"0\" dojoAttachPoint=\"pagerPrevious\" class=\"pagerIconContainer\" dojoAttachEvent=\"onclick: _pagerPrevious\"><img dojoAttachPoint=\"pagerIconPrevious\" src=\"${iconPrevious}\" alt=\"Previous\" /></div>\n\t\t</div>\n </div>\n\t<div dojoAttachPoint=\"containerNode\" style=\"display:none\"></div>\n</div>\n"),iconPage:dojo.moduleUrl("dojox.widget","Pager/images/pageInactive.png"),iconPageActive:dojo.moduleUrl("dojox.widget","Pager/images/pageActive.png"),store:null,orientation:"horizontal",statusPos:"leading",pagerPos:"center",duration:500,itemSpace:2,resizeChildren:true,itemClass:"dojox.widget._PagerItem",itemsPage:3,postMixInProperties:function(){ |
||
16 | var h=(this.orientation=="horizontal"); |
||
17 | dojo.mixin(this,{_totalPages:0,_currentPage:1,dirClass:"pager"+(h?"Horizontal":"Vertical"),iconNext:dojo.moduleUrl("dojox.widget","Pager/images/"+(h?"h":"v")+"Next.png"),iconPrevious:dojo.moduleUrl("dojox.widget","Pager/images/"+(h?"h":"v")+"Previous.png")}); |
||
18 | },postCreate:function(){ |
||
19 | this.inherited(arguments); |
||
20 | this.store.fetch({onComplete:dojo.hitch(this,"_init")}); |
||
21 | },_a11yStyle:function(e){ |
||
22 | dojo[(e.type=="focus"?"addClass":"removeClass")](e.target,"pagerFocus"); |
||
23 | },_handleKey:function(e){ |
||
24 | var dk=dojo.keys;
|
||
25 | var _1=(e.charCode==dk.SPACE?dk.SPACE:e.keyCode);
|
||
26 | switch(_1){
|
||
27 | case dk.UP_ARROW:
|
||
28 | case dk.RIGHT_ARROW:
|
||
29 | case 110: |
||
30 | case 78: |
||
31 | e.preventDefault(); |
||
32 | this._pagerNext();
|
||
33 | break;
|
||
34 | case dk.DOWN_ARROW:
|
||
35 | case dk.LEFT_ARROW:
|
||
36 | case 112: |
||
37 | case 80: |
||
38 | e.preventDefault(); |
||
39 | this._pagerPrevious();
|
||
40 | break;
|
||
41 | case dk.ENTER:
|
||
42 | switch(e.target){
|
||
43 | case this.pagerNext: |
||
44 | this._pagerNext();
|
||
45 | break;
|
||
46 | case this.pagerPrevious: |
||
47 | this._pagerPrevious();
|
||
48 | break;
|
||
49 | } |
||
50 | break;
|
||
51 | } |
||
52 | },_init:function(_2){ |
||
53 | this.items=_2;
|
||
54 | this._renderPages();
|
||
55 | this._renderStatus();
|
||
56 | this._renderPager();
|
||
57 | },_renderPages:function(){ |
||
58 | var _3=this.pagerContainerView; |
||
59 | var _4=(this.orientation=="horizontal"); |
||
60 | var _5=dojo.style;
|
||
61 | if(_4){
|
||
62 | var _6=dojo.marginBox(this.pagerContainerPager).h; |
||
63 | var _7=dojo.marginBox(this.pagerContainerStatus).h; |
||
64 | if(this.pagerPos!="center"){ |
||
65 | var _8=_6+_7;
|
||
66 | }else{
|
||
67 | var _8=_7;
|
||
68 | var _9=this.pagerIconNext.width; |
||
69 | var _a=_5(_3,"width"); |
||
70 | var _b=_a-(2*_9); |
||
71 | _5(_3,{width:_b+"px",marginLeft:this.pagerIconNext.width+"px",marginRight:this.pagerIconNext.width+"px"}); |
||
72 | } |
||
73 | var _c=_5(this.pagerContainer,"height")-_8; |
||
74 | _5(this.pagerContainerView,"height",_c+"px"); |
||
75 | var _d=Math.floor(_5(_3,"width")/this.itemsPage); |
||
76 | if(this.statusPos=="trailing"){ |
||
77 | if(this.pagerPos!="center"){ |
||
78 | _5(_3,"marginTop",_6+"px"); |
||
79 | } |
||
80 | _5(_3,"marginBottom",_7+"px"); |
||
81 | }else{
|
||
82 | _5(_3,"marginTop",_7+"px"); |
||
83 | if(this.pagerPos!="center"){ |
||
84 | _5(_3,"marginTop",_6+"px"); |
||
85 | } |
||
86 | } |
||
87 | }else{
|
||
88 | var _e=dojo.marginBox(this.pagerContainerPager).w; |
||
89 | var _f=dojo.marginBox(this.pagerContainerStatus).w; |
||
90 | var _10=_5(this.pagerContainer,"width"); |
||
91 | if(this.pagerPos!="center"){ |
||
92 | var _11=_e+_f;
|
||
93 | }else{
|
||
94 | var _11=_f;
|
||
95 | var _12=this.pagerIconNext.height; |
||
96 | var _13=_5(_3,"height"); |
||
97 | var _14=_13-(2*_12); |
||
98 | _5(_3,{height:_14+"px",marginTop:this.pagerIconNext.height+"px",marginBottom:this.pagerIconNext.height+"px"}); |
||
99 | } |
||
100 | var _15=_5(this.pagerContainer,"width")-_11; |
||
101 | _5(_3,"width",_15+"px"); |
||
102 | var _d=Math.floor(_5(_3,"height")/this.itemsPage); |
||
103 | if(this.statusPos=="trailing"){ |
||
104 | if(this.pagerPos!="center"){ |
||
105 | _5(_3,"marginLeft",_e+"px"); |
||
106 | } |
||
107 | _5(_3,"marginRight",_f+"px"); |
||
108 | }else{
|
||
109 | _5(_3,"marginLeft",_f+"px"); |
||
110 | if(this.pagerPos!="center"){ |
||
111 | _5(_3,"marginRight",_e+"px"); |
||
112 | } |
||
113 | } |
||
114 | } |
||
115 | var _16=dojo.getObject(this.itemClass); |
||
116 | var _17="padding"+(_4?"Left":"Top"); |
||
117 | var _18="padding"+(_4?"Right":"Bottom"); |
||
118 | dojo.forEach(this.items,function(_19,cnt){ |
||
119 | var _1a=dojo.create("div",{innerHTML:_19.content}); |
||
120 | var _1b=new _16({id:this.id+"-item-"+(cnt+1)},_1a); |
||
121 | this.pagerItems.appendChild(_1b.domNode);
|
||
122 | var _1c={};
|
||
123 | _1c[(_4?"width":"height")]=(_d-this.itemSpace)+"px"; |
||
124 | var p=(_4?"height":"width"); |
||
125 | _1c[p]=_5(_3,p)+"px";
|
||
126 | _5(_1b.containerNode,_1c); |
||
127 | if(this.resizeChildren){ |
||
128 | _1b.resizeChildren(); |
||
129 | } |
||
130 | _1b.parseChildren(); |
||
131 | _5(_1b.domNode,"position","absolute"); |
||
132 | if(cnt<this.itemsPage){ |
||
133 | var pos=(cnt)*_d;
|
||
134 | var _1d=(_4?"left":"top"); |
||
135 | var dir=(_4?"top":"left"); |
||
136 | _5(_1b.domNode,dir,"0px");
|
||
137 | _5(_1b.domNode,_1d,pos+"px");
|
||
138 | }else{
|
||
139 | _5(_1b.domNode,"top","-1000px"); |
||
140 | _5(_1b.domNode,"left","-1000px"); |
||
141 | } |
||
142 | _5(_1b.domNode,_18,(this.itemSpace/2)+"px"); |
||
143 | _5(_1b.domNode,_17,(this.itemSpace/2)+"px"); |
||
144 | },this);
|
||
145 | },_renderPager:function(){ |
||
146 | var tcp=this.pagerContainerPager; |
||
147 | var _1e="0px"; |
||
148 | var _1f=(this.orientation=="horizontal"); |
||
149 | if(_1f){
|
||
150 | if(this.statusPos=="center"){ |
||
151 | }else{
|
||
152 | if(this.statusPos=="trailing"){ |
||
153 | dojo.style(tcp,"top",_1e);
|
||
154 | }else{
|
||
155 | dojo.style(tcp,"bottom",_1e);
|
||
156 | } |
||
157 | } |
||
158 | dojo.style(this.pagerNext,"right",_1e); |
||
159 | dojo.style(this.pagerPrevious,"left",_1e); |
||
160 | }else{
|
||
161 | if(this.statusPos=="trailing"){ |
||
162 | dojo.style(tcp,"left",_1e);
|
||
163 | }else{
|
||
164 | dojo.style(tcp,"right",_1e);
|
||
165 | } |
||
166 | dojo.style(this.pagerNext,"bottom",_1e); |
||
167 | dojo.style(this.pagerPrevious,"top",_1e); |
||
168 | } |
||
169 | },_renderStatus:function(){ |
||
170 | this._totalPages=Math.ceil(this.items.length/this.itemsPage); |
||
171 | this.iconWidth=0; |
||
172 | this.iconHeight=0; |
||
173 | this.iconsLoaded=0; |
||
174 | this._iconConnects=[];
|
||
175 | for(var i=1;i<=this._totalPages;i++){ |
||
176 | var _20=new Image(); |
||
177 | var _21=i;
|
||
178 | dojo.connect(_20,"onclick",dojo.hitch(this,function(_22){ |
||
179 | this._pagerSkip(_22);
|
||
180 | },_21)); |
||
181 | this._iconConnects[_21]=dojo.connect(_20,"onload",dojo.hitch(this,function(_23){ |
||
182 | this.iconWidth+=_20.width;
|
||
183 | this.iconHeight+=_20.height;
|
||
184 | this.iconsLoaded++;
|
||
185 | if(this._totalPages==this.iconsLoaded){ |
||
186 | if(this.orientation=="horizontal"){ |
||
187 | if(this.statusPos=="trailing"){ |
||
188 | if(this.pagerPos=="center"){ |
||
189 | var _24=dojo.style(this.pagerContainer,"height"); |
||
190 | var _25=dojo.style(this.pagerContainerStatus,"height"); |
||
191 | dojo.style(this.pagerContainerPager,"top",((_24/2)-(_25/2))+"px"); |
||
192 | } |
||
193 | dojo.style(this.pagerContainerStatus,"bottom","0px"); |
||
194 | }else{
|
||
195 | if(this.pagerPos=="center"){ |
||
196 | var _24=dojo.style(this.pagerContainer,"height"); |
||
197 | var _25=dojo.style(this.pagerContainerStatus,"height"); |
||
198 | dojo.style(this.pagerContainerPager,"bottom",((_24/2)-(_25/2))+"px"); |
||
199 | } |
||
200 | dojo.style(this.pagerContainerStatus,"top","0px"); |
||
201 | } |
||
202 | var _26=(dojo.style(this.pagerContainer,"width")/2)-(this.iconWidth/2); |
||
203 | dojo.style(this.pagerContainerStatus,"paddingLeft",_26+"px"); |
||
204 | }else{
|
||
205 | if(this.statusPos=="trailing"){ |
||
206 | if(this.pagerPos=="center"){ |
||
207 | var _27=dojo.style(this.pagerContainer,"width"); |
||
208 | var _28=dojo.style(this.pagerContainerStatus,"width"); |
||
209 | dojo.style(this.pagerContainerPager,"left",((_27/2)-(_28/2))+"px"); |
||
210 | } |
||
211 | dojo.style(this.pagerContainerStatus,"right","0px"); |
||
212 | }else{
|
||
213 | if(this.pagerPos=="center"){ |
||
214 | var _27=dojo.style(this.pagerContainer,"width"); |
||
215 | var _28=dojo.style(this.pagerContainerStatus,"width"); |
||
216 | dojo.style(this.pagerContainerPager,"right",((_27/2)-(_28/2))+"px"); |
||
217 | } |
||
218 | dojo.style(this.pagerContainerStatus,"left","0px"); |
||
219 | } |
||
220 | var _26=(dojo.style(this.pagerContainer,"height")/2)-(this.iconHeight/2); |
||
221 | dojo.style(this.pagerContainerStatus,"paddingTop",_26+"px"); |
||
222 | } |
||
223 | } |
||
224 | dojo.disconnect(this._iconConnects[_23]);
|
||
225 | },_21)); |
||
226 | if(i==this._currentPage){ |
||
227 | _20.src=this.iconPageActive;
|
||
228 | }else{
|
||
229 | _20.src=this.iconPage;
|
||
230 | } |
||
231 | var _21=i;
|
||
232 | dojo.addClass(_20,this.orientation+"PagerIcon"); |
||
233 | dojo.attr(_20,"id",this.id+"-status-"+i); |
||
234 | this.pagerContainerStatus.appendChild(_20);
|
||
235 | if(this.orientation=="vertical"){ |
||
236 | dojo.style(_20,"display","block"); |
||
237 | } |
||
238 | } |
||
239 | },_pagerSkip:function(_29){ |
||
240 | if(this._currentPage==_29){ |
||
241 | return;
|
||
242 | }else{
|
||
243 | var _2a;
|
||
244 | var _2b;
|
||
245 | if(_29<this._currentPage){ |
||
246 | _2a=this._currentPage-_29;
|
||
247 | _2b=(this._totalPages+_29)-this._currentPage; |
||
248 | }else{
|
||
249 | _2a=(this._totalPages+this._currentPage)-_29; |
||
250 | _2b=_29-this._currentPage;
|
||
251 | } |
||
252 | var b=(_2b>_2a);
|
||
253 | this._toScroll=(b?_2a:_2b);
|
||
254 | var cmd=(b?"_pagerPrevious":"_pagerNext"); |
||
255 | var _2c=this.connect(this,"onScrollEnd",function(){ |
||
256 | this._toScroll--;
|
||
257 | if(this._toScroll<1){ |
||
258 | this.disconnect(_2c);
|
||
259 | }else{
|
||
260 | this[cmd]();
|
||
261 | } |
||
262 | }); |
||
263 | this[cmd]();
|
||
264 | } |
||
265 | },_pagerNext:function(){ |
||
266 | if(this._anim){ |
||
267 | return;
|
||
268 | } |
||
269 | var _2d=[];
|
||
270 | for(var i=this._currentPage*this.itemsPage;i>(this._currentPage-1)*this.itemsPage;i--){ |
||
271 | if(!dojo.byId(this.id+"-item-"+i)){ |
||
272 | continue;
|
||
273 | } |
||
274 | var _2e=dojo.byId(this.id+"-item-"+i); |
||
275 | var _2f=dojo.marginBox(_2e);
|
||
276 | if(this.orientation=="horizontal"){ |
||
277 | var _30=_2f.l-(this.itemsPage*_2f.w); |
||
278 | _2d.push(dojo.fx.slideTo({node:_2e,left:_30,duration:this.duration})); |
||
279 | }else{
|
||
280 | var _30=_2f.t-(this.itemsPage*_2f.h); |
||
281 | _2d.push(dojo.fx.slideTo({node:_2e,top:_30,duration:this.duration})); |
||
282 | } |
||
283 | } |
||
284 | var _31=this._currentPage; |
||
285 | if(this._currentPage==this._totalPages){ |
||
286 | this._currentPage=1; |
||
287 | }else{
|
||
288 | this._currentPage++;
|
||
289 | } |
||
290 | var cnt=this.itemsPage; |
||
291 | for(var i=this._currentPage*this.itemsPage;i>(this._currentPage-1)*this.itemsPage;i--){ |
||
292 | if(dojo.byId(this.id+"-item-"+i)){ |
||
293 | var _2e=dojo.byId(this.id+"-item-"+i); |
||
294 | var _2f=dojo.marginBox(_2e);
|
||
295 | if(this.orientation=="horizontal"){ |
||
296 | var _32=(dojo.style(this.pagerContainerView,"width")+((cnt-1)*_2f.w))-1; |
||
297 | dojo.style(_2e,"left",_32+"px"); |
||
298 | dojo.style(_2e,"top","0px"); |
||
299 | var _30=_32-(this.itemsPage*_2f.w); |
||
300 | _2d.push(dojo.fx.slideTo({node:_2e,left:_30,duration:this.duration})); |
||
301 | }else{
|
||
302 | _32=(dojo.style(this.pagerContainerView,"height")+((cnt-1)*_2f.h))-1; |
||
303 | dojo.style(_2e,"top",_32+"px"); |
||
304 | dojo.style(_2e,"left","0px"); |
||
305 | var _30=_32-(this.itemsPage*_2f.h); |
||
306 | _2d.push(dojo.fx.slideTo({node:_2e,top:_30,duration:this.duration})); |
||
307 | } |
||
308 | } |
||
309 | cnt--; |
||
310 | } |
||
311 | this._anim=dojo.fx.combine(_2d);
|
||
312 | var _33=this.connect(this._anim,"onEnd",function(){ |
||
313 | delete this._anim; |
||
314 | this.onScrollEnd();
|
||
315 | this.disconnect(_33);
|
||
316 | }); |
||
317 | this._anim.play();
|
||
318 | dojo.byId(this.id+"-status-"+_31).src=this.iconPage; |
||
319 | dojo.byId(this.id+"-status-"+this._currentPage).src=this.iconPageActive; |
||
320 | },_pagerPrevious:function(){ |
||
321 | if(this._anim){ |
||
322 | return;
|
||
323 | } |
||
324 | var _34=[];
|
||
325 | for(var i=this._currentPage*this.itemsPage;i>(this._currentPage-1)*this.itemsPage;i--){ |
||
326 | if(!dojo.byId(this.id+"-item-"+i)){ |
||
327 | continue;
|
||
328 | } |
||
329 | var _35=dojo.byId(this.id+"-item-"+i); |
||
330 | var _36=dojo.marginBox(_35);
|
||
331 | if(this.orientation=="horizontal"){ |
||
332 | var _37=dojo.style(_35,"left")+(this.itemsPage*_36.w); |
||
333 | _34.push(dojo.fx.slideTo({node:_35,left:_37,duration:this.duration})); |
||
334 | }else{
|
||
335 | var _37=dojo.style(_35,"top")+(this.itemsPage*_36.h); |
||
336 | _34.push(dojo.fx.slideTo({node:_35,top:_37,duration:this.duration})); |
||
337 | } |
||
338 | } |
||
339 | var _38=this._currentPage; |
||
340 | if(this._currentPage==1){ |
||
341 | this._currentPage=this._totalPages; |
||
342 | }else{
|
||
343 | this._currentPage--;
|
||
344 | } |
||
345 | var cnt=this.itemsPage; |
||
346 | var j=1; |
||
347 | for(var i=this._currentPage*this.itemsPage;i>(this._currentPage-1)*this.itemsPage;i--){ |
||
348 | if(dojo.byId(this.id+"-item-"+i)){ |
||
349 | var _35=dojo.byId(this.id+"-item-"+i); |
||
350 | var _36=dojo.marginBox(_35);
|
||
351 | if(this.orientation=="horizontal"){ |
||
352 | var _39=-(j*_36.w)+1; |
||
353 | dojo.style(_35,"left",_39+"px"); |
||
354 | dojo.style(_35,"top","0px"); |
||
355 | var _37=((cnt-1)*_36.w); |
||
356 | _34.push(dojo.fx.slideTo({node:_35,left:_37,duration:this.duration})); |
||
357 | var _37=_39+(this.itemsPage*_36.w); |
||
358 | _34.push(dojo.fx.slideTo({node:_35,left:_37,duration:this.duration})); |
||
359 | }else{
|
||
360 | _39=-((j*_36.h)+1);
|
||
361 | dojo.style(_35,"top",_39+"px"); |
||
362 | dojo.style(_35,"left","0px"); |
||
363 | var _37=((cnt-1)*_36.h); |
||
364 | _34.push(dojo.fx.slideTo({node:_35,top:_37,duration:this.duration})); |
||
365 | } |
||
366 | } |
||
367 | cnt--; |
||
368 | j++; |
||
369 | } |
||
370 | this._anim=dojo.fx.combine(_34);
|
||
371 | var _3a=dojo.connect(this._anim,"onEnd",dojo.hitch(this,function(){ |
||
372 | delete this._anim; |
||
373 | this.onScrollEnd();
|
||
374 | dojo.disconnect(_3a); |
||
375 | })); |
||
376 | this._anim.play();
|
||
377 | dojo.byId(this.id+"-status-"+_38).src=this.iconPage; |
||
378 | dojo.byId(this.id+"-status-"+this._currentPage).src=this.iconPageActive; |
||
379 | },onScrollEnd:function(){ |
||
380 | }}); |
||
381 | dojo.declare("dojox.widget._PagerItem",[dijit._Widget,dijit._Templated],{templateString:"<li class=\"pagerItem\" dojoAttachPoint=\"containerNode\"></li>",resizeChildren:function(){ |
||
382 | var box=dojo.marginBox(this.containerNode); |
||
383 | dojo.style(this.containerNode.firstChild,{width:box.w+"px",height:box.h+"px"}); |
||
384 | },parseChildren:function(){ |
||
385 | dojo.parser.parse(this.containerNode);
|
||
386 | }}); |
||
387 | } |