Limit the number of pagination buttons. Fixes #1

public/css/style.css

@@ -243,6 +243,11 @@ body {
     color: #fff;
 }
 
+.pagination-skipped-numbers {
+    padding: .4em 0;
+    margin-right: .75em;
+}
+
 .pagination-info {
     color: #555;
 }

public/js/components/Pagination.js

@@ -1,27 +1,41 @@
-export default ({ links, stats, activePage }) => `
-  <div class="pagination">
-    <div class="pagination-buttons">
-      ${ [...Array(stats.pages + 1).keys()].slice(1).map(page => `
-        <button
-          type="button"
-          class="pagination-button ${
-            activePage === page
-              ? 'pagination-button--active'
-              : ''
-            }"
-          id="pagination-button-${page}"
-          onclick="__appEventHandlers.onChangePage(${page}, event)"
-        >
-          ${page}
-        </button>
-      `).join('') }
-    </div>
-    <div class="pagination-info">
-      ${ stats.total > links.length
-        ? `Showing <strong>${links.length}</strong> links.`
-        : ''
-      }
-      Total links: <strong>${stats.total}</strong>.
-    </div>
-  </div>
+import { getLimitedPageNumbers } from '../lib/utils.js'
+
+const skippedPageNumbers = () => `
+  <span class="pagination-skipped-numbers">...</span>
 `
+
+export default ({ links, stats, activePage }) => {
+  const pages = getLimitedPageNumbers({
+    current: activePage,
+    showMax: 6,
+    pages: [...Array(stats.pages + 1).keys()].slice(1)
+  })
+
+  return `
+    <div class="pagination">
+      <div class="pagination-buttons">
+        ${ pages.map(page => page === '...' ? skippedPageNumbers() : `
+          <button
+            type="button"
+            class="pagination-button ${
+              activePage === page
+                ? 'pagination-button--active'
+                : ''
+              }"
+            id="pagination-button-${page}"
+            onclick="__appEventHandlers.onChangePage(${page}, event)"
+          >
+            ${page}
+          </button>
+        `).join('') }
+      </div>
+      <div class="pagination-info">
+        ${ stats.total > links.length
+          ? `Showing <strong>${links.length}</strong> links.`
+          : ''
+        }
+        Total links: <strong>${stats.total}</strong>.
+      </div>
+    </div>
+  `
+}

public/js/lib/utils.js

@@ -5,3 +5,45 @@ export const truncate = (text, limit, ellipsis) =>
   text.length > limit
     ? `${ text.slice(0, limit).trim() }${ ellipsis ? '...' : '' }`
     : text
+
+export const getLimitedPageNumbers = ({ current, showMax, pages }) => {
+  const oneStartCurrent = current - 1
+  const result = [pages[oneStartCurrent]]
+
+  function prependNumbers(max) {
+    for (let active = oneStartCurrent; active > 0 && oneStartCurrent - active < max; active--) {
+      result.unshift(pages[active - 1])
+    }
+  }
+
+  function appendNumbers(max) {
+    for (let active = oneStartCurrent; active < pages.length - 1 && active - oneStartCurrent < max; active++) {
+      result.push(pages[active + 1])
+    }
+  }
+
+  const halfOfShowMax = (showMax - 4) / 2
+  if (current < pages.length / 2) {
+    const maxNumbersToAppend = halfOfShowMax + (current <= halfOfShowMax ? 1 + halfOfShowMax - current : 0)
+    appendNumbers(maxNumbersToAppend)
+    prependNumbers(halfOfShowMax)
+  } else {
+    const lastHalfOfShowMax = (pages.length - 1) - halfOfShowMax
+    const maxNumbersToPrepend = halfOfShowMax + (current >= lastHalfOfShowMax ? 1 + current - lastHalfOfShowMax : 0)
+    prependNumbers(maxNumbersToPrepend)
+    appendNumbers(halfOfShowMax)
+  }
+  if (result[0] !== pages[1] && result[1] !== pages[1]) {
+    result.unshift('...')
+  }
+  if (result[0] !== pages[0]) {
+    result.unshift(pages[0])
+  }
+  if (result[result.length - 1] !== pages[pages.length - 2] && result[result.length - 2] !== pages[pages.length - 2]) {
+    result.push('...')
+  }
+  if (result[result.length - 1] !== pages[pages.length - 1]) {
+    result.push(pages[pages.length - 1])
+  }
+  return result
+}