From 89b97e2ad786234a8e8f5ba38bbe5fc3cbd01022 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 05:08:23 +0300
Subject: dynamic, infinite load done

---
 weblog/apps.py                      |  2 +-
 weblog/static/weblog/css/weblog.css | 17 ++++++++++++++++-
 weblog/static/weblog/js/weblog.js   | 27 +++++++++++++++------------
 weblog/templates/weblog/index.html  | 34 ++++++++++++++++++++++++++++++----
 weblog/views.py                     |  1 +
 5 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/weblog/apps.py b/weblog/apps.py
index 3197cef..f7c3cbf 100755
--- a/weblog/apps.py
+++ b/weblog/apps.py
@@ -4,7 +4,7 @@ SETTINGS = {
     'enable_comments': False,
     'allow_anon_comments': False,
     'multilingual': True,
-    'blog_title': 'Django-Weblog',
+    'blog_title': 'w3blog',
     'base_template': 'weblog_base.html',
     'show_author': True,
     'use_authors_username': True,
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();
 }
diff --git a/weblog/templates/weblog/index.html b/weblog/templates/weblog/index.html
index aa0b70a..2fab730 100755
--- a/weblog/templates/weblog/index.html
+++ b/weblog/templates/weblog/index.html
@@ -62,14 +62,19 @@
             </div>
         </div>
         {% endfor %}
+        {% if last_page > 1 %}
         {% if dynamic_load %}
         {% if not infinite_load %}
-        <div class="nxtpage-container">
+        <div class="nxtpage-container text-center">
             <a class="button nxtpage-button" href="#">{% trans 'Load more...' context 'Load more pages' %}</a>
         </div>
         {% endif %}
+        <div class="loader-container text-center hidden">
+            <div class="loader">
+                {% trans 'Loading...' %}
+            </div>
+        </div>
         {% else %}
-        {% if last_page > 1 %}
         <ul class="pagination">
             {% if current_page != 1 %}
             <li title="{% trans 'First' context 'Page' %}"><a href="{% if category %}{% if category == 'misc' %}{% url 'weblog:CategoryIndex' category_slug='misc' %}{% else %}{% url 'weblog:CategoryIndex' category_slug=category.slug %}{% endif %}{% else %}{% url 'weblog:Index' %}{% endif %}">&laquo;</a></li>
@@ -115,6 +120,9 @@
     <script>
         var current_page = {{ current_page }};
         var last_page = {{ last_page }};
+        {% if not infinite_load %}
+        var nxtpage_button = document.querySelector(".nxtpage-button");
+        {% endif %}
         function loadNextPage(e){
             try{
                 e.stopPropagation();
@@ -125,18 +133,36 @@
                 current_page++;
                 {% if category %}
                 var url = "{% url 'weblog:GetCategoryPosts' category_slug=category.slug nxtpage=current_page %}";
+                {% elif year %}
+                {% if month_num %}
+                var url = "{% url 'weblog:GetArchivePosts' year=year month=month_num nxtpage=current_page %}";
+                {% else %}
+                var url = "{% url 'weblog:GetArchivePosts' year=year nxtpage=current_page %}";
+                {% endif %}
                 {% else %}
                 var url = "{% url 'weblog:GetPosts' nxtpage=current_page %}";
                 {% endif %}
                 url = url.substring(0, url.length - 2)+current_page;
+                {% if infinite_load %}
+                loadBlogPosts(url, current_page, true);
+                {% else %}
                 loadBlogPosts(url, current_page);
-                console.log("loading");
+                {% endif %}
+                {% if not infinite_load %}
+                if (current_page == last_page)
+                    document.querySelector(".nxtpage-container").removeChild(nxtpage_button);
+                {% endif %}
             }
         }
         {% if infinite_load %}
+        window.addEventListener("scroll", function(){
+            if (current_page != last_page){
+                if(document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight)
+                    loadNextPage();
+            }
+        });
         {% else %}
         window.addEventListener("load", function(){
-            var nxtpage_button = document.querySelector(".nxtpage-button");
             nxtpage_button.addEventListener("click", loadNextPage);
         });
         {% endif %}
diff --git a/weblog/views.py b/weblog/views.py
index 3152edc..72700c0 100755
--- a/weblog/views.py
+++ b/weblog/views.py
@@ -47,6 +47,7 @@ def Index(request, **kwargs):
         context_dict['breadcrumbs'] = [{'url': reverse('weblog:ArchiveIndex', kwargs={'year': year}), 'name': str(year)},]
         if month:
             context_dict['month'] = MONTHS[int(month)-1]
+            context_dict['month_num'] = month
             all_pages = all_pages.filter(published=True, publish_date__lte=now, publish_date__month=month)
             context_dict['breadcrumbs'].append({'url': reverse('weblog:ArchiveIndex', kwargs={'year': year, 'month': month}), 'name': MONTHS[int(month)-1]})
 
-- 
cgit v1.2.3