Fixed :draggable not working on the touchscreen, demo improvements

demo/src/App.vue

@@ -3,6 +3,7 @@
   <demo-error-modal/>
   <demo-login-modal/>
   <demo-conditional-modal/>
+  <demo-focus-modal/>
 
   <modal name="example-modal"
          transition="nice-modal-fade"
@@ -39,12 +40,22 @@
     <button @click="show(false, false, false)">Simple</button>
     <button @click="show(true, false, false)">Resizable</button>
     <button @click="show(false, true, false)">Adaptive</button>
-    <button @click="show(true, true, false)">Mixed</button>
     <button @click="show(false, false, true)">Draggable</button>
     <br>
-    <button class="green" @click="$modal.show('error-modal')">Demo: Error handling</button>
-    <button class="green" @click="$modal.show('demo-login')">Demo: Login</button>
-    <button :class="canBeShown ? 'green' : 'red'" @click="conditionalShow">
+    <button class="green"
+            @click="$modal.show('error-modal')">
+      Demo: Error handling
+    </button>
+    <button class="green"
+            @click="$modal.show('demo-login')">
+      Demo: Login
+    </button>
+    <button class="green"
+            @click="$modal.show('input-focus-modal')">
+      Demo: Focus Input
+    </button>
+    <button :class="canBeShown ? 'green' : 'red'"
+            @click="conditionalShow">
       Can <b v-if="!canBeShown">NOT</b> be shown
     </button>
   </div>
@@ -57,6 +68,7 @@
 import ModesTable           from './components/ModesTable.vue'
 import PropsTable           from './components/PropsTable.vue'
 import DemoErrorModal       from './components/DemoErrorModal.vue'
+import DemoFocusModal       from './components/InputFocusModal.vue'
 import DemoLoginModal       from './components/DemoLoginModal.vue'
 import DemoConditionalModal from './components/ConditionalModal.vue'
 
@@ -66,6 +78,7 @@ export default {
     ModesTable,
     PropsTable,
     DemoErrorModal,
+    DemoFocusModal,
     DemoLoginModal,
     DemoConditionalModal
   },

demo/src/components/ConditionalModal.vue

@@ -1,6 +1,7 @@
 <template>
   <modal name="conditional-modal"
          :height="200"
+         :adaptive="true"
          @before-open="beforeOpen">
     <div style="padding:30px; text-align: center">
       Hello!

demo/src/components/InputFocusModal.vue

@@ -0,0 +1,30 @@
+<template>
+  <modal name="input-focus-modal"
+         :height="150"
+         :adaptive="true"
+         @opened="opened">
+    <div style="padding: 30px; text-align: center">
+      <input class="huge-font" type="text" placeholder="email" ref="email">
+    </div>
+  </modal>
+</template>
+<script>
+export default {
+  name: 'InputFocusModal',
+  methods: {
+    opened (event) {
+      console.log(this.$refs.email)
+    //  this.$refs.email.focus();
+    }
+  }
+}
+</script>
+<style>
+  input.huge-font {
+    font-size: 70px;
+    font-weight: 100;
+    text-align: center;
+    min-width: auto;
+    width: 100%;
+  }
+</style>

demo/src/components/ModesTable.vue

@@ -19,9 +19,9 @@
       </td>
     </tr>
     <tr>
-      <td><b>Mixed</b></td>
+      <td><b>Draggable</b></td>
       <td>
-        Is resizable, but if the size of the screen is changed - modal will try to adapt to the page size
+        Allows to drag modal on the screen
       </td>
     </tr>
   </table>

dist/index.js

@@ -546,7 +546,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 /* harmony default export */ __webpack_exports__["default"] = {
-  name: 'Modal',
+  name: 'VueJsModal',
   props: {
     name: {
       required: true,
@@ -716,11 +716,18 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     },
     genEventObject: function genEventObject(params) {
       //todo: clean this up (change to ...)
-      return __WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */].util.extend({
+      var data = {
         name: this.name,
+        timestamp: Date.now(),
+        canceled: false,
         ref: this.$refs.modal,
-        timestamp: Date.now()
-      }, params || {});
+        stop: function stop() {
+          this.canceled = true;
+        }
+      };
+
+      return __WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */].util.extend(data, params || {});
+      //        return event
     },
     adaptSize: function adaptSize() {
       if (this.adaptive) {
@@ -758,6 +765,13 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         this.$emit(afterEventName, afterEvent);
       }
     },
