dynamic, infinite load done

2 files changed, 31 insertions, 13 deletions

diff --git a/weblog/static/weblog/css/weblog.css b/weblog/static/weblog/css/weblog.css
index f028546..5efe008 100755
--- a/weblog/static/weblog/css/weblog.css
+++ b/weblog/static/weblog/css/weblog.css
@@ -42,6 +42,7 @@ textarea{
 }
 
 .button,
+.button:visited,
 button{
     font-family: "Helvetica Neue", Helvetica, sans-serif;
     font-size: 1em;
@@ -54,6 +55,7 @@ button{
 
 .button:hover,
 button:hover{
+    color: #dedede;
     background-color: #0055a0;
 }
 
@@ -182,7 +184,7 @@ hr{
 }
 
 .breadcrumb li:first-child a{
-    padding-left: 1em;
+    padding-left: 4em;
 }
 
 .breadcrumb li:last-child a{
@@ -269,8 +271,13 @@ hr{
     text-align: center;
 }
 
+.hidden{
+    display: none;
+}
+
 .archive-list{
     list-style-type: none;
+    padding-left: 1em;
 }
 
 .archive-child-list{
@@ -281,6 +288,11 @@ hr{
     display: block;
 }
 
+.nxtpage-container{
+    text-align: center;
+    padding: 2em;
+}
+
 @media (max-width: 760px){
     .blog-content,
     .weblog-sidebar{
@@ -292,6 +304,9 @@ hr{
         padding: 0.5em 1em;
     }
 
+    .breadcrumb li:first-child a{
+        padding-left: 1em;
+    }
     .breadcrumb li:last-child a{
         color: #aaa;
     }
diff --git a/weblog/static/weblog/js/weblog.js b/weblog/static/weblog/js/weblog.js
index f885da2..ff72827 100755
--- a/weblog/static/weblog/js/weblog.js
+++ b/weblog/static/weblog/js/weblog.js
@@ -12,23 +12,26 @@ function toggleNode(caller){
     target.classList.toggle('show');
 }
 
-function loadBlogPosts(url, page = 2){
+function loadBlogPosts(url, page = 2, isinfinite = false){
     var req = new XMLHttpRequest();
-    function insert(){
-        if (this.status == 200 && this.readyState == 4){
-            var blog_content = document.querySelector(".blog-content");
-            try{
-                var nxtpage_button = document.querySelector(".nxtpage-button");
-                nxtpage_button.insertAdjacentHTML("beforebegin", this.responseText);
+    function insert(response, isinfinite){
+        if (response.status == 200 && response.readyState == 4){
+            var loader_container = document.querySelector(".loader-container");
+            if (!isinfinite){
+                var nxtpage_container = document.querySelector(".nxtpage-container");
+                nxtpage_container.insertAdjacentHTML("beforebegin", response.responseText);
+                nxtpage_container.classList.remove("hidden");
             }
-            catch(er){
-                console.log("error "+er);
-                blog_content.insertAdjacentHTML("beforeend", this.responseText);
+            else{
+                loader_container.insertAdjacentHTML("beforebegin", response.responseText);
             }
-            console.log(this.responseText);
+            loader_container.classList.add("hidden");
         }
     }
-    req.addEventListener("readystatechange", insert);
+    if(!isinfinite)
+        document.querySelector(".nxtpage-container").classList.add("hidden");
+    document.querySelector(".loader-container").classList.remove("hidden");
+    req.addEventListener("readystatechange", function(){insert(this, isinfinite)});
     req.open("GET", url, true);
     req.send();
 }