Endless scrolling mode

config.ini

@@ -14,6 +14,7 @@ postsPerPage=20
 thumbWidth=150
 thumbHeight=150
 thumbStyle=outside
+endlessScrolling=1
 
 [registration]
 emailActivation   = 0

public_html/media/js/post-list-endless.js

@@ -0,0 +1,32 @@
+function scrolled()
+{
+	var margin = 150;
+	if ($(document).height() <= $(window).scrollTop() + $(window).height() + margin)
+	{
+		var pageNext = $(document).data('page-next');
+		var pageDone = $(document).data('page-done');
+		if (pageNext == null)
+		{
+			pageNext = $('.paginator .next:not(.inactive) a').attr('href');
+		}
+		if (pageNext != null && pageNext != pageDone)
+		{
+			$(document).data('page-done', pageNext);
+			$.get(pageNext, [], function(response)
+			{
+				var dom = $(response);
+				var nextPage = dom.find('.paginator .next:not(.inactive) a').attr('href');
+				$(document).data('page-next', nextPage);
+				$('.posts').append($(response).find('.posts').children().fadeIn('slow'));
+				$('body').trigger('postsLoaded');
+			});
+		}
+	}
+}
+
+$(function()
+{
+	$('.paginator').hide();
+	$(window).scroll(scrolled);
+	scrolled();
+});

src/Controllers/PostController.php

@@ -21,6 +21,8 @@ class PostController
 	public function listAction($page = 1, $query = null)
 	{
 		$this->context->stylesheets []= 'post-list.css';
+		if ($this->config->browsing->endlessScrolling)
+			$this->context->scripts []= 'post-list-endless.js';
 
 		#redirect requests in form of /posts/?query=... to canonical address
 		$formQuery = InputHelper::get('query');

src/Views/post-list.phtml

@@ -1,11 +1,13 @@
 <?php if (!empty($this->context->transport->errorMessage)): ?>
 	<p class="alert alert-error"><?php echo $this->context->transport->errorMessage ?></p>
 <?php else: ?>
+	<div class="posts">
 		<?php foreach ($this->context->transport->posts as $post): ?>
 			<a href="<?php echo \Chibi\UrlHelper::route('post', 'view', ['id' => $post['id']]) ?>">
 				<img src="<?php echo \Chibi\UrlHelper::route('post', 'thumb', ['id' => $post['id']]) ?>" alt="@<?php echo $post['id'] ?>"/>
 			</a>
 		<?php endforeach ?>
+	</div>
 <?php endif ?>
 
 <?php
@@ -30,9 +32,9 @@ if (!function_exists('pageUrl'))
 <nav class="paginator-wrapper">
 	<ul class="paginator">
 		<?php if ($this->context->transport->page > 1): ?>
-			<li>
+			<li class="prev">
 		<?php else: ?>
-			<li class="inactive">
+			<li class="prev inactive">
 		<?php endif ?>
 			<a href="<?php echo pageUrl($this->context->transport->page - 1) ?>">
 				&laquo;
@@ -63,9 +65,9 @@ if (!function_exists('pageUrl'))
 		<?php endforeach ?>
 
 		<?php if ($this->context->transport->page < $this->context->transport->pageCount): ?>
-			<li>
+			<li class="next">
 		<?php else: ?>
-			<li class="inactive">
+			<li class="next inactive">
 		<?php endif ?>
 			<a href="<?php echo pageUrl($this->context->transport->page + 1) ?>">
 				&raquo;