From ff173186d04956cc426dbe40b2f1b31b361865ab Mon Sep 17 00:00:00 2001
From: euvl <yev.vlasenko@gmail.com>
Date: Fri, 7 Apr 2017 15:14:49 +0100
Subject: [PATCH] Updated demo

---
 _config.yml            |   1 -
 demo/index.html        |   2 +
 demo/package.json      |   3 +-
 demo/src/App.vue       |  27 +++++++++--
 demo/src/main.js       |   2 +-
 demo/webpack.config.js |   7 +--
 dist/index.js          |  98 ++++++++++++++++++++++++++++-----------
 src/Modal.vue          | 102 ++++++++++++++++++++++++++++++-----------
 src/index.js           |   1 +
 webpack.config.js      |  15 ++----
 10 files changed, 178 insertions(+), 80 deletions(-)
 delete mode 100644 _config.yml
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index c419263..0000000
--- a/_config.yml
+++ /dev/null
@@ -1 +0,0 @@
-theme: jekyll-theme-cayman
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 887d008..7588f21 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8">
     <title>Vue Modal Examples</title>
+    <meta name="description" content="Vue.js modal component. Simple, clean with no external dependencies."/>
+    <meta name="keywords" content="vue, vuejs, modal, dialog, box, modal box, dialog box, vue-modal vuejs-modal.">
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/demo/package.json b/demo/package.json
index 5d2e296..b9ec79b 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -6,8 +6,7 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "vue": "^2.0.0",
-    "vue-js-modal": "^1.0.13"
+    "vue": "^2.0.0"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
diff --git a/demo/src/App.vue b/demo/src/App.vue
index 04ea728..da46776 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -1,6 +1,13 @@
 <template>
 <div id="app">
-  <modal name="example-modal" transition="nice-modal-fade" :min-width="200" :min-height="200" :delay="100" :adaptive="adaptive" :resizable="resizable">
+  <modal name="example-modal"
+         transition="nice-modal-fade"
+         :min-width="200"
+         :min-height="200"
+         :delay="100"
+         :adaptive="adaptive"
+         :resizable="resizable"
+         :draggable="draggable">
     <div style="height: 100%; box-sizing: border-box; padding: 10px; font-size: 13px; overflow: auto">
       Appropriately exploit professional infrastructures rather than unique growth strategies. Assertively build leveraged growth strategies vis-a-vis multimedia based vortals. Progressively simplify cross-platform value through interactive imperatives. Objectively
       implement enabled web services after plug-and-play ROI. Distinctively impact inexpensive schemas before installed base imperatives. Holisticly benchmark pandemic process improvements without wireless experiences. Efficiently create worldwide partnerships
@@ -47,10 +54,11 @@
   </table>
 
   <div style="margin-top: 20px; margin-bottom: 20px;">
-    <button @click="show(false, false)">Simple</button>
-    <button @click="show(true, false)">Resizable</button>
+    <button @click="show()">Simple</button>
+    <button @click="show(true)">Resizable</button>
     <button @click="show(false, true)">Adaptive</button>
     <button @click="show(true, true)">Mixed</button>
+    <button @click="show(false, false, true)">Draggable (under development)</button>
   </div>
 
   <table class="props">
