FLUID-4045: Add built-in page strategy that shows a consistent number of links

Description

Here is an impl of a page strategy that will always display same number of page links (including skip place holders).

consistentGappedPageStrategy = function (endLinkCount, midLinkCount) {
if (!endLinkCount) {
endLinkCount = 1;
}
if (!midLinkCount) {
midLinkCount = endLinkCount;
}
var midWidth = endLinkCount + (midLinkCount * 2);

return function (count, first, mid) {
var pages = [];

var anchoredLeft = mid < midWidth;
var anchoredRight = mid >= count - midWidth;
var paddedMidWidth = midWidth + 2;
var midStart = mid - midLinkCount;
var midEnd = mid + midLinkCount;

var lastSkip = false;

for (var page = 0; page < count; page++) {
if (
page < endLinkCount || // start pages
count - page <= endLinkCount || // end pages
(anchoredLeft && page < paddedMidWidth) || // pages if no skipped pages between start and mid
(anchoredRight && page >= count - paddedMidWidth) || // pages if no skipped pages between mid and end
(page >= midStart && page <= midEnd) // pages around the mid
) {
pages.push(page);
lastSkip = false;
}
else if (!lastSkip) {
pages.push(-1);
lastSkip = true;
}
}

return pages;
};
};

Attachments

• Pager.js
• PagerTests.js

Comments

• Harris Wong commented 2011-02-11T11:22:52.738-0500

  Thanks for the code. I have create a unit test case for it on my local system and I found a problem.

  By consistent, I am assuming the number of elements (both page numbers and ellipses) will be the same no matter which page I click on. I tried loading consistentGappedPageStrategy(3,3) with 34 pages. When I click on the 9th page, I got one extra element. Demonstrated as follow:

  [page 1] 1 2 3 4 5 6 7 8 9 10 11 ... 32 33 34
  [page 2] 1 2 3 4 5 6 7 8 9 10 11 ... 32 33 34
  [page 3] 1 2 3 4 5 6 7 8 9 10 11 ... 32 33 34
  [page 4] 1 2 3 4 5 6 7 8 9 10 11 ... 32 33 34
  [page 5] 1 2 3 4 5 6 7 8 9 10 11 ... 32 33 34
  ...
  [page 9] 1 2 3 4 5 6 7 8 9 10 11 12 ... 32 33 34

  Notice how we now have 1 extra element after 11, where as it should had been:
  [page 9] 1 2 3 ... 6 7 8 9 10 11 12 ... 32 33 34

• Eric Dalquist commented 2011-02-11T15:11:01.905-0500

  Is the unit test somewhere I can give it a try? Seems like it shouldn't be too hard to track that down.

• Harris Wong commented 2011-02-11T16:18:57.599-0500

  Check out infusion, and then replace
  src\webapp\components\pager\js\Pager.js with the attached Pager.js

  replace
  src\webapp\tests\component-tests\pager\js\PagerTests.js with the attached PagerTests.js

  Then go to your browser and run
  src/webapp/tests/component-tests/pager/html/Pager-test.html?Pager Tests%3A Pager consistentGappedPageStrategy

• Eric Dalquist commented 2011-02-14T15:16:02.248-0500

  Here is the fixed version:

  fluid.pager.consistentGappedPageStrategy = function (endLinkCount, midLinkCount) {

  if (!endLinkCount) {

  endLinkCount = 1;

  }

  if (!midLinkCount) {

  midLinkCount = endLinkCount;

  }

  var endWidth = endLinkCount + 2 + midLinkCount;

  return function (count, first, mid) {

  var pages = [];

  var anchoredLeft = mid < endWidth;

  var anchoredRight = mid >= count - endWidth;

  var anchoredEndWidth = endWidth + midLinkCount;

  var midStart = mid - midLinkCount;

  var midEnd = mid + midLinkCount;

  var lastSkip = false;

  for (var page = 0; page < count; page++) {

  if (

  page < endLinkCount || // start pages

  count - page <= endLinkCount || // end pages

  (anchoredLeft && page < anchoredEndWidth) || // pages if no skipped pages between start and mid

  (anchoredRight && page >= count - anchoredEndWidth) || // pages if no skipped pages between mid and end

  (page >= midStart && page <= midEnd) // pages around the mid

  ) {

  pages.push(page);

  lastSkip = false;

  }

  else if (!lastSkip) {

  pages.push(-1);

  lastSkip = true;

  }

  }

  return pages;

  };

  };

• Harris Wong commented 2011-02-22T14:28:28.774-0500

  Changes pushed to https://github.com/harriswong/infusion/tree/FLUID-4045, waiting for code review and commits.

• Justin Obara commented 2011-03-11T08:51:13.106-0500

  I closed this issue as the code has been pulled into infusion at a58059329c1ddbdc65d9.

• Justin Obara commented 2011-03-23T15:53:32.321-0400

  re-opening to fix the resolution status, which currently says unresolved