Skip to content

Commit bbafec9

Browse files
author
Ian Moffitt
committed
Added hash changes. Still need to write tests
1 parent b997ed5 commit bbafec9

File tree

1 file changed

+183
-98
lines changed

1 file changed

+183
-98
lines changed

‎src/staticpager.js‎

Lines changed: 183 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,100 @@
2323
return s;
2424
}
2525

26+
// Hash parsing
27+
function h() {
28+
29+
var vars = [],
30+
grabUrl = window.location.hash,
31+
parts,
32+
pieces,
33+
qs = '';
34+
35+
if (typeof arguments[0] === 'string') {
36+
qs = arguments[0];
37+
}
38+
39+
if (typeof grabUrl !== 'undefined' && grabUrl !== '') {
40+
grabUrl = grabUrl.replace('#', '');
41+
parts = grabUrl.split('&');
42+
for (var j in parts) {
43+
if (parts.hasOwnProperty(j)) {
44+
pieces = parts[j].split('=');
45+
if (vars.length !== 0) {
46+
var found = false;
47+
for (var i in vars) {
48+
if (vars.hasOwnProperty(i)) {
49+
50+
if (vars[i].name === pieces[0].toString()) {
51+
found = true;
52+
}
53+
}
54+
}
55+
if (found) {
56+
vars[i].values.push(pieces[1]);
57+
} else {
58+
vars.push({ 'name' : pieces[0].toString(), 'values' : [pieces[1]] });
59+
}
60+
} else {
61+
vars.push({ 'name' : pieces[0].toString(), 'values' : [pieces[1]] });
62+
}
63+
}
64+
}
65+
if (qs !== '') {
66+
for (var b in vars) {
67+
if (vars.hasOwnProperty(b)) {
68+
if (vars[b].name === qs) {
69+
return vars[b].values;
70+
}
71+
}
72+
}
73+
return ['-1'];
74+
}
75+
return vars;
76+
} else {
77+
return [];
78+
}
79+
80+
}
81+
82+
function tH(hashObject) {
83+
84+
var h = hashObject,
85+
b = '',
86+
c = 0,
87+
cc = 0;
88+
89+
for (var j in h) {
90+
if (h.hasOwnProperty(j)) {
91+
c += 1;
92+
93+
var name = h[j].name,
94+
vals = h[j].values;
95+
96+
cc = 0;
97+
98+
for (var k in vals) {
99+
if (vals.hasOwnProperty(k)) {
100+
cc += 1;
101+
b += name + "=" + vals[k];
102+
103+
if (cc !== vals.length) {
104+
b += "&";
105+
}
106+
}
107+
}
108+
109+
if (c !== h.length) {
110+
b += "&";
111+
}
112+
113+
}
114+
}
115+
116+
return b;
117+
118+
}
119+
26120
/* IndexOf polyfill */
27121
if (!Array.prototype.indexOf) {
28122
Array.prototype.indexOf = function(searchElement, fromIndex) {
@@ -122,7 +216,26 @@
122216
base.count.results = base.$el.find('li').length;
123217
base.count.pages = Math.ceil(base.count.results / base.options.pageSize);
124218

125-
base.pIndex = 1; // TODO make this work based on Hash or options. #HASH
219+
if (h(base.options.hashQuery).length > 0) {
220+
base.pIndex = parseInt(h(base.options.hashQuery)[0], 10);
221+
} else {
222+
base.pIndex = 1;
223+
}
224+
225+
if (base.pIndex == 1) {
226+
if (base.options.pageStart !== 1) {
227+
base.pIndex = parseInt(base.options.pageStart, 10);
228+
}
229+
}
230+
231+
if (base.pIndex > base.count.pages) {
232+
base.pIndex = base.count.pages;
233+
}
234+
235+
if (base.pIndex < 1) {
236+
base.pIndex = 1;
237+
}
238+
126239
base.pages = [];
127240

128241
// Render caching
@@ -138,11 +251,6 @@
138251

139252
base.build();
140253

141-
// TODO: Make this a bit better. I'm just kindof assuming we're on page 1 when we start.
142-
// If I ever want to add in some sort of hash based page jumping, I'll need to improve this.
143-
$('.next', base.$el).css('visibility', 'visible');
144-
$('.prev', base.$el).css('visibility', 'hidden');
145-
146254
// Watch for events
147255
$('.prev, .pager, .next', base.$el).on("click", function() {
148256

@@ -156,60 +264,7 @@
156264
base.pIndex = parseInt($(this).text(), 10);
157265
}
158266

159-
$('.pagingListItem', base.$el).css('display', 'none'); //Hide every pagingListItem.
160-
$('#page' + base.pIndex, base.$el).css('display', 'block'); //Reveal the desired pagingListItem.
161-
$('#currentPage', base.$el).text(base.pIndex);
162-
$('#resultStart', base.$el).text((base.pIndex * base.options.pageSize) - (base.options.pageSize - 1));
163-
if (base.pIndex === base.count.pages) {
164-
$('#resultEnd', base.$el).text(base.count.results);
165-
} else {
166-
$('#resultEnd', base.$el).text(base.pIndex * base.options.pageSize);
167-
}
168-
169-
//Just some logic for handling the first and last pages.
170-
if (base.pIndex === base.count.pages) {
171-
$('.next', base.$el).css('visibility', 'hidden');
172-
$('.prev', base.$el).css('visibility', 'visible');
173-
} else if (base.pIndex === 1) {
174-
$('.next', base.$el).css('visibility', 'visible');
175-
$('.prev', base.$el).css('visibility', 'hidden');
176-
} else {
177-
$('.next', base.$el).css('visibility', 'visible');
178-
$('.prev', base.$el).css('visibility', 'visible');
179-
}
180-
181-
if (!base.options.truncate) {
182-
$('.tInd, .bInd', base.$el).hide(); //.css('display','none');//Hide all spans.
183-
$('.pager', base.$el).css('display', 'inline'); //Reveal all links.
184-
$('#tPager' + base.pIndex + ', #bPager' + base.pIndex, base.$el).css('display', 'none'); //Hide the page link for the newly exposed page.
185-
$('#tInd' + base.pIndex + ', #bInd' + base.pIndex, base.$el).css('display', 'inline'); //Reveal the span for the newly exposed page.
186-
} else {
187-
188-
$('#top_fEllip, #bot_fEllip, #top_lEllip, #bot_lEllip, .pager, .tInd, .bInd', base.$el).css('display', 'none');
189-
190-
if (base.pIndex > 4) {
191-
$('#top_fEllip, #bot_fEllip', base.$el).css('display', 'inline');
192-
}
193-
194-
// Show ellipses if NOT on 4th to last page or greater
195-
// This is so we get
196-
// prev 1 2 ... 45 '46' 47 48 49 next
197-
// and not
198-
// prev 1 2 ... 45 '46' 47 ... 48 49 next
199-
if (base.pIndex < (base.count.pages - 3)) {
200-
$('#top_lEllip, #bot_lEllip', base.$el).css('display', 'inline');
201-
}
202-
203-
for (j = 1; j <= base.count.pages; j += 1) {
204-
// this page last page next page 2 or less last 2 pages
205-
if (j === base.pIndex || j === (base.pIndex - 1) || j === (base.pIndex + 1) || j <= 2 || j >= (base.count.pages - 1)) {
206-
$('#bPager' + j + ', #tPager' + j, base.$el).css('display', 'inline');
207-
}
208-
}
209-
210-
$('#tPager' + base.pIndex + ', #bPager' + base.pIndex, base.$el).css('display', 'none'); //Hide the page link for the newly exposed page.
211-
$('#tInd' + base.pIndex + ', #bInd' + base.pIndex, base.$el).css('display', 'inline'); //Reveal the span for the newly exposed page.
212-
}
267+
base.pageState();
213268

214269
base.options.after($(this).selector, base);
215270

@@ -218,11 +273,6 @@
218273
});
219274

220275
$('.showAllItems', base.$el).on('click', function() {
221-
/*$('.result', base.$el).each(function(index) {
222-
$(this, base.$el).appendTo($('.result-holder'));
223-
});
224-
$('#bottomPaging, #topPaging, .pagingListItem', base.$el).remove();*/
225-
226276
base.destroy();
227277
});
228278

@@ -279,7 +329,7 @@
279329
status = $(t(base.templates.status, {
280330
pageIndex: base.pIndex,
281331
pageCount: base.count.pages,
282-
resultStart: 1, // #HASH: Will change based on Hash or options. Set to Hash or option's value.
332+
resultStart: base.pIndex, // #HASH: Will change based on Hash or options. Set to Hash or option's value.
283333
resultEnd: base.options.pageSize, // #HASH: Will change based on Hash or options. Multiplied by Hash/option value and self
284334
resultCount: base.count.results
285335
}));
@@ -334,41 +384,76 @@
334384
$('#bottomPaging .rightSide', base.$el).append('<span id="bot_lEllip">...</span>');
335385
}
336386

