Definitive fix issue # 33

SortableJS · Nov 30, 2016 · 48f69f1 · 48f69f1
1 parent a1244e8
commit 48f69f1
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 44 deletions.
diff --git a/dist/vuedraggable.js b/dist/vuedraggable.js
@@ -62,6 +62,12 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       };
     }
 
+    var eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
+    var eventsToEmit = ['Choose', 'Sort', 'Filter', 'Move', 'Clone'];
+    var readonlyProperties = eventsListened.concat(eventsToEmit).map(function (evt) {
+      return 'on' + evt;
+    });
+
     var props = {
       options: Object,
       list: {
@@ -99,7 +105,19 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         return h(this.element, null, this.$slots.default);
       },
       mounted: function mounted() {
-        this._sortable = new Sortable(this.rootContainer, this.computedOptions);
+        var _this2 = this;
+
+        var optionsAdded = {};
+        eventsListened.forEach(function (elt) {
+          optionsAdded['on' + elt] = delegateAndEmit.call(_this2, elt);
+        });
+
+        eventsToEmit.forEach(function (elt) {
+          optionsAdded['on' + elt] = emit.bind(_this2, elt);
+        });
+
+        var options = merge(this.options, optionsAdded);
+        this._sortable = new Sortable(this.rootContainer, options);
         this.computeIndexes();
       },
       beforeDestroy: function beforeDestroy() {
@@ -113,26 +131,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
       computed: {
         rootContainer: function rootContainer() {
           return this.transitionMode ? this.$el.children[0] : this.$el;
-        },
-        computedOptions: function computedOptions() {
-          var _this2 = this;
-
-          var optionsAdded = {};
-          ['Start', 'Add', 'Remove', 'Update', 'End'].forEach(function (elt) {
-            optionsAdded['on' + elt] = delegateAndEmit.call(_this2, elt);
-          });
-
-          ['Choose', 'Sort', 'Filter', 'Move', 'Clone'].forEach(function (elt) {
-            optionsAdded['on' + elt] = emit.bind(_this2, elt);
-          });
-
-          return merge(this.options, optionsAdded);
         }
       },
 
       watch: {
-        computedOptions: function computedOptions(newValue) {
-          this._sortable(this.rootContainer, newValue);
+        options: function options(newOptionValue) {
+          for (var property in newOptionValue) {
+            if (readonlyProperties.indexOf(property) == -1) {
+              this._sortable.option(property, newOptionValue[property]);
+            }
+          }
         }
       },
 
@@ -204,7 +212,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
     return draggableComponent;
   }
 
-  if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) == "object") {
+  if (typeof exports == "object") {
     var Sortable = require("sortablejs");
     module.exports = buildDraggable(Sortable);
   } else if (typeof define == "function" && define.amd) {

diff --git a/dist/vuedraggable.min.js b/dist/vuedraggable.min.js
diff --git a/examples/disable.html b/examples/disable.html
@@ -12,7 +12,10 @@
     <body>
 
     <div class="container-fluid" id="app">
-      <button @click="test">click here</button>
+      <button @click="enableEdit">Toggle Edit</button>
+      <div>
+      Drag enabled: {{!edit}}
+      </div>
       <div v-for="machine in machines">
 
         <div class="container-fluid machine-contents">

diff --git a/examples/script/disable.js b/examples/script/disable.js
@@ -16,13 +16,8 @@ var vm = new Vue({
     }]
   },
   methods: {
-    removeJob: function(machineId, jobNumber, jobs, index) {
-      // Remove job from GUI
-      jobs.splice(index, 1);
-    },
-    test: function() {
+    enableEdit: function() {
       this.edit = !this.edit
-      alert(this.edit)
     },
     update: function(evt){
     	console.log(evt);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuedraggable",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "draggable component for vue",
   "main": "dist/vuedraggable.js",
   "files": [

diff --git a/src/vuedraggable.js b/src/vuedraggable.js
@@ -51,6 +51,10 @@
         emit.call(this, evtName, evtData)
       }
     }
+
+    const eventsListened = ['Start', 'Add', 'Remove', 'Update', 'End'];
+    const eventsToEmit = ['Choose', 'Sort', 'Filter', 'Move', 'Clone'];
+    const readonlyProperties = eventsListened.concat(eventsToEmit).map(evt => 'on'+evt);
 
     const props = {
       options: Object,
@@ -89,7 +93,17 @@
       },
 
       mounted () {
-        this._sortable = new Sortable(this.rootContainer, this.computedOptions)
+        var optionsAdded = {};
+        eventsListened.forEach( elt => {
+          optionsAdded['on' + elt] = delegateAndEmit.call(this, elt)
+        });
+
+        eventsToEmit.forEach( elt => {
+          optionsAdded['on' + elt] = emit.bind(this, elt)
+        });
+
+        const options = merge(this.options, optionsAdded);
+        this._sortable = new Sortable(this.rootContainer, options)
         this.computeIndexes()
       },
 
@@ -104,26 +118,15 @@
       computed : {
         rootContainer () {
           return this.transitionMode? this.$el.children[0] : this.$el;
-        },
-
-        computedOptions () {
-          var optionsAdded = {};
-          ['Start', 'Add', 'Remove', 'Update', 'End'].forEach( elt => {
-            optionsAdded['on' + elt] = delegateAndEmit.call(this, elt)
-          });
-
-          ['Choose', 'Sort', 'Filter', 'Move', 'Clone'].forEach( elt => {
-            optionsAdded['on' + elt] = emit.bind(this, elt)
-          });
-
-          return merge(this.options, optionsAdded);
         }
       },
 
       watch: {
-        computedOptions (newValue){
-          for(var property in newValue){
-            this._sortable.option(property, newValue[property]);
+        options (newOptionValue){
+          for(var property in newOptionValue) {
+            if (readonlyProperties.indexOf(property)==-1) {
+              this._sortable.option(property, newOptionValue[property] );
+            }        
           }         
         }
       },