finalize deletion out of buffer

Author: dhilt

demo/adapterSync/adapterSync.html

@@ -65,6 +65,8 @@ <h1 class="page-header page-header-exapmle">Adapter: append, prepend and remove
     <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>
 
   <br/>

demo/adapterSync/adapterSync.js

@@ -83,13 +83,30 @@ app.factory('Server', [
         return this.returnDeferredResult(newItem);
       },
 
+      removeFirst: function () {
+        var firstItem = this.data.find(i => i.index === this.firstIndex);
+        if(!firstItem) {
+          return $q.reject();
+        }
+        return this.removeItemById(firstItem.id);
+      },
+
+      removeLast: function () {
+        var lastItem = this.data.find(i => i.index === this.lastIndex);
+        if(!lastItem) {
+          return $q.reject();
+        }
+        return this.removeItemById(lastItem.id);
+      },
+
       removeItemById: function (itemId) {
         var length = this.data.length;
         for (var i = 0; i < length; i++) {
           if (this.data[i].id === itemId) {
+            var indexRemoved = this.data[i].index;
             this.data.splice(i, 1);
             this.setIndicies();
-            return this.returnDeferredResult(true);
+            return this.returnDeferredResult(indexRemoved);
           }
         }
         return this.returnDeferredResult(false);
@@ -171,7 +188,7 @@ app.controller('mainController', [
 
     ctrl.remove = function (itemRemove) {
       Server.removeItemById(itemRemove.id).then(function (result) {
-        if (result) {
+        if (result !== false) {
           ctrl.adapter.applyUpdates(function (item) {
             if (item.id === itemRemove.id) {
               return [];
@@ -181,5 +198,20 @@ app.controller('mainController', [
       });
     };
 
+    ctrl.removeFirst = function () {
+      Server.removeFirst().then(function (indexRemoved) {
+        if (indexRemoved !== false) {
+          ctrl.adapter.applyUpdates(indexRemoved, []);
+        }
+      });
+    };
+
+    ctrl.removeLast = function () {
+      Server.removeLast().then(function (indexRemoved) {
+        if (indexRemoved !== false) {
+          ctrl.adapter.applyUpdates(indexRemoved, []);
+        }
+      });
+    };
   }
 ]);

dist/ui-scroll.js

@@ -145,32 +145,26 @@ class Adapter {
   }
 
   applyUpdatesIndex(index, newItems) {
-    if (index % 1 !== 0) { // checking if it is an integer
-      throw new Error('applyUpdates - ' + index + ' is not a valid index');
+    if (index % 1 !== 0) {
+      throw new Error('applyUpdates - ' + index + ' is not a valid index (should be an integer)');
     }
     const _index = index - this.buffer.first;
+    // apply updates only within buffer
     if (_index >= 0 && _index < this.buffer.length) {
       this.applyUpdate(this.buffer[_index], newItems);
     }
+    // out-of-buffer case: deletion may affect Paddings
     else if(index >= this.buffer.minIndex && index <= this.buffer.maxIndex) {
-      this.applyUpdateBuffer(index, newItems);
-    }
-  }
-
-  applyUpdateBuffer(index, newItems) {
-    if (!angular.isArray(newItems)) {
-      return;
-    }
-    // remove single item
-    if(!newItems.length) {
-      var isTop = index === this.buffer.minIndex;
-      if(isTop) {
-        this.buffer.minIndex++;
-      }
-      else {
-        this.buffer.maxIndex--;
+      if(angular.isArray(newItems) && !newItems.length) {
+        var isTop = index === this.buffer.minIndex;
+        if(isTop) {
+          this.buffer.minIndex++;
+        }
+        else {
+          this.buffer.maxIndex--;
+        }
+        this.viewport.removeCacheItem(index, isTop);
       }
-      this.viewport.removeCacheItem(index, isTop);
     }
   }
 

dist/ui-scroll.js.map

@@ -69,6 +69,34 @@ describe('uiScroll Paddings cache', function () {
       );
     });
 
+    it('should delete last row and then the next after last, when out of buffer', function () {
+      var removeLastItem;
+      inject(function(myResponsiveDatasource) {
+        var datasource = myResponsiveDatasource;
+        removeLastItem = function() {
+          datasource.data.slice(-1, 1);
+          datasource.max--;
+        };
+      });
+      runTest(scrollSettings,
+        function (viewport, scope) {
+
+          scrollBottom(viewport, 3);
+          scrollTop(viewport);
+
+          var initialBottomHeight = getBottomPaddingHeight(viewport);
+          removeLastItem();
+          scope.adapter.applyUpdates(itemsCount, []);
+          removeLastItem();
+          scope.adapter.applyUpdates(itemsCount - 1, []);
+          expect(getBottomPaddingHeight(viewport)).toBe(initialBottomHeight - itemHeight * 2);
+
+          scrollBottom(viewport, 3);
+          expect(viewport.scrollTop()).toBe(itemsCount * itemHeight - viewportHeight - itemHeight * 2);
+        }
+      );
+    });
+
     it('should delete first row when out of buffer', function () {
       var removeFirstItem;
       inject(function(myResponsiveDatasource) {
@@ -94,7 +122,7 @@ describe('uiScroll Paddings cache', function () {
       );
     });
 
-    it('should delete first row and then second row when out of buffer', function () {
+    it('should delete first row and then the next after first, when out of buffer', function () {
       var removeFirstItem;
       inject(function(myResponsiveDatasource) {
         var datasource = myResponsiveDatasource;
@@ -109,10 +137,10 @@ describe('uiScroll Paddings cache', function () {
           scrollBottom(viewport, 3);
 
           var initialTopHeight = getTopPaddingHeight(viewport);
+          removeFirstItem();
           scope.adapter.applyUpdates(1, []);
           removeFirstItem();
           scope.adapter.applyUpdates(2, []);
-          removeFirstItem();
           expect(getTopPaddingHeight(viewport)).toBe(initialTopHeight - itemHeight * 2);
 
           scrollTop(viewport);