From c022426a6c4243a37f82eac479ba82fd05749e50 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Sat, 3 Aug 2013 19:14:36 -0400 Subject: [PATCH] add Item --- examples/basic.html | 1 + isotope.js | 72 +++++++++++++++++++++++++++++++++++---------- item.js | 61 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 118 insertions(+), 16 deletions(-) create mode 100644 item.js diff --git a/examples/basic.html b/examples/basic.html index 95b3c6d..7864743 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -46,6 +46,7 @@ + diff --git a/isotope.js b/isotope.js index 80b0cda..e0066b9 100644 --- a/isotope.js +++ b/isotope.js @@ -17,13 +17,17 @@ // -------------------------- isotopeDefinition -------------------------- // // used for AMD definition and requires -function isotopeDefinition( Outlayer, getSize, matchesSelector ) { +function isotopeDefinition( Outlayer, getSize, matchesSelector, Item ) { // create an Outlayer layout class var Isotope = Outlayer.create('isotope'); + Isotope.Item = Isotope.prototype.settings.item = Item; + Isotope.layoutModes = {}; Isotope.prototype._create = function() { + this.itemGUID = 0; + // call super Outlayer.prototype._create.call( this ); @@ -35,6 +39,25 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { } }; + Isotope.prototype.reloadItems = function() { + // reset item ID counter + this.itemGUID = 0; + // call super + Outlayer.prototype.reloadItems.call( this ); + }; + + Isotope.prototype._getItems = function() { + var items = Outlayer.prototype._getItems.apply( this, arguments ); + // assign ID for original-order + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + item.id = this.itemGUID++; + } + return items; + }; + + // -------------------------- layout -------------------------- // + Isotope.prototype._createLayoutMode = function( name ) { var LayoutMode = Isotope.layoutModes[ name ]; var options = this.options[ name ]; @@ -69,20 +92,10 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { var filter = this.options.filter; filter = filter || '*'; var matches = []; - var unmatches = []; var hiddenMatched = []; var visibleUnmatched = []; - var test; - if ( typeof filter === 'function' ) { - test = function( item ) { - return filter( item.element ); - }; - } else { - test = function( item ) { - return matchesSelector( item.element, filter ); - }; - } + var test = getFilterTest( filter ); // test each item for ( var i=0, len = items.length; i < len; i++ ) { @@ -93,8 +106,10 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { // add item to either matched or unmatched group var isMatched = test( item ); item.isFilterMatched = isMatched; - var group = isMatched ? matches : unmatches; - group.push( item ); + // add to matches if its a match + if ( isMatched ) { + matches.push( item ); + } // add to additional group if item needs to be hidden or revealed if ( isMatched && item.isHidden ) { hiddenMatched.push( item ); @@ -109,8 +124,31 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { return matches; }; + // get a function or a matchesSelector test given the filter + function getFilterTest( filter ) { + var test; + if ( typeof filter === 'function' ) { + test = function( item ) { + return filter( item.element ); + }; + } else { + test = function( item ) { + return matchesSelector( item.element, filter ); + }; + } + return test; + } + // -------------------------- sort -------------------------- // + Isotope.prototype.updateSortData = function( items ) { + // default to all items if none are passed in + items = items || this.items; + for ( var i=0, len = items.length; i < len; i++ ) { + var item = items[i]; + item.updateSortData(); + } + }; // Isotope.prototype._sort = function() { // var sortBy = this.options.sortBy; @@ -149,7 +187,8 @@ if ( typeof define === 'function' && define.amd ) { define( [ 'outlayer', 'get-size', - 'matches-selector' + 'matches-selector', + './item.js' ], isotopeDefinition ); } else { @@ -157,7 +196,8 @@ if ( typeof define === 'function' && define.amd ) { window.Isotope = isotopeDefinition( window.Outlayer, window.getSize, - window.matchesSelector + window.matchesSelector, + window.Isotope.Item ); } diff --git a/item.js b/item.js new file mode 100644 index 0000000..b521d2f --- /dev/null +++ b/item.js @@ -0,0 +1,61 @@ +/** + * Packery Item Element +**/ + +( function( window ) { + +'use strict'; + +// -------------------------- Item -------------------------- // + +function itemDefinition( Outlayer ) { + +// sub-class Outlayer Item +function Item() { + Outlayer.Item.apply( this, arguments ); +} + +Item.prototype = new Outlayer.Item(); + +Item.prototype._create = function() { + // assign id, used for original-order sorting + this.id = this.layout.itemGUID++; + Outlayer.Item.prototype._create.call( this ); + this.sortData = {}; +}; + +Item.prototype.updateSortData = function() { + // default sorters + this.sortData.id = this.id; + // for backward compatibility + this.sortData['original-order'] = this.id; + this.sortData.random = Math.random(); + // go thru getSortData obj and apply the sorters + var getSortData = this.layout.options.getSortData; + for ( var key in getSortData ) { + var sorter = getSortData[ key ]; + this.sortData[ key ] = sorter( this.element, this ); + } +}; + +return Item; + +} + +// -------------------------- transport -------------------------- // + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + 'outlayer/outlayer' + ], + itemDefinition ); +} else { + // browser global + window.Isotope = window.Isotope || {}; + window.Isotope.Item = itemDefinition( + window.Outlayer + ); +} + +})( window );