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

_posts/demos/2011-05-22-category-rows.html

@@ -105,8 +105,7 @@ category: demos
           return $elem.attr('data-category');
         }
       },
-      sortBy: 'category',
+      sortBy: 'category'
-      animationEngine : $.browser.opera ? 'jquery' : 'best-available'
     });
 
     {% include option-set-buttons.js %}

_posts/docs/2011-12-11-help.mdown

@@ -13,6 +13,7 @@ toc:
   - { title: CSS transforms in Opera, anchor: css_transforms_in_opera }
   - { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting}
   - { title: Flash, anchor: flash }
+  - { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit }
 
 ---
 
@@ -37,7 +38,8 @@ Support License is included with Isotope Commercial License.
 ## Additional resources
 
 + The [Metafizzy blog](http://metafizzy.co/blog/) has posts that cover specialized use cases
-+ [Sites using Isotope](http://www.delicious.com/desandro/using:isotope)
++ [Sites using Isotope on Zootool](http://zootool.com/user/desandro/tag:isotope), has screenshots
++ [Sites using Isotope on Delicious](http://www.delicious.com/desandro/using:isotope)
 + [Miscelleanous Isotope content](http://www.delicious.com/desandro/re:isotope)
 + [Stack Overflow questions on Isotope](http://www.delicious.com/desandro/re:isotope+stackoverflow)
 
@@ -126,3 +128,7 @@ If you do plan on implementing Infinite Scroll with filtering or sorting (which
 [Using CSS transforms with Flash content is a bit buggy in Safari and Firefox](http://dropshado.ws/post/4085720152/css-transforms-breaking-flash). This is problematic when using Isotope on item elements that contain Flash content like YouTube or Vimeo videos, Flash ads, or Flash audio players.
 
 The best way to resolve this issue is to disable CSS transforms by setting the [`transformsEnabled` option](options.html#transformsenabled) to <code><span class="kc">false</span></code>.
+
+## Poor type rendering in WebKit
+
+Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated).

_posts/tests/2011-05-18-centered-masonry.html

@@ -11,7 +11,7 @@ category: tests
 </style>
 
 <section id="copy">
-  <p>Isotope&rsquo;s capabilities are designed to be used together cohesively. You can do it all &mdash; filter, sort, change layout modes, add items &mdash; and Isotope will handle it with ease.</p>
+  <p>Modified masonry layout mode for centered container.</p>
 </section>
 
 <section id="options" class="clearfix">
@@ -63,8 +63,6 @@ category: tests
     this.masonry.cols = cols;
     // i.e. this.masonry.columnWidth = ...
     this.masonry.columnWidth = colW;
-    
-    return this;
   };
   
   $.Isotope.prototype._masonryReset = function() {
@@ -77,7 +75,6 @@ category: tests
     while (i--) {
       this.masonry.colYs.push( 0 );
     }
-    return this;
   };
 
   $.Isotope.prototype._masonryResizeChanged = function() {
@@ -114,7 +111,6 @@ category: tests
       masonry : {
         columnWidth : 120
       },
-      animationEngine : $.browser.opera ? 'jquery' : 'best-available',
       getSortData : {
         symbol : function( $elem ) {
           return $elem.attr('data-symbol');

_posts/tests/2011-05-24-elements-complete-test.html

@@ -65,8 +65,6 @@ body_class: demos
         columnWidth : 240,
         rowHeight : 240
       },
-      animationEngine : $.browser.opera ? 'jquery' : 'best-available',
-      // animationEngine : 'jquery',
       getSortData : {
         symbol : function( $elem ) {
           return $elem.attr('data-symbol');

_posts/tests/2011-07-07-masonry-corner-stamp.html

@@ -108,7 +108,6 @@ $('#container').isotope({
         columnWidth : 120,
         cornerStampSelector: '.corner-stamp'
       },
-      animationEngine : $.browser.opera ? 'jquery' : 'best-available',
       getSortData : {
         symbol : function( $elem ) {
           return $elem.attr('data-symbol');

_posts/tests/2011-07-14-masonry-gutters.html

@@ -0,0 +1,148 @@
+---
+title: masonry gutters
+layout: default
+category: tests
+---
+
+<style>
+.element {
+  margin: 5px 0;
+}
+
+#container {
+  padding: 5px 0;
+}
+</style>
+
+<section id="copy">
+  <p>Modified masonry layout mode methods for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.</p>
+  <p>Set <code>gutterWidth</code> within <code>masonry</code> options.</p>
+
+{% highlight javascript %}
+
+$('#container').isotope({
+  masonry: {
+    columnWidth: 110,
+    gutterWidth: 10
+  }
+});
+
+{% endhighlight %}
+
+</section>
+
+<section id="options" class="clearfix">
+
+  {% include filter-buttons.html %}
+
+  {% include sort-buttons.html %}
+
+  <h3>Etc</h3>
+
+  <ul id="etc" class="clearfix">
+    <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
+    <li id="insert"><a href="#insert">Insert new elements</a></li>
+    <li id="append"><a href='#append'>Append new elements</a></li>
+    <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
+  </ul>
+
+</section> <!-- #options -->
+
+<div id="container" class="clickable clearfix">
+  {% for elem_number in site.best_of_order %}
+    {% assign element = site.elements[elem_number] %}
+    {% include element-partial.html %}
+  {% endfor %}
+</div> <!-- #container -->
+
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.isotope_js }}"></script>
+<script src="../js/fake-element.js"></script>
+<script>
+
+  // modified Isotope methods for gutters in masonry
+  $.Isotope.prototype._getMasonryGutterColumns = function() {
+    var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
+        containerWidth = this.element.width();
+  
+    this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
+                  // or use the size of the first item
+                  this.$filteredAtoms.outerWidth(true) ||
+                  // if there's no items, use size of container
+                  containerWidth;
+
+    this.masonry.columnWidth += gutter;
+
+    this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
+    this.masonry.cols = Math.max( this.masonry.cols, 1 );
+  };
+
+  $.Isotope.prototype._masonryReset = function() {
+    // layout-specific props
+    this.masonry = {};
+    // FIXME shouldn't have to call this again
+    this._getMasonryGutterColumns();
+    var i = this.masonry.cols;
+    this.masonry.colYs = [];
+    while (i--) {
+      this.masonry.colYs.push( 0 );
+    }
+  };
+
+  $.Isotope.prototype._masonryResizeChanged = function() {
+    var prevSegments = this.masonry.cols;
+    // update cols/rows
+    this._getMasonryGutterColumns();
+    // return if updated cols/rows is not equal to previous
+    return ( this.masonry.cols !== prevSegments );
+  };
+
+
+  $(function(){
+    
+    var $container = $('#container');
+    
+    {% include random-sizes.js %}
+    
+    $container.isotope({
+      itemSelector : '.element',
+      masonry : {
+        columnWidth : 110,
+        gutterWidth : 10
+      },
+      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();
+        }
+      }
+    });
+      
+    {% include option-set-buttons.js %}
+
+    {% include add-buttons.js %}
+
+    {% include change-sizes.js %}
+
+    var $sortBy = $('#sort-by');
+    $('#shuffle a').click(function(){
+      $container.isotope('shuffle');
+      $sortBy.find('.selected').removeClass('selected');
+      $sortBy.find('[data-option-value="random"]').addClass('selected');
+      return false;
+    });
+    
+  });
+</script>

index.html

@@ -135,26 +135,26 @@ features:
           .text('Could not load sites using Isotope :(');
       };
     
-      // dynamically load sites using Isotope from Ember app
+      // dynamically load sites using Isotope from Zootool
-      $.getJSON('http://api.emberapp.com/users/view/' + 
+      $.getJSON('http://zootool.com/api/users/items/?username=desandro' +
-                  'desandro/collections/view/isotope.json?callback=?')
+          '&apikey=8b604e5d4841c2cd976241dd90d319d7' +
+          '&tag=bestofisotope&callback=?')
         .error( ajaxError )
         .success(function( data ){
 
-          // proceed only if we have images
+          // proceed only if we have data
-          if ( !data.response || !data.response.images ) {
+          if ( !data || !data.length ) {
             ajaxError();
             return;
           }
-          var images = data.response.images,
+          var items = [],
-              items = [],
+              item, datum;
-              item, image;
+
-        
+          for ( var i=0, len = data.length; i < len; i++ ) {
-          for ( var i=0, len = images.length; i < len; i++ ) {
+            datum = data[i];
-            image = images[i];
+            item = '<li><a href="' + datum.url + '">'
-            item = '<li><a href="' + image.url + '">'
+              + '<img src="' + datum.image.replace('/l.', '/m.') + '" />'
-              + '<img src="' + image.file.src.replace('/m.', '/s.') + '" />'
+              + '<b>' + datum.title + '</b>'
-              + '<b>' + image.name + '</b>'
               + '</a></li>';
             items.push( item );
           }