remove reveal/hide within _filter

refactor appended, prepended, insert, _filterRevealAdded remove stubbed out cruft from insert
metafizzy · Nov 30, 2014 · adc3dc4 · adc3dc4
1 parent 08f59e9
commit adc3dc4
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 49 deletions.
diff --git a/js/isotope.js b/js/isotope.js
@@ -177,7 +177,23 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
     this.option( opts );
     this._getIsInstant();
     // filter, sort, and layout
-    this.filteredItems = this._filter( this.items );
+
+    // filter
+    var filtered = this._filter( this.items );
+    this.filteredItems = filtered.matches;
+
+    var _this = this;
+    function hideReveal() {
+      _this.reveal( filtered.needReveal );
+      _this.hide( filtered.needHide );
+    }
+
+    if ( this._isInstant ) {
+      this._noTransition( hideReveal );
+    } else {
+      hideReveal();
+    }
+
     this._sort();
     this._layout();
   };
@@ -226,19 +242,12 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
       }
     }
 
-    var _this = this;
-    function hideReveal() {
-      _this.reveal( hiddenMatched );
-      _this.hide( visibleUnmatched );
-    }
-
-    if ( this._isInstant ) {
-      this._noTransition( hideReveal );
-    } else {
-      hideReveal();
-    }
-
-    return matches;
+    // return collections of items to be manipulated
+    return {
+      matches: matches,
+      needReveal: hiddenMatched,
+      needHide: visibleUnmatched
+    };
   };
 
   // get a jQuery, function, or a matchesSelector test given the filter
@@ -456,6 +465,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
     if ( !items.length ) {
       return;
     }
+    // filter, layout, reveal new items
     var filteredItems = this._filterRevealAdded( items );
     // add to filteredItems
     this.filteredItems = this.filteredItems.concat( filteredItems );
@@ -467,28 +477,26 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
     if ( !items.length ) {
       return;
     }
-    // add items to beginning of collection
-    var previousItems = this.items.slice(0);
-    this.items = items.concat( previousItems );
     // start new layout
     this._resetLayout();
     this._manageStamps();
-    // layout new stuff without transition
+    // filter, layout, reveal new items
     var filteredItems = this._filterRevealAdded( items );
     // layout previous items
-    this.layoutItems( previousItems );
-    // add to filteredItems
+    this.layoutItems( this.filteredItems );
+    // add to items and filteredItems
     this.filteredItems = filteredItems.concat( this.filteredItems );
+    this.items = items.concat( this.items );
   };
 
   Isotope.prototype._filterRevealAdded = function( items ) {
-    var filteredItems = this._noTransition( function() {
-      return this._filter( items );
-    });
-    // layout and reveal just the new items
-    this.layoutItems( filteredItems, true );
-    this.reveal( filteredItems );
-    return items;
+    var filtered = this._filter( items );
+    this.hide( filtered.needHide );
+    // reveal all new items
+    this.reveal( filtered.matches );
+    // layout new items, no transition
+    this.layoutItems( filtered.matches, true );
+    return filtered.matches;
   };
 
   /**
@@ -508,24 +516,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
       this.element.appendChild( item.element );
     }
     // filter new stuff
-    /*
-    // this way adds hides new filtered items with NO transition
-    // so user can't see if new hidden items have been inserted
-    var filteredInsertItems;
-    this._noTransition( function() {
-      filteredInsertItems = this._filter( items );
-      // hide all new items
-      this.hide( filteredInsertItems );
-    });
-    // */
-    // this way hides new filtered items with transition
-    // so user at least sees that something has been added
-    var filteredInsertItems = this._filter( items );
-    // hide all newitems
-    this._noTransition( function() {
-      this.hide( filteredInsertItems );
-    });
-    // */
+    var filteredInsertItems = this._filter( items ).matches;
     // set flag
     for ( i=0; i < len; i++ ) {
       items[i].isLayoutInstant = true;

diff --git a/sandbox/insert.html b/sandbox/insert.html
@@ -12,7 +12,11 @@
 
 <h1>insert</h1>
 
-<p><button id="insert">Insert</button> <button id="append">Append</button></p>
+<p>
+  <button id="prepend">Prepend</button>
+  <button id="insert">Insert</button>
+  <button id="append">Append</button>
+</p>
 
 <div id="container">
   <div class="item"><b>49</b></div>
@@ -60,8 +64,13 @@ <h1>insert</h1>
     }
   });
 
+  eventie.bind( document.querySelector('#prepend'), 'click', function() {
+    // prepend 3 new items
+    iso.prepended( [ prependItem(), prependItem(), prependItem() ] );
+  });
+
   eventie.bind( document.querySelector('#insert'), 'click', function() {
-    // append 3 new items
+    // insert 3 new items
     iso.insert( [ getItem(), getItem(), getItem() ] );
   });
 
@@ -78,6 +87,12 @@ <h1>insert</h1>
     return item;
   }
 
+  function prependItem() {
+    var item = getItem();
+    container.insertBefore( item, container.firstChild );
+    return item;
+  }
+
   function appendItem() {
     var item = getItem();
     container.appendChild( item );
@@ -95,8 +110,6 @@ <h1>insert</h1>
   function( elem ) {
     return elem.innerText;
   };
-
-
 
 </script>