From 936e6c67df8fd89f4c450d0e341debcace50dd11 Mon Sep 17 00:00:00 2001
From: David DeSandro <david@desandro.com>
Date: Sun, 19 Dec 2010 12:48:04 -0500
Subject: [PATCH] Add fitColumns layout mode

---
 _layouts/elements.html                        |  2 +-
 ...010-12-19-elements-partial-horizontal.html |  2 +-
 src/jquery.molequul.js                        | 57 +++++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/_layouts/elements.html b/_layouts/elements.html
index 222d094..2eaf9bc 100644
--- a/_layouts/elements.html
+++ b/_layouts/elements.html
@@ -117,7 +117,7 @@
       console.time('initializeMe');
       $demo.molequul({
         itemSelector : '.element',
-        layoutMode : '{{ page.layout_options limit:1 }}',
+        layoutMode : '{% for layout in page.layout_options limit:1 %}{{ layout }}{% endfor %}',
         masonry : {
           columnWidth : 120
         },
diff --git a/_posts/examples/2010-12-19-elements-partial-horizontal.html b/_posts/examples/2010-12-19-elements-partial-horizontal.html
index 20844cc..c2f43f0 100644
--- a/_posts/examples/2010-12-19-elements-partial-horizontal.html
+++ b/_posts/examples/2010-12-19-elements-partial-horizontal.html
@@ -3,7 +3,7 @@ title: Elements Partial Horizontal
 layout: elements
 category: examples
 body_class: horizontal
-layout_options: cellsByColumn
+layout_options: [ fitColumns, cellsByColumn ]
 ---
 
 
diff --git a/src/jquery.molequul.js b/src/jquery.molequul.js
index dba4319..6c9336d 100755
--- a/src/jquery.molequul.js
+++ b/src/jquery.molequul.js
@@ -669,6 +669,60 @@
     }
   });
   
+  // ====================== fitColumns ======================
+  
+  $.extend( $.Molequul.prototype, {
+    
+    _fitColumnsReset : function() {
+      this.fitColumns = {
+        x : 0,
+        y : 0,
+        width : 0
+      };
+      return this;
+    },
+    
+    _fitColumnsLayout : function( $elems ) {
+      var instance = this;
+      this.height = this.element.height();
+      return $elems.each( function() {
+        var $this = $(this),
+            atomW = $this.outerWidth(true),
+            atomH = $this.outerHeight(true),
+            x, y;
+
+        if ( instance.fitColumns.y !== 0  &&  atomH + instance.fitColumns.y > instance.height ) {
+          // if this element cannot fit in the current column
+          instance.fitColumns.x = instance.fitColumns.width;
+          instance.fitColumns.y = 0;
+        } 
+
+        // position the atom
+        x = instance.fitColumns.x + instance.posLeft;
+        y = instance.fitColumns.y + instance.posTop;
+        instance._pushPosition( $this, x, y );
+
+        instance.fitColumns.width = Math.max( instance.fitColumns.x + atomW, instance.fitColumns.width );
+        instance.fitColumns.y += atomH;
+
+      });
+    },
+    
+    _fitColumnsGetContainerSize : function () {
+      return { width : this.fitColumns.width };
+    },
+    
+    _fitColumnsResize : function() {
+      return this.reLayout();
+    }
+    
+    
+  });
+  
+
+  
+  // ====================== cellsByColumn ======================
+  
   $.extend( $.Molequul.prototype, {
 
     _cellsByColumnReset : function() {
@@ -709,6 +763,9 @@
     }
   });
   
+  
+
+