diff --git a/assets/js/infinitescroll.js b/assets/js/infinitescroll.js new file mode 100644 index 0000000..b737b7d --- /dev/null +++ b/assets/js/infinitescroll.js @@ -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; + }); + } + } + }); +}); diff --git a/default.hbs b/default.hbs index 80f50ef..b3d7a63 100644 --- a/default.hbs +++ b/default.hbs @@ -57,11 +57,17 @@ {{!-- jQuery + Fitvids, which makes all video embeds responsive --}} + src="https://code.jquery.com/jquery-3.2.1.min.js" + integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" + crossorigin="anonymous"> + + + + {{!-- 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"}}}