Endless scrolling mode

This commit is contained in:
Marcin Kurczewski 2013-10-09 12:18:22 +02:00
parent 73ddb24296
commit 65e1a52b20
4 changed files with 46 additions and 9 deletions

View file

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

View file

@ -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();
});

View file

@ -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');

View file

@ -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: ?>
<?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 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;