From 536947254ca525e47f45b011e51db82154e9d9fe Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 18:40:11 -0500 Subject: [PATCH 1/6] cells-by-row asset in test --- test/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/index.html b/test/index.html index 1adc798..aba2d43 100644 --- a/test/index.html +++ b/test/index.html @@ -28,7 +28,8 @@ - + + From c2c54d054107a29eb1ee477f2dbb30b4da1bc3fe Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 18:42:38 -0500 Subject: [PATCH 2/6] refactor updateSortData: ref #602 + add Isotope._getSorters() + add Isotope._updateItemsSortData + change updateSortData() to public method only --- js/isotope.js | 34 +++++++++++++++++++++++++--------- js/item.js | 3 +++ 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index 8583c83..332642e 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -100,6 +100,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode this.itemGUID = 0; // functions that sort items this._sorters = {}; + this._getSorters(); // call super Outlayer.prototype._create.call( this ); @@ -129,7 +130,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode var item = items[i]; item.id = this.itemGUID++; } - this.updateSortData( items ); + this._updateItemsSortData( items ); return items; }; @@ -261,21 +262,36 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode // -------------------------- sorting -------------------------- // - Isotope.prototype.updateSortData = function( items ) { - // update sorters + /** + * @params {Array} elems + * @public + */ + Isotope.prototype.updateSortData = function( elems ) { + this._getSorters(); + // update item sort data + // default to all items if none are passed in + elems = makeArray( elems ); + var items = this.getItems( elems ); + // if no items found, update all items + items = items.length ? items : this.items; + this._updateItemsSortData( items ); + }; + + Isotope.prototype._getSorters = function() { var getSortData = this.options.getSortData; for ( var key in getSortData ) { var sorter = getSortData[ key ]; this._sorters[ key ] = mungeSorter( sorter ); } - // update item sort data - // default to all items if none are passed in - items = items || this.items; + }; + + /** + * @params {Array} items - of Isotope.Items + * @private + */ + Isotope.prototype._updateItemsSortData = function( items ) { for ( var i=0, len = items.length; i < len; i++ ) { var item = items[i]; - if ( item.isIgnored ) { - continue; - } item.updateSortData(); } }; diff --git a/js/item.js b/js/item.js index 3a04fde..de5bac5 100644 --- a/js/item.js +++ b/js/item.js @@ -25,6 +25,9 @@ Item.prototype._create = function() { }; Item.prototype.updateSortData = function() { + if ( this.isIgnored ) { + return; + } // default sorters this.sortData.id = this.id; // for backward compatibility From 0372298773a65bda323e68db78f21df5258c1b95 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 18:50:14 -0500 Subject: [PATCH 3/6] add Isotope.sortDataParsers Allows for user to add custom parsers fort getSortData shortcut strings --- js/isotope.js | 35 ++++++++++------------------------- 1 file changed, 10 insertions(+), 25 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index 332642e..f1b0f2d 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -319,7 +319,7 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode var attr = attrMatch && attrMatch[1]; var getValue = getValueGetter( attr, query ); // use second argument as a parser - var parser = getParser( args[1] ); + var parser = Isotope.sortDataParsers[ args[1] ]; // parse the value, if there was a parser sorter = parser ? function( elem ) { return elem && parser( getValue( elem ) ); @@ -350,33 +350,18 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode return getValue; } - // return a parser function if arg matches - function getParser( arg ) { - var parser; - switch ( arg ) { - case 'parseInt' : - parser = function( val ) { - return parseInt( val, 10 ); - }; - break; - case 'parseFloat' : - parser = function( val ) { - return parseFloat( val ); - }; - break; - default : - // just return val if parser isn't one of these - // TODO - console log that that parser doesn't exist - parser = function( val ) { - return val; - }; - } - return parser; - } - return mungeSorter; })(); + // parsers used in getSortData shortcut strings + Isotope.sortDataParsers = { + 'parseInt': function( val ) { + return parseInt( val, 10 ); + }, + 'parseFloat': function( val ) { + return parseFloat( val ); + } + }; // ----- sort method ----- // From a04ada1ea67c5b3a0b94eb1ee89758b339036647 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 18:53:09 -0500 Subject: [PATCH 4/6] refactor _getFilterTest --- js/isotope.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index f1b0f2d..79ce537 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -243,21 +243,22 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode // get a jQuery, function, or a matchesSelector test given the filter Isotope.prototype._getFilterTest = function( filter ) { - var test; if ( jQuery && this.options.isJQueryFiltering ) { - test = function( item ) { + // use jQuery + return function( item ) { return jQuery( item.element ).is( filter ); }; - } else if ( typeof filter === 'function' ) { - test = function( item ) { + } + if ( typeof filter === 'function' ) { + // use filter as function + return function( item ) { return filter( item.element ); }; - } else { - test = function( item ) { - return matchesSelector( item.element, filter ); - }; } - return test; + // default, use filter as selector string + return function( item ) { + return matchesSelector( item.element, filter ); + }; }; // -------------------------- sorting -------------------------- // From 60ec752e2e01849aa5f8a4fc2bc76c4ab9aea932 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 19:15:48 -0500 Subject: [PATCH 5/6] add Isotope._noTransition; bit o' refactor --- js/isotope.js | 45 ++++++++++++++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 15 deletions(-) diff --git a/js/isotope.js b/js/isotope.js index 79ce537..9eee186 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -225,17 +225,16 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode } } - // HACK - // disable transition if instant - var _transitionDuration = this.options.transitionDuration; - if ( this._isInstant ) { - this.options.transitionDuration = 0; + var _this = this; + function hideReveal() { + _this.reveal( hiddenMatched ); + _this.hide( visibleUnmatched ); } - this.reveal( hiddenMatched ); - this.hide( visibleUnmatched ); - // set back + if ( this._isInstant ) { - this.options.transitionDuration = _transitionDuration; + this._noTransition( hideReveal ); + } else { + hideReveal(); } return matches; @@ -479,12 +478,9 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode }; Isotope.prototype._filterRevealAdded = function( items ) { - // disable transition for filtering - var transitionDuration = this.options.transitionDuration; - this.options.transitionDuration = 0; - var filteredItems = this._filter( items ); - // re-enable transition for reveal - this.options.transitionDuration = transitionDuration; + var filteredItems = this._noTransition( function() { + return this._filter( items ); + }); // layout and reveal just the new items this.layoutItems( filteredItems, true ); this.reveal( filteredItems ); @@ -521,6 +517,25 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode } }; + /** + * trigger fn without transition + * kind of hacky to have this in the first place + * @param {Function} fn + * @returns ret + * @private + */ + Isotope.prototype._noTransition = function( fn ) { + // save transitionDuration before disabling + var transitionDuration = this.options.transitionDuration; + // disable transition + this.options.transitionDuration = 0; + // do it + var returnValue = fn.call( this ); + // re-enable transition for reveal + this.options.transitionDuration = transitionDuration; + return returnValue; + }; + // ----- ----- // return Isotope; From cbb6543bcb7e9759f45fb9a3e4e7478f5226779c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 13 Jan 2014 20:00:54 -0500 Subject: [PATCH 6/6] insert only transitions reveal for new items requires Outlayer that respects item.isLayoutInstant --- examples/insert.html | 18 ++++++++++++------ js/isotope.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 6 deletions(-) diff --git a/examples/insert.html b/examples/insert.html index 817918c..b611233 100644 --- a/examples/insert.html +++ b/examples/insert.html @@ -12,7 +12,7 @@

