diff --git a/README.md b/README.md index afea3d8..bbd3616 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Create modal Call it from anywhere in the app ```javascript methods: { - show() { + show () { this.$modal.show('hello-word'); }, hide () { diff --git a/demo/index.html b/demo/index.html index 7588f21..f2ee798 100644 --- a/demo/index.html +++ b/demo/index.html @@ -13,15 +13,17 @@ ga('create', 'UA-80822945-4', 'auto'); ga('send', 'pageview'); - - - Fork me on GitHub +
+ +
diff --git a/demo/src/App.vue b/demo/src/App.vue index da46776..25d08b8 100644 --- a/demo/src/App.vue +++ b/demo/src/App.vue @@ -16,7 +16,10 @@ -

Vue.js Modal

+

Vue.js Modal + Readme + Issues + 

     npm install --save vue-js-modal
@@ -48,101 +51,35 @@
     
       Mixed
       
-        Is resizable, but if the size of the screen is changed modal will return to its initial size as well as it will try to adapt to the page size
+        Is resizable, but if the size of the screen is changed - modal will return to its initial size as well as it will try to adapt to the page size
       
     
   
 
   

-    
-    
-    
-    
-    
+    
+    
+    
+    
+    
   

 
-  
-    
-      
-        
-        
-        
-      
-    
-    
-      
-        
-        
-        
-      
-    
-  
NameTypeDefault

-          {{name}}
-        
-          
-          
-        
-          {{prop.default}}
-        

+  
 
 
 
 
+
diff --git a/dist/index.js b/dist/index.js
index 84d51e3..1aa4b36 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -73,11 +73,27 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 3);
+/******/ 	return __webpack_require__(__webpack_require__.s = 4);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return inRange; });
+var inRange = function inRange(from, to, value) {
+  if (value > to) {
+    return to;
+  }
+  if (value < from) {
+    return from;
+  }
+  return value;
+};
+
+/***/ }),
+/* 1 */
 /***/ (function(module, exports) {
 
 /*
@@ -133,7 +149,7 @@ module.exports = function() {
 
 
 /***/ }),
-/* 1 */
+/* 2 */
 /***/ (function(module, exports) {
 
 module.exports = function normalizeComponent (
@@ -186,7 +202,7 @@ module.exports = function normalizeComponent (
 
 
 /***/ }),
-/* 2 */
+/* 3 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /*
@@ -205,7 +221,7 @@ if (typeof DEBUG !== 'undefined' && DEBUG) {
   ) }
 }
 
-var listToStyles = __webpack_require__(14)
+var listToStyles = __webpack_require__(15)
 
 /*
 type StyleObject = {
@@ -422,12 +438,12 @@ function applyToTag (styleElement, obj) {
 
 
 /***/ }),
-/* 3 */
+/* 4 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Modal_vue__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Modal_vue__ = __webpack_require__(5);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Modal_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__Modal_vue__);
 
 
@@ -462,18 +478,18 @@ var ModalPlugin = {
 /* harmony default export */ __webpack_exports__["default"] = ModalPlugin;
 
 /***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
 
 
 /* styles */
-__webpack_require__(12)
+__webpack_require__(13)
 
-var Component = __webpack_require__(1)(
+var Component = __webpack_require__(2)(
   /* script */
-  __webpack_require__(5),
+  __webpack_require__(6),
   /* template */
-  __webpack_require__(10),
+  __webpack_require__(11),
   /* scopeId */
   "data-v-40dd3b1e",
   /* cssModules */
@@ -484,15 +500,16 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__index__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Resizer_vue__ = __webpack_require__(9);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__index__ = __webpack_require__(4);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Resizer_vue__ = __webpack_require__(10);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Resizer_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Resizer_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util__ = __webpack_require__(0);
 //
 //
 //
@@ -520,6 +537,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 
+
 /* harmony default export */ __webpack_exports__["default"] = {
   name: 'Modal',
   props: {
@@ -587,6 +605,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         overlay: false
       },
 
+      shift: {
+        left: 0,
+        top: 0
+      },
+
       modal: {
         width: this.width,
         height: this.height
@@ -605,7 +628,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     visible: function visible(value) {
       var _this = this;
 
-      // if (this.delay > 0) {
       if (value) {
         this.visibility.overlay = true;
 
@@ -624,15 +646,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             _this.removeDraggableListeners();
           });
         }, this.delay);
-
-        // this.removeDraggableHandlers()
       }
-      //  } else {
-      //    this.visibility.overlay = value
-      //    this.$nextTick(() => {
-      //      this.visibility.modal = value
-      //    })
-      //  }
     }
   },
   created: function created() {
@@ -655,9 +669,19 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
   computed: {
     position: function position() {
+      var window = this.window,
+          modal = this.modal,
+          shift = this.shift;
+
+      var maxLeft = window.width - modal.width;
+      var maxTop = window.height - modal.height;
+
+      var left = shift.left + this.pivotX * (window.width - modal.width);
+      var top = shift.top + this.pivotY * (window.height - modal.height);
+
       return {
-        left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0),
-        top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0)
+        left: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, maxLeft, left),
+        top: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, maxTop, top)
       };
     },
     modalClass: function modalClass() {
@@ -678,15 +702,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       this.window.height = window.innerHeight;
 
       if (this.adaptive) {
-        var width = Math.min(this.window.width, this.modal.width);
-        var height = Math.min(this.window.height, this.modal.height);
-
-        this.modal.width = width; // Math.max(width, this.minWidth);
-        this.modal.height = height; // Math.max(height, this.minHeight);
+        this.modal.width = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, this.window.width, this.modal.width);
+        this.modal.height = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, this.window.height, this.modal.height);
       }
     },
     genEventObject: function genEventObject(params) {
-      //todo: clean this up
+      //todo: clean this up (change to ...)
       return __WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */].util.extend({
         name: this.name,
         ref: this.$refs.modal,
@@ -717,9 +738,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       this.$emit(beforeEventName, beforeEvent);
 
       if (!stopEventExecution) {
-        this.visible = !!state;
-
         var afterEvent = this.genEventObject({ state: state, params: params });
+
+        this.visible = !!state;
         this.$emit(afterEventName, afterEvent);
       }
     },
@@ -734,6 +755,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       }
     },
     addDraggableListeners: function addDraggableListeners() {
+      var _this3 = this;
+
       if (!this.draggable) {
         return;
       }
@@ -741,7 +764,37 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       var dragger = this.getDraggableElement();
 
       if (dragger) {
-        console.log(dragger);
+        (function () {
+          var startX = 0;
+          var startY = 0;
+          var cachedShiftX = 0;
+          var cachedShiftY = 0;
+
+          var mousedown = function mousedown(event) {
+            document.addEventListener('mousemove', mousemove);
+            document.addEventListener('mouseup', mouseup);
+
+            startX = event.clientX;
+            startY = event.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;
+            event.preventDefault();
+          };
+
+          var mouseup = function mouseup(event) {
+            document.removeEventListener('mousemove', mousemove);
+            document.removeEventListener('mouseup', mouseup);
+            event.preventDefault();
+          };
+
+          dragger.addEventListener('mousedown', mousedown);
+        })();
       }
     },
     removeDraggableListeners: function removeDraggableListeners() {
@@ -751,15 +804,18 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 };
 
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(0);
 //
 //
 //
 
+
+
 /* harmony default export */ __webpack_exports__["default"] = {
   name: 'Resizer',
   props: {
@@ -817,21 +873,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         var width = event.clientX - el.offsetLeft;
         var height = event.clientY - el.offsetTop;
 
-        if (width < this.minWidth) {
-          width = this.minWidth;
-        }
-
-        if (width > window.innerWidth) {
-          width = window.innerWidth;
-        }
-
-        if (height < this.minHeight) {
-          height = this.minHeight;
-        }
-
-        if (height > window.innerHeight) {
-          height = window.innerHeight;
-        }
+        width = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* inRange */])(this.minWidth, window.innerWidth, width);
+        height = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* inRange */])(this.minHeight, window.innerHeight, height);
 
         this.size = { width: width, height: height };
         el.style.width = width + 'px';
@@ -847,10 +890,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 };
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(0)();
+exports = module.exports = __webpack_require__(1)();
 // imports
 
 
@@ -861,10 +904,10 @@ exports.push([module.i, ".nice-modal-overlay[data-v-40dd3b1e]{position:fixed;lef
 
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
 
-exports = module.exports = __webpack_require__(0)();
+exports = module.exports = __webpack_require__(1)();
 // imports
 
 
@@ -875,18 +918,18 @@ exports.push([module.i, ".vue-modal-resizer{overflow:hidden;width:12px;height:12
 
 
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ (function(module, exports, __webpack_require__) {
 
 
 /* styles */
-__webpack_require__(13)
+__webpack_require__(14)
 
-var Component = __webpack_require__(1)(
+var Component = __webpack_require__(2)(
   /* script */
-  __webpack_require__(6),
+  __webpack_require__(7),
   /* template */
-  __webpack_require__(11),
+  __webpack_require__(12),
   /* scopeId */
   null,
   /* cssModules */
@@ -897,7 +940,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ (function(module, exports) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -939,7 +982,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
 },staticRenderFns: []}
 
 /***/ }),
-/* 11 */
+/* 12 */
 /***/ (function(module, exports) {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
@@ -949,17 +992,17 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
 },staticRenderFns: []}
 
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a 
diff --git a/src/util.js b/src/util.js
new file mode 100644
index 0000000..0c37f91
--- /dev/null
+++ b/src/util.js
@@ -0,0 +1,9 @@
+export const inRange = (from, to, value) => {
+  if (value > to) {
+    return to
+  }
+  if (value < from) {
+    return from
+  }
+  return value
+}