@@ -92,6 +100,7 @@ export default {
     return {
       resizable: false,
       adaptive: false,
+      draggable: false,
 
       props: {
         name: {
@@ -137,10 +146,18 @@ export default {
     }
   },
   methods: {
-    show(resizable, adaptive) {
+    show(resizable = false, adaptive = false, draggable = false) {
       this.resizable = resizable
       this.adaptive = adaptive
-      this.$modal.show('example-modal')
+      this.draggable = draggable
+
+      /*
+        $nextTick is required because the data model with new
+        "resizable, adaptive, draggable" values is not updated yet.. eh
+      */
+      this.$nextTick(() => {
+        this.$modal.show('example-modal')
+      })
     }
   }
 }
diff --git a/demo/src/main.js b/demo/src/main.js
index 96a9fad..39cde43 100644
--- a/demo/src/main.js
+++ b/demo/src/main.js
@@ -1,6 +1,6 @@
 import Vue        from 'vue'
 import App        from './App.vue'
-import VueJsModal from 'vue-js-modal'
+import VueJsModal from 'plugin'
 
 Vue.use(VueJsModal)
 
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
index 13d17cb..5cb1efb 100644
--- a/demo/webpack.config.js
+++ b/demo/webpack.config.js
@@ -15,13 +15,9 @@ module.exports = {
         loader: 'vue-loader',
         options: {
           loaders: {
-            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
-            // the "scss" and "sass" values for the lang attribute to the right configs here.
-            // other preprocessors should work out of the box, no loader config like this necessary.
             'scss': 'vue-style-loader!css-loader!sass-loader',
             'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
           }
-          // other vue-loader options go here
         }
       },
       {
@@ -40,7 +36,8 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'vue$': 'vue/dist/vue.esm.js'
+      'vue$': 'vue/dist/vue.esm.js',
+		  'plugin': path.resolve(__dirname, "../dist/index.js")
     }
   },
   devServer: {
diff --git a/dist/index.js b/dist/index.js
index d329c8a..248444f 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -4,9 +4,9 @@
 	else if(typeof define === 'function' && define.amd)
 		define([], factory);
 	else if(typeof exports === 'object')
-		exports["VueJsToggleButton"] = factory();
+		exports["VueJsModal"] = factory();
 	else
-		root["VueJsToggleButton"] = factory();
+		root["VueJsModal"] = factory();
 })(this, function() {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
@@ -514,6 +514,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
 
 
 
@@ -538,6 +539,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       type: Boolean,
       default: false
     },
+    draggable: {
+      type: [Boolean, String],
+      default: false
+    },
     transition: {
       type: String
     },
@@ -545,14 +550,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       type: [String, Array],
       default: 'nice-modal'
     },
-    width: {
-      type: Number,
-      default: 600
-    },
-    height: {
-      type: Number,
-      default: 300
-    },
     minWidth: {
       type: Number,
       default: 0
@@ -561,6 +558,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       type: Number,
       default: 0
     },
+    width: {
+      type: Number,
+      default: 600
+    },
+    height: {
+      type: Number,
+      default: 300
+    },
     pivotX: {
       type: Number,
       default: 0.5
@@ -590,7 +595,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       window: {
         width: window.innerWidth,
         height: window.innerWidth
-      }
+      },
+
+      draggableElement: false
     };
   },
 
@@ -598,24 +605,34 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     visible: function visible(value) {
       var _this = this;
 
-      if (this.delay > 0) {
-        if (value) {
-          this.visibility.overlay = true;
-          setTimeout(function () {
-            _this.visibility.modal = true;
-          }, this.delay);
-        } else {
-          this.visibility.modal = false;
-          setTimeout(function () {
-            _this.visibility.overlay = false;
-          }, this.delay);
-        }
+      // if (this.delay > 0) {
+      if (value) {
+        this.visibility.overlay = true;
+
+        setTimeout(function () {
+          _this.visibility.modal = true;
+          _this.$nextTick(function () {
+            _this.addDraggableListeners();
+          });
+        }, this.delay);
       } else {
-        this.visibility.overlay = value;
-        this.$nextTick(function () {
-          _this.visibility.modal = value;
-        });
+        this.visibility.modal = false;
+
+        setTimeout(function () {
+          _this.visibility.overlay = false;
+          _this.$nextTick(function () {
+            _this.removeDraggableListeners();
+          });
+        }, this.delay);
+
+        // this.removeDraggableHandlers()
       }
+      //  } else {
+      //    this.visibility.overlay = value
+      //    this.$nextTick(() => {
+      //      this.visibility.modal = value
+      //    })
+      //  }
     }
   },
   created: function created() {
@@ -705,6 +722,30 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         var afterEvent = this.genEventObject({ state: state, params: params });
         this.$emit(afterEventName, afterEvent);
       }
+    },
+    getDraggableElement: function getDraggableElement() {
+      var selector = typeof this.draggable !== 'string' ? '.modal' : this.draggable;
+
+      if (selector) {
+        var handler = this.$refs.overlay.querySelector(selector);
+        if (handler) {
+          return handler;
+        }
+      }
+    },
+    addDraggableListeners: function addDraggableListeners() {
+      if (!this.draggable) {
+        return;
+      }
+
+      var dragger = this.getDraggableElement();
+
+      if (dragger) {
+        console.log(dragger);
+      }
+    },
+    removeDraggableListeners: function removeDraggableListeners() {
+      console.log('removing draggable handlers');
     }
   }
 };
@@ -814,7 +855,7 @@ exports = module.exports = __webpack_require__(0)();
 
 
 // module
-exports.push([module.i, ".nice-modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.nice-modal-overlay .modal[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}.nice-modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0}.nice-modal.nice-modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}", ""]);
+exports.push([module.i, ".nice-modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.nice-modal-overlay .modal[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}.nice-modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0;background:#ff0!important}.nice-modal.nice-modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}", ""]);
 
 // exports
 
