tests : add notes and buttons

_posts/tests/2011-03-27-destroy01.html

@@ -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,9 +33,15 @@ category: tests
     
       var $container = $('#container');
     
-      $container.isotope({
-        itemSelector: '.element',
-        filter: '.metal'
+      $('#init').click(function(){
+        $container.isotope({
+          itemSelector: '.element',
+          filter: '.metal'
+        });
+      });
+      
+      $('#destroy').click(function(){
+        $container.isotope('destroy');
       });
     
     });

_posts/tests/2011-03-27-no-items01.html

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

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

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