Merge pull request #165 from angular-ui/interpolation

Interpolation
angular-ui · Jul 6, 2017 · be8d411 · be8d411
2 parents f62856d + 9a5e573
commit be8d411
Show file tree

Hide file tree

Showing 16 changed files with 181 additions and 91 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -3,6 +3,9 @@ language: node_js
 node_js:
 - '6'
 
+addons:
+  firefox: latest
+
 before_install:
 - export DISPLAY=:99.0
 - sh -e /etc/init.d/xvfb start

diff --git a/demo/differentItemHeights/differentItemHeights.html b/demo/differentItemHeights/differentItemHeights.html
@@ -1,28 +1,30 @@
 <!doctype html>
 <html>
 <head>
-    <meta charset="utf-8">
-    <title>Different Item Heights</title>
-	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
-	<script src="../../src/ui-scroll.js"></script>
-    <script src="differentItemHeights.js"></script>
-	<link rel="stylesheet" href="../css/style.css" type="text/css"/>
+  <meta charset="utf-8">
+  <title>Different Item Heights</title>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.js"></script>
+  <script src="../../dist/ui-scroll.js"></script>
+  <script src="differentItemHeights.js"></script>
+  <link rel="stylesheet" href="../css/style.css" type="text/css" />
 </head>
 <body ng-app="application">
 
-	<div class="cont cont-global">
+  <div class="cont cont-global" ng-controller="MainCtrl">
 
-		<a class="back" href="../index.html">browse other examples</a>
+    <a class="back" href="../index.html">browse other examples</a>
 
-		<h1 class="page-header page-header-exapmle">Different Item Heights</h1>
+    <h1 class="page-header page-header-exapmle">Different Item Heights (Interpolation)</h1>
 
-		<div class="viewport-wrap">
-			<div class="viewport " ui-scroll-viewport style="width: 350px; height2: 300px;">
-				<div id="dhilt" style="height:0px; overflow: hidden">trololo</div>
-				<div class="item" ui-scroll="item in datasource" style="height: {{item.height}}px">{{item.text}}</div>
-			</div>
-		</div>
+    <div class="viewport-wrap">
+      <div class="viewport " ui-scroll-viewport>
+        <div ui-scroll="item in datasource" buffer-size="10" adapter="adapter">
+          <div class="item" ng-style="{'height': item.height + 'px'}">
+            {{"content # " + item.index + ' ' + item.height}}
+          </div>
+        </div>
+      </div>
+    </div>
 
-	</div>
 </body>
 </html>
diff --git a/demo/differentItemHeights/differentItemHeights.js b/demo/differentItemHeights/differentItemHeights.js
@@ -1,29 +1,44 @@
-angular.module('application', ['ui.scroll']).factory('datasource', [
-  '$log', '$timeout', function(console, $timeout) {
-    var get, max, min;
-    min = -50;
-    max = 100;
+angular.module('application', ['ui.scroll'])
 
-    get = function(index, count, success) {
-      $timeout(function() {
+.run(function($rootScope) {
+  $rootScope.doReload = function () {
+    $rootScope.$broadcast('DO_RELOAD');
+  };
+})
+
+.controller('MainCtrl', function($scope) {
+  $scope.hello = 'Hello Main Controller!';
+  var counter = 0;
+
+  var reloadListener = $scope.$on('DO_RELOAD', function() {
+    if ($scope.adapter) {
+      counter = 0;
+      $scope.adapter.reload();
+    }
+  });
+
+  $scope.$on("$destroy", function() {
+    reloadListener();
+  });
+
+  var min = -1000, max = 1000, delay = 0;
+
+  $scope.datasource = {
+    get: function(index, count, success) {
+      setTimeout(function() {
         var result = [];
         var start = Math.max(min, index);
         var end = Math.min(index + count - 1, max);
         if (start <= end) {
           for (var i = start; i <= end; i++) {
-            var j = i > 0 ? i : (-1) * i;
-            result.push({
-              text: "item #" + i,
-              height: 20 + (j%2) * 10
-            });
+            height = 50 + (counter++ * 2);
+            result.push({ index: i, height: height });
           }
         }
-         success(result);
-      }, 50);
-    };
+        console.log('Got ' + result.length + ' items [' + start + '..' + end + ']');
+        success(result);
+      }, delay);
+    }
+  };
 
-    return {
-      get: get
-    };
-  }
-]);
+});
diff --git a/dist/ui-scroll-grid.js b/dist/ui-scroll-grid.js
diff --git a/dist/ui-scroll-grid.js.map b/dist/ui-scroll-grid.js.map
diff --git a/dist/ui-scroll-grid.min.js b/dist/ui-scroll-grid.min.js
diff --git a/dist/ui-scroll-grid.min.js.map b/dist/ui-scroll-grid.min.js.map
diff --git a/dist/ui-scroll.js b/dist/ui-scroll.js
diff --git a/dist/ui-scroll.js.map b/dist/ui-scroll.js.map
diff --git a/dist/ui-scroll.min.js b/dist/ui-scroll.min.js
diff --git a/dist/ui-scroll.min.js.map b/dist/ui-scroll.min.js.map
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "jasmine-core": "^2.5.2",
     "karma": "^1.4.0",
     "karma-chrome-launcher": "^2.0.0",
