|
|
@ -78,16 +78,14 @@ |
|
|
|
|
|
|
|
|
|
|
|
// sorting
|
|
|
|
// sorting
|
|
|
|
var originalOrderSorter = { |
|
|
|
var originalOrderSorter = { |
|
|
|
'original-order' : function( $elem ) { |
|
|
|
'original-order' : function( $elem, instance ) { |
|
|
|
return this.elemCount; |
|
|
|
return instance.elemCount; |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
this.options.getSortData = $.extend( originalOrderSorter, this.options.getSortData ); |
|
|
|
this.options.getSortData = $.extend( this.options.getSortData, originalOrderSorter ); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this._setupAtoms( this.atoms.$all ); |
|
|
|
this._setupAtoms( this.atoms.$all ); |
|
|
|
this.atoms.$all.molequul( '_setupAtoms' ); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// get top left position of where the bricks should be
|
|
|
|
// get top left position of where the bricks should be
|
|
|
@ -103,15 +101,10 @@ |
|
|
|
instance.$elem.addClass( instance.options.containerClass ); |
|
|
|
instance.$elem.addClass( instance.options.containerClass ); |
|
|
|
}, 0 ); |
|
|
|
}, 0 ); |
|
|
|
|
|
|
|
|
|
|
|
// console.log( this.options.layoutMode )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// do any layout-specific setup
|
|
|
|
// do any layout-specific setup
|
|
|
|
this.width = this.$elem.width(); |
|
|
|
this.width = this.$elem.width(); |
|
|
|
this._getMasonryColCount(); |
|
|
|
this._getMasonryColCount(); |
|
|
|
|
|
|
|
|
|
|
|
// save data
|
|
|
|
|
|
|
|
// this.data( 'molequul', props );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// bind resize method
|
|
|
|
// bind resize method
|
|
|
|
if ( this.options.resizeable ) { |
|
|
|
if ( this.options.resizeable ) { |
|
|
|
$(window).bind('smartresize.molequul', function() { instance.$elem.molequul('resize') } ); |
|
|
|
$(window).bind('smartresize.molequul', function() { instance.$elem.molequul('resize') } ); |
|
|
@ -130,8 +123,6 @@ |
|
|
|
// after it has already been initialized.
|
|
|
|
// after it has already been initialized.
|
|
|
|
_init : function( callback ) { |
|
|
|
_init : function( callback ) { |
|
|
|
|
|
|
|
|
|
|
|
// this.options = $.extend( true, Molequul.options, this.options );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// check if watched properties are new
|
|
|
|
// check if watched properties are new
|
|
|
|
var instance = this; |
|
|
|
var instance = this; |
|
|
|
$.each( [ 'filter', 'sortBy', 'sortDir' ], function( i, propName ){ |
|
|
|
$.each( [ 'filter', 'sortBy', 'sortDir' ], function( i, propName ){ |
|
|
@ -181,6 +172,20 @@ |
|
|
|
// ====================== Adding ======================
|
|
|
|
// ====================== Adding ======================
|
|
|
|
|
|
|
|
|
|
|
|
_addSortData : function( $atoms ) { |
|
|
|
_addSortData : function( $atoms ) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_setupAtoms : function( $atoms ) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// base style for atoms
|
|
|
|
|
|
|
|
var atomStyle = { position: 'absolute' }; |
|
|
|
|
|
|
|
if ( this.usingTransforms ) { |
|
|
|
|
|
|
|
atomStyle.left = 0; |
|
|
|
|
|
|
|
atomStyle.top = 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$atoms.css( atomStyle ); |
|
|
|
|
|
|
|
|
|
|
|
var instance = this; |
|
|
|
var instance = this; |
|
|
|
$atoms.each(function(){ |
|
|
|
$atoms.each(function(){ |
|
|
|
var $this = $(this), |
|
|
|
var $this = $(this), |
|
|
@ -189,28 +194,14 @@ |
|
|
|
key; |
|
|
|
key; |
|
|
|
// get value for sort data based on fn( $elem ) passed in
|
|
|
|
// get value for sort data based on fn( $elem ) passed in
|
|
|
|
for ( key in getSortData ) { |
|
|
|
for ( key in getSortData ) { |
|
|
|
sortData[ key ] = getSortData[ key ]( $this ); |
|
|
|
sortData[ key ] = getSortData[ key ]( $this, instance ); |
|
|
|
} |
|
|
|
} |
|
|
|
// apply sort data to $element
|
|
|
|
// apply sort data to $element
|
|
|
|
$this.data( 'molequul-sort-data', sortData ); |
|
|
|
$this.data( 'molequul-sort-data', sortData ); |
|
|
|
// increment element count
|
|
|
|
// increment element count
|
|
|
|
|
|
|
|
// console.log( instance.elemCount )
|
|
|
|
instance.elemCount ++; |
|
|
|
instance.elemCount ++; |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_setupAtoms : function( $atoms ) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// base style for atoms
|
|
|
|
|
|
|
|
var atomStyle = { position: 'absolute' }; |
|
|
|
|
|
|
|
if ( this.usingTransforms ) { |
|
|
|
|
|
|
|
atomStyle.left = 0; |
|
|
|
|
|
|
|
atomStyle.top = 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$atoms.css( atomStyle ); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// add sort data to each elem
|
|
|
|
|
|
|
|
this._addSortData( $atoms ); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// return this.molequul( 'addSortData', props ).css( atomStyle );
|
|
|
|
// return this.molequul( 'addSortData', props ).css( atomStyle );
|
|
|
|
}, |
|
|
|
}, |
|
|
@ -513,7 +504,8 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
reLayout : function( callback ) { |
|
|
|
reLayout : function( callback ) { |
|
|
|
this |
|
|
|
console.log('relaying out', this.atoms.$filtered.length ) |
|
|
|
|
|
|
|
return this |
|
|
|
[ '_' + this.options.layoutMode + 'ResetLayoutProps' ]() |
|
|
|
[ '_' + this.options.layoutMode + 'ResetLayoutProps' ]() |
|
|
|
.layout( this.atoms.$filtered, callback ) |
|
|
|
.layout( this.atoms.$filtered, callback ) |
|
|
|
}, |
|
|
|
}, |
|
|
@ -521,19 +513,26 @@ |
|
|
|
// ====================== Convenience methods ======================
|
|
|
|
// ====================== Convenience methods ======================
|
|
|
|
|
|
|
|
|
|
|
|
// adds a jQuery object of items to a molequul container
|
|
|
|
// adds a jQuery object of items to a molequul container
|
|
|
|
add : function( $content ) { |
|
|
|
addAtoms : function( $content ) { |
|
|
|
var $newAtoms = this._filterFind( $content, this.options.itemSelector ); |
|
|
|
var $newAtoms = this._filterFind( $content, this.options.itemSelector ); |
|
|
|
this._setupAtoms( $newAtoms ); |
|
|
|
this._setupAtoms( $newAtoms ); |
|
|
|
// add new atoms to atoms pools
|
|
|
|
// add new atoms to atoms pools
|
|
|
|
this.atoms.$all = this.atoms.$all.add( $newAtoms ); |
|
|
|
this.atoms.$all = this.atoms.$all.add( $newAtoms ); |
|
|
|
this.atoms.$filtered = this.atoms.$filtered.add( $newAtoms ); |
|
|
|
// this.atoms.$filtered = this.atoms.$filtered.add( $newAtoms );
|
|
|
|
return this; |
|
|
|
return $newAtoms; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// convienence method for adding elements properly to any layout
|
|
|
|
// convienence method for adding elements properly to any layout
|
|
|
|
insert : function( $content ) { |
|
|
|
insert : function( $content, callback ) { |
|
|
|
this.$elem.append( $content ); |
|
|
|
this.$elem.append( $content ); |
|
|
|
return this.add( $content )._init(); |
|
|
|
|
|
|
|
|
|
|
|
var $newAtoms = this.addAtoms( $content ), |
|
|
|
|
|
|
|
$filteredAtoms = this._filter( $newAtoms ); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.atoms.$filtered = this.atoms.$filtered.add( $filteredAtoms ); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this._sort().reLayout( callback ); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// convienence method for working with Infinite Scroll
|
|
|
|
// convienence method for working with Infinite Scroll
|
|
|
|