Implement infinite scrolling in commits list

This commit is contained in:
Jérôme Tamarelle
2012-07-19 00:12:27 +02:00
parent 1a1740047e
commit 0ae4534e00
4 changed files with 55 additions and 37 deletions

View File

@@ -25,7 +25,9 @@ class CommitController implements ControllerProviderInterface
$categorized[$date][] = $commit;
}
return $app['twig']->render('commits.twig', array(
$template = $app['request']->isXmlHttpRequest() ? 'commits_list.twig' : 'commits.twig';
return $app['twig']->render($template, array(
'pager' => $pager,
'repo' => $repo,
'branch' => $branch,

View File

@@ -7,40 +7,7 @@
{% block content %}
{% include 'breadcrumb.twig' with {breadcrumbs: [{dir: 'Commit history', path:''}]} %}
{% for date, commit in commits %}
<table class="table table-striped table-bordered">
<thead>
<tr>
<th colspan="3">{{ date | date("F j, Y") }}</th>
</tr>
</thead>
<tbody>
{% for item in commit %}
<tr>
<td width="5%"><img src="http://gravatar.com/avatar/{{ item.author.email | md5 }}?s=40" /></td>
<td width="95%">
<span class="pull-right"><a class="btn btn-small" href="{{ path('commit', {repo: repo, commit: item.shortHash}) }}"><i class="icon-list-alt"></i> View {{ item.shortHash }}</a></span>
<h4>{{ item.message }}</h4>
<span><a href="mailto:{{ item.author.email }}">{{ item.author.name }}</a> authored in {{ item.date | date('d/m/Y \\a\\t H:i:s') }}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %}
<ul class="pager">
{% if pager.current != 0 %}
<li class="previous">
<a href="?page={{ pager.previous }}">&larr; Newer</a>
</li>
{% endif %}
{% if pager.current != pager.last %}
<li class="next">
<a href="?page={{ pager.next }}">Older &rarr;</a>
</li>
{% endif %}
</ul>
{% include 'commits_list.twig' %}
<hr>
{% endblock %}

34
views/commits_list.twig Normal file
View File

@@ -0,0 +1,34 @@
{% for date, commit in commits %}
<table class="table table-striped table-bordered">
<thead>
<tr>
<th colspan="3">{{ date | date("F j, Y") }}</th>
</tr>
</thead>
<tbody>
{% for item in commit %}
<tr>
<td width="5%"><img src="http://gravatar.com/avatar/{{ item.author.email | md5 }}?s=40" /></td>
<td width="95%">
<span class="pull-right"><a class="btn btn-small" href="{{ path('commit', {repo: repo, commit: item.shortHash}) }}"><i class="icon-list-alt"></i> View {{ item.shortHash }}</a></span>
<h4>{{ item.message }}</h4>
<span><a href="mailto:{{ item.author.email }}">{{ item.author.name }}</a> authored in {{ item.date | date('d/m/Y \\a\\t H:i:s') }}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %}
<ul class="pager">
{% if pager.current != 0 %}
<li class="previous">
<a href="?page={{ pager.previous }}">&larr; Newer</a>
</li>
{% endif %}
{% if pager.current != pager.last %}
<li class="next">
<a href="?page={{ pager.next }}">Older &rarr;</a>
</li>
{% endif %}
</ul>

View File

@@ -15,10 +15,25 @@ $(function () {
readOnly: true,
mode: mode
});
};
}
if ($('#readme-content').length) {
var converter = new Showdown.converter();
$('#readme-content').html(converter.makeHtml($('#readme-content').text()));
}
});
function paginate() {
var $pager = $('.pager');
$pager.find('.next a').one('click', function (e) {
e.preventDefault();
$(this).css('pointer-events', 'none');
$.get(this.href, function (html) {
$pager.after(html);
$pager.remove();
paginate();
});
});
$pager.find('.previous').remove();
}
paginate();
});