-    "karma-firefox-launcher": "^1.0.0",
+    "karma-firefox-launcher": "^1.0.1",
     "karma-ie-launcher": "^1.0.0",
     "karma-jasmine": "^1.1.0",
     "webpack": "^2.6.1"

diff --git a/src/ui-scroll.js b/src/ui-scroll.js
@@ -208,7 +208,7 @@ angular.module('ui.scroll', [])
               }
             });
             if (!pending.length) {
-              adjustBuffer();
+              $timeout(() => adjustBuffer());
             }
           }
         }
@@ -333,7 +333,7 @@ angular.module('ui.scroll', [])
           let updates = updateDOM();
 
           // We need the item bindings to be processed before we can do adjustment
-          $timeout(() => {
+          $scope.$apply(() => $timeout(() => {
 
             // show elements after data binging has been done
             updates.inserted.forEach(w => w.element.removeClass('ng-hide'));
@@ -349,15 +349,14 @@ angular.module('ui.scroll', [])
             if (!pending.length) {
               adapter.calculateProperties();
             }
-          });
+          }));
         }
 
         function adjustBufferAfterFetch(rid) {
           let updates = updateDOM();
 
           // We need the item bindings to be processed before we can do adjustment
-          $timeout(() => {
-
+          $scope.$apply(() => $timeout(() => {
             // show elements after data binging has been done
             updates.inserted.forEach(w => w.element.removeClass('ng-hide'));
             updates.prepended.forEach(w => w.element.removeClass('ng-hide'));
@@ -379,7 +378,7 @@ angular.module('ui.scroll', [])
               bindEvents();
               adapter.calculateProperties();
             }
-          });
+          }));
         }
 
         function fetch(rid) {

diff --git a/test/BasicTestsSpec.js b/test/BasicTestsSpec.js
@@ -637,6 +637,9 @@ describe('uiScroll', function () {
 					var topVisibleChangeCount = 0;
 
 					scope.$watch('container1.adapter.topVisible', function(newValue) {
+						if(newValue === 'item1') {
+							return;
+						}
 						topVisibleChangeCount++;
 
 						expect(scope.container1.adapter.topVisible).toBe(newValue);
@@ -675,6 +678,9 @@ describe('uiScroll', function () {
 					var topVisibleChangeCount = 0;
 
 					scope.$watch('container1.adapter.topVisible', function(newValue) {
+						if(newValue === 'item1') {
+							return;
+						}
 						topVisibleChangeCount++;
 
 						expect(scope.container1.adapter.topVisible).toBe(newValue);
@@ -839,4 +845,45 @@ describe('uiScroll', function () {
     });
   });
 
+  describe('interpolation', function() {
+    var myTemplate = '<div ng-style="{\'height\': itemHeight + \'px\'}">{{$index}}: {{item}}</div>';
+    var scrollSettings = {
+      datasource: 'myInfiniteDatasource',
+      template: myTemplate,
+      topVisible: 'topVisible',
+      bufferSize: 10
+    };
+
+    it('should keep 1st item at the top after initial auto fetching is done', function() {
+      runTest(scrollSettings,
+        function (viewport, scope) {
+          expect(scope.topVisible).toBe('item1');
+          expect(viewport.scrollTop()).toBe(400); // 1 pack (bufferSize * itemHeight) from the top
+        }, {
+          scope: {
+            'itemHeight': 40
+          }
+        }
+      );
+    });
+
+    it('should keep (-bufferSize) item at the top after one manual fetching is done', function() {
+      runTest(scrollSettings,
+        function (viewport, scope, $timeout) {
+
+          viewport.scrollTop(0); // scroll to the very top
+          viewport.trigger('scroll');
+          $timeout.flush();
+
+          expect(scope.topVisible).toBe('item-9');
+          expect(viewport.scrollTop()).toBe(400); // 1 pack (bufferSize * itemHeight) from the top
+        }, {
+          scope: {
+            'itemHeight': 40
+          }
+        }
+      );
+    });
+  });
+
 });