@@ -865,6 +906,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
       "name": "overlay-fade"
     }
   }, [(_vm.visibility.overlay) ? _c('div', {
+    ref: "overlay",
     staticClass: "nice-modal-overlay",
     on: {
       "mousedown": function($event) {
diff --git a/src/Modal.vue b/src/Modal.vue
index 455a2b5..14ec011 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -1,6 +1,7 @@
 <template>
   <transition name="overlay-fade">
     <div v-if="visibility.overlay"
+         ref="overlay"
          class="nice-modal-overlay"
          @mousedown.stop="toggle(false)">
       <transition :name="transition">
@@ -43,6 +44,10 @@
         type: Boolean,
         default: false
       },
+      draggable: {
+        type: [Boolean, String],
+        default: false
+      },
       transition: {
         type: String,
       },
@@ -50,14 +55,6 @@
         type: [String, Array],
         default: 'nice-modal',
       },
-      width: {
-        type: Number,
-        default: 600
-      },
-      height: {
-        type: Number,
-        default: 300
-      },
       minWidth: {
         type: Number,
         default: 0
@@ -66,6 +63,14 @@
         type: Number,
         default: 0
       },
+      width: {
+        type: Number,
+        default: 600
+      },
+      height: {
+        type: Number,
+        default: 300
+      },
       pivotX: {
         type: Number,
         default: 0.5
@@ -95,29 +100,41 @@
         window: {
           width: window.innerWidth,
           height: window.innerWidth
-        }
+        },
+
+        draggableElement: false
       };
     },
     watch: {
       visible (value) {
-        if (this.delay > 0) {
-          if (value) {
-            this.visibility.overlay = true
-            setTimeout(() => {
-              this.visibility.modal = true
-            }, this.delay)
-          } else {
-            this.visibility.modal = false
-            setTimeout(() => {
-              this.visibility.overlay = false
-            }, this.delay)
-          }
+        // if (this.delay > 0) {
+        if (value) {
+          this.visibility.overlay = true
+
+          setTimeout(() => {
+            this.visibility.modal = true
+            this.$nextTick(() => {
+              this.addDraggableListeners()
+            })
+          }, this.delay)
         } else {
-          this.visibility.overlay = value
-          this.$nextTick(() => {
-            this.visibility.modal = value
-          })
+          this.visibility.modal = false
+
+          setTimeout(() => {
+            this.visibility.overlay = false
+            this.$nextTick(() => {
+              this.removeDraggableListeners()
+            })
+          }, this.delay)
+
+          // this.removeDraggableHandlers()
         }
+        //  } else {
+        //    this.visibility.overlay = value
+        //    this.$nextTick(() => {
+        //      this.visibility.modal = value
+        //    })
+        //  }
       },
     },
     created () {
@@ -152,7 +169,7 @@
           width: this.modal.width + 'px',
           height: this.modal.height + 'px'
         }
-      }
+      },
     },
     methods: {
       onWindowResize() {
@@ -204,7 +221,36 @@
           this.$emit(afterEventName, afterEvent)
         }
       },
-    },
+
+      getDraggableElement () {
+        var selector = typeof this.draggable !== 'string'
+          ? '.modal'
+          : this.draggable
+
+        if (selector) {
+          var handler = this.$refs.overlay.querySelector(selector)
+          if (handler) {
+            return handler
+          }
+        }
+      },
+
+      addDraggableListeners () {
+        if (!this.draggable) {
+          return;
+        }
+
+        let dragger = this.getDraggableElement()
+
+        if (dragger) {
+          console.log(dragger)
+        }
+      },
+
+      removeDraggableListeners () {
+        console.log('removing draggable handlers')
+      }
+    }
   };
 </script>
 <style lang="scss" scoped>
@@ -251,6 +297,8 @@
     box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);
     padding: 0;
 
+    //background: yellow !important;
+
     &.nice-modal-fullscreen {
       width: 100vw;
       height: 100vh;
diff --git a/src/index.js b/src/index.js
index 4ef1e3c..d5a4ccc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,7 @@ const ModalPlugin = {
       show(name, params) {
         ModalPlugin.event.$emit('toggle', name, true, params)
       },
+
       hide(name, params) {
         ModalPlugin.event.$emit('toggle', name, false, params)
       }
diff --git a/webpack.config.js b/webpack.config.js
index 24d541d..49e382e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,13 +15,9 @@ module.exports = {
         loader: 'vue-loader',
         options: {
           loaders: {
-            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
-            // the "scss" and "sass" values for the lang attribute to the right configs here.
-            // other preprocessors should work out of the box, no loader config like this necessary.
             'scss': 'vue-style-loader!css-loader!sass-loader',
             'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
           }
-          // other vue-loader options go here
         }
       },
       {
@@ -54,12 +50,10 @@ module.exports = {
 }
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports.entry = './src/index.js'
-
   module.exports.output = {
     path:'./dist',
     filename:'index.js',
-    library:'VueJsToggleButton',
+    library:'VueJsModal',
     libraryTarget: 'umd'
   }
 
@@ -71,10 +65,9 @@ if (process.env.NODE_ENV === 'production') {
       }
     }),
     /*new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false
-      }
+      sourceMap: false,
+      extractComments: true,
+      compress: false
     }),*/
     new webpack.LoaderOptionsPlugin({
       minimize: true
