From edf11ce0d321d712421db1e8fd75b6bf4307f08f Mon Sep 17 00:00:00 2001
From: Benjamin Renard <brenard@zionetrix.net>
Date: Thu, 13 Nov 2014 00:40:19 +0100
Subject: [PATCH] Add scroll progressive page loading feature

---
 inc/myco.js | 78 ++++++++++++++++++++++++++++++++++++++++-------------
 index.html  |  6 -----
 2 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/inc/myco.js b/inc/myco.js
index 8603a3d..d33af35 100644
--- a/inc/myco.js
+++ b/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);
diff --git a/index.html b/index.html
index 17a1797..d54337f 100644
--- a/index.html
+++ b/index.html
@@ -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">