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