From 7a790dc26e3c31894df7d36a8e05aea1178db0bf Mon Sep 17 00:00:00 2001
From: desmaisons_david <desmaisons_david@hotmail.com>
Date: Wed, 10 Aug 2016 23:39:06 -0300
Subject: [PATCH] Fix layout bug. Add layout toggle example. Closing issue#1

---
 bower.json               |  8 ++++++++
 dist/vue_isotope.min.js  |  2 +-
 examples/metal.html      | 14 ++++++++++++++
 examples/script/metal.js | 32 +++++++++++++++++++++++++++++++-
 gulpfile.js              | 10 ++++++++--
 src/vue_isotope.js       |  4 ++--
 6 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/bower.json b/bower.json
index e0655fb..c2c5d4e 100644
--- a/bower.json
+++ b/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"
   }
 }
diff --git a/dist/vue_isotope.min.js b/dist/vue_isotope.min.js
index 191e8f2..2b306a4 100644
--- a/dist/vue_isotope.min.js
+++ b/dist/vue_isotope.min.js
@@ -1 +1 @@
-!function(){function t(t,n){function e(n,e){t.forEach(["bind","diff","unbind","update"],function(t){var i=n[t];n[t]=function(){var n=e[t].apply(this,arguments);i.apply(this,arguments),n.apply(this,arguments)}})}function i(t){return t.__v_frag.raw}function o(t,n){return t[n].node}function r(n){return t.isUndefined(n)?s["default"]:s.named[n]}function a(t,n){t?s.named[t]=n:s["default"]=n}var s={named:{},"default":null},u={install:function(s){var u=s.directive("for"),f=t.clone(u);f.params=f.params.concat("options","root"),e(f,{bind:function(){var e=this.params.root?document.getElementById(this.params.root):this.el.parentElement,o=this.params.options,s=t.isString(o)?JSON.parse(o):o,u=(s?s.itemSelector:void 0)||".item";return this.el.className+=u.replace("."," "),function(){var o={layoutMode:"masonry",masonry:{gutter:10}},f=this,c=t.defaults(s,o);if(s){var l=s.getSortData;t.forOwn(l,function(n,e){t.isString(n)&&(l[e]=function(t){return t[n]})}),this.isotopeSortOptions=t.clone(l),this.isotopeFilterOptions=t.clone(s.getFilterData);var p=function(n){t.forOwn(n,function(t,e){n[e]=function(n){return t.call(f.vm,i(n))}})};p(c.getSortData),p(c.getFilterData)}c.itemSelector=u,this.vm.$nextTick(function(){var i=new n(e,c);i._requestUpdate=function(){if(!i._willUpdate){i._willUpdate=!0;var t=this;f.vm.$nextTick(function(){t.arrange(),t._willUpdate=!1})}},f._iso=i;var o=c?c.id:void 0;a(o,i),t.assign(f.vm,{isotopeSort:function(t,n){r(n).arrange({sortBy:t})},isotopeFilter:function(n,e){f._filterlistener&&f._filterlistener();var i;if(n){i=c.getFilterData[n];var o=function(t){return f.isotopeFilterOptions[n].call(f.vm,t)};f._filterlistener=f.vm.$watch(function(){return t.map(f._value,o)},function(){f._iso._requestUpdate()})}else i=function(){return!0},f._filterlistener=null;r(e).arrange({filter:i})},isotopeShuttle:function(t){r(t).shuffle()},isotopeArrange:function(t){r(t).arrange(arguments)}})})}},update:function(n){return this._value=n,t.forEach(this._listeners,function(t){t()}),function(){var e=this.vm,i=this;this.vm.$nextTick(function(){i._listeners=t(i.isotopeSortOptions).map(function(r){return t.map(n,function(t){var n=function(t){return r.call(i.vm,t)};return e.$watch(function(){return n(t)},function(){i._iso.updateSortData(o(t,i.id)),i._iso._requestUpdate()})})}).flatten().value()})}},diff:function(){function n(t){return t.node}var e=t.map(this.frags,n);return function(){var i=this._iso;if(i){var o=t.map(this.frags,n),r=t.difference(o,e),a=t.difference(e,o);(a.length||r.length)&&this.vm.$nextTick(function(){i.remove(a),i.insert(r),i._requestUpdate()})}}},unbind:function(){return function(){this._filterlistener&&this._filterlistener(),t.forEach(this._listeners,function(t){t()}),this._iso.destroy()}}}),s.directive("isotope-for",f)}};return u}if("object"==typeof exports){var n=require("lodash"),e=require("isotope-layout");module.exports=t(n,e)}else"function"==typeof define&&define.amd?define(["lodash","Isotope"],function(n,e){return t(n,e)}):window.Vue&&window._&&window.Isotope&&(window.vueIsotope=t(window._,window.Isotope),Vue.use(window.vueIsotope))}();
\ No newline at end of file
+!function(){function t(t,n){function e(n,e){t.forEach(["bind","diff","unbind","update"],function(t){var i=n[t];n[t]=function(){var n=e[t].apply(this,arguments);i.apply(this,arguments),n.apply(this,arguments)}})}function i(t){return t.__v_frag.raw}function o(t,n){return t[n].node}function r(n){return t.isUndefined(n)?s["default"]:s.named[n]}function a(t,n){t?s.named[t]=n:s["default"]=n}var s={named:{},"default":null},u={install:function(s){var u=s.directive("for"),f=t.clone(u);f.params=f.params.concat("options","root"),e(f,{bind:function(){var e=this.params.root?document.getElementById(this.params.root):this.el.parentElement,o=this.params.options,s=t.isString(o)?JSON.parse(o):o,u=(s?s.itemSelector:void 0)||".item";return this.el.className+=u.replace("."," "),function(){var o={layoutMode:"masonry",masonry:{gutter:10}},f=this,c=t.defaults(s,o);if(s){var l=s.getSortData;t.forOwn(l,function(n,e){t.isString(n)&&(l[e]=function(t){return t[n]})}),this.isotopeSortOptions=t.clone(l),this.isotopeFilterOptions=t.clone(s.getFilterData);var p=function(n){t.forOwn(n,function(t,e){n[e]=function(n){return t.call(f.vm,i(n))}})};p(c.getSortData),p(c.getFilterData)}c.itemSelector=u,this.vm.$nextTick(function(){var i=new n(e,c);i._requestUpdate=function(){if(!i._willUpdate){i._willUpdate=!0;var t=this;f.vm.$nextTick(function(){t.arrange(),t._willUpdate=!1})}},f._iso=i;var o=c?c.id:void 0;a(o,i),t.assign(f.vm,{isotopeSort:function(t,n){r(n).arrange({sortBy:t})},isotopeFilter:function(n,e){f._filterlistener&&f._filterlistener();var i;if(n){i=c.getFilterData[n];var o=function(t){return f.isotopeFilterOptions[n].call(f.vm,t)};f._filterlistener=f.vm.$watch(function(){return t.map(f._value,o)},function(){f._iso._requestUpdate()})}else i=function(){return!0},f._filterlistener=null;r(e).arrange({filter:i})},isotopeShuttle:function(t){r(t).shuffle()},isotopeArrange:function(t,n){r(n).arrange(t)}})})}},update:function(n){return this._value=n,t.forEach(this._listeners,function(t){t()}),function(){var e=this.vm,i=this;this.vm.$nextTick(function(){i._listeners=t(i.isotopeSortOptions).map(function(r){return t.map(n,function(t){var n=function(t){return r.call(i.vm,t)};return e.$watch(function(){return n(t)},function(){i._iso.updateSortData(o(t,i.id)),i._iso._requestUpdate()})})}).flatten().value()})}},diff:function(){function n(t){return t.node}var e=t.map(this.frags,n);return function(){var i=this._iso;if(i){var o=t.map(this.frags,n),r=t.difference(o,e),a=t.difference(e,o);(a.length||r.length)&&this.vm.$nextTick(function(){i.remove(a),i.insert(r),i._requestUpdate()})}}},unbind:function(){return function(){this._filterlistener&&this._filterlistener(),t.forEach(this._listeners,function(t){t()}),this._iso.destroy()}}}),s.directive("isotope-for",f)}};return u}if("object"==typeof exports){var n=require("lodash"),e=require("isotope-layout");module.exports=t(n,e)}else"function"==typeof define&&define.amd?define(["lodash","Isotope"],function(n,e){return t(n,e)}):window.Vue&&window._&&window.Isotope&&(window.vueIsotope=t(window._,window.Isotope),Vue.use(window.vueIsotope))}();
\ No newline at end of file
diff --git a/examples/metal.html b/examples/metal.html
index f3cb3ca..86dca24 100644
--- a/examples/metal.html
+++ b/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>
 
diff --git a/examples/script/metal.js b/examples/script/metal.js
index 86dcca9..b0962b8 100644
--- a/examples/script/metal.js
+++ b/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});	  
+		}
 	}
 });
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index b750a0e..c50e7a4 100644
--- a/gulpfile.js
+++ b/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')
     });
-
 });
diff --git a/src/vue_isotope.js b/src/vue_isotope.js
index 73a9c1f..542b5a5 100644
--- a/src/vue_isotope.js
+++ b/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);
                   }
                 });
               });