hootsuite · gigablah · Apr 26, 2014
diff --git a/demo/load.js b/demo/load.js
@@ -1,69 +1,74 @@
-var DemoGrid = {
-  currentSize: 3,
-  buildElements: function($gridContainer, items) {
-    var item, i;
-    for (i = 0; i < items.length; i++) {
-      item = items[i];
-      $item = $(
-        '<li>' +
-          '<div class="inner">' +
-            '<div class="controls">' +
-              '<a href="#zoom1" class="resize" data-size="1">1x</a>' +
-              '<a href="#zoom2" class="resize" data-size="2">2x</a>' +
-              '<a href="#zoom3" class="resize" data-size="3">3x</a>' +
+$(function() {
+  var DemoGrid = {
+    el: $('#grid'),
+    currentSize: 1,
+    buildElements: function(items) {
+      var item, i;
+      for (i = 0; i < items.length; i++) {
+        item = items[i];
+        $item = $(
+          '<li>' +
+            '<div class="inner">' +
+              '<div class="controls">' +
+                '<a href="#zoom1" class="resize" data-size="1">1x</a>' +
+                '<a href="#zoom2" class="resize" data-size="2">2x</a>' +
+                '<a href="#zoom3" class="resize" data-size="3">3x</a>' +
+              '</div>' +
+              i +
             '</div>' +
-            i +
-          '</div>' +
-        '</li>'
-      );
-      $item.attr({
-        'data-w': item.w,
-        'data-h': item.h,
-        'data-x': item.x,
-        'data-y': item.y
-      });
-      $gridContainer.append($item);
-    }
-  },
-  resize: function(size) {
-    if (size) {
-      this.currentSize = size;
+          '</li>'
+        );
+        $item.attr({
+          'data-w': item.w,
+          'data-h': item.h,
+          'data-x': item.x,
+          'data-y': item.y
+        });
+        this.el.append($item);
+      }
+    },
+    resize: function(size) {
+      if (size) {
+        this.currentSize = size;
+      }
+      this.el.gridList('resize', this.isHorizontal() ? this.currentSize : 0, this.isVertical() ? this.currentSize : 0);
+    },
+    flashItems: function(items) {
+      // Hack to flash changed items visually
+      for (var i = 0; i < items.length; i++) {
+        (function($element) {
+          $element.addClass('changed')
+          setTimeout(function() {
+            $element.removeClass('changed');
+          }, 0);
+        })(items[i].$element);
+      }
+    },
+    isHorizontal: function() {
+      return this.el.parent().hasClass('horizontal');
+    },
+    isVertical: function() {
+      return this.el.parent().hasClass('vertical');
     }
-    $('#grid').gridList('resize', this.currentSize);
-  },
-  flashItems: function(items) {
-    // Hack to flash changed items visually
-    for (var i = 0; i < items.length; i++) {
-      (function($element) {
-        $element.addClass('changed')
-        setTimeout(function() {
-          $element.removeClass('changed');
-        }, 0);
-      })(items[i].$element);
-    }
-  }
-};
+  };
 
-$(window).resize(function() {
-  DemoGrid.resize();
-});
+  DemoGrid.currentSize = DemoGrid.isHorizontal() ? 3 : 5;
+  DemoGrid.buildElements(DemoGrid.isHorizontal() ? fixtures.DEMO : fixtures.DEMO2);
 
-$(function() {
-  DemoGrid.buildElements($('#grid'), fixtures.DEMO);
-
-  $('#grid').gridList({
-    rows: DemoGrid.currentSize,
+  DemoGrid.el.gridList({
+    rows: DemoGrid.isHorizontal() ? DemoGrid.currentSize : 0,
+    cols: DemoGrid.isVertical() ? DemoGrid.currentSize : 0,
     widthHeightRatio: 264 / 294,
     heightToFontSizeRatio: 0.25,
     onChange: function(changedItems) {
       DemoGrid.flashItems(changedItems);
     }
   });
-  $('#grid li .resize').click(function(e) {
+  DemoGrid.el.find('li .resize').click(function(e) {
     e.preventDefault();
     var itemElement = $(e.currentTarget).closest('li'),
         itemSize = $(e.currentTarget).data('size');
-    $('#grid').gridList('resizeItem', itemElement, itemSize);
+    DemoGrid.el.gridList('resizeItem', itemElement, itemSize);
   });
   $('.add-row').click(function(e) {
     e.preventDefault();
@@ -73,4 +78,7 @@ $(function() {
     e.preventDefault();
     DemoGrid.resize(Math.max(1, DemoGrid.currentSize - 1));
   });
+  $(window).resize(function() {
+    DemoGrid.resize();
+  });
 });
diff --git a/demo/style.css b/demo/style.css
@@ -6,7 +6,7 @@
 body {
   background: #E5E5E5;
 }
-.grid-container {
+.grid-container.horizontal {
   position: absolute;
   top: 66px;
   left: 0;
@@ -15,12 +15,25 @@ body {
   overflow-x: auto;
   overflow-y: hidden;
 }
+.grid-container.vertical {
+  margin-top: 10px;
+  margin-right: 10px;
+  overflow-x: visible;
+  overflow-y: visible;
+}
 .grid {
   position: relative;
-  height: 100%;
   list-style: none;
   /* Will be modified by the grid jquery lib, depending on the items */
   -webkit-transition: width 0.2s;
+}
+.grid-container.horizontal ul.grid {
+  height: 100%;
+}
+.grid-container.vertical ul.grid {
+  width: 100%;
+  height: 100%;
+  margin: auto;
 }
   .grid li {
     position: absolute;
@@ -92,9 +105,9 @@ body {
 }
   .header .button {
     float: left;
-    width: 40px;
     height: 40px;
     margin: 6px 0 0 10px;
+    padding: 0 10px;
     border: solid 1px #ccc;
     background: #fafafa;
     color: #000;
@@ -105,6 +118,10 @@ body {
     text-decoration: none;
     cursor: pointer;
   }
+  .header .button.remove-row, .header .button.add-row {
+    width: 40px;
+    padding: 0;
+  }
   .header p {
     padding: 0 10px;
     font-size: 18px;

diff --git a/index-vertical.html b/index-vertical.html
@@ -0,0 +1,26 @@
+<html>
+<head>
+  <link rel="stylesheet" href="demo/style.css" />
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
+  <script src="spec/fixtures.js"></script>
+  <script src="src/gridList.js"></script>
+  <script src="src/jquery.gridList.js"></script>
+  <script src="demo/load.js"></script>
+</head>
+<body>
+  <div class="header">
+    <a href="#remove-row" class="button remove-row">-</a>
+    <a href="#add-row" class="button add-row">+</a>
+    <a href="index.html" class="button">horizontal</a>
+    <a href="index-vertical.html" class="button">vertical</a>
+    <p><a href="https://github.com/ubervu/grid"><strong>Github</strong> (source and docs)</a></p>
+  </div>
+  <div class="grid-container vertical">
+    <ul id="grid" class="grid">
+      <li class="position-highlight">
+        <div class="inner"></div>
+      </li>
+    </ul>
+  </div>
+</body>
diff --git a/index.html b/index.html
@@ -12,9 +12,11 @@
   <div class="header">
     <a href="#remove-row" class="button remove-row">-</a>
     <a href="#add-row" class="button add-row">+</a>
+    <a href="index.html" class="button">horizontal</a>
+    <a href="index-vertical.html" class="button">vertical</a>
     <p><a href="https://github.com/ubervu/grid"><strong>Github</strong> (source and docs)</a></p>
   </div>
-  <div class="grid-container">
+  <div class="grid-container horizontal">
     <ul id="grid" class="grid">
       <li class="position-highlight">
         <div class="inner"></div>

diff --git a/spec/fixtures.js b/spec/fixtures.js
@@ -131,6 +131,26 @@ fixtures.DEMO = [
   {w: 1, h: 1, x: 9, y: 2}
 ];
 
+fixtures.DEMO2 = [
+  {w: 1, h: 1, x: 0, y: 0},
+  {w: 1, h: 1, x: 1, y: 0},
+  {w: 1, h: 1, x: 2, y: 0},
+  {w: 0, h: 1, x: 0, y: 1},
+  {w: 2, h: 1, x: 0, y: 2},
+  {w: 2, h: 1, x: 2, y: 2},
+  {w: 1, h: 1, x: 4, y: 2},
+  {w: 1, h: 1, x: 0, y: 3},
+  {w: 3, h: 1, x: 1, y: 3},
+  {w: 1, h: 1, x: 4, y: 3},
+  {w: 1, h: 1, x: 0, y: 4},
+  {w: 2, h: 1, x: 1, y: 4},
+  {w: 2, h: 1, x: 3, y: 4},
+  {w: 0, h: 2, x: 0, y: 5},
+  {w: 1, h: 1, x: 0, y: 7},
+  {w: 1, h: 1, x: 1, y: 7},
+  {w: 1, h: 1, x: 2, y: 7}
+];
+
 // Enable Node module
 if (typeof(require) == 'function') {
   for (var k in fixtures) {