dynamic, infinite load done

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]})