From d42e64a09e6e1898d4423d786bc48a47a8b8fc0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yaroslav=20de=20la=20Pe=C3=B1a=20Smirnov?=
 <contact@yaroslavps.com>
Date: Mon, 8 Oct 2018 00:03:23 +0300
Subject: dynamic (no infinite) scrolling working on categories, index (not
 archive)

---
 weblog/static/weblog/js/weblog.js  | 20 +++++++++++++++++++-
 weblog/templates/weblog/index.html | 30 ++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

(limited to 'weblog')

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 %}
-- 
cgit v1.2.3