Project

General

Profile

Statistics
| Revision:

root / trunk / web / dojo / dojox / widget / Pager.js @ 13

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
}