dynamic (no infinite) scrolling working on categories, index (not archive)

2 files changed, 49 insertions, 1 deletions

diff --git a/weblog/static/weblog/js/weblog.js b/weblog/static/weblog/js/weblog.js
index 3d93770..f885da2 100755
--- a/weblog/static/weblog/js/weblog.js
+++ b/weblog/static/weblog/js/weblog.js
@@ -12,5 +12,23 @@ function toggleNode(caller){
     target.classList.toggle('show');
 }
 
-function loadBlogPosts(page = 2, category = null){
+function loadBlogPosts(url, page = 2){
+    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);
+            }
+            catch(er){
+                console.log("error "+er);
+                blog_content.insertAdjacentHTML("beforeend", this.responseText);
+            }
+            console.log(this.responseText);
+        }
+    }
+    req.addEventListener("readystatechange", insert);
+    req.open("GET", url, true);
+    req.send();
 }
diff --git a/weblog/templates/weblog/index.html b/weblog/templates/weblog/index.html
index b30c0ff..aa0b70a 100755
--- a/weblog/templates/weblog/index.html
+++ b/weblog/templates/weblog/index.html
@@ -62,6 +62,13 @@
             </div>

         </div>

         {% endfor %}

+        {% if dynamic_load %}

+        {% if not infinite_load %}

+        <div class="nxtpage-container">

+            <a class="button nxtpage-button" href="#">{% trans 'Load more...' context 'Load more pages' %}</a>

+        </div>

+        {% endif %}

+        {% else %}

         {% if last_page > 1 %}

         <ul class="pagination">

             {% if current_page != 1 %}

@@ -100,6 +107,7 @@
         </ul>

         {% endif %}

         {% endif %}

+        {% endif %}

         {% else %}

         <div class="text-center"><h3>{% trans 'Nothing has been posted yet.' %}</h3></div>

         {% endif %}

@@ -107,8 +115,30 @@
     <script>

         var current_page = {{ current_page }};

         var last_page = {{ last_page }};

+        function loadNextPage(e){

+            try{

+                e.stopPropagation();

+                e.preventDefault();

+            }

+            catch(er){}

+            if (current_page != last_page){

+                current_page++;

+                {% if category %}

+                var url = "{% url 'weblog:GetCategoryPosts' category_slug=category.slug nxtpage=current_page %}";

+                {% else %}

+                var url = "{% url 'weblog:GetPosts' nxtpage=current_page %}";

+                {% endif %}

+                url = url.substring(0, url.length - 2)+current_page;

+                loadBlogPosts(url, current_page);

+                console.log("loading");

+            }

+        }

         {% if infinite_load %}

         {% else %}

+        window.addEventListener("load", function(){

+            var nxtpage_button = document.querySelector(".nxtpage-button");

+            nxtpage_button.addEventListener("click", loadNextPage);

+        });

         {% endif %}

     </script>

     {% endif %}