Merge pull request #5 from gdg-managua/jkm-1

JKM-1 Create site pagination

_config.yml

@@ -13,5 +13,10 @@ github_username:  jekyll
 # Layout settings
 header_type: default  # values [ drawer, default ]
 post_type: default    # values [ highlight, default ]
+pagination_type: default  # values [ ops, default ]
+
 # Build settings
 markdown: kramdown
+
+# Pagination
+paginate: 3

_layouts/default.html

@@ -26,7 +26,9 @@
     </div>
     <!-- Material Design Lite js Library -->
     <script type="text/javascript" src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
-
+    {% if site.pagination_type == 'ops' %}
+    <script rel="javascript" src="{{ "/js/site.js" | prepend: site.baseurl }}"></script>
+    {% endif %}
   </body>
 
 </html>

index.html

@@ -1,7 +1,6 @@
 ---
 layout: default
 ---
-
 {% if site.post_type == 'highlight' %}
 
 <div class="mdl-grid">

js/site.js

@@ -0,0 +1,49 @@
+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);
+    };
+};
+
+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 blogContainer = document.getElementById("js-post-container");
+    var nextPage = parseInt(blogContainer.dataset.page) + 1;
+
+    _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");
+        blogContainer.parentNode.insertBefore(articles[0], blogContainer.nextSibling);
+
+        if (blogContainer.dataset.totalPages == nextPage) {
+            document.getElementById("js-load-more").remove();
+        }
+        _this.className = "";
+
+    });
+}