infinite scroll vault folder view

gulpfile.js

@@ -121,6 +121,10 @@ gulp.task('lib', ['clean:lib'], function () {
                 paths.npmDir + 'angulartics/src/angulartics.js'
             ],
             dest: paths.libDir + 'angulartics'
+        },
+        {
+            src: paths.npmDir + 'ng-infinite-scroll/build/ng-infinite-scroll.js',
+            dest: paths.libDir + 'ng-infinite-scroll'
         }
     ];
 

package.json

@@ -32,6 +32,7 @@
     "tldjs": "1.7.0",
     "browserify": "13.1.1",
     "vinyl-source-stream": "1.1.0",
-    "gulp-google-webfonts": "0.0.14"
+    "gulp-google-webfonts": "0.0.14",
+    "ng-infinite-scroll": "1.3.0"
   }
 }

src/popup/app/vault/vaultModule.js

@@ -1,2 +1,2 @@
 angular
-    .module('bit.vault', ['ngAnimate', 'toastr', 'ngclipboard', 'oitozero.ngSweetAlert']);
+    .module('bit.vault', ['ngAnimate', 'toastr', 'ngclipboard', 'oitozero.ngSweetAlert', 'infinite-scroll']);

src/popup/app/vault/vaultViewFolderController.js

@@ -3,6 +3,8 @@
 
     .controller('vaultViewFolderController', function ($scope, siteService, folderService, $q, $state, $stateParams, toastr,
         syncService, $analytics, i18nService) {
+        var pageSize = 100;
+
         $scope.folder = {
             id: $stateParams.folderId || null,
             name: '(none)'
@@ -12,6 +14,7 @@
 
         $scope.loaded = false;
         $scope.vaultSites = [];
+        $scope.pagedVaultSites = [];
         loadVault();
 
         function loadVault() {
@@ -38,7 +41,37 @@
 
             $q.all(promises).then(function () {
                 $scope.loaded = true;
-                $scope.vaultSites = decSites;
+                $scope.vaultSites = decSites.sort(function (a, b) {
+                    if (!a.name) {
+                        return 1;
+                    }
+
+                    var aName = a.name.toLowerCase(),
+                        bName = b.name.toLowerCase();
+                    if (aName > bName) {
+                        return 1;
+                    }
+                    if (aName < bName) {
+                        return -1;
+                    }
+
+                    if (!a.username) {
+                        return 1;
+                    }
+
+                    var aUsername = a.username.toLowerCase(),
+                        bUsername = b.username.toLowerCase();
+                    if (aUsername > bUsername) {
+                        return 1;
+                    }
+                    if (aUsername < bUsername) {
+                        return -1;
+                    }
+
+                    // a must be equal to b
+                    return 0;
+                });;
+
                 if (decFolder) {
                     $scope.folder.name = decFolder.name;
                 }
@@ -46,19 +79,19 @@
             });
         }
 
+        $scope.loadMore = function () {
+            var pagedLength = $scope.pagedVaultSites.length;
+            if ($scope.vaultSites.length > pagedLength) {
+                $scope.pagedVaultSites =
+                    $scope.pagedVaultSites.concat($scope.vaultSites.slice(pagedLength, pagedLength + pageSize));
+            }
+        };
+
         $scope.searchText = null;
         if ($stateParams.searchText) {
             $scope.searchText = $stateParams.searchText;
         }
 
-        $scope.folderSort = function (item) {
-            if (!item.id) {
-                return '';
-            }
-
-            return item.name.toLowerCase();
-        };
-
         $scope.searchSites = function () {
             if (!$scope.searchText || $scope.searchText.length < 2) {
                 return;
@@ -111,10 +144,6 @@
             toastr.info(type + i18nService.valueCopied);
         };
 
-        $scope.$on('syncCompleted', function (event, successfully) {
-            setTimeout(loadVault, 500);
-        });
-
         function getScrollY() {
             var content = document.getElementsByClassName('content')[0];
             return content.scrollTop;

src/popup/app/vault/views/vaultViewFolder.html

@@ -11,15 +11,13 @@
     </div>
 </div>
 <div class="content">
-    <div ng-if="vaultSites.length">
+    <div ng-if="vaultSites.length" infinite-scroll="loadMore()" infinite-scroll-distance="1" infinite-scroll-parent="true"
+         infinite-scroll-immediate-check="true">
         <div class="list">
             <div class="list-section" style="padding-bottom: 0;">
-                <div class="list-section-header">
-                    {{folder.name}}
-                </div>
                 <a href="javascript:void(0)" ng-click="viewSite(site)"
                    class="list-section-item condensed" title="{{i18n.edit}} {{site.name}}"
-                   ng-repeat="site in vaultSites | filter: searchSites() | orderBy: ['name', 'username']">
+                   ng-repeat="site in pagedVaultSites">
                     <span class="btn-list" ng-click="$event.stopPropagation()" title="{{i18n.copyPassword}}" ngclipboard
                           ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.password)"
                           data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}">

src/popup/index.html

@@ -27,6 +27,7 @@
     <script src="../lib/angularjs-slider/rzslider.js"></script>
     <script src="../lib/angulartics/angulartics.js"></script>
     <script src="../lib/angulartics/angulartics-ga.js"></script>
+    <script src="../lib/ng-infinite-scroll/ng-infinite-scroll.js"></script>
 
     <script src="app/app.js"></script>
     <script src="app/config.js"></script>