playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge branch 'master' of github.com:desandro/isotope

pull/96/head
David DeSandro 14 years ago
parent
93f3ba2d68 bc6b7ff7eb
commit
398ea37658
5 changed files with 221 additions and 256 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      _posts/tests/2011-03-27-destroy01.html
  2. 4
      _posts/tests/2011-03-27-no-items01.html
  3. 40
      _posts/tests/2011-04-26-item-position-data01.html
  4. 342
      jquery.isotope.js
  5. 4
      jquery.isotope.min.js

13
_posts/tests/2011-03-27-destroy01.html
Unescape View File

@ -12,7 +12,12 @@ category: tests
</style>
<section id="copy">
<p>After <code>destroy</code>-ing Isotope, original CSS gets re-applied</p>
<p>Click <em>init</em> button the <em>destroy</em>. Original CSS, pre-init, should be re-applied, all items back to visibility.</p>
</section>
<section id="options">
<button id="init">Init Isotope instance</button>
<button id="destroy">Destroy Isotope instance</button>
</section>
<div id="container" style="height: 600px">
@ -28,10 +33,16 @@ category: tests
var $container = $('#container');
$('#init').click(function(){
$container.isotope({
itemSelector: '.element',
filter: '.metal'
});
});
$('#destroy').click(function(){
$container.isotope('destroy');
});
});
</script>

4
_posts/tests/2011-03-27-no-items01.html
Unescape View File

@ -5,7 +5,7 @@ category: tests
---
<section id="copy">
<p>What happens when there are no items for Isotope/</p>
<p>What happens when there are no items for Isotope? If no items match `itemSelector`, container collapses. Plugin still <code>return this</code>.</p>
</section>
<div id="container">
@ -23,7 +23,7 @@ category: tests
$container.isotope({
itemSelector: '.foo'
});
}).css('border', '10px solid');
});
</script>

40
_posts/tests/2011-04-26-item-position-data01.html
Unescape View File