337-
//Since we are starting on page 1, we will hide all subsequent pages.
338-
if (i > 1) {
339-
$('#page' + i).css('display', 'none');
340-
}
341387
}
342-
$('#tPager1, #bPager1, #top_fEllip, #bot_fEllip', base.$el).css('display', 'none'); //Since we are starting on page 1, we will hide the first paging links in both the top and bottom nav.
343-
$('#tInd1, #bInd1', base.$el).css('display', 'inline'); //Since we are starting on page 1, we will reveal the span tag for the first page status in both the top and bottom nav.
344-
$('#bottomPaging span[id^="bInd"]', base.$el).each(function(index) {
345-
if (index !== 0) {
346-
$(this).hide();
347-
}
348-
});
349388

350-
$('#topPaging span[id^="tInd"]', base.$el).each(function(index) {
351-
if (index !== 0) {
352-
$(this).hide();
353-
}
354-
});
389+
$('.paging .rightSide', base.$el).append('<a href="#" class="next">' + base.options.nextText + '</a>');
390+
391+
base.pageState();
392+
393+
base.options.end();
394+
395+
};
396+
397+
base.pageState = function() {
355398

356-
$('.paging .rightSide', base.$el).append('<a href="#" class="next">' + base.options.nextText + '</a>'); //Stick a 'next' link on the end. This 1 line works for both top and bottom.
357399
$('.pagingListItem', base.$el).css('display', 'none'); //Hide every pagingListItem.
358400
$('#page' + base.pIndex, base.$el).css('display', 'block'); //Reveal the desired pagingListItem.
359-
if (base.options.truncate) {
360-
for (key in base.pages) {
361-
if (base.pages.hasOwnProperty(key)) {
362-
if (key > 3 && key < (base.count.pages - 1)) {
363-
$('#tPager' + key + ',#tInd' + key + ',#bPager' + key + ',#bInd').css('display', 'none');
364-
}
401+
$('#currentPage', base.$el).text(base.pIndex);
402+
$('#resultStart', base.$el).text((base.pIndex * base.options.pageSize) - (base.options.pageSize - 1));
403+
if (base.pIndex === base.count.pages) {
404+
$('#resultEnd', base.$el).text(base.count.results);
405+
} else {
406+
$('#resultEnd', base.$el).text(base.pIndex * base.options.pageSize);
407+
}
408+
409+
//Just some logic for handling the first and last pages.
410+
if (base.pIndex === base.count.pages) {
411+
$('.next', base.$el).css('visibility', 'hidden');
412+
$('.prev', base.$el).css('visibility', 'visible');
413+
} else if (base.pIndex === 1) {
414+
$('.next', base.$el).css('visibility', 'visible');
415+
$('.prev', base.$el).css('visibility', 'hidden');
416+
} else {
417+
$('.next', base.$el).css('visibility', 'visible');
418+
$('.prev', base.$el).css('visibility', 'visible');
419+
}
420+
421+
window.location.hash = base.options.hashQuery + "=" + base.pIndex;
422+
423+
if (!base.options.truncate) {
424+
$('.tInd, .bInd', base.$el).hide(); //.css('display','none');//Hide all spans.
425+
$('.pager', base.$el).css('display', 'inline'); //Reveal all links.
426+
$('#tPager' + base.pIndex + ', #bPager' + base.pIndex, base.$el).css('display', 'none'); //Hide the page link for the newly exposed page.
427+
$('#tInd' + base.pIndex + ', #bInd' + base.pIndex, base.$el).css('display', 'inline'); //Reveal the span for the newly exposed page.
428+
} else {
429+
430+
$('#top_fEllip, #bot_fEllip, #top_lEllip, #bot_lEllip, .pager, .tInd, .bInd', base.$el).css('display', 'none');
431+
432+
if (base.pIndex > 4) {
433+
$('#top_fEllip, #bot_fEllip', base.$el).css('display', 'inline');
434+
}
435+
436+
// Show ellipses if NOT on 4th to last page or greater
437+
// This is so we get
438+
// prev 1 2 ... 45 '46' 47 48 49 next
439+
// and not
440+
// prev 1 2 ... 45 '46' 47 ... 48 49 next
441+
if (base.pIndex < (base.count.pages - 3)) {
442+
$('#top_lEllip, #bot_lEllip', base.$el).css('display', 'inline');
443+
}
444+
445+
for (j = 1; j <= base.count.pages; j += 1) {
446+
// this page last page next page 2 or less last 2 pages
447+
if (j === base.pIndex || j === (base.pIndex - 1) || j === (base.pIndex + 1) || j <= 2 || j >= (base.count.pages - 1)) {
448+
$('#bPager' + j + ', #tPager' + j, base.$el).css('display', 'inline');
365449
}
366450
}
367-
}
368451

369-
base.options.end();
452+
$('#tPager' + base.pIndex + ', #bPager' + base.pIndex, base.$el).css('display', 'none'); //Hide the page link for the newly exposed page.
453+
$('#tInd' + base.pIndex + ', #bInd' + base.pIndex, base.$el).css('display', 'inline'); //Reveal the span for the newly exposed page.
454+
}
370455

371-
};
456+
}
372457

373458
base.destroy = function() {
374459

@@ -396,6 +481,7 @@
396481

397482
$.pager.defaultOptions = {
398483
pageSize: 25,
484+
pageStart: 1,
399485
top: true,
400486
bottom: true,
401487
nextText: 'next',
@@ -407,12 +493,11 @@
407493
evenodd: true,
408494
filter: [],
409495
delimiter: "|",
410-
start: function() {},
411-
// Before build
412-
end: function() {},
413-
// After build
414-
before: function() {},
415-
// Before page turn
496+
hash: true,
497+
hashQuery: "page",
498+
start: function() {}, // Before build
499+
end: function() {}, // After build
500+
before: function() {}, // Before page turn
416501
after: function() {} // After page turn
417502
};
418503

0 commit comments

Comments
 (0)