Context Navigation

← Previous Changeset
Next Changeset →

Changeset 14523

Timestamp:

07/19/08 12:39:47 (4 months ago)

Author:

dante

Message:

refs #7202 - cleanup the pager widget some - !strict

Files:

: 1 modified

dojox/trunk/widget/Pager.js (modified) (15 diffs)

Legend:

: Unmodified
: Added
: Removed

dojox/trunk/widget/Pager.js

r14452	r14523
10	10	{
11	11	// summary: A Pager, displaying a list of sized nodes
	12
	13
12	14	templatePath: dojo.moduleUrl("dojox.widget", "Pager/Pager.html"),
13
	15
	16	/*=====
	17	// iconPrevious: String?
	18	// The url of the previous page icon
14	19	iconPrevious: "",
	20
	21	// iconNext: String?
	22	// The url of the next page icon
15	23	iconNext: "",
	24	=====*/
	25
16	26	iconPage: dojo.moduleUrl("dojox.widget", "Pager/images/pageInactive.png"),
17	27	iconPageActive: dojo.moduleUrl("dojox.widget", "Pager/images/pageActive.png"),
18	28
	29	// store: Object
	30	// A dojo.data Data store
19	31	store: null, // data store for items
20
	32
	33	// orientation: String
	34	// Either "horizontal or "vertical" to define the direction the pages will slide
21	35	orientation: "horizontal", // or vertical
22		statusPos: "leading", // leading \| trailing
	36
	37	// statusPos: String
	38	// A string describing where to put the Pager "current page" indicator. Options are
	39	// "leading" or "trailing". In the case of horiztonal orientation, "leading" indicates
	40	// positioned above the PageItems. In the case of vertical, "leading" indicates "before".
	41	statusPos: "leading",
	42
	43	// pagerPos: String
	44	// TODOC
23	45	pagerPos: "center",
	46
	47	// duration: Integer
	48	// Time in milliseconds to transition the pages
24	49	duration: 500,
	50
	51	// itemSpace: Integer
	52	// Spacing between items? TODOC
25	53	itemSpace: 2,
	54
	55	// resizeChildren: Boolean
	56	// TODOC
26	57	resizeChildren: true,
	58
	59	// itemClass: String
	60	// The full dotted named of a Class to use for the internal Pager Items.
27	61	itemClass: "dojox.widget._PagerItem",
28		itemsPage: 3, // displayed items per page
29		_currentPage: 1,
30		_totalPages: 0,
	62
	63	// itemsPage: Integer
	64	// The numbers of items to display in each "Page"
	65	itemsPage: 3,
31	66
32	67	postMixInProperties: function(){
33		if(this.orientation == "horizontal"){
34		this.iconPrevious = dojo.moduleUrl("dojox.widget", "Pager/images/hPrevious.png");
35		this.iconNext = dojo.moduleUrl("dojox.widget", "Pager/images/hNext.png");
36		this.dirClass = "pagerHorizontal";
37		}else{
38		this.iconPrevious = dojo.moduleUrl("dojox.widget", "Pager/images/vPrevious.png");
39		this.iconNext = dojo.moduleUrl("dojox.widget", "Pager/images/vNext.png");
40		this.dirClass = "pagerVertical";
41		}
	68	var h = (this.orientation == "horizontal");
	69	dojo.mixin(this,{
	70	_totalPages:0,
	71	_currentPage:1,
	72	dirClass: "pager" + (h ? "Horizontal" : "Vertical"),
	73	iconNext: dojo.moduleUrl("dojox.widget", "Pager/images/" + (h ? "h" : "v") + "Next.png"),
	74	iconPrevious: dojo.moduleUrl("dojox.widget", "Pager/images/" + (h ? "h" : "v") + "Previous.png")
	75	});
42	76	},
43	77
…	…
52	86
53	87	_a11yStyle: function(e){
54		// top level onfocus/onblur listen to set a class "pagerFocus" on some node
55		// and remove it onblur
	88	// summary: top level onfocus/onblur listen to set a class "pagerFocus" on some node
	89	// and remove it onblur
56	90	dojo[(e.type == "focus" ? "addClass" : "removeClass")](e.target,"pagerFocus");
57	91	},
58	92
59	93	_handleKey: function(e){
60
61	94	// summary: Handle keyboard navigation internally
	95
62	96	var dk = dojo.keys;
63	97	var key = (e.charCode == dk.SPACE ? dk.SPACE : e.keyCode);
…	…
97	131
98	132	_renderPages: function(){
99		if (this.orientation == "horizontal"){
	133	var pcv = this.pagerContainerView;
	134	var _h = (this.orientation == "horizontal");
	135	var style = dojo.style;
	136	if(_h){
	137
100	138	var pagerH = dojo.marginBox(this.pagerContainerPager).h;
101	139	var statusH = dojo.marginBox(this.pagerContainerStatus).h;
…	…
105	143	var addonHeight = statusH;
106	144	var widthSub = this.pagerIconNext.width;
107		var containerWidth = dojo.style(~~this.pagerContainerView~~, 'width');
	145	var containerWidth = dojo.style(pcv, 'width');
108	146	var newWidth = containerWidth-(2*widthSub);
109		~~dojo.style(this.pagerContainerView~~, {
	147	style(pcv, {
110	148	width: newWidth+'px',
111	149	marginLeft: this.pagerIconNext.width+'px',
…	…
113	151	});
114	152	}
115		var totalH = dojo.style(this.pagerContainer, 'height')-addonHeight;
116		dojo.style(this.pagerContainerView, 'height', totalH+'px');
117
118		var itemSpace = Math.floor(dojo.style(this.pagerContainerView, 'width')/this.itemsPage);
119		if (this.statusPos == 'trailing'){
	153	var totalH = style(this.pagerContainer, 'height') - addonHeight;
	154	style(this.pagerContainerView, 'height', totalH+'px');
	155
	156	var itemSpace = Math.floor(style(pcv, 'width') / this.itemsPage);
	157	if(this.statusPos == 'trailing'){
	158	if(this.pagerPos != 'center'){
	159	style(pcv, 'marginTop', pagerH+'px');
	160	}
	161	style(pcv, 'marginBottom', statusH+'px');
	162	}else{
	163	style(pcv, 'marginTop', statusH+'px');
120	164	if (this.pagerPos != 'center'){
121		~~dojo.style(this.pagerContainerView, 'marginTop~~', pagerH+'px');
	165	style(pcv, 'marginBottom', pagerH+'px');
122	166	}
123		~~dojo.style(this.pagerContainerView, 'marginBottom', statusH+'px');~~
124		~~}else{~~
125		~~dojo.style(this.pagerContainerView, 'marginTop', statusH+'px');~~
126		~~if (this.pagerPos != 'center'){~~
127		~~dojo.style(this.pagerContainerView, 'marginBottom', pagerH+'px');~~
128		}
129	167	}
130	168
131	169	}else{
	170
132	171	var pagerW = dojo.marginBox(this.pagerContainerPager).w;
133	172	var statusW = dojo.marginBox(this.pagerContainerStatus).w;
134		var containerW = ~~dojo.~~style(this.pagerContainer, 'width');
135		if (this.pagerPos != 'center'){
136		var addonWidth = pagerW+statusW;
	173	var containerW = style(this.pagerContainer, 'width');
	174	if(this.pagerPos != 'center'){
	175	var addonWidth = pagerW + statusW;
137	176	}else{
138	177	var addonWidth = statusW;
139	178	var heightSub = this.pagerIconNext.height;
140		var containerHeight = dojo.style(this.pagerContainerView, 'height');
141		var newHeight = containerHeight-(2*heightSub);
142		dojo.style(this.pagerContainerView, {
143		height: newHeight+'px',
144		marginTop: this.pagerIconNext.height+'px',
145		marginBottom: this.pagerIconNext.height+'px'});
146		}
147		var totalW = dojo.style(this.pagerContainer, 'width')-addonWidth;
148		dojo.style(this.pagerContainerView, 'width', totalW+'px');
149
150		var itemSpace = Math.floor(dojo.style(this.pagerContainerView, 'height')/this.itemsPage);
151		if (this.statusPos == 'trailing'){
	179	var containerHeight = style(pcv, 'height');
	180	var newHeight = containerHeight - (2 * heightSub);
	181	style(pcv,{
	182	height: newHeight+'px',
	183	marginTop: this.pagerIconNext.height+'px',
	184	marginBottom: this.pagerIconNext.height+'px'
	185	});
	186	}
	187	var totalW = style(this.pagerContainer, 'width') - addonWidth;
	188	style(pcv, 'width', totalW+'px');
	189
	190	var itemSpace = Math.floor(style(pcv, 'height') / this.itemsPage);
	191	if(this.statusPos == 'trailing'){
152	192	if (this.pagerPos != 'center'){
153		~~dojo.style(this.pagerContainerView, 'marginLeft', pagerW+~~'px');
	193	style(pcv, 'marginLeft', pagerW + 'px');
154	194	}
155		~~dojo.style(this.pagerContainerView, 'marginRight', statusW+~~'px');
156		}else{
157		~~dojo.style(this.pagerContainerView, 'marginLeft', statusW+~~'px');
158		if (this.pagerPos != 'center'){
159		~~dojo.style(this.pagerContainerView~~, 'marginRight', pagerW+'px');
	195	style(pcv, 'marginRight', statusW + 'px');
	196	}else{
	197	style(pcv, 'marginLeft', statusW + 'px');
	198	if(this.pagerPos != 'center'){
	199	style(pcv, 'marginRight', pagerW+'px');
160	200	}
161	201	}
…	…
163	203
164	204	var _PagerItem = dojo.getObject(this.itemClass);
	205	var paddingLead = (_h ? "paddingLeft" : "paddingTop");
	206	var paddingTrail = (_h ? "paddingRight" : "paddingBottom");
	207
165	208	dojo.forEach(this.items, function(item, cnt){
	209
166	210	var contentContainer = dojo.doc.createElement('div');
167	211	contentContainer.innerHTML = item.content;
168
169	212	var pagerItem = new _PagerItem({
170	213	id: this.id + '-item-' + (cnt + 1)
…	…
172	215
173	216	this.pagerItems.appendChild(pagerItem.domNode);
174		// create correct dimensions
175		if (this.orientation == 'horizontal'){
176		dojo.style(pagerItem.containerNode, {
177		width: (itemSpace-this.itemSpace)+"px",
178		height: dojo.style(this.pagerContainerView, "height")+"px"
179		});
180		var paddingLead = 'paddingLeft';
181		var paddingTrail = 'paddingRight';
182		}else{
183		dojo.style(pagerItem.containerNode, {
184		height: (itemSpace-this.itemSpace)+"px",
185		width: dojo.style(this.pagerContainerView, "width")+"px"
186		});
187		var paddingLead = 'paddingTop';
188		var paddingTrail = 'paddingBottom';
189		}
190		if (this.resizeChildren){
	217
	218	var containerProps = {};
	219	containerProps[(_h ? "width" : "height")] = (itemSpace - this.itemSpace) + "px";
	220	var p = (_h ? "height" : "width");
	221	containerProps[p] = style(pcv, p) + "px";
	222	style(pagerItem.containerNode, containerProps);
	223
	224	if(this.resizeChildren){
191	225	pagerItem.resizeChildren();
192	226	}
…	…
194	228
195	229	// only display amount of items as defined in itemsPage
196		dojo.style(pagerItem.domNode, "position", "absolute");
	230	style(pagerItem.domNode, "position", "absolute");
	231
197	232	if (cnt < this.itemsPage){
198		var pos = (cnt)*itemSpace;
199		if (this.orientation == 'horizontal'){
200		var trailingDir = 'left';
201		var dir = 'top';
202		}else{
203		var trailingDir = 'top';
204		var dir = 'left';
205		}
206
207		dojo.style(pagerItem.domNode, dir, "0px");
208		dojo.style(pagerItem.domNode, trailingDir, pos+"px");
209		}else{
210		dojo.style(pagerItem.domNode, "top", "-1000px");
211		dojo.style(pagerItem.domNode, "left", "-1000px");
212		}
213		dojo.style(pagerItem.domNode, paddingTrail, (this.itemSpace/2)+"px");
214		dojo.style(pagerItem.domNode, paddingLead, (this.itemSpace/2)+"px");
	233	var pos = (cnt) * itemSpace;
	234	var trailingDir = (_h ? "left" : "top");
	235	var dir = (_h ? "top" : "left");
	236	style(pagerItem.domNode, dir, "0px");
	237	style(pagerItem.domNode, trailingDir, pos+"px");
	238	}else{
	239	style(pagerItem.domNode, "top", "-1000px");
	240	style(pagerItem.domNode, "left", "-1000px");
	241	}
	242
	243	style(pagerItem.domNode, paddingTrail, (this.itemSpace/2)+"px");
	244	style(pagerItem.domNode, paddingLead, (this.itemSpace/2)+"px");
215	245
216	246	}, this);
…	…
218	248
219	249	_renderPager: function() {
220		if (this.orientation == "horizontal"){
221		if (this.statusPos == 'center'){
	250	var tcp = this.pagerContainerPager;
	251	var zero = "0px";
	252	var _h = (this.orientation == "horizontal");
	253	if(_h){
	254
	255	if(this.statusPos == 'center'){
222	256
223	257	}else if (this.statusPos == 'trailing'){
224		dojo.style(this.pagerContainerPager, 'top', '0px');
225		}else{
226		dojo.style(this.pagerContainerPager, 'bottom', '0px');
227		}
228		dojo.style(this.pagerNext, 'right', '0px');
229		dojo.style(this.pagerPrevious, 'left', '0px');
	258	dojo.style(tcp, 'top', zero);
	259	}else{
	260	dojo.style(tcp, 'bottom', zero);
	261	}
	262	dojo.style(this.pagerNext, 'right', zero);
	263	dojo.style(this.pagerPrevious, 'left', zero);
	264
230	265	}else{
	266
231	267	if (this.statusPos == 'trailing'){
232		dojo.style(this.pagerContainerPager, 'left', '0px');
233		}else{
234		dojo.style(this.pagerContainerPager, 'right', '0px');
235		}
236		dojo.style(this.pagerNext, 'bottom', '0px');
237		dojo.style(this.pagerPrevious, 'top', '0px');
238		}
	268	dojo.style(tcp, 'left', zero);
	269	}else{
	270	dojo.style(tcp, 'right', zero);
	271	}
	272	dojo.style(this.pagerNext, 'bottom', zero);
	273	dojo.style(this.pagerPrevious, 'top', zero);
	274	}
	275
239	276	},
240	277
241	278	_renderStatus: function() {
242	279	this._totalPages = Math.ceil(this.items.length / this.itemsPage);
243
	280	// FIXME!!
244	281	this.iconWidth = 0;
245	282	this.iconHeight = 0;
…	…
367	404	*/
368	405	var _anims = [];
369		for (var i=this._currentPagethis.itemsPage; i>(this._currentPage-1)this.itemsPage; i--){
	406	for (var i = this._currentPage * this.itemsPage; i > (this._currentPage - 1) * this.itemsPage; i--){
370	407	if (!dojo.byId(this.id+'-item-'+i)) continue;
371	408
…	…
413	450
414	451	this._anim = dojo.fx.combine(_anims);
415		var animConnect = ~~dojo.connect(this._anim, "onEnd", dojo.hitch(this~~, function(){
	452	var animConnect = this.connect(this._anim, "onEnd", function(){
416	453	delete this._anim;
417	454	this.onScrollEnd();
418		~~dojo~~.disconnect(animConnect);
419		}));
	455	this.disconnect(animConnect);
	456	});
420	457	this._anim.play();
421	458
…	…
426	463
427	464	_pagerPrevious: function(){
428		if(this._anim) return;
429
	465
	466	if(this._anim){ return; }
	467	var _h = (this.orientation == "horizontal");
430	468	var _anims = [];
431		for (var i=this._currentPagethis.itemsPage; i>(this._currentPage-1)this.itemsPage; i--){
432		if (!dojo.byId(this.id+'-item-'+i)) continue;
433
434		var currentItem = dojo.byId(this.id+'-item-'+i);
435		var marginBox = dojo.marginBox(currentItem);
436		if (this.orientation == "horizontal") {
437		var move = dojo.style(currentItem, 'left')+(this.itemsPage*marginBox.w);
438		_anims.push(dojo.fx.slideTo({node: currentItem, left: move, duration: this.duration}));
439		}else{
440		var move = dojo.style(currentItem, 'top')+(this.itemsPage*marginBox.h);
441		_anims.push(dojo.fx.slideTo({node: currentItem, top: move, duration: this.duration}));
442		}
	469
	470	var ip = this.itemsPage;
	471	var prop = (_h ? "left" : "top")
	472
	473	for (var i = this._currentPage * ip; i > (this._currentPage - 1) * ip; i--){
	474	var ci = dojo.byId(this.id + '-item-' + i);
	475	if(ci){
	476	var marginBox = dojo.marginBox(ci);
	477	var p = {};
	478	p[prop] = dojo.style(ci, prop) + (ip * marginBox[(_h ? "w" : "h")]);
	479	_anims.push(dojo.fx.slideTo(dojo.mixin({
	480	node: ci,
	481	duration: this.duration
	482	}, p)));
	483	}
	484
443	485	}
444	486
445	487	var previousPage = this._currentPage;
	488	// this._currentPage = (previousPage == 1 ? this._totalPages : this._currentPage--);
446	489	if (this._currentPage == 1){
447	490	this._currentPage = this._totalPages;
…	…
450	493	}
451	494
452		cnt = this.itemsPage;
453		var j=1;
454		for (var i=this._currentPagethis.itemsPage; i>(this._currentPage-1)this.itemsPage; i--){
455		if(dojo.byId(this.id+'-item-'+i)){
456		var currentItem = dojo.byId(this.id+'-item-'+i);
457		var marginBox = dojo.marginBox(currentItem);
458
459		if (this.orientation == "horizontal") {
460		newPos = -(j * marginBox.w) + 1;
461		dojo.style(currentItem, 'left', newPos+'px');
462		dojo.style(currentItem, 'top', '0px');
463
464		var move = ((cnt - 1) * marginBox.w);
465		_anims.push(dojo.fx.slideTo({node: currentItem, left: move, duration: this.duration}));
466
467		var move = newPos+(this.itemsPage * marginBox.w);
468		_anims.push(dojo.fx.slideTo({node: currentItem, left: move, duration: this.duration}));
469		}else{
470		newPos = -((j * marginBox.h) + 1);
471		dojo.style(currentItem, 'top', newPos+'px');
472		dojo.style(currentItem, 'left', '0px');
473
474		var move = ((cnt - 1) * marginBox.h);
475		_anims.push(dojo.fx.slideTo({node: currentItem, top: move, duration: this.duration}));
476		}
	495	var cnt = ip,
	496	j = 1;
	497
	498	for (var i = this._currentPage * ip; i > (this._currentPage - 1) * ip; i--){
	499	var ci = dojo.byId(this.id+'-item-'+i);
	500	if(ci){
	501
	502	var marginBox = dojo.marginBox(ci);
	503	var size = marginBox[(_h ? "w" : "h")];
	504	var prop = (_h ? "left" : "top"),
	505	p = {},
	506	pa = {};
	507
	508	p[prop] = (-1 * (j * size) + 1) + "px";
	509	p[(_h ? "top" : "left")] = "0px";
477	510
	511	pa[prop] = (_h ? (newPos + (ip * size)) : ((cnt - 1) * size));
	512	dojo.style(ci, p);
	513	_anims.push(
	514	dojo.fx.slideTo(dojo.mixin({
	515	node: ci,
	516	duration:this.duration
	517	}, pa))
	518	);
	519
478	520	}
479	521	cnt--;
…	…
482	524
483	525	this._anim = dojo.fx.combine(_anims);
484		var animConnect = ~~dojo.connect(this._anim, "onEnd", dojo.hitch(this~~, function(){
	526	var animConnect = this.connect(this._anim, "onEnd", function(){
485	527	delete this._anim;
486	528	this.onScrollEnd();
487		~~dojo~~.disconnect(animConnect);
488		}));
	529	this.disconnect(animConnect);
	530	});
489	531	this._anim.play();
490	532
…	…
492	534	dojo.byId(this.id + '-status-' + previousPage).src = this.iconPage;
493	535	dojo.byId(this.id + '-status-' + this._currentPage).src = this.iconPageActive;
	536
494	537	},
495	538
496	539	onScrollEnd: function(){
	540	// summary: Stub Function. Fired after the slide is complete. Override or connect.
497	541	}
498	542	});

Context Navigation

Changeset 14523

Legend:

dojox/trunk/widget/Pager.js

Download in other formats: