--- a/enmi12/glossaire/glossaire/_posts/custom-layout-modes/2011-07-14-masonry-gutters.html	Wed Nov 06 03:21:17 2013 +0000
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,148 +0,0 @@
----
-title: Masonry gutters
-layout: default
-category: custom-layout-modes
----
-
-<style>
-.element {
-  margin: 5px 0;
-}
-
-#container {
-  padding: 5px 0;
-}
-</style>
-
-<section id="copy">
-  <p><a href="../docs/layout-modes.html#modified_layout_modes">Modified masonry layout mode</a> 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>
\ No newline at end of file