diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..c686ef2 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,10 @@ +{ + "browser": true, + "devel": true, + "strict": true, + "undef": true, + "unused": true, + "predef": { + "define": false + } +} diff --git a/examples/basic.html b/examples/basic.html index 5b74011..b85bf6e 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -36,25 +36,24 @@
- - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/isotope.js b/isotope.js index 15a323a..880eea1 100644 --- a/isotope.js +++ b/isotope.js @@ -14,13 +14,15 @@ // -------------------------- helpers -------------------------- // -// -------------------------- masonryDefinition -------------------------- // +// -------------------------- isotopeDefinition -------------------------- // // used for AMD definition and requires function isotopeDefinition( Outlayer, getSize, matchesSelector ) { // create an Outlayer layout class var Isotope = Outlayer.create('isotope'); + Isotope.layoutModes = {}; + Isotope.prototype._create = function() { // call super Outlayer.prototype._create.call( this ); @@ -44,8 +46,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { }; Isotope.prototype.layout = function() { - this.filteredItems = this._filter( this.items ); - this._sort(); + // this.filteredItems = this._filter( this.items ); + // this._sort(); Outlayer.prototype.layout.call( this ); // this._mode._resetLayout(); // this._resetLayout(); @@ -120,20 +122,20 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) { // -------------------------- methods -------------------------- // Isotope.prototype._resetLayout = function() { - this._mode._resetLayout(); + this._mode()._resetLayout(); }; Isotope.prototype._getItemLayoutPosition = function( item ) { - return this._mode._getItemLayoutPosition( item ); + return this._mode()._getItemLayoutPosition( item ); }; Isotope.prototype._manageStamp = function( stamp ) { - this._mode._manageStamp( stamp ); + this._mode()._manageStamp( stamp ); }; Isotope.prototype._getContainerSize = function() { - return this._mode._getContainerSize(); + return this._mode()._getContainerSize(); }; return Isotope; diff --git a/layout-modes/fit-rows.js b/layout-modes/fit-rows.js new file mode 100644 index 0000000..17939af --- /dev/null +++ b/layout-modes/fit-rows.js @@ -0,0 +1,50 @@ +( function( window ) { + +'use strict'; + +var Isotope = window.Isotope; +var Outlayer = window.Outlayer; + +function FitRows( isotope, options ) { + this.isotope = isotope; + this.options = options; +} + +FitRows.prototype._resetLayout = function() { + Outlayer.prototype._resetLayout.apply( this.isotope, arguments ); + this.x = 0; + this.y = 0; + this.maxY = 0; +}; + +FitRows.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + + // if this element cannot fit in the current row + if ( this.x !== 0 && item.size.width + this.x > this.isotope.size.innerWidth ) { + this.x = 0; + this.y = this.maxY; + } + + var position = { + x: this.x, + y: this.y + }; + + this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); + this.x += item.size.width; + + return position; +}; + +FitRows.prototype._manageStamp = function() { + Outlayer.prototype._manageStamp.apply( this.isotope, arguments ); +}; + +FitRows.prototype._getContainerSize = function() { + return { height: this.maxY }; +}; + +Isotope.layoutModes.fitRows = FitRows; + +})( window );