+    emitCancelableEvent: function emitCancelableEvent(data) {
+      var stopEventExecution = false;
+      var stop = function stop() {
+        stopEventExecution = true;
+      };
+      var event = this.genEventObject(data);
+    },
     getDraggableElement: function getDraggableElement() {
       var selector = typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable;
 
@@ -784,30 +798,51 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
           var cachedShiftX = 0;
           var cachedShiftY = 0;
 
+          var getPosition = function getPosition(event) {
+            return event.touches && event.touches.length > 0 ? event.touches[0] : event;
+          };
+
           var mousedown = function mousedown(event) {
+            var _getPosition = getPosition(event),
+                clientX = _getPosition.clientX,
+                clientY = _getPosition.clientY;
+
             document.addEventListener('mousemove', mousemove);
             document.addEventListener('mouseup', mouseup);
 
-            startX = event.clientX;
-            startY = event.clientY;
+            document.addEventListener('touchmove', mousemove);
+            document.addEventListener('touchend', mouseup);
+
+            startX = clientX;
+            startY = clientY;
             cachedShiftX = _this3.shift.left;
             cachedShiftY = _this3.shift.top;
+
             event.preventDefault();
           };
 
           var mousemove = function mousemove(event) {
-            _this3.shift.left = cachedShiftX + event.clientX - startX;
-            _this3.shift.top = cachedShiftY + event.clientY - startY;
+            var _getPosition2 = getPosition(event),
+                clientX = _getPosition2.clientX,
+                clientY = _getPosition2.clientY;
+
+            _this3.shift.left = cachedShiftX + clientX - startX;
+            _this3.shift.top = cachedShiftY + clientY - startY;
             event.preventDefault();
           };
 
           var mouseup = function mouseup(event) {
             document.removeEventListener('mousemove', mousemove);
             document.removeEventListener('mouseup', mouseup);
+
+            document.removeEventListener('touchmove', mousemove);
+            document.removeEventListener('touchend', mouseup);
+
             event.preventDefault();
           };
 
           dragger.addEventListener('mousedown', mousedown);
+          dragger.addEventListener('touchstart', mousedown);
         })();
       }
     },
@@ -831,7 +866,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 /* harmony default export */ __webpack_exports__["default"] = {
-  name: 'Resizer',
+  name: 'VueJsModalResizer',
   props: {
     minHeight: {
       type: Number,

src/Modal.vue

@@ -193,11 +193,18 @@
 
       genEventObject (params) {
         //todo: clean this up (change to ...)
-        return Vue.util.extend({
+        var data = {
           name: this.name,
+          timestamp: Date.now(),
+          canceled: false,
           ref: this.$refs.modal,
-          timestamp: Date.now()
-        }, params || {});
+          stop: function() {
+            this.canceled = true
+          }
+        }
+
+        return Vue.util.extend(data, params || {});
+//        return event
       },
 
       adaptSize () {
@@ -236,6 +243,12 @@
         }
       },
 
+      emitCancelableEvent (data) {
+        let stopEventExecution = false
+        let stop = () => { stopEventExecution = true }
+        let event = this.genEventObject(data)
+      },
+
       getDraggableElement () {
         var selector = typeof this.draggable !== 'string'
           ? '.v--modal-box'
@@ -262,30 +275,49 @@
           let cachedShiftX = 0
           let cachedShiftY = 0
 
+          let getPosition = (event) => {
+              return event.touches && event.touches.length > 0
+                ? event.touches[0]
+                : event
+          }
+
           let mousedown = (event) => {
+            let { clientX, clientY } = getPosition(event)
+
             document.addEventListener('mousemove', mousemove)
             document.addEventListener('mouseup', mouseup)
 
-            startX = event.clientX
-            startY = event.clientY
+            document.addEventListener('touchmove', mousemove)
+            document.addEventListener('touchend', mouseup)
+
+            startX = clientX
+            startY = clientY
             cachedShiftX = this.shift.left
             cachedShiftY = this.shift.top
+
             event.preventDefault()
           }
 
           let mousemove = (event) => {
-            this.shift.left = cachedShiftX + event.clientX - startX
-            this.shift.top = cachedShiftY + event.clientY - startY
+            let { clientX, clientY } = getPosition(event)
+
+            this.shift.left = cachedShiftX + clientX - startX
+            this.shift.top = cachedShiftY + clientY - startY
             event.preventDefault()
           }
 
           let mouseup = (event) => {
             document.removeEventListener('mousemove', mousemove)
             document.removeEventListener('mouseup', mouseup)
+
+            document.removeEventListener('touchmove', mousemove)
+            document.removeEventListener('touchend', mouseup)
+
             event.preventDefault()
           }
 
           dragger.addEventListener('mousedown', mousedown)
+          dragger.addEventListener('touchstart', mousedown)
         }
       },