remove single item from top: test and demo

Author: dhilt

demo/outOfBuffer/outOfBuffer.html

@@ -29,6 +29,7 @@
     <button ng-click="mainCtrl.prepend()">Prepend one item</button>
     <button ng-click="mainCtrl.append()">Append one item</button>
     <!--button ng-click="mainCtrl.removeAll()">Clear the viewport</button-->
+    <button ng-click="mainCtrl.removeFirst()">Remove first</button>
     <button ng-click="mainCtrl.removeLast()">Remove last</button>
   </div>
 

demo/outOfBuffer/outOfBuffer.js

@@ -185,7 +185,7 @@ app.controller('mainController', [
       const lastIndex = Server.lastIndex;
       const lastItem = Server.data.find(i => i.index === Server.lastIndex);
       if(!lastItem) {
-        retirn;
+        return;
       }
       Server.removeItemById(lastItem.id).then(function (result) {
         if (result) {
@@ -194,5 +194,18 @@ app.controller('mainController', [
       });
     };
 
+    ctrl.removeFirst = function () {
+      const firstIndex = Server.firstIndex;
+      const firstItem = Server.data.find(i => i.index === Server.firstIndex);
+      if(!firstItem) {
+        return;
+      }
+      Server.removeItemById(firstItem.id).then(function (result) {
+        if (result) {
+          ctrl.adapter.applyUpdates(firstIndex, []);
+        }
+      });
+    };
+
   }
 ]);

test/PaddingCacheSpec.js

@@ -19,9 +19,15 @@ describe('uiScroll Paddings cache', function () {
       return parseInt(angular.element(bottomPadding).css('height'), 10);
     }
 
+    function getTopPaddingHeight(viewport) {
+      var viewportChildren = viewport.children();
+      var topPadding = viewportChildren[0];
+      return parseInt(angular.element(topPadding).css('height'), 10);
+    }
+
     var initialBottomHeight = 240;
 
-    it('should delete last row out of buffer', function () {
+    it('should delete last row when out of buffer', function () {
       runTest(scrollSettings,
         function (viewport, scope) {
 
@@ -40,6 +46,23 @@ describe('uiScroll Paddings cache', function () {
       );
     });
 
+    it('should delete first when row out of buffer', function () {
+      runTest(scrollSettings,
+        function (viewport, scope) {
+
+          viewport.scrollTop(1000);
+          viewport.trigger('scroll');
+          viewport.scrollTop(1000);
+          viewport.trigger('scroll');
+
+          // expect(getTopPaddingHeight(viewport)).toBe(initialBottomHeight);
+          // scope.adapter.applyUpdates(1, []);
+          // expect(getTopPaddingHeight(viewport)).toBe(initialBottomHeight - scrollSettings.itemHeight);
+
+        }
+      );
+    });
+
   });
 
 });