--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/enmi12/glossaire/_posts/custom-layout-modes/2011-05-22-category-rows.html	Wed Nov 06 03:21:17 2013 +0000
@@ -0,0 +1,126 @@
+---
+title: Category rows
+layout: default
+category: custom-layout-modes
+---
+
+<section id="copy">
+  <p>This demo uses a <a href="../docs/extending-isotope.html">custom layout mode</a>, <code>categoryRows</code> that arranges elements into rows based on their category. The layout mode logic relies on sorting to define rows.</p>
+</section>
+
+<section id="options" class="clearfix">
+
+  {% include filter-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>
+  </ul>
+</section> <!-- #options -->
+
+<div id="container" class="clearfix">
+  {% for elem_number in site.random_order | limit:60 %}
+    {% 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>
+
+  // categoryRows custom layout mode
+  $.extend( $.Isotope.prototype, {
+  
+    _categoryRowsReset : function() {
+      this.categoryRows = {
+        x : 0,
+        y : 0,
+        height : 0,
+        currentCategory : null
+      };
+    },
+  
+    _categoryRowsLayout : function( $elems ) {
+      var instance = this,
+          containerWidth = this.element.width(),
+          sortBy = this.options.sortBy,
+          props = this.categoryRows;
+      
+      $elems.each( function() {
+        var $this = $(this),
+            atomW = $this.outerWidth(true),
+            atomH = $this.outerHeight(true),
+            category = $.data( this, 'isotope-sort-data' )[ sortBy ],
+            x, y;
+      
+        if ( category !== props.currentCategory ) {
+          // new category, new row
+          props.x = 0;
+          props.height += props.currentCategory ? instance.options.categoryRows.gutter : 0;
+          props.y = props.height;
+          props.currentCategory = category;
+        } else if ( props.x !== 0 && atomW + props.x > containerWidth ) {
+          // if this element cannot fit in the current row
+          props.x = 0;
+          props.y = props.height;
+        } 
+      
+        // position the atom
+        instance._pushPosition( $this, props.x, props.y );
+  
+        props.height = Math.max( props.y + atomH, props.height );
+        props.x += atomW;
+  
+      });
+    },
+  
+    _categoryRowsGetContainerSize : function () {
+      return { height : this.categoryRows.height };
+    },
+  
+    _categoryRowsResizeChanged : function() {
+      return true;
+    }
+  
+  });
+  
+  $(function(){
+    
+    var $container = $('#container');
+    
+    {% include random-sizes.js %}
+    
+    $container.isotope({
+      itemSelector : '.element',
+      layoutMode : 'categoryRows',
+      categoryRows : {
+        gutter : 20
+      },
+      getSortData : {
+        category : function( $elem ) {
+          return $elem.attr('data-category');
+        }
+      },
+      sortBy: 'category'
+    });
+
+    {% include option-set-buttons.js %}
+
+    {% include add-buttons.js %}
+
+    // toggle variable sizes of all elements
+    $('#toggle-sizes').find('a').click(function(){
+      $container
+        .toggleClass('variable-sizes')
+        .isotope('reLayout');
+      return false;
+    });
+
+  });
+</script>
+  
+  
\ No newline at end of file