Skip to content

Commit

Permalink
src & docs : add itemPositionDataEnabled
Browse files Browse the repository at this point in the history
I think it's ready for v1.1
  • Loading branch information
desandro committed Apr 26, 2011
1 parent e100677 commit 3c55140
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 27 deletions.
27 changes: 27 additions & 0 deletions _posts/docs/2010-12-03-options.mdown
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ toc:
- { title: hiddenClass, anchor: hiddenclass }
- { title: hiddenStyle, anchor: hiddenstyle }
- { title: itemClass, anchor: itemclass }
- { title: itemPositionDataEnabled, anchor: itempositiondataenabled }
- { title: itemSelector, anchor: itemselector }
- { title: layoutMode, anchor: layoutmode }
- { title: resizable, anchor: resizable }
Expand Down Expand Up @@ -159,6 +160,32 @@ The style applied to item elements hidden by Filtering.

The class applied to item elements.

## itemPositionDataEnabled

<dl class="clearfix">
<dt><code>itemPositionDataEnabled</code></dt>
<dd class="option-type">Boolean</dd>
<dd class="default"><code><span class="kc">false</span></code></dd>
</dl>

When enabled, the position of item elements will exposed as data, which you can retrieve with jQuery's data method with <code><span class="s1">'isotope-item-position'</span></code> name space. Position is return as an object with `x` and `y`;

### Example

{% highlight javascript %}

$('#container').isotope({
itemSelector: '.element',
itemPositionDataEnabled: true
})
// log position of each item
.find('.element').each(function(){
var position = $(this).data('isotope-item-position');
console.log('item position is x: ' + position.x + ', y: ' + position.y );
});

{% endhighlight %}

## itemSelector

<dl class="clearfix">
Expand Down
99 changes: 99 additions & 0 deletions _posts/tests/2011-04-26-item-position-data01.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
---
title: item position data01
layout: demo
category: tests
---

<section id="copy">
<p></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>

<ul id="etc" class="floated clearfix">

<li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
</ul>
</section> <!-- #options -->

<div id="container">
{% for element in site.elements limit:40 %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #container -->

<script src="../{{ site.jquery_js }}"></script>
<script src="../{{ site.isotope_js }}"></script>
<script>
$(function(){

var $container = $('#container');

// hacky way of adding random size classes
$container.find('.element').each(function(){
if ( Math.random() > 0.6 ) {
$(this).addClass('width2');
}
if ( Math.random() > 0.6 ) {
$(this).addClass('height2');
}
});

{% include sort-buttons.js %}

// change size of clicked element
$container.find('.element').live('click', function(){
$(this).toggleClass('large');
$container.isotope('reLayout');
});

$container.isotope({
itemSelector: '.element',
itemPositionDataEnabled: true,
masonry: {
columnWidth : 120
},
getSortData : {
symbol : function( $elem ) {
return $elem.attr('data-symbol');
},
category : function( $elem ) {
return $elem.attr('data-category');
},
number : function( $elem ) {
return parseInt( $elem.find('.number').text(), 10 );
},
weight : function( $elem ) {
return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
},
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});

});
</script>
8 changes: 6 additions & 2 deletions jquery.isotope.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* Isotope v1.0.110401
* Isotope v1.1.110426
* An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co
*
Expand Down Expand Up @@ -357,7 +357,8 @@
sortBy : 'original-order',
sortAscending : true,
resizesContainer : true,
transformsEnabled : true
transformsEnabled : true,
itemPositionDataEnabled: false
},

_filterFind: function( $elems, selector ) {
Expand Down Expand Up @@ -600,6 +601,9 @@
_pushPosition : function( $elem, x, y ) {
var position = this.getPositionStyles( x, y );
this.styleQueue.push({ $el: $elem, style: position });
if ( this.options.itemPositionDataEnabled ) {
$elem.data('isotope-item-position', {x: x, y: y} );
}
},


Expand Down
Loading

0 comments on commit 3c55140

Please sign in to comment.