Merge pull request #60 from jrtechs/Pagination

Pagination (closes #51)

blog/renderNextBar.js

@@ -35,18 +35,36 @@ module.exports=
                 reject("Invalid Page");
             }
 
+            var paginationObject = new Object();
+
             var nextPage = currentPage + 1;
             var previousPage = currentPage - 1;
 
             if (isValidPage(previousPage, postsPerPage, totalPosts))
             {
-                templateContext.newPostsURL = baseURL + "?page=" + previousPage;
+                paginationObject.previous = {url: baseURL + "?page=" + previousPage};
             }
 
             if (isValidPage(nextPage, postsPerPage, totalPosts))
             {
-                templateContext.oldPostsURL = baseURL + "?page=" + nextPage
+                paginationObject.next = {url: baseURL + "?page=" + nextPage};
             }
 
+            var page = 1;
+            var pages = [];
+            while(isValidPage(page, postsPerPage, totalPosts))
+            {
+                if(page === currentPage)
+                {
+                    pages.push({isCurrent: true, number: page})
+                }
+                else
+                {
+                    pages.push({number: page, url: baseURL + "?page=" + page})
+                }
+                page = page + 1;
+            }
+            paginationObject.pages = pages;
+            templateContext.pagination = paginationObject;
         }
     };

includes/css/bootstrap.css

@@ -4907,6 +4907,7 @@ input[type="button"].btn-block {
     padding-left: 0;
     list-style: none;
     border-radius: 0.25rem;
+    font-size: 0.75rem;
 }
 
 .page-link {
@@ -4915,17 +4916,17 @@ input[type="button"].btn-block {
     padding: 0.5rem 0.75rem;
     margin-left: -1px;
     line-height: 1.25;
-    color: #8E8C84;
-    background-color: #F8F5F0;
-    border: 1px solid #DFD7CA;
+    color: #ffffff;
+    background-color: #498FBE;
+    border: 1px solid #000000;
 }
 
 .page-link:hover {
     z-index: 2;
-    color: #8E8C84;
+    color: #ffffff;
     text-decoration: none;
-    background-color: #F8F5F0;
-    border-color: #DFD7CA;
+    background-color: #2C3E50;
+    border-color: #000000;
 }
 
 .page-link:focus {
@@ -4952,33 +4953,34 @@ input[type="button"].btn-block {
 
 .page-item.active .page-link {
     z-index: 1;
-    color: #8E8C84;
-    background-color: #DFD7CA;
-    border-color: #DFD7CA;
+    color: #ffffff;
+    text-decoration: none;
+    background-color: #2C3E50;
+    border-color: #000000;
 }
 
 .page-item.disabled .page-link {
-    color: #DFD7CA;
     pointer-events: none;
     cursor: auto;
-    background-color: #F8F5F0;
-    border-color: #DFD7CA;
+    color: #ffffff;
+    background-color: #67aebe;
+    border: 1px solid #000000;
 }
 
 .pagination-lg .page-link {
-    padding: 0.75rem 1.5rem;
-    font-size: 1.09375rem;
+    padding: 0.5rem 1.0rem;
+    font-size: 0.75rem;
     line-height: 1.5;
 }
 
 .pagination-lg .page-item:first-child .page-link {
-    border-top-left-radius: 0.3rem;
-    border-bottom-left-radius: 0.3rem;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
 }
 
 .pagination-lg .page-item:last-child .page-link {
-    border-top-right-radius: 0.3rem;
-    border-bottom-right-radius: 0.3rem;
+    border-top-right-radius: 0.2rem;
+    border-bottom-right-radius: 0.2rem;
 }
 
 .pagination-sm .page-link {

includes/includes.js

@@ -142,6 +142,7 @@ module.exports =
     },
 
 
+
     fetchTemplate: function(templateName)
     {
         return utils.include("templates/" + templateName);

sites/blog.js

@@ -9,6 +9,10 @@ const whiskers = require('whiskers');
 const TEMPLATE_FILE="blog/blogMain.html";
 
 
+const PAGINATION_TEMPLATE_KEY = "paginationTemplate";
+const PAGINATION_TEMPLATE_FILE = "blog/paginationBar.html";
+
+
 //caching program to make the application run faster
 const cache = require('memory-cache');
 
@@ -74,15 +78,17 @@ module.exports=
                             // cache is not tricked into storing same blog post a ton of times
                         }
                     }
+
                     var templateContext = Object();
                     Promise.all([includes.fetchTemplate(TEMPLATE_FILE),
+                        utils.includeInObject(PAGINATION_TEMPLATE_KEY, templateContext, "templates/" + PAGINATION_TEMPLATE_FILE),
                         includes.printHeader(templateContext),
                         includes.printFooter(templateContext),
                         require(file).main(filename, request, templateContext),
                         require("../blog/sidebar.js").main(templateContext)])
                             .then(function (content)
                     {
-                        var html = whiskers.render(content[0], templateContext);
+                        const html = whiskers.render(content[0], templateContext);
                         result.write(html);
                         result.end();
                         cache.put(filename + "?page=" + page, html);

templates/blog/blogMain.html

@@ -31,25 +31,8 @@
                 </div>
                 <br><br>
             {/for}
-            <div class="row">
-                <div class="col-6col">
-                    {if newPostsURL}
-                    <button class="btn btn-secondary btn-l" onclick="location.href='{newPostsURL}'">
-                        <b>Older Posts &raquo;</b>
-                    </button>
-                    {/if}
-                </div>
 
-                <div class="col-6">
-                    {if oldPostsURL}
-                        <span class="float-right">
-                            <button class="btn btn-secondary btn-l" onclick="location.href='{oldPostsURL}'">
-                                <b>Older Posts &raquo;</b>
-                            </button>
-                        </span>
-                    {/if}
-                </div>
-            </div>
+            {>paginationTemplate}
             <br>
         </div>
         <div class="col-md-4 col-12">

templates/blog/paginationBar.html

@@ -0,0 +1,52 @@
+{if pagination}
+<div class="row justify-content-center w-100">
+    <div class="col-md-6 col-12">
+        <nav aria-label="...">
+            <ul class="pagination">
+                {if pagination.previous}
+                <li class="page-item">
+                    <a class="page-link" href="{pagination.previous.url}">
+                        Previous
+                    </a>
+                </li>
+                {else}
+                <li class="page-item disabled">
+                    <span class="page-link">
+                        Previous
+                    </span>
+                </li>
+                {/if}
+                {for page in pagination.pages}
+                    {if page.isCurrent}
+                        <li class="page-item active">
+                            <span class="page-link">
+                                {page.number}
+                                <span class="sr-only">(current)</span>
+                            </span>
+                        </li>
+                    {else}
+                        <li class="page-item">
+                            <a class="page-link" href="{page.url}">
+                                {page.number}
+                            </a>
+                        </li>
+                    {/if}
+                {/for}
+                {if pagination.next}
+                <li class="page-item">
+                    <a class="page-link" href="{pagination.next.url}">
+                        Next
+                    </a>
+                </li>
+                {else}
+                <li class="page-item disabled">
+                    <span class="page-link">
+                        Next
+                    </span>
+                </li>
+                {/if}
+            </ul>
+        </nav>
+    </div>
+</div>
+{/if}