Merge branch 'master' into gh-pages

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

@@ -15,6 +15,7 @@ toc:
   - { 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 }
+  - { title: Right-to-left layouts, anchor: righttoleft_layouts }
 
 ---
 
@@ -154,3 +155,45 @@ The best way to resolve this issue is to disable CSS transforms by setting the [
 ## 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).
+
+## Right-to-left layouts
+
+Isotope can be modified to support right-to-left layouts for languages like Hebrew and Arabic.
+
+[**See test: Right to left**](../tests/right-to-left.html)
+
+You'll need to make the following changes:
+
++ Modify Isotope's `_positionAbs` method
++ Set `transformsEnabled: false` in the Isotope options
++ Add CSS transition property styles for right/top.
+
+### JavaScript for right-to-left support
+
+{% highlight javascript %}
+
+// modify Isotope's absolute position method
+$.Isotope.prototype._positionAbs = function( x, y ) {
+  return { right: x, top: y };
+};
+
+// initialize Isotope
+$('#container').isotope({
+  transformsEnabled: false
+  // other options...
+});
+
+{% endhighlight %}
+
+### CSS for right-to-left support
+
+{% highlight css %}
+
+.isotope .isotope-item {
+  -webkit-transition-property: right, top, -webkit-transform, opacity;
+     -moz-transition-property: right, top, -moz-transform, opacity;
+       -o-transition-property: right, top, -o-transform, opacity;
+          transition-property: right, top, transform, opacity;
+}
+
+{% endhighlight %}

_posts/tests/2011-08-19-right-to-left.html

@@ -0,0 +1,150 @@
+---
+title: Right to left
+layout: default
+category: tests
+body_class: demos
+---
+
+<style>
+  #content { direction: rtl; }
+  
+  #options li { float: right; }
+
+  .isotope .isotope-item {
+    -webkit-transition-property: right, top, -webkit-transform, opacity;
+       -moz-transition-property: right, top, -moz-transform, opacity;
+         -o-transition-property: right, top, -o-transform, opacity;
+            transition-property: right, top, transform, opacity;
+  }
+</style>
+
+<section id="copy">
+  <p>Isotope can support right-to-left layouts for languages like Hebrew and Arabic.</p>
+</section>
+
+<section id="options" class="clearfix">
+
+  {% include filter-buttons.html %}
+
+  {% include sort-buttons.html %}
+
+  {% include layout-options.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>
+
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.isotope_js }}"></script>
+<script src="../js/fake-element.js"></script>
+<script>
+  $.Isotope.prototype._positionAbs = function( x, y ) {
+    return { right: x, top: y };
+  };
+
+  $(function(){
+    
+    var $container = $('#container');
+
+    {% include random-sizes.js %}
+
+    $container.isotope({
+      itemSelector : '.element',
+      transformsEnabled: false,
+      masonry : {
+        columnWidth : 120
+      },
+      masonryHorizontal : {
+        rowHeight: 120
+      },
+      cellsByRow : {
+        columnWidth : 240,
+        rowHeight : 240
+      },
+      cellsByColumn : {
+        columnWidth : 240,
+        rowHeight : 240
+      },
+      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();
+        }
+      }
+    });
+    
+    var $optionSets = $('#options .option-set'),
+        $optionLinks = $optionSets.find('a');
+
+    $optionLinks.click(function(){
+      var $this = $(this);
+      // don't proceed if already selected
+      if ( $this.hasClass('selected') ) {
+        return false;
+      }
+      var $optionSet = $this.parents('.option-set');
+      $optionSet.find('.selected').removeClass('selected');
+      $this.addClass('selected');
+
+      // make option object dynamically, i.e. { filter: '.my-filter-class' }
+      var options = {},
+          key = $optionSet.attr('data-option-key'),
+          value = $this.attr('data-option-value');
+      // parse 'false' as false boolean
+      value = value === 'false' ? false : value;
+      options[ key ] = value;
+
+      if ( key === 'layoutMode' && changeLayoutMode ) {
+        // changes in layout modes need extra logic
+        changeLayoutMode( $this, options )
+      } else {
+        // otherwise, apply new options
+        $container.isotope( options );
+      }
+
+      return false;
+    });
+
+    {% include layout-change.js %}
+    
+    {% include change-sizes.js %}
+
+    {% include add-buttons.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>