Fix layout bug. Add layout toggle example. Closing issue#1

bower.json

@@ -27,5 +27,13 @@
     "vue": "^1.0.25",
     "isotope": "^3.0.1",
     "lodash": "^4.13.1"
+  },
+  "devDependencies": {
+    "isotope-cells-by-column": "^1.1.3",
+    "isotope-packery": "^2.0.0",
+    "isotope-cells-by-row": "^1.1.3",
+    "isotope-masonry-horizontal": "^2.0.0",
+    "isotope-horizontal": "^2.0.0",
+    "isotope-fit-columns": "^1.1.3"
   }
 }

examples/metal.html

@@ -25,6 +25,14 @@ <h2>Sort</h2>
           <button class="button" :class="[sortOption==='original-order'? 'is-checked' : '']"  @click="sort('original-order')">original order</button> 
           <button v-for="(key, val) in option.getSortData" class="button" :class="[key===sortOption? 'is-checked' : '']"  @click="sort(key)">{{key}}</button>
         </div>
+
+
+        <h2>Layout</h2>
+        <div>
+            <button v-for="layout in layouts" :class="[layout===currentLayout? 'is-checked' : '']" class="button" @click="changeLayout(layout)">
+              {{layout}}
+            </button>
+        </div>
 
         <div id="root_isotope1">
             <div v-isotope-for="element in list" :options='option' v-bind:class='[element.category]'>
@@ -41,6 +49,12 @@ <h3 class="name">{{element.name}}</h3>
         <script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
         <script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
         <script type="text/javascript" src="..\libs\isotope\isotope.pkgd.js"></script>
+        <script type="text/javascript" src="..\libs\isotope-cells-by-column\cells-by-column.js"></script>
+        <script type="text/javascript" src="..\libs\isotope-cells-by-row\cells-by-row.js"></script>
+        <script type="text/javascript" src="..\libs\isotope-horizontal\horizontal.js"></script>
+        <script type="text/javascript" src="..\libs\isotope-masonry-horizontal\masonry-horizontal.js"></script>
+        <script type="text/javascript" src="..\libs\isotope-fit-columns\fit-columns.js"></script>
+        <script type="text/javascript" src="..\libs\isotope-packery\packery-mode.pkgd.js"></script>
         <script type="text/javascript" src="src\vue_isotope.js"></script>
         <script type="text/javascript" src="script\metal.js"></script>
 

examples/script/metal.js

@@ -3,6 +3,18 @@ var count=0;
 var vm = new Vue({
 	el: "#main",
 	data: {
+		layouts:[
+			"masonry",
+			"fitRows",
+			"cellsByRow",
+			"vertical",
+			"packery",
+			"masonryHorizontal",
+			"fitColumns",
+			"cellsByColumn",
+			"horiz"
+		],
+		currentLayout:"masonry",
 		list:[{ 
 				name: "Mercury", 
 				symbol: "Hg", 
@@ -127,6 +139,20 @@ var vm = new Vue({
 			    number: "number", 
 				weight: "weight",
 				category: "category"
+			},
+			cellsByRow: {
+			    columnWidth: 220,
+			    rowHeight: 220
+			},
+			masonryHorizontal: {
+			    rowHeight: 110
+			},
+			cellsByColumn: {
+				columnWidth: 220,
+			    rowHeight: 220
+			},
+			packery: {
+  				gutter: 10
 			}
 		}
 	},
@@ -138,6 +164,10 @@ var vm = new Vue({
 		filter : function(key){
 			this.isotopeFilter(key);
 			this.filterOption=key;
-		}	
+		},
+		changeLayout: function(key) {
+		  this.currentLayout = key;
+		  this.isotopeArrange({ layoutMode:key});	  
+		}
 	}
 });

gulpfile.js

@@ -67,7 +67,14 @@ var mainBowerFiles = require('gulp-main-bower-files');
 
 gulp.task('main-bower-files', function() {
     return gulp.src('./bower.json')
-        .pipe(mainBowerFiles())
+        .pipe(mainBowerFiles({
+            includeDev:true, 
+            overrides: {
+                "isotope-packery": {
+                    main: "packery-mode.pkgd.js"
+                }
+            }
+        }))
         .pipe(gulp.dest('./examples/libs'));
 });
 
@@ -119,5 +126,4 @@ gulp.task('watch', ['connect', 'serve'], function () {
         changedSpec = event.path
         gulp.start('test')
     });
-
 });

src/vue_isotope.js

@@ -120,8 +120,8 @@
                   isotopeShuttle: function(id){
                     getIso(id).shuffle();
                   },
-                  isotopeArrange: function(id){
-                    getIso(id).arrange(arguments);
+                  isotopeArrange: function(layout, id){
+                    getIso(id).arrange(layout);
                   }
                 });
               });