Add previous and next buttons (#44)

Author: choldgraf

pandas_sphinx_theme/layout.html

@@ -1,6 +1,16 @@
 
 {% extends "basic/layout.html" %}
 
+{# prev/next buttons #}
+{% macro prev_next(prev, next, prev_title='', next_title='') %}
+ {%- if prev %}
+    <a class='left-prev' id="prev-link" href="{{ prev.link|e }}" title="{{ _('previous page')}}">{{ prev_title or prev.title }}</a>
+ {%- endif %}
+ {%- if next %}
+    <a class='right-next' id="next-link" href="{{ next.link|e }}" title="{{ _('next page')}}">{{ next_title or next.title }}</a>
+ {%- endif %}
+{% endmacro %}
+
 {%- block css %}
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 {{- css() }}
@@ -37,7 +47,7 @@
                 {%- include "docs-sidebar.html" %}
               {% endif %}
           </div>
-          
+
           <div class="d-none d-xl-block col-xl-2 bd-toc">
               {% if not (meta is not none and 'notoc' in meta) %}
                 {%- include "docs-toc.html" %}
@@ -48,6 +58,9 @@
               <div>
                 {% block body %} {% endblock %}
               </div>
+              <div class='prev-next-bottom'>
+                {{ prev_next(prev, next) }}
+              </div>
           </main>
 
       </div>

pandas_sphinx_theme/scripts.html

@@ -1,9 +1,9 @@
 <script>
     // TOC sidebar - add "active" class to parent list
-    // 
+    //
     // Bootstrap's scrollspy adds the active class to the <a> link,
     // but for the automatic collapsing we need this on the parent list item.
-    // 
+    //
     // The event is triggered on "window" (and not the nav item as documented),
     // see https://github.com/twbs/bootstrap/issues/20086
     $(window).on("activate.bs.scrollspy", function(){
@@ -18,4 +18,30 @@
         navLink.parentElement.classList.add('active');
     }
     });
+
+    /**
+     * Use left and right arrow keys to navigate forward and backwards.
+    */
+    const LEFT_ARROW_KEYCODE = 37
+    const RIGHT_ARROW_KEYCODE = 39
+
+    const getPrevUrl = () => document.getElementById('prev-link').href
+    const getNextUrl = () => document.getElementById('next-link').href
+    const initPageNav = (event) => {
+        const keycode = event.which
+
+        if (keycode === LEFT_ARROW_KEYCODE) {
+            window.location.href = getPrevUrl();
+        } else if (keycode === RIGHT_ARROW_KEYCODE) {
+            window.location.href = getNextUrl();
+        }
+    };
+
+    var keyboardListener = false;
+    $( document ).ready(() => {
+        if (keyboardListener === false) {
+            document.addEventListener('keydown', initPageNav)
+            keyboardListener = true;
+        }
+    });
 </script>

pandas_sphinx_theme/static/css/custom.css

@@ -21,7 +21,7 @@
 
 .navbar-header a {
     padding: 0 15px;
-    /* line-height: 50px; */ 
+    /* line-height: 50px; */
 }
 
 .bd-search {
@@ -45,7 +45,7 @@
     height: calc(100vh - 2rem);
     overflow-y: auto;
   }
-  
+
   @supports ((position: -webkit-sticky) or (position: sticky)) {
     .bd-toc {
       position: -webkit-sticky;
@@ -55,39 +55,39 @@
       overflow-y: auto;
     }
   }
-  
+
   .section-nav {
     padding-left: 0;
     border-left: 1px solid #eee;
     border-bottom: none;
   }
-  
+
   .section-nav ul {
     padding-left: 1rem;
   }
-  
+
   .toc-entry {
     display: block;
   }
-  
+
   .toc-entry a {
     display: block;
     padding: .125rem 1.5rem;
     color: #77757a;
   }
-  
+
   .toc-entry a:hover {
     color: rgba(0, 0, 0, 0.85);
     text-decoration: none;
   }
-  
+
 
   .bd-sidebar {
     -ms-flex-order: 0;
     order: 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
-  
+
   @media (min-width: 768px) {
     .bd-sidebar {
       border-right: 1px solid rgba(0, 0, 0, 0.1);
@@ -102,21 +102,21 @@
       }
     }
   }
-  
+
   @media (min-width: 1200px) {
     .bd-sidebar {
       -ms-flex: 0 1 320px;
       flex: 0 1 320px;
     }
   }
-  
+
   .bd-links {
     padding-top: 1rem;
     padding-bottom: 1rem;
     margin-right: -15px;
     margin-left: -15px;
   }
-  
+
   @media (min-width: 768px) {
     @supports ((position: -webkit-sticky) or (position: sticky)) {
       .bd-links {
@@ -125,45 +125,45 @@
       }
     }
   }
-  
+
   @media (min-width: 768px) {
     .bd-links {
       display: block !important;
     }
   }
-  
+
   .bd-sidenav {
     display: none;
   }
-  
+
   .bd-toc-link {
     display: block;
     padding: .25rem 1.5rem;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.65);
   }
-  
+
   .bd-toc-link:hover {
     color: rgba(0, 0, 0, 0.85);
     text-decoration: none;
   }
-  
+
   .bd-toc-item.active {
     margin-bottom: 1rem;
   }
-  
+
   .bd-toc-item.active:not(:first-child) {
     margin-top: 1rem;
   }
-  
+
   .bd-toc-item.active > .bd-toc-link {
     color: rgba(0, 0, 0, 0.85);
   }
-  
+
   .bd-toc-item.active > .bd-toc-link:hover {
     background-color: transparent;
   }
-  
+
   .bd-toc-item.active > .bd-sidenav {
     display: block;
   }
@@ -174,13 +174,13 @@
     font-size: 90%;
     color: rgba(0, 0, 0, 0.65);
   }
-  
+
   .bd-sidebar .nav > li > a:hover {
     color: rgba(0, 0, 0, 0.85);
     text-decoration: none;
     background-color: transparent;
   }
-  
+
   .bd-sidebar .nav > .active > a,
   .bd-sidebar .nav > .active:hover > a {
     font-weight: 600;
@@ -209,7 +209,7 @@
   }
 
 /* offsetting html anchor titles to adjust for fixed header, https://github.com/pandas-dev/pandas-sphinx-theme/issues/6*/
-  h2::before, h3::before, 
+  h2::before, h3::before,
   h4::before, h5::before,
   h6::before  {
     display: block;
@@ -259,3 +259,33 @@ body {
 .bd-toc .nav > .active > ul {
   display: block;
 }
+
+
+/* Previous / Next buttons */
+div.prev-next-bottom {
+  margin: 20px 0px;
+}
+
+div.prev-next-bottom a.left-prev, div.prev-next-bottom a.right-next {
+  padding: 10px;
+  border: 1px solid rgba(0, 0, 0, .2);
+  max-width: 45%;
+  overflow-x: hidden;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+div.prev-next-bottom a.left-prev {
+  float: left;
+}
+
+div.prev-next-bottom a.left-prev:before {
+  content: "<< "
+}
+
+div.prev-next-bottom a.right-next {
+  float: right;
+}
+
+div.prev-next-bottom a.right-next:after {
+  content: " >>"
+}