Add scroll progressive page loading feature
This commit is contained in:
parent
f04e6fd466
commit
edf11ce0d3
2 changed files with 60 additions and 24 deletions
78
inc/myco.js
78
inc/myco.js
|
@ -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);
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue