From d19aba9116e6340658559fdacd74a7466d669826 Mon Sep 17 00:00:00 2001
From: David DeSandro <david@desandro.com>
Date: Fri, 19 Aug 2011 23:10:35 -0400
Subject: [PATCH] docs & test : add right-to-left mod and docs in help; fixes
 #15

---
 _posts/docs/2011-12-11-help.mdown          |  43 ++++++
 _posts/tests/2011-08-19-right-to-left.html | 150 +++++++++++++++++++++
 2 files changed, 193 insertions(+)
 create mode 100644 _posts/tests/2011-08-19-right-to-left.html

diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown
index 70f5506..ebd2e5d 100644
--- a/_posts/docs/2011-12-11-help.mdown
+++ b/_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 %}
\ No newline at end of file
diff --git a/_posts/tests/2011-08-19-right-to-left.html b/_posts/tests/2011-08-19-right-to-left.html
new file mode 100644
index 0000000..e0e21d5
--- /dev/null
+++ b/_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>