Add scroll progressive page loading feature
Benjamin Renard

Benjamin Renard commited on 2014-11-12 23:40:46
Showing 2 changed files, with 55 additions and 19 deletions.

... ...
@@ -172,34 +172,58 @@ on_contributor_change=function(e) {
172 172
 	show_contributions(groups[$('#view-group').data('uuid')],$('#view-group #contributor')[0].value);
173 173
 }
174 174
 
175
+_current_displayed_contributions=[];
176
+_current_displayed_contributions_group=null;
175 177
 show_contributions=function(group,contributor_email,contributions) {
176 178
   var tbody=$($('#view-group #contributions tbody')[0]);
177 179
   tbody.html('');
178
-  total=$($('#view-group #total-value')[0]);
179 180
   if (!contributions) {
180 181
     contributions=group.contributionsByContributorEmail(contributor_email);
181 182
     contributions.reverse();
182 183
   }
183
-  if (contributions.length==0) {
184
+  _current_displayed_contributions=contributions;
185
+  _current_displayed_contributions_group=group;
186
+
187
+  show_more_contributions();
188
+  
189
+  $('.contribution_delete_btn').bind('click',on_contribution_delete_btn_click);
190
+  $('.contribution_edit_btn').bind('click',on_contribution_edit_btn_click);
191
+}
192
+
193
+show_more_contributions=function(count) {
194
+  if (!_current_displayed_contributions_group) return;
195
+  var tbody=$($('#view-group #contributions tbody')[0]);
196
+   if (_current_displayed_contributions.length==0) {
197
+    tbody.html('');
184 198
     tbody.append('<tr><td colspan=3>Aucune contributions</td></tr>');
185
-    total.html('0,00 €');
186 199
   }
187 200
   else {
188
-    sum=0;
189
-    for (idx in contributions) {
201
+    var previous=0;
202
+    if (tbody.children('tr').length>0) {
203
+      previous=tbody.children('tr').length-1;
204
+    }
205
+    if (!count) count=20;
206
+    for (var i=0; i<count; i++) {
207
+      var idx=previous+i;
208
+      if (!_current_displayed_contributions[idx]) break;
190 209
       var cat='';
191
-      if (contributions[idx].category && jQuery.type(group.categories[contributions[idx].category])) {
192
-		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>";
210
+      if (_current_displayed_contributions[idx].category && jQuery.type(_current_displayed_contributions_group.categories[_current_displayed_contributions[idx].category])) {
211
+		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>";
212
+	  }
213
+      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>';
214
+      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>');
193 215
     }
194
-      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>';
195
-      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>');
196
-      sum+=contributions[idx].cost;
197 216
   } 
198
-    total.html(sum.toFixed(2)+' €');
199 217
 }
200 218
 
201
-  $('.contribution_delete_btn').bind('click',on_contribution_delete_btn_click);
202
-  $('.contribution_edit_btn').bind('click',on_contribution_edit_btn_click);
219
+_view_group_scroll_lock=false;
220
+on_view_group_scroll=function(event) {
221
+  if (_view_group_scroll_lock) return;
222
+  _view_group_scroll_lock=true;
223
+  if ($('#view-group').css('display')=='block' && is_on_bottom()) {
224
+    show_more_contributions(20);
225
+  }
226
+  _view_group_scroll_lock=false;
203 227
 }
204 228
 
205 229
 on_categories_group_btn_click=function(e) {
... ...
@@ -897,6 +921,23 @@ on_click_logoff_btn=function() {
897 921
   logged_out_menu();
898 922
 }
899 923
 
924
+is_on_bottom=function(){
925
+  var totalHeight, currentScroll, visibleHeight;
926
+  
927
+  if (document.documentElement.scrollTop) {
928
+    currentScroll = document.documentElement.scrollTop;
929
+  }
930
+  else {
931
+    currentScroll = document.body.scrollTop;
932
+  }
933
+  
934
+  totalHeight = document.body.offsetHeight;
935
+  visibleHeight = document.documentElement.clientHeight;
936
+  
937
+  return (totalHeight <= currentScroll + visibleHeight );
938
+}
939
+  
940
+
900 941
 /*******************
901 942
  * pleaseWaitDialog
902 943
  *******************/
... ...
@@ -952,6 +993,7 @@ $( document ).ready( function() {
952 993
   $('#subscribe_modal form').bind('submit',on_valid_subscribe_modal);
953 994
 
954 995
   $('#view-group #contributor').bind('change',on_contributor_change);
996
+  $(window).bind('scroll',on_view_group_scroll);
955 997
 
956 998
   $('#add_contributor_btn').bind('click',on_click_add_contributor_btn);
957 999
   $('#add_contributor_submit').bind('click',on_valid_add_contributor_modal);
... ...
@@ -256,12 +256,6 @@ span.cat-color {
256 256
         </td>
257 257
       </tr>
258 258
     </tbody>
259
-    <tfoot>
260
-      <tr>
261
-        <td id='total-label'>Total :</td>
262
-        <td id='total-value' colspan='2'>126,56€</td>
263
-      </tr>
264
-    </tfoot> 
265 259
   </table>
266 260
   
267 261
   <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
268 262