@ -5,30 +5,11 @@ category: tests
---
<section id="copy">
<p></p>
<p><code>itemPositionDataEnabled</code> option is enabled. </p>
</section>
<section id="options" class="clearfix">
<h3>Filters</h3>
<ul id="filters" class="option-set floated clearfix">
<li><a href="#show-all" class="selected">show all</a></li>
<li><a href="#metalloid">metalloid</a></li>
<li><a href="#metal">metal</a></li>
<li><a href="#alkali">alkali</a></li>
<li><a href="#alkaline-earth">alkaline-earth</a></li>
<li><a href="#inner-transition">inner-transition</a></li>
<li><a href="#lanthanoid">lanthanoid</a></li>
<li><a href="#actinoid">actinoid</a></li>
<li><a href="#transition">transition</a></li>
<li><a href="#post-transition">post-transition</a></li>
<li><a href="#nonmetal">nonmetal</a></li>
<li><a href="#other">other</a></li>
<li><a href="#halogen">halogen</a></li>
<li><a href="#noble-gas">noble-gas</a></li>
</ul>
{% include sort-buttons.html %}
<h3>Etc</h3>
@ -39,7 +20,7 @@ category: tests
</ul>
</section> <!-- #options -->
<div id="container">
<div id="container" class="clickable clearfix">
{% for element in site.elements limit:40 %}
{% include element-partial.html %}
{% endfor %}
@ -48,16 +29,25 @@ category: tests
<script src="../{{ site.jquery_js }}"></script>
<script src="../{{ site.isotope_js }}"></script>
<script>
$(function(){
var $container = $('#container');
{% include sort-buttons.js %}
// change size of clicked element
$container.find('.element').live('click', function(){
$(this).toggleClass('large');
$container.isotope('reLayout');
// toggle variable sizes of all elements
$('#toggle-sizes').find('a').click(function(){
$container
.toggleClass('variable-sizes')
.isotope('reLayout');
return false;
});
// log item position
$container.find('.element').click(function(){
var position = $(this).data('isotope-item-position');
console.log( position.x + ', ' + position.y );
});
$container.isotope({

342
jquery.isotope.js
Unescape View File

@ -1,5 +1,5 @@
/**
* Isotope v1.2.110520
* Isotope v1.3.110523
* An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co
*
@ -402,7 +402,7 @@
// bind resize method
if ( this.options.resizable ) {
$(window).bind( 'smartresize.isotope', function() {
instance.element.isotope('resize');
instance.resize();
});
}
@ -441,10 +441,7 @@
},
option: function( key, value ){
// get/change options AFTER initialization:
// you don't have to support all these cases,
// but here's how:
// signature: $('#foo').bar({ cool:false });
if ( $.isPlainObject( key ) ){
@ -454,17 +451,11 @@
this._updateOption( optionName );
}
// signature: $('#foo').option('cool'); - getter
} else if ( key && typeof value === "undefined" ){
return this.options[ key ];
// signature: $('#foo').bar('option', 'baz', false);
} else {
this.options[ key ] = value;
this._updateOption( key );
}
return this; // make sure to return the instance!
},
// ====================== updaters ====================== //
@ -578,16 +569,13 @@
};
this.$filteredAtoms.sort( sortFn );
return this;
},
_getSorter : function( elem, sortBy ) {
return $(elem).data('isotope-sort-data')[ sortBy ];
},
// ====================== Layout ======================
// ====================== Layout Helpers ======================
_translate : function( x, y ) {
return { translate : [ x, y ] };
@ -644,20 +632,20 @@
}
this.isLaidOut = true;
return this;
},
resize : function() {
return this[ '_' + this.options.layoutMode + 'Resize' ]();
if ( this[ '_' + this.options.layoutMode + 'ResizeChanged' ]() ) {
this.reLayout();
}
},
reLayout : function( callback ) {
return this[ '_' + this.options.layoutMode + 'Reset' ]()
.layout( this.$filteredAtoms, callback );
this[ '_' + this.options.layoutMode + 'Reset' ]();
this.layout( this.$filteredAtoms, callback );
},
@ -685,7 +673,8 @@
instance.$filteredAtoms = instance.$filteredAtoms.add( $filteredAtoms );
});
this._sort().reLayout( callback );
this._sort();
this.reLayout( callback );
},
@ -734,7 +723,7 @@
this.$allAtoms = this._shuffleArray( this.$allAtoms );
this.$filteredAtoms = this._filter( this.$allAtoms );
return this.reLayout( callback );
this.reLayout( callback );
},
// destroys widget, returns elements and container back (close) to original style
@ -770,11 +759,15 @@
},
// ====================== LAYOUTS ======================
// calculates number of rows or columns
// requires columnWidth or rowHeight to be set on namespaced object
// i.e. this.masonry.columnWidth = 200
_getSegments : function( namespace, isRows ) {
var measure = isRows ? 'rowHeight' : 'columnWidth',
_getSegments : function( isRows ) {
var namespace = this.options.layoutMode,
measure = isRows ? 'rowHeight' : 'columnWidth',
size = isRows ? 'height' : 'width',
UCSize = isRows ? 'Height' : 'Width',
segmentsName = isRows ? 'rows' : 'cols',
@ -798,44 +791,32 @@
// i.e. this.masonry.columnWidth = ...
this[ namespace ][ measure ] = segmentSize;
return this;
},
// ====================== LAYOUTS ======================
_checkIfSegmentsChanged : function( isRows ) {
var namespace = this.options.layoutMode,
segmentsName = isRows ? 'rows' : 'cols',
prevSegments = this[ namespace ][ segmentsName ];
// update cols/rows
this._getSegments( isRows );
// return if updated cols/rows is not equal to previous
return ( this[ namespace ][ segmentsName ] !== prevSegments );
},
// ====================== Masonry ======================
_masonryPlaceBrick : function( $brick, setCount, setY ) {
// here, `this` refers to a child element or "brick"
// get the minimum Y value from the columns
var minimumY = Math.min.apply( Math, setY ),
setHeight = minimumY + $brick.outerHeight(true),
i = setY.length,
shortCol = i,
setSpan = this.masonry.cols + 1 - i,
x, y ;
// Which column has the minY value, closest to the left
_masonryReset : function() {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getSegments();
var i = this.masonry.cols;
this.masonry.colYs = [];
while (i--) {
if ( setY[i] === minimumY ) {
shortCol = i;
}
}
// position the brick
x = this.masonry.columnWidth * shortCol + this.posLeft;
y = minimumY;
this._pushPosition( $brick, x, y );
// apply setHeight to necessary columns
for ( i=0; i < setSpan; i++ ) {
this.masonry.colYs[ shortCol + i ] = setHeight;
this.masonry.colYs.push( this.posTop );
}
},
_masonryLayout : function( $elems ) {
var instance = this;
$elems.each(function(){
@ -846,7 +827,7 @@
if ( colSpan === 1 ) {
// if brick spans only one column, just like singleMode
instance._masonryPlaceBrick( $this, instance.masonry.cols, instance.masonry.colYs );
instance._masonryPlaceBrick( $this, instance.masonry.colYs );
} else {
// brick spans more than one column
// how many different places could this brick fit horizontally
@ -863,36 +844,38 @@
groupY[i] = Math.max.apply( Math, groupColY );
}
instance._masonryPlaceBrick( $this, groupCount, groupY );
instance._masonryPlaceBrick( $this, groupY );
}
});
return this;
},
// reset
_masonryReset : function() {
// layout-specific props
this.masonry = {};
// FIXME shouldn't have to call this again
this._getSegments('masonry');
var i = this.masonry.cols;
this.masonry.colYs = [];
// worker method that places brick in the columnSet
// with the the minY
_masonryPlaceBrick : function( $brick, setY ) {
// get the minimum Y value from the columns
var minimumY = Math.min.apply( Math, setY ),
setHeight = minimumY + $brick.outerHeight(true),
i = setY.length,
shortCol = i,
setSpan = this.masonry.cols + 1 - i,
x, y ;
// Which column has the minY value, closest to the left
while (i--) {
this.masonry.colYs.push( this.posTop );
if ( setY[i] === minimumY ) {
shortCol = i;
}
}
return this;
},
_masonryResize : function() {
var prevColCount = this.masonry.cols;
// get updated colCount
this._getSegments('masonry');
if ( this.masonry.cols !== prevColCount ) {
// if column count has changed, do a new column cound
this.reLayout();
// position the brick
x = this.masonry.columnWidth * shortCol + this.posLeft;
y = minimumY;
this._pushPosition( $brick, x, y );
// apply setHeight to necessary columns
for ( i=0; i < setSpan; i++ ) {
this.masonry.colYs[ shortCol + i ] = setHeight;
}
return this;
},
_masonryGetContainerSize : function() {
@ -900,9 +883,20 @@
return { height: containerHeight };
},
_masonryResizeChanged : function() {
return this._checkIfSegmentsChanged();
},
// ====================== fitRows ======================
_fitRowsReset : function() {
this.fitRows = {
x : 0,
y : 0,
height : 0
};
},
_fitRowsLayout : function( $elems ) {
this.width = this.element.width();
var instance = this;
@ -928,64 +922,51 @@
instance.fitRows.x += atomW;
});
return this;
},
_fitRowsReset : function() {
this.fitRows = {
x : 0,
y : 0,
height : 0
};
return this;
},
_fitRowsGetContainerSize : function () {
return { height : this.fitRows.height };
},
_fitRowsResize : function() {
return this.reLayout();
_fitRowsResizeChanged : function() {
return true;
},
// ====================== cellsByRow ======================
_cellsByRowReset : function() {
this.cellsByRow = {};
this._getSegments('cellsByRow');
this.cellsByRow.rowHeight = this.options.cellsByRow.rowHeight || this.$allAtoms.outerHeight(true);
return this;
this.cellsByRow = {
index : 0
};
// get this.cellsByRow.columnWidth
this._getSegments();
// get this.cellsByRow.rowHeight
this._getSegments(true);
},
_cellsByRowLayout : function( $elems ) {
var instance = this,
cols = this.cellsByRow.cols;
this.cellsByRow.atomsLen = $elems.length;
$elems.each( function( i ){
props = this.cellsByRow;
$elems.each( function(){
var $this = $(this),
x = ( i % cols + 0.5 ) * instance.cellsByRow.columnWidth -
col = props.index % props.cols,
row = ~~( props.index / props.cols ),
x = ( col + 0.5 ) * props.columnWidth -
$this.outerWidth(true) / 2 + instance.posLeft,
y = ( ~~( i / cols ) + 0.5 ) * instance.cellsByRow.rowHeight -
y = ( row + 0.5 ) * props.rowHeight -
$this.outerHeight(true) / 2 + instance.posTop;
instance._pushPosition( $this, x, y );
props.index ++;
});
return this;
},
_cellsByRowGetContainerSize : function() {
return { height : Math.ceil( this.cellsByRow.atomsLen / this.cellsByRow.cols ) * this.cellsByRow.rowHeight + this.posTop };
return { height : Math.ceil( this.$filteredAtoms.length / this.cellsByRow.cols ) * this.cellsByRow.rowHeight + this.posTop };
},
_cellsByRowResize : function() {
var prevCols = this.cellsByRow.cols;
this._getSegments('cellsByRow');
// if column count has changed, do a new column cound
if ( this.cellsByRow.cols !== prevCols ) {
this.reLayout();
}
return this;
_cellsByRowResizeChanged : function() {
return this._checkIfSegmentsChanged();
},
@ -995,7 +976,6 @@
this.straightDown = {
y : 0
};
return this;
},
_straightDownLayout : function( $elems ) {
@ -1006,47 +986,29 @@
instance._pushPosition( $this, instance.posLeft, y );
instance.straightDown.y += $this.outerHeight(true);
});
return this;
},
_straightDownGetContainerSize : function() {
return { height : this.straightDown.y + this.posTop };
},
_straightDownResize : function() {
this.reLayout();
return this;
_straightDownResizeChanged : function() {
return true;
},
// ====================== masonryHorizontal ======================
_masonryHorizontalPlaceBrick : function( $brick, setCount, setX ) {
// here, `this` refers to a child element or "brick"
// get the minimum Y value from the columns
var minimumX = Math.min.apply( Math, setX ),
setWidth = minimumX + $brick.outerWidth(true),
i = setX.length,
smallRow = i,
setSpan = this.masonryHorizontal.rows + 1 - i,
x, y ;
// Which column has the minY value, closest to the left
_masonryHorizontalReset : function() {
// layout-specific props
this.masonryHorizontal = {};
// FIXME shouldn't have to call this again
this._getSegments( true );
var i = this.masonryHorizontal.rows;
this.masonryHorizontal.rowXs = [];
while (i--) {
if ( setX[i] === minimumX ) {
smallRow = i;
}
}
// position the brick
x = minimumX;
y = this.masonryHorizontal.rowHeight * smallRow + this.posTop;
this._pushPosition( $brick, x, y );
// apply setHeight to necessary columns
for ( i=0; i < setSpan; i++ ) {
this.masonryHorizontal.rowXs[ smallRow + i ] = setWidth;
this.masonryHorizontal.rowXs.push( this.posLeft );
}
},
_masonryHorizontalLayout : function( $elems ) {
@ -1059,7 +1021,7 @@
if ( rowSpan === 1 ) {
// if brick spans only one column, just like singleMode
instance._masonryHorizontalPlaceBrick( $this, instance.masonryHorizontal.rows, instance.masonryHorizontal.rowXs );
instance._masonryHorizontalPlaceBrick( $this, instance.masonryHorizontal.rowXs );
} else {
// brick spans more than one row
// how many different places could this brick fit horizontally
@ -1075,35 +1037,37 @@
groupX[i] = Math.max.apply( Math, groupRowX );
}
instance._masonryHorizontalPlaceBrick( $this, groupCount, groupX );
instance._masonryHorizontalPlaceBrick( $this, groupX );
}
});
return this;
},
_masonryHorizontalReset : function() {
// layout-specific props
this.masonryHorizontal = {};
// FIXME shouldn't have to call this again
this._getSegments( 'masonryHorizontal', true );
var i = this.masonryHorizontal.rows;
this.masonryHorizontal.rowXs = [];
_masonryHorizontalPlaceBrick : function( $brick, setX ) {
// here, `this` refers to a child element or "brick"
// get the minimum Y value from the columns
var minimumX = Math.min.apply( Math, setX ),
setWidth = minimumX + $brick.outerWidth(true),
i = setX.length,
smallRow = i,
setSpan = this.masonryHorizontal.rows + 1 - i,
x, y ;
// Which column has the minY value, closest to the left
while (i--) {
this.masonryHorizontal.rowXs.push( this.posLeft );
if ( setX[i] === minimumX ) {
smallRow = i;
}
}
return this;
},
_masonryHorizontalResize : function() {
var prevRows = this.masonryHorizontal.rows;
// get updated colCount
this._getSegments( 'masonryHorizontal', true );
if ( this.masonryHorizontal.rows !== prevRows ) {
// if column count has changed, do a new column cound
this.reLayout();
// position the brick
x = minimumX;
y = this.masonryHorizontal.rowHeight * smallRow + this.posTop;
this._pushPosition( $brick, x, y );
// apply setHeight to necessary columns
for ( i=0; i < setSpan; i++ ) {
this.masonryHorizontal.rowXs[ smallRow + i ] = setWidth;
}
return this;
},
_masonryHorizontalGetContainerSize : function() {
@ -1111,6 +1075,10 @@
return { width: containerWidth };
},
_masonryHorizontalResizeChanged : function() {
return this._checkIfSegmentsChanged(true);
},
// ====================== fitColumns ======================
@ -1120,7 +1088,6 @@
y : 0,
width : 0
};
return this;
},
_fitColumnsLayout : function( $elems ) {
@ -1147,15 +1114,14 @@
instance.fitColumns.y += atomH;
});
return this;
},
_fitColumnsGetContainerSize : function () {
return { width : this.fitColumns.width };
},
_fitColumnsResize : function() {
return this.reLayout();
_fitColumnsResizeChanged : function() {
return true;
},
@ -1163,40 +1129,37 @@
// ====================== cellsByColumn ======================
_cellsByColumnReset : function() {
this.cellsByColumn = {};
this._getSegments( 'cellsByColumn', true );
this.cellsByColumn.columnWidth = this.options.cellsByColumn.columnWidth || this.$allAtoms.outerHeight(true);
return this;
this.cellsByColumn = {
index : 0
};
// get this.cellsByColumn.columnWidth
this._getSegments();
// get this.cellsByColumn.rowHeight
this._getSegments(true);
},
_cellsByColumnLayout : function( $elems ) {
var instance = this,
rows = this.cellsByColumn.rows;
this.cellsByColumn.atomsLen = $elems.length;
$elems.each( function( i ){
props = this.cellsByColumn;
$elems.each( function(){
var $this = $(this),
x = ( ~~( i / rows ) + 0.5 ) * instance.cellsByColumn.columnWidth -
col = ~~( props.index / props.rows ),
row = props.index % props.rows,
x = ( col + 0.5 ) * props.columnWidth -
$this.outerWidth(true) / 2 + instance.posLeft,
y = ( i % rows + 0.5 ) * instance.cellsByColumn.rowHeight -
y = ( row + 0.5 ) * props.rowHeight -
$this.outerHeight(true) / 2 + instance.posTop;
instance._pushPosition( $this, x, y );
props.index ++;
});
return this;
},
_cellsByColumnGetContainerSize : function() {
return { width : Math.ceil( this.cellsByColumn.atomsLen / this.cellsByColumn.rows ) * this.cellsByColumn.columnWidth + this.posLeft };
return { width : Math.ceil( this.$filteredAtoms.length / this.cellsByColumn.rows ) * this.cellsByColumn.columnWidth + this.posLeft };
},
_cellsByColumnResize : function() {
var prevRows = this.cellsByColumn.rows;
this._getSegments( 'cellsByColumn', true );
// if column count has changed, do a new column cound
if ( this.cellsByColumn.rows !== prevRows ) {
this.reLayout();
}
return this;
_cellsByColumnResizeChanged : function() {
return this._checkIfSegmentsChanged(true);
},
// ====================== straightAcross ======================
@ -1205,7 +1168,6 @@
this.straightAcross = {
x : 0
};
return this;
},
_straightAcrossLayout : function( $elems ) {
@ -1216,16 +1178,14 @@
instance._pushPosition( $this, x, instance.posTop );
instance.straightAcross.x += $this.outerWidth(true);
});
return this;
},
_straightAcrossGetContainerSize : function() {
return { width : this.straightAcross.x + this.posLeft };
},
_straightAcrossResize : function() {
this.reLayout();
return this;
_straightAcrossResizeChanged : function() {
return true;
}
};
@ -1278,7 +1238,7 @@
// call method
var args = Array.prototype.slice.call( arguments, 1 );
return this.each(function(){
this.each(function(){
var instance = $.data( this, 'isotope' );
if ( !instance ) {
return $.error( "cannot call methods on isotope prior to initialization; " +
@ -1291,17 +1251,21 @@
instance[ options ].apply( instance, args );
});
} else {
return this.each(function() {
this.each(function() {
var instance = $.data( this, 'isotope' );
if ( instance ) {
// apply options & init
instance.option( options || {} )._init();
instance.option( options || {} );
instance._init();
} else {
// initialize new instance
$.data( this, 'isotope', new $.Isotope( options, this ) );
}
});
}
// return jQuery object
// so plugin methods do not have to
return this;
};
})( window, jQuery );

4
jquery.isotope.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save