Improving pagination (using ellipses for bootstrap3, and allowing to …

…set surrounding size).
getnikola · Dec 5, 2016 · c3de0f2 · c3de0f2
1 parent 9727d85
commit c3de0f2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/nikola/data/themes/base-jinja/templates/pagination_helper.tmpl b/nikola/data/themes/base-jinja/templates/pagination_helper.tmpl
@@ -1,14 +1,14 @@
 {#  -*- coding: utf-8 -*- #}
-{% macro page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed) %}
+{% macro page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed, surrounding=5) %}
 <div class="page-navigation">
   {% for i, link in enumerate(page_links) %}
-    {% if abs(i - current_page) <= 3 or i == 0 or i == page_links|length - 1 %}
+    {% if abs(i - current_page) <= surrounding or i == 0 or i == page_links|length - 1 %}
       {% if i == current_page %}
         <span class="current-page">{{ i+1 }}</span>
       {% else %}
         <a href="{{ page_links[i] }}">{{ i+1 }}</a>
       {% endif %}
-    {% elif i == current_page - 4 or i == current_page + 4 %}
+    {% elif i == current_page - surrounding - 1 or i == current_page + surrounding + 1 %}
       <span class="ellipsis">&#x22EF;</span>
     {% endif %}
   {% endfor %}

diff --git a/nikola/data/themes/base/templates/pagination_helper.tmpl b/nikola/data/themes/base/templates/pagination_helper.tmpl
@@ -1,14 +1,14 @@
 ## -*- coding: utf-8 -*-
-<%def name="page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed)">
+<%def name="page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed, surrounding=5)">
 <div class="page-navigation">
   % for i, link in enumerate(page_links):
-    % if abs(i - current_page) <= 3 or i == 0 or i == len(page_links) - 1:
+    % if abs(i - current_page) <= surrounding or i == 0 or i == len(page_links) - 1:
       % if i == current_page:
         <span class="current-page">${i+1}</span>
       % else:
         <a href="${page_links[i]}">${i+1}</a>
       % endif
-    % elif i == current_page - 4 or i == current_page + 4:
+    % elif i == current_page - surrounding - 1 or i == current_page + surrounding + 1:
       <span class="ellipsis">&#x22EF;</span>
     % endif
   % endfor

diff --git a/nikola/data/themes/bootstrap3-jinja/templates/pagination_helper.tmpl b/nikola/data/themes/bootstrap3-jinja/templates/pagination_helper.tmpl
@@ -1,5 +1,5 @@
 {#  -*- coding: utf-8 -*- #}
-{% macro page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed) %}
+{% macro page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed, surrounding=5) %}
 <nav aria-label="Page navigation">
   <ul class="pagination">
   {% if prev_next_links_reversed %}
@@ -16,7 +16,11 @@
     {% endif %}
   {% endif %}
   {% for i, link in enumerate(page_links) %}
-    <li {{ ' class="active"' if i == current_page else '' }}><a href="{{ link }}">{{ i + 1 }}{{ ' <span class="sr-only">(current)</span>' if i == current_page else '' }}</a></li>
+    {% if abs(i - current_page) <= surrounding or i == 0 or i == page_links|length - 1 %}
+      <li {{ ' class="active"' if i == current_page else '' }}><a href="{{ link }}">{{ i + 1 }}{{ ' <span class="sr-only">(current)</span>' if i == current_page else '' }}</a></li>
+    {% elif i == current_page - surrounding - 1 or i == current_page + surrounding + 1 %}
+      <li class="disabled"><a href="#" aria-label="…"><span aria-hidden="true">…</span></a></li>
+    {% endif %}
   {% endfor %}
   {% if prev_next_links_reversed %}
     {% if prevlink %}

diff --git a/nikola/data/themes/bootstrap3/templates/pagination_helper.tmpl b/nikola/data/themes/bootstrap3/templates/pagination_helper.tmpl
@@ -1,5 +1,5 @@
 ## -*- coding: utf-8 -*-
-<%def name="page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed)">
+<%def name="page_navigation(current_page, page_links, prevlink, nextlink, prev_next_links_reversed, surrounding=5)">
 <nav aria-label="Page navigation">
   <ul class="pagination">
   % if prev_next_links_reversed:
@@ -16,7 +16,11 @@
     % endif
   % endif
   % for i, link in enumerate(page_links):
-    <li ${' class="active"' if i == current_page else ''}><a href="${link}">${i + 1}${' <span class="sr-only">(current)</span>' if i == current_page else ''}</a></li>
+    % if abs(i - current_page) <= surrounding or i == 0 or i == len(page_links) - 1:
+      <li ${' class="active"' if i == current_page else ''}><a href="${link}">${i + 1}${' <span class="sr-only">(current)</span>' if i == current_page else ''}</a></li>
+    % elif i == current_page - surrounding - 1 or i == current_page + surrounding + 1:
+      <li class="disabled"><a href="#" aria-label="…"><span aria-hidden="true">…</span></a></li>
+    % endif
   % endfor
   % if prev_next_links_reversed:
     % if prevlink: