dfx.sk/dfx-jekyll-mdl
1
0
Fork 0
Code Issues Releases Activity

jkm-1 testing blog pagination

Browse source
This commit is contained in:
Oscar Cortez 2015-07-17 19:47:59 -06:00
parent 14992ea3e9
commit 066dc91ded
3 changed files with 90 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
_config.yml
View file

@ -13,5 +13,9 @@ github_username: jekyll
# Layout settings
header_type: fixed
post_type: highlight
# Build settings
markdown: kramdown
# Pagination
paginate: 3

24
index.html
View file

@ -2,9 +2,17 @@
layout: default
---
<div class="mdl-grid">
{% for post in site.posts %}
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
{% if paginator.page %}
{% assign offset = paginator.page | minus:1 | times:paginator.per_page %}
{% assign currentPage = paginator.page %}
{% else %}
{% assign offset = 0 %}
{% assign currentPage = 1 %}
{% endif %}
<div class="mdl-grid" id="js-post-container" data-page="{{ currentPage }}" data-total-pages="{{ paginator.total_pages }}">
{% for post in site.posts limit:site.paginate offset:offset %}
<article class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">{{ post.title }}</h2>
</div>
@ -24,6 +32,14 @@ layout: default
<i class="material-icons">share</i>
</button>
</div>
</div>
</article>
{% endfor %}
{% assign postCount = site.posts | size %}
{% assign postsCovered = site.paginate | plus:offset %}
{% if postsCovered < postCount %}
<button id="js-load-more">Load more posts</button>
{% endif %}
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script rel="javascript" src="{{ "/js/site.js" | prepend: site.baseurl }}"></script>
</div>

66
js/site.js Normal file
View file

@ -0,0 +1,66 @@
//$(".loadMore").click(loadMorePosts);
var _this = document.getElementById("js-load-more");
_this.onclick = loadMorePosts;
var HttpClient = function() {
this.get = function(Url, Callback) {
var HttpRequest = new XMLHttpRequest();
HttpRequest.onreadystatechange = function() {
if (HttpRequest.readyState == 4 && HttpRequest.status == 200)
Callback(HttpRequest.responseText);
}
HttpRequest.open( "GET", Url, true );
HttpRequest.send( null );
}
}
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
function loadMorePosts() {
//var _this = document.getElementById("js-load-more");
var blogContainer = document.getElementById("js-post-container"); //$("#js-post-container");
var nextPage = parseInt(blogContainer.dataset.page) + 1; //parseInt($blogContainer.attr("data-page")) + 1;
var totalPages = parseInt(blogContainer.dataset.totalPages); //parseInt($blogContainer.attr("data-totalPages"));
_this.className += " loading";
Client = new HttpClient();
Client.get('/page' + nextPage, function(data) {
parser = new DOMParser();
var htmlData = parser.parseFromString(data, "text/html");;
var articles = htmlData.getElementsByTagName("article");
console.log(articles);
blogContainer.innerHTML += data;
if (blogContainer.dataset.totalPages == nextPage) {
document.getElementById("js-load-more").remove();
}
_this.className = "";
});
// $.get("/page" + nextPage, function (data) {
// var htmlData = $.parseHTML(data);
// console.log(htmlData);
// var $articles = $(htmlData).find("article");
// blogContainer.attr("data-page", nextPage).append($articles);
// if (blogContainer.attr("data-totalPages") == nextPage) {
// $(".loadMore").remove();
// }
// $(_this).removeClass("loading");
// });
}
//---- native js----