💄 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:
parent
d6d9711b9d
commit
0914d43a86
2 changed files with 27 additions and 3 deletions
18
assets/js/infinitescroll.js
Normal file
18
assets/js/infinitescroll.js
Normal 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
12
default.hbs
|
@ -57,11 +57,17 @@
|
|||
|
||||
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
|
||||
<script
|
||||
src="//code.jquery.com/jquery-3.2.1.slim.min.js"
|
||||
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
crossorigin="anonymous"></script>
|
||||
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous">
|
||||
</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. --}}
|
||||
{{{block "scripts"}}}
|
||||
|
||||
|
|
Loading…
Reference in a new issue