From 94d279de008bad21f009966a7b157d1dea0cf651 Mon Sep 17 00:00:00 2001 From: Trevor Bedford Date: Sat, 17 Oct 2015 18:21:02 -0700 Subject: [PATCH] Working prototype of infinite scroll. --- _config.yml | 4 -- _layouts/default.html | 3 ++ _layouts/post.html | 100 +++++++++++++++++++++--------------------- all-posts.json | 9 ++++ blog/index.html | 39 ++++------------ css/style.less | 35 ++++++++++++++- js/infinite-jekyll.js | 85 +++++++++++++++++++++++++++++++++++ 7 files changed, 190 insertions(+), 85 deletions(-) create mode 100755 all-posts.json create mode 100755 js/infinite-jekyll.js diff --git a/_config.yml b/_config.yml index 2f9d2e75c..c3749a955 100644 --- a/_config.yml +++ b/_config.yml @@ -14,10 +14,6 @@ redcarpet: - superscript - strikethrough -paginate: 6 -paginate_path: "blog/page:num" -paginate_category: "blog" - exclude: - "*.branches" - "*.kml" diff --git a/_layouts/default.html b/_layouts/default.html index 05863e04f..87814e4fe 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -37,6 +37,9 @@ ga('send', 'pageview'); + + + diff --git a/_layouts/post.html b/_layouts/post.html index 41f7b177e..507f25bd1 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -7,61 +7,63 @@ {% endif %} {% endfor %} -
-
-
-
-
- {{ page.title }} -
-

-

- {{ page.date | date_to_string }} - {% if author %} - by {{ author.handle }} - {% endif %} +
+
+
+
+
+
+ {{ page.title }} +
+

+

+ {{ page.date | date_to_string }} + {% if author %} + by {{ author.handle }} + {% endif %} +
-
-
-
+
+
-
-
+
+
-
-
- {% if page.link %} -
- Link -
-
-
- - {{ page.link | remove: 'http://' | remove: 'https://' | replace: '/', '/' | replace: '%', '%' }} -
-
- {% endif %} -
- Share -
-
-
- {% tweet {{page.url}} {{page.title}} %} - {% trackback {{page.url}} %} +
+
+ {% if page.link %} +
+ Link +
+
+
+ + {{ page.link | remove: 'http://' | remove: 'https://' | replace: '/', '/' | replace: '%', '%' }} +
+
+ {% endif %} +
+ Share +
+
+
+ {% tweet {{page.url}} {{page.title}} %} + {% trackback {{page.url}} %} +
+
-
+
+ {% if page.image %} + + {% endif %} +
+ {{ content }} +
+
+
-
- {% if page.image %} - - {% endif %} -
- {{ content }} -
-
-
-
+
diff --git a/all-posts.json b/all-posts.json new file mode 100755 index 000000000..c3281cd6e --- /dev/null +++ b/all-posts.json @@ -0,0 +1,9 @@ +--- +--- +{ + "posts" : [ + {% for post in site.categories.blog %} + "{{ post.url }}"{% unless forloop.last %},{% endunless %} + {% endfor %} + ] +} diff --git a/blog/index.html b/blog/index.html index 0f30579af..80b93cd00 100644 --- a/blog/index.html +++ b/blog/index.html @@ -6,14 +6,17 @@ category: blog --- -{% for post in paginator.posts %} +
+ +{% for post in site.categories.blog limit: 10 %} {% for member in site.categories.team %} {% if member.title == post.author %} {% assign author = member %} {% endif %} {% endfor %} - + +
@@ -37,37 +40,11 @@
-
+
+
{% endfor %} -
- - {% if paginator.previous_page %} - {% if paginator.previous_page == 1 %} - - {% else %} - - {% endif %} - {% endif %} - - {% if paginator.next_page %} - - {% endif %} -
-
-
- -
Archive
- - -
-
\ No newline at end of file + \ No newline at end of file diff --git a/css/style.less b/css/style.less index ca7455562..cfe873cd2 100644 --- a/css/style.less +++ b/css/style.less @@ -345,4 +345,37 @@ body.dark .pager a:hover .icon.next { background-position:-100px -90px; } body.dark .pager .icon.prev, .pager a:hover .icon.prev { background-position:-80px -70px; } body.dark .pager .icon.next, -.pager a:hover .icon.next { background-position:-100px -70px; } \ No newline at end of file +.pager a:hover .icon.next { background-position:-100px -70px; } + +/* Infinite scroll */ + +.infinite-spinner { + display: block; + width: 40px; + height: 40px; + border-radius: 40px; + background-color: #333; + margin: 60px auto; + + -webkit-animation: scaleout 1.0s infinite ease-in-out; + animation: scaleout 1.0s infinite ease-in-out; +} + +@-webkit-keyframes scaleout { + 0% { -webkit-transform: scale(0.0) } + 100% { + -webkit-transform: scale(1.0); + opacity: 0; + } +} + +@keyframes scaleout { + 0% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 100% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + opacity: 0; + } +} diff --git a/js/infinite-jekyll.js b/js/infinite-jekyll.js new file mode 100755 index 000000000..451f1fda2 --- /dev/null +++ b/js/infinite-jekyll.js @@ -0,0 +1,85 @@ +$(function() { + + var postURLs, + isFetchingPosts = false, + shouldFetchPosts = true, + postsToLoad = $(".post-list").children().length, + loadNewPostsThreshold = 3000; + + // Load the JSON file containing all URLs + $.getJSON('/all-posts.json', function(data) { + postURLs = data["posts"]; + console.log(postsToLoad); + + // If there aren't any more posts available to load than already visible, disable fetching + if (postURLs.length <= postsToLoad) + disableFetching(); + }); + + // If there's no spinner, it's not a page where posts should be fetched + if ($(".infinite-spinner").length < 1) + shouldFetchPosts = false; + + // Are we close to the end of the page? If we are, load more posts + $(window).scroll(function(e){ + if (!shouldFetchPosts || isFetchingPosts) return; + + var windowHeight = $(window).height(), + windowScrollPosition = $(window).scrollTop(), + bottomScrollPosition = windowHeight + windowScrollPosition, + documentHeight = $(document).height(); + + // If we've scrolled past the loadNewPostsThreshold, fetch posts + if ((documentHeight - loadNewPostsThreshold) < bottomScrollPosition) { + fetchPosts(); + } + }); + + // Fetch a chunk of posts + function fetchPosts() { + // Exit if postURLs haven't been loaded + if (!postURLs) return; + + isFetchingPosts = true; + + // Load as many posts as there were present on the page when it loaded + // After successfully loading a post, load the next one + var loadedPosts = 0, + postCount = $(".post-list").children().length, + callback = function() { + loadedPosts++; + var postIndex = postCount + loadedPosts; + + if (postIndex > postURLs.length-1) { + disableFetching(); + return; + } + + if (loadedPosts < postsToLoad) { + fetchPostWithIndex(postIndex, callback); + } else { + isFetchingPosts = false; + } + }; + + fetchPostWithIndex(postCount + loadedPosts, callback); + } + + function fetchPostWithIndex(index, callback) { + var postURL = postURLs[index]; + + $.get(postURL, function(data) { + $(data).find(".blog-post").appendTo(".post-list"); + console.log(postURL); + console.log($(".post-list").children().length); + callback(); + }); + } + + function disableFetching() { + shouldFetchPosts = false; + isFetchingPosts = false; + $(".infinite-spinner").fadeOut(); + } + +});