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(-)
(limited to 'weblog')
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 %}">«</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