From 066dc91ded67c2d866683f4515305c258af5046d Mon Sep 17 00:00:00 2001 From: Oscar Cortez Date: Fri, 17 Jul 2015 19:47:59 -0600 Subject: [PATCH 1/3] jkm-1 testing blog pagination --- _config.yml | 4 ++++ index.html | 24 +++++++++++++++---- js/site.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 js/site.js diff --git a/_config.yml b/_config.yml index 319b318..91c2567 100644 --- a/_config.yml +++ b/_config.yml @@ -13,5 +13,9 @@ github_username: jekyll # Layout settings header_type: fixed post_type: highlight + # Build settings markdown: kramdown + +# Pagination +paginate: 3 diff --git a/index.html b/index.html index e5c8ad2..0937708 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,17 @@ layout: default --- -
- {% for post in site.posts %} -
+{% if paginator.page %} + {% assign offset = paginator.page | minus:1 | times:paginator.per_page %} + {% assign currentPage = paginator.page %} + {% else %} + {% assign offset = 0 %} + {% assign currentPage = 1 %} +{% endif %} + +
+ {% for post in site.posts limit:site.paginate offset:offset %} +

{{ post.title }}

@@ -24,6 +32,14 @@ layout: default share
-
+ {% endfor %} + + {% assign postCount = site.posts | size %} + {% assign postsCovered = site.paginate | plus:offset %} + {% if postsCovered < postCount %} + + {% endif %} + +
diff --git a/js/site.js b/js/site.js new file mode 100644 index 0000000..878ff5a --- /dev/null +++ b/js/site.js @@ -0,0 +1,66 @@ +//$(".loadMore").click(loadMorePosts); +var _this = document.getElementById("js-load-more"); +_this.onclick = loadMorePosts; + +var HttpClient = function() { + this.get = function(Url, Callback) { + var HttpRequest = new XMLHttpRequest(); + HttpRequest.onreadystatechange = function() { + if (HttpRequest.readyState == 4 && HttpRequest.status == 200) + Callback(HttpRequest.responseText); + } + + HttpRequest.open( "GET", Url, true ); + HttpRequest.send( null ); + } +} + +Element.prototype.remove = function() { + this.parentElement.removeChild(this); +} + +NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { + for(var i = this.length - 1; i >= 0; i--) { + if(this[i] && this[i].parentElement) { + this[i].parentElement.removeChild(this[i]); + } + } +} + +function loadMorePosts() { + //var _this = document.getElementById("js-load-more"); + var blogContainer = document.getElementById("js-post-container"); //$("#js-post-container"); + var nextPage = parseInt(blogContainer.dataset.page) + 1; //parseInt($blogContainer.attr("data-page")) + 1; + var totalPages = parseInt(blogContainer.dataset.totalPages); //parseInt($blogContainer.attr("data-totalPages")); + + _this.className += " loading"; + + Client = new HttpClient(); + Client.get('/page' + nextPage, function(data) { + parser = new DOMParser(); + var htmlData = parser.parseFromString(data, "text/html");; + var articles = htmlData.getElementsByTagName("article"); + console.log(articles); + blogContainer.innerHTML += data; + + if (blogContainer.dataset.totalPages == nextPage) { + document.getElementById("js-load-more").remove(); + } + _this.className = ""; + + }); + // $.get("/page" + nextPage, function (data) { + // var htmlData = $.parseHTML(data); + // console.log(htmlData); + // var $articles = $(htmlData).find("article"); + + // blogContainer.attr("data-page", nextPage).append($articles); + + // if (blogContainer.attr("data-totalPages") == nextPage) { + // $(".loadMore").remove(); + // } + + // $(_this).removeClass("loading"); + // }); +} +//---- native js---- From d40858f14c575d85ac7fbacfb9cd8c00093fb56d Mon Sep 17 00:00:00 2001 From: Oscar Cortez Date: Sun, 19 Jul 2015 11:56:00 -0600 Subject: [PATCH 2/3] Native javascript pagination --- js/site.js | 65 ++++++++++++++++++++---------------------------------- 1 file changed, 24 insertions(+), 41 deletions(-) diff --git a/js/site.js b/js/site.js index 878ff5a..6fa0e51 100644 --- a/js/site.js +++ b/js/site.js @@ -1,66 +1,49 @@ -//$(".loadMore").click(loadMorePosts); var _this = document.getElementById("js-load-more"); _this.onclick = loadMorePosts; var HttpClient = function() { + 'use strict'; this.get = function(Url, Callback) { var HttpRequest = new XMLHttpRequest(); HttpRequest.onreadystatechange = function() { if (HttpRequest.readyState == 4 && HttpRequest.status == 200) Callback(HttpRequest.responseText); - } + }; - HttpRequest.open( "GET", Url, true ); - HttpRequest.send( null ); - } -} + HttpRequest.open("GET", Url, true); + HttpRequest.send(null); + }; +}; Element.prototype.remove = function() { this.parentElement.removeChild(this); -} +}; NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { - for(var i = this.length - 1; i >= 0; i--) { - if(this[i] && this[i].parentElement) { + for (var i = this.length - 1; i >= 0; i--) { + if (this[i] && this[i].parentElement) { this[i].parentElement.removeChild(this[i]); } } -} +}; function loadMorePosts() { - //var _this = document.getElementById("js-load-more"); - var blogContainer = document.getElementById("js-post-container"); //$("#js-post-container"); - var nextPage = parseInt(blogContainer.dataset.page) + 1; //parseInt($blogContainer.attr("data-page")) + 1; - var totalPages = parseInt(blogContainer.dataset.totalPages); //parseInt($blogContainer.attr("data-totalPages")); + var blogContainer = document.getElementById("js-post-container"); + var nextPage = parseInt(blogContainer.dataset.page) + 1; - _this.className += " loading"; + _this.className += " loading"; - Client = new HttpClient(); - Client.get('/page' + nextPage, function(data) { - parser = new DOMParser(); - var htmlData = parser.parseFromString(data, "text/html");; - var articles = htmlData.getElementsByTagName("article"); - console.log(articles); - blogContainer.innerHTML += data; + Client = new HttpClient(); + Client.get('/page' + nextPage, function(data) { + parser = new DOMParser(); + var htmlData = parser.parseFromString(data, "text/html"); + var articles = htmlData.getElementsByTagName("article"); + blogContainer.parentNode.insertBefore(articles[0], blogContainer.nextSibling); - if (blogContainer.dataset.totalPages == nextPage) { - document.getElementById("js-load-more").remove(); - } - _this.className = ""; + if (blogContainer.dataset.totalPages == nextPage) { + document.getElementById("js-load-more").remove(); + } + _this.className = ""; - }); - // $.get("/page" + nextPage, function (data) { - // var htmlData = $.parseHTML(data); - // console.log(htmlData); - // var $articles = $(htmlData).find("article"); - - // blogContainer.attr("data-page", nextPage).append($articles); - - // if (blogContainer.attr("data-totalPages") == nextPage) { - // $(".loadMore").remove(); - // } - - // $(_this).removeClass("loading"); - // }); + }); } -//---- native js---- From b48c9496522c96df4c0949252f6baec39535bc8d Mon Sep 17 00:00:00 2001 From: Oscar Cortez Date: Sun, 19 Jul 2015 12:00:00 -0600 Subject: [PATCH 3/3] create the ajax pagination --- index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0937708..a552105 100644 --- a/index.html +++ b/index.html @@ -38,8 +38,9 @@ layout: default {% assign postCount = site.posts | size %} {% assign postsCovered = site.paginate | plus:offset %} {% if postsCovered < postCount %} - + {% endif %} -