Fix new item animation when there is an active filter

fixes #198

dist/shuffle.js

@@ -1231,10 +1231,9 @@ var Shuffle = function (_TinyEmitter) {
     }
 
     /**
-     * When new elements are added to the shuffle container, update the array of
+     * Combine the current items array with a new one and sort it by DOM order.
-     * items because that is the order `_layout` calls them.
      * @param {ShuffleItem[]} items Items to track.
-     * @return {Shuffle[]}
+     * @return {ShuffleItem[]}
      */
 
   }, {
@@ -1869,24 +1868,38 @@ var Shuffle = function (_TinyEmitter) {
 
       // Determine which items will go with the current filter.
       this._resetCols();
-      var newItemSet = this._filter(this.lastFilter, items);
+
-      var willBeVisible = this._mergeNewItems(newItemSet.visible);
+      var allItems = this._mergeNewItems(items);
-      var sortedVisibleItems = sorter(willBeVisible, this.lastSort);
+      var sortedItems = sorter(allItems, this.lastSort);
+      var allSortedItemsSet = this._filter(this.lastFilter, sortedItems);
+
+      var isNewItem = function isNewItem(item) {
+        return items.includes(item);
+      };
+      var applyHiddenState = function applyHiddenState(item) {
+        item.scale = ShuffleItem.Scale.HIDDEN;
+        item.isHidden = true;
+        item.applyCss(ShuffleItem.Css.HIDDEN.before);
+        item.applyCss(ShuffleItem.Css.HIDDEN.after);
+      };
 
       // Layout all items again so that new items get positions.
       // Synchonously apply positions.
-      var itemPositions = this._getNextPositions(sortedVisibleItems);
+      var itemPositions = this._getNextPositions(allSortedItemsSet.visible);
-      sortedVisibleItems.forEach(function (item, i) {
+      allSortedItemsSet.visible.forEach(function (item, i) {
-        if (newItemSet.visible.includes(item)) {
+        if (isNewItem(item)) {
           item.point = itemPositions[i];
-          item.scale = ShuffleItem.Scale.HIDDEN;
+          applyHiddenState(item);
-          item.isHidden = true;
-          item.applyCss(ShuffleItem.Css.HIDDEN.before);
-          item.applyCss(ShuffleItem.Css.HIDDEN.after);
           item.applyCss(_this9.getStylesForTransition(item, {}));
         }
       });
 
+      allSortedItemsSet.hidden.forEach(function (item) {
+        if (isNewItem(item)) {
+          applyHiddenState(item);
+        }
+      });
+
       // Cause layout so that the styles above are applied.
       this.element.offsetWidth; // eslint-disable-line no-unused-expressions
 

docs/dist/shuffle.js

@@ -1231,10 +1231,9 @@ var Shuffle = function (_TinyEmitter) {
     }
 
     /**
-     * When new elements are added to the shuffle container, update the array of
+     * Combine the current items array with a new one and sort it by DOM order.
-     * items because that is the order `_layout` calls them.
      * @param {ShuffleItem[]} items Items to track.
-     * @return {Shuffle[]}
+     * @return {ShuffleItem[]}
      */
 
   }, {
@@ -1869,24 +1868,38 @@ var Shuffle = function (_TinyEmitter) {
 
       // Determine which items will go with the current filter.
       this._resetCols();
-      var newItemSet = this._filter(this.lastFilter, items);
+
-      var willBeVisible = this._mergeNewItems(newItemSet.visible);
+      var allItems = this._mergeNewItems(items);
-      var sortedVisibleItems = sorter(willBeVisible, this.lastSort);
+      var sortedItems = sorter(allItems, this.lastSort);
+      var allSortedItemsSet = this._filter(this.lastFilter, sortedItems);
+
+      var isNewItem = function isNewItem(item) {
+        return items.includes(item);
+      };
+      var applyHiddenState = function applyHiddenState(item) {
+        item.scale = ShuffleItem.Scale.HIDDEN;
+        item.isHidden = true;
+        item.applyCss(ShuffleItem.Css.HIDDEN.before);
+        item.applyCss(ShuffleItem.Css.HIDDEN.after);
+      };
 
       // Layout all items again so that new items get positions.
       // Synchonously apply positions.
-      var itemPositions = this._getNextPositions(sortedVisibleItems);
+      var itemPositions = this._getNextPositions(allSortedItemsSet.visible);
-      sortedVisibleItems.forEach(function (item, i) {
+      allSortedItemsSet.visible.forEach(function (item, i) {
-        if (newItemSet.visible.includes(item)) {
+        if (isNewItem(item)) {
           item.point = itemPositions[i];
-          item.scale = ShuffleItem.Scale.HIDDEN;
+          applyHiddenState(item);
-          item.isHidden = true;
-          item.applyCss(ShuffleItem.Css.HIDDEN.before);
-          item.applyCss(ShuffleItem.Css.HIDDEN.after);
           item.applyCss(_this9.getStylesForTransition(item, {}));
         }
       });
 
+      allSortedItemsSet.hidden.forEach(function (item) {
+        if (isNewItem(item)) {
+          applyHiddenState(item);
+        }
+      });
+
       // Cause layout so that the styles above are applied.
       this.element.offsetWidth; // eslint-disable-line no-unused-expressions
 

src/shuffle.js

@@ -332,10 +332,9 @@ class Shuffle extends TinyEmitter {
   }
 
   /**
-   * When new elements are added to the shuffle container, update the array of
+   * Combine the current items array with a new one and sort it by DOM order.
-   * items because that is the order `_layout` calls them.
    * @param {ShuffleItem[]} items Items to track.
-   * @return {Shuffle[]}
+   * @return {ShuffleItem[]}
    */
   _mergeNewItems(items) {
     const children = Array.from(this.element.children);
@@ -855,24 +854,36 @@ class Shuffle extends TinyEmitter {
 
     // Determine which items will go with the current filter.
     this._resetCols();
-    const newItemSet = this._filter(this.lastFilter, items);
+
-    const willBeVisible = this._mergeNewItems(newItemSet.visible);
+    const allItems = this._mergeNewItems(items);
-    const sortedVisibleItems = sorter(willBeVisible, this.lastSort);
+    const sortedItems = sorter(allItems, this.lastSort);
+    const allSortedItemsSet = this._filter(this.lastFilter, sortedItems);
+
+    const isNewItem = item => items.includes(item);
+    const applyHiddenState = (item) => {
+      item.scale = ShuffleItem.Scale.HIDDEN;
+      item.isHidden = true;
+      item.applyCss(ShuffleItem.Css.HIDDEN.before);
+      item.applyCss(ShuffleItem.Css.HIDDEN.after);
+    };
 
     // Layout all items again so that new items get positions.
     // Synchonously apply positions.
-    const itemPositions = this._getNextPositions(sortedVisibleItems);
+    const itemPositions = this._getNextPositions(allSortedItemsSet.visible);
-    sortedVisibleItems.forEach((item, i) => {
+    allSortedItemsSet.visible.forEach((item, i) => {
-      if (newItemSet.visible.includes(item)) {
+      if (isNewItem(item)) {
         item.point = itemPositions[i];
-        item.scale = ShuffleItem.Scale.HIDDEN;
+        applyHiddenState(item);
-        item.isHidden = true;
-        item.applyCss(ShuffleItem.Css.HIDDEN.before);
-        item.applyCss(ShuffleItem.Css.HIDDEN.after);
         item.applyCss(this.getStylesForTransition(item, {}));
       }
     });
 
+    allSortedItemsSet.hidden.forEach((item) => {
+      if (isNewItem(item)) {
+        applyHiddenState(item);
+      }
+    });
+
     // Cause layout so that the styles above are applied.
     this.element.offsetWidth; // eslint-disable-line no-unused-expressions