src & docs : add itemPositionDataEnabled

I think it's ready for v1.1

Author: desandro

_posts/docs/2010-12-03-options.mdown

@@ -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 }
@@ -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">

_posts/tests/2011-04-26-item-position-data01.html

@@ -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>

jquery.isotope.js

@@ -1,5 +1,5 @@
 /**
- * Isotope v1.0.110401
+ * Isotope v1.1.110426
  * An exquisite jQuery plugin for magical layouts
  * http://isotope.metafizzy.co
  *
@@ -357,7 +357,8 @@
       sortBy : 'original-order',
       sortAscending : true,
       resizesContainer : true,
-      transformsEnabled : true
+      transformsEnabled : true,
+      itemPositionDataEnabled: false
     },
 
     _filterFind: function( $elems, selector ) {
@@ -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} );
+      }
     },