themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

💄 Infinite scroll (#316) 

* 💄  Infinite scroll

closes #314

Adds infinite scroll logic to Casper 2.0

* use jquery min and not slim
This commit is contained in:
Aileen Nowak 2017-06-21 19:10:09 +07:00 committed by John O'Nolan
parent d6d9711b9d
commit 0914d43a86
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/js/infinitescroll.js Normal file
View File

@ -0,0 +1,18 @@
// Code snippet inspired by https://github.com/douglasrodrigues5/ghost-blog-infinite-scroll
$().ready(function () {
var page = 2,
blogUrl = window.location,
$result = $('.post-feed');
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
if (page <= maxPages) {
$.get((blogUrl + '/page/' + page),
function (content) {
$result.append($(content).find('.post').hide().fadeIn(100));
page = page + 1;
});
}
}
});
});

12
default.hbs
View File

@ -57,11 +57,17 @@
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}} {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
<script <script
src="//code.jquery.com/jquery-3.2.1.slim.min.js" src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script> crossorigin="anonymous">
</script>
<script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script> <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
<script>
var maxPages = parseInt('{{pagination.pages}}');
</script>
<script src="{{asset "js/infinitescroll.js"}}"></script>
{{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}} {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
{{{block "scripts"}}} {{{block "scripts"}}}