Add scroll progressive page loading feature

This commit is contained in:
Benjamin Renard 2014-11-13 00:40:19 +01:00 committed by root
parent f04e6fd466
commit edf11ce0d3
2 changed files with 60 additions and 24 deletions

View file

@ -172,36 +172,60 @@ on_contributor_change=function(e) {
show_contributions(groups[$('#view-group').data('uuid')],$('#view-group #contributor')[0].value);
}
_current_displayed_contributions=[];
_current_displayed_contributions_group=null;
show_contributions=function(group,contributor_email,contributions) {
var tbody=$($('#view-group #contributions tbody')[0]);
tbody.html('');
total=$($('#view-group #total-value')[0]);
if (!contributions) {
contributions=group.contributionsByContributorEmail(contributor_email);
contributions.reverse();
}
if (contributions.length==0) {
tbody.append('<tr><td colspan=3>Aucune contributions</td></tr>');
total.html('0,00 €');
}
else {
sum=0;
for (idx in contributions) {
var cat='';
if (contributions[idx].category && jQuery.type(group.categories[contributions[idx].category])) {
cat='<br/><span class="category"><span class="cat-color" style="background-color: '+group.categories[contributions[idx].category]['color']+'"></span> '+group.categories[contributions[idx].category]['name']+"</span>";
}
col_actions='<td><div class="btn-group" data-uuid="'+contributions[idx].uuid+'"><button type="button" class="btn btn-default btn-sm contribution_edit_btn"><span class="glyphicon glyphicon-edit"></span></button><button type="button" class="btn btn-default btn-sm contribution_delete_btn"><span class="glyphicon glyphicon-trash"></span></button></div></td>';
tbody.append('<tr><td>'+contributions[idx].getTitle()+cat+'</td><td>'+contributions[idx].cost.toFixed(2)+' €<br/><span class="date">'+moment(contributions[idx].date).format('DD/MM/YYYY')+'</span></td>'+col_actions+'</tr>');
sum+=contributions[idx].cost;
}
total.html(sum.toFixed(2)+' €');
}
_current_displayed_contributions=contributions;
_current_displayed_contributions_group=group;
show_more_contributions();
$('.contribution_delete_btn').bind('click',on_contribution_delete_btn_click);
$('.contribution_edit_btn').bind('click',on_contribution_edit_btn_click);
}
show_more_contributions=function(count) {
if (!_current_displayed_contributions_group) return;
var tbody=$($('#view-group #contributions tbody')[0]);
if (_current_displayed_contributions.length==0) {
tbody.html('');
tbody.append('<tr><td colspan=3>Aucune contributions</td></tr>');
}
else {
var previous=0;
if (tbody.children('tr').length>0) {
previous=tbody.children('tr').length-1;
}
if (!count) count=20;
for (var i=0; i<count; i++) {
var idx=previous+i;
if (!_current_displayed_contributions[idx]) break;
var cat='';
if (_current_displayed_contributions[idx].category && jQuery.type(_current_displayed_contributions_group.categories[_current_displayed_contributions[idx].category])) {
cat='<br/><span class="category"><span class="cat-color" style="background-color: '+_current_displayed_contributions_group.categories[_current_displayed_contributions[idx].category]['color']+'"></span> '+_current_displayed_contributions_group.categories[_current_displayed_contributions[idx].category]['name']+"</span>";
}
col_actions='<td><div class="btn-group" data-uuid="'+_current_displayed_contributions[idx].uuid+'"><button type="button" class="btn btn-default btn-sm contribution_edit_btn"><span class="glyphicon glyphicon-edit"></span></button><button type="button" class="btn btn-default btn-sm contribution_delete_btn"><span class="glyphicon glyphicon-trash"></span></button></div></td>';
tbody.append('<tr><td>'+_current_displayed_contributions[idx].getTitle()+cat+'</td><td>'+_current_displayed_contributions[idx].cost.toFixed(2)+' €<br/><span class="date">'+moment(_current_displayed_contributions[idx].date).format('DD/MM/YYYY')+'</span></td>'+col_actions+'</tr>');
}
}
}
_view_group_scroll_lock=false;
on_view_group_scroll=function(event) {
if (_view_group_scroll_lock) return;
_view_group_scroll_lock=true;
if ($('#view-group').css('display')=='block' && is_on_bottom()) {
show_more_contributions(20);
}
_view_group_scroll_lock=false;
}
on_categories_group_btn_click=function(e) {
group=groups[$('#view-group').data('uuid')];
$('#view-group-categories').data('group-uuid',$('#view-group').data('uuid'));
@ -897,6 +921,23 @@ on_click_logoff_btn=function() {
logged_out_menu();
}
is_on_bottom=function(){
var totalHeight, currentScroll, visibleHeight;
if (document.documentElement.scrollTop) {
currentScroll = document.documentElement.scrollTop;
}
else {
currentScroll = document.body.scrollTop;
}
totalHeight = document.body.offsetHeight;
visibleHeight = document.documentElement.clientHeight;
return (totalHeight <= currentScroll + visibleHeight );
}
/*******************
* pleaseWaitDialog
*******************/
@ -952,6 +993,7 @@ $( document ).ready( function() {
$('#subscribe_modal form').bind('submit',on_valid_subscribe_modal);
$('#view-group #contributor').bind('change',on_contributor_change);
$(window).bind('scroll',on_view_group_scroll);
$('#add_contributor_btn').bind('click',on_click_add_contributor_btn);
$('#add_contributor_submit').bind('click',on_valid_add_contributor_modal);

View file

@ -256,12 +256,6 @@ span.cat-color {
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id='total-label'>Total :</td>
<td id='total-value' colspan='2'>126,56€</td>
</tr>
</tfoot>
</table>
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">