insert

-

+

49
@@ -49,6 +49,7 @@ docReady( function() { var container = document.querySelector('#container'); var iso = new Isotope( container, { layoutMode: 'masonry', + transitionDuration: '0.8s', getSortData: { b: 'b parseInt' }, @@ -59,13 +60,18 @@ docReady( function() { } }); + function getAppendedItems() { + return [ appendItem(), appendItem(), appendItem() ]; + } + eventie.bind( document.querySelector('#insert'), 'click', function() { // append 3 new items - var appendedItems = []; - appendedItems.push( appendItem() ); - appendedItems.push( appendItem() ); - appendedItems.push( appendItem() ); - iso.insert( appendedItems ); + iso.insert( getAppendedItems() ); + }); + + eventie.bind( document.querySelector('#append'), 'click', function() { + // append 3 new items + iso.appended( getAppendedItems() ); }); function appendItem() { diff --git a/js/isotope.js b/js/isotope.js index 9eee186..95223df 100644 --- a/js/isotope.js +++ b/js/isotope.js @@ -496,7 +496,35 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode if ( !items.length ) { return; } + // 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 ); + }); + // */ + // set flag + for ( var i=0, len = items.length; i < len; i++ ) { + items[i].isLayoutInstant = true; + } this.arrange(); + // reset flag + for ( i=0; i < len; i++ ) { + delete items[i].isLayoutInstant; + } + this.reveal( filteredInsertItems ); }; var _remove = Isotope.prototype.remove;