Performance improvements for scrollables

Fix #257

app/js/controllers.js

@@ -1554,8 +1554,11 @@ angular.module('myApp.controllers', [])
   })
 
   .controller('ContactsModalController', function ($scope, $modal, $modalInstance, AppUsersManager) {
+
     $scope.contacts = [];
     $scope.search = {};
+    $scope.slice = {limit: 20, limitDelta: 20}
+
 
     $scope.selectedContacts = {};
     $scope.disabledContacts = {};
@@ -1579,6 +1582,8 @@ angular.module('myApp.controllers', [])
     function updateContacts (query) {
       AppUsersManager.getContacts(query).then(function (contactsList) {
         $scope.contacts = [];
+        $scope.slice.limit = 20;
+
         angular.forEach(contactsList, function(userID) {
           var contact = {
             userID: userID,
@@ -1753,6 +1758,7 @@ angular.module('myApp.controllers', [])
   .controller('CountrySelectModalController', function ($scope, $modalInstance, $rootScope, SearchIndexManager) {
 
     $scope.search = {};
+    $scope.slice = {limit: 20, limitDelta: 20}
 
     var searchIndex = SearchIndexManager.createIndex();
 
@@ -1770,6 +1776,8 @@ angular.module('myApp.controllers', [])
       }
 
       $scope.countries = [];
+      $scope.slice.limit = 20;
+
       var j;
       for (var i = 0; i < Config.CountryCodes.length; i++) {
         if (!filtered || results[i]) {

app/js/directives.js

@@ -1120,6 +1120,38 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
   })
 
+  .directive('myInfiniteScroller', function () {
+
+    return {
+      link: link,
+      scope: true
+    };
+
+    function link($scope, element, attrs) {
+
+      var scrollableWrap = $('.content', element)[0],
+          moreNotified = false;
+
+      $(scrollableWrap).on('scroll', function (e) {
+        if (!moreNotified &&
+            scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) {
+          moreNotified = true;
+          $scope.$apply(function () {
+            $scope.slice.limit += ($scope.slice.limitDelta || 20);
+          });
+
+          onContentLoaded(function () {
+            moreNotified = false;
+            $(element).nanoScroller();
+          });
+        }
+      });
+
+    };
+  })
+
+
+
 
   .directive('myModalPosition', function ($window, $timeout) {
 

app/partials/contacts_modal.html

@@ -10,12 +10,12 @@
 
     <div my-contacts-list class="contacts_modal_col">
 
-      <div class="contacts_wrap nano">
+      <div class="contacts_wrap nano" my-infinite-scroller>
         <div class="contacts_scrollable_wrap content">
 
           <ul class="contacts_modal_members_list nav nav-pills nav-stacked">
 
-            <li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | orderBy:'user.sortName' track by contact.userID" ng-class="{active: selectedContacts[contact.userID], disabled: disabledContacts[contact.userID]}">
+            <li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | orderBy:'user.sortName' | limitTo: slice.limit track by contact.userID" ng-class="{active: selectedContacts[contact.userID], disabled: disabledContacts[contact.userID]}">
               <a class="contacts_modal_contact" ng-click="contactSelect(contact.userID)">
 
                 <i ng-if="multiSelect" class="icon icon-contact-tick"></i>

app/partials/country_select_modal.html

@@ -11,12 +11,12 @@
 
     <div class="countries_modal_col" my-countries-list>
 
-      <div class="countries_wrap nano">
+      <div class="countries_wrap nano" my-infinite-scroller>
         <div class="countries_scrollable_wrap content">
 
           <ul class="countries_modal_members_list nav nav-pills nav-stacked">
 
-            <li class="countries_modal_country_wrap clearfix" ng-repeat="country in countries track by $index">
+            <li class="countries_modal_country_wrap clearfix" ng-repeat="country in countries | limitTo : slice.limit track by $index">
               <a class="countries_modal_country" ng-click="$close(country.code)">
                 <span class="countries_modal_country_code pull-right" ng-bind="country.code"></span>
                 <span class="countries_modal_country_name" ng-bind="country.name"></span>