KevinMidboe/vue-js-modal
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-js-modal.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4 from euvl/draggable

Browse Source 
Draggable
This commit is contained in:
Yev Vlasenko
2017-04-10 12:08:55 +01:00
committed by GitHub
parent cfeec956e6 edb036dd56
commit eead3bc770
9 changed files with 369 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
demo/index.html
View File

@@ -13,15 +13,17 @@
ga('create', 'UA-80822945-4', 'auto'); ga('create', 'UA-80822945-4', 'auto');
ga('send', 'pageview'); ga('send', 'pageview');
</script> </script>
</head> </head>
<body> <body>
<a href="https://github.com/euvl/vue-js-modal"> <div style="position: absolute; right: 0; top: 20px">
<img style="position: absolute; top: 0; right: 0; border: 0;" <iframe
src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" src="https://ghbtns.com/github-btn.html?user=euvl&repo=vue-js-modal&type=star&count=true"
alt="Fork me on GitHub" frameborder="0"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a> scrolling="0"
width="94px"
height="20px"></iframe>
</div>
<div id="app"></div> <div id="app"></div>
<script src="/dist/build.js"></script> <script src="/dist/build.js"></script>
</body> </body>

112
demo/src/App.vue
View File

@@ -16,7 +16,10 @@
</div> </div>
</modal> </modal>
<h2>Vue.js Modal</h2> <h2>Vue.js Modal
<a href="https://github.com/euvl/vue-js-modal/blob/master/README.md" target="readme">Readme</a>
<a href="https://github.com/euvl/vue-js-modal/issues" target="issues">Issues</a>
</h2>
<pre style="line-height: 1.5;"> <pre style="line-height: 1.5;">
npm install --save vue-js-modal npm install --save vue-js-modal
@@ -48,101 +51,35 @@
<tr> <tr>
<td><b>Mixed</b></td> <td><b>Mixed</b></td>
<td> <td>
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
</td> </td>
</tr> </tr>
</table> </table>
<div style="margin-top: 20px; margin-bottom: 20px;"> <div style="margin-top: 20px; margin-bottom: 20px;">
<button @click="show()">Simple</button> <button @click="show(false, false, false)">Simple</button>
<button @click="show(true)">Resizable</button> <button @click="show(true, false, false)">Resizable</button>
<button @click="show(false, true)">Adaptive</button> <button @click="show(false, true, false)">Adaptive</button>
<button @click="show(true, true)">Mixed</button> <button @click="show(true, true, false)">Mixed</button>
<button @click="show(false, false, true)">Draggable (under development)</button> <button @click="show(false, false, true)">Draggable</button>
</div> </div>
<table class="props"> <props-table />
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr v-for="(prop, name) in props">
<td>
{{name}}
</td>
<td>
<template v-if="Array.isArray(prop.type)">
<span v-for="type in prop.type">
{{type.name}} /
</span>
</template>
<template v-else>
<span>{{prop.type.name}}</span>
</template>
</td>
<td>
{{prop.default}}
</td>
</tr>
</tbody>
</table>
</div> </div>
</template> </template>
<script> <script>
import PropsTable from './PropsTable.vue'
//<props-table/>
export default { export default {
name: 'app', name: 'app',
components: {PropsTable},
data() { data() {
return { return {
resizable: false, resizable: false,
adaptive: false, adaptive: false,
draggable: false, draggable: false,
props: {
name: {
required: true,
type: String,
},
delay: {
type: Number,
default: 0,
},
resizable: {
type: Boolean,
default: false
},
adaptive: {
type: Boolean,
default: false
},
transition: {
type: String,
},
classes: {
type: [String, Array],
default: 'nice-modal',
},
width: {
type: Number,
default: 600
},
height: {
type: Number,
default: 300
},
minWidth: {
type: Number,
default: 0
},
minHeight: {
type: Number,
default: 0
}
}
} }
}, },
methods: { methods: {
@@ -187,6 +124,14 @@ pre {
h1, h1,
h2 { h2 {
font-weight: normal; font-weight: normal;
a {
font-size: 12px;
}
}
a {
color: inherit;
} }
button { button {
@@ -206,15 +151,4 @@ button {
border: 1px solid #20a0ff; border: 1px solid #20a0ff;
} }
} }
table.props {
width: 100%;
text-align: left;
border-collapse: collapse;
td, th {
border: 1px solid #eee;
padding: 4px 8px;
}
}
</style> </style>

91
demo/src/PropsTable.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr v-for="(prop, name) in props">
<td>
{{name}}
</td>
<td>
<template v-if="Array.isArray(prop.type)">
{{prop.type.map(v => v.name).join(' / ')}}
</template>
<template v-else>
<span>{{prop.type.name}}</span>
</template>
</td>
<td>
{{prop.default}}
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'PropsTable',
data () {
return {
props: {
name: {
required: true,
type: String,
},
delay: {
type: Number,
default: 0,
},
resizable: {
type: Boolean,
default: false
},
adaptive: {
type: Boolean,
default: false
},
transition: {
type: String,
},
classes: {
type: [String, Array],
default: 'nice-modal',
},
width: {
type: Number,
default: 600
},
height: {
type: Number,
default: 300
},
minWidth: {
type: Number,
default: 0
},
minHeight: {
type: Number,
default: 0
}
}
}
}
}
</script>
<style lang="scss">
table.props {
width: 100%;
text-align: left;
border-collapse: collapse;
td, th {
border: 1px solid #eee;
padding: 4px 8px;
}
}
</style>

187
dist/index.js vendored
View File

@@ -73,11 +73,27 @@ return /******/ (function(modules) { // webpackBootstrap
/******/ __webpack_require__.p = ""; /******/ __webpack_require__.p = "";
/******/ /******/
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 3); /******/ return __webpack_require__(__webpack_require__.s = 4);
/******/ }) /******/ })
/************************************************************************/ /************************************************************************/
/******/ ([ /******/ ([
/* 0 */ /* 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) { /***/ (function(module, exports) {
/* /*
@@ -133,7 +149,7 @@ module.exports = function() {
/***/ }), /***/ }),
/* 1 */ /* 2 */
/***/ (function(module, exports) { /***/ (function(module, exports) {
module.exports = function normalizeComponent ( module.exports = function normalizeComponent (
@@ -186,7 +202,7 @@ module.exports = function normalizeComponent (
/***/ }), /***/ }),
/* 2 */ /* 3 */
/***/ (function(module, exports, __webpack_require__) { /***/ (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 = { type StyleObject = {
@@ -422,12 +438,12 @@ function applyToTag (styleElement, obj) {
/***/ }), /***/ }),
/* 3 */ /* 4 */
/***/ (function(module, __webpack_exports__, __webpack_require__) { /***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict"; "use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 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__); /* 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; /* harmony default export */ __webpack_exports__["default"] = ModalPlugin;
/***/ }), /***/ }),
/* 4 */ /* 5 */
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
/* styles */ /* styles */
__webpack_require__(12) __webpack_require__(13)
var Component = __webpack_require__(1)( var Component = __webpack_require__(2)(
/* script */ /* script */
__webpack_require__(5), __webpack_require__(6),
/* template */ /* template */
__webpack_require__(10), __webpack_require__(11),
/* scopeId */ /* scopeId */
"data-v-40dd3b1e", "data-v-40dd3b1e",
/* cssModules */ /* cssModules */
@@ -484,15 +500,16 @@ module.exports = Component.exports
/***/ }), /***/ }),
/* 5 */ /* 6 */
/***/ (function(module, __webpack_exports__, __webpack_require__) { /***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict"; "use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(15); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(16);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__index__ = __webpack_require__(3); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__index__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Resizer_vue__ = __webpack_require__(9); /* 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_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"] = { /* harmony default export */ __webpack_exports__["default"] = {
name: 'Modal', name: 'Modal',
props: { props: {
@@ -587,6 +605,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
overlay: false overlay: false
}, },
shift: {
left: 0,
top: 0
},
modal: { modal: {
width: this.width, width: this.width,
height: this.height height: this.height
@@ -605,7 +628,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
visible: function visible(value) { visible: function visible(value) {
var _this = this; var _this = this;
// if (this.delay > 0) {
if (value) { if (value) {
this.visibility.overlay = true; this.visibility.overlay = true;
@@ -624,15 +646,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
_this.removeDraggableListeners(); _this.removeDraggableListeners();
}); });
}, this.delay); }, this.delay);
// this.removeDraggableHandlers()
} }
// } else {
// this.visibility.overlay = value
// this.$nextTick(() => {
// this.visibility.modal = value
// })
// }
} }
}, },
created: function created() { created: function created() {
@@ -655,9 +669,19 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
computed: { computed: {
position: function position() { 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 { return {
left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0), left: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, maxLeft, left),
top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0) top: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, maxTop, top)
}; };
}, },
modalClass: function modalClass() { modalClass: function modalClass() {
@@ -678,15 +702,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
this.window.height = window.innerHeight; this.window.height = window.innerHeight;
if (this.adaptive) { if (this.adaptive) {
var width = Math.min(this.window.width, this.modal.width); this.modal.width = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, this.window.width, this.modal.width);
var height = Math.min(this.window.height, this.modal.height); this.modal.height = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util__["a" /* inRange */])(0, this.window.height, this.modal.height);
this.modal.width = width; // Math.max(width, this.minWidth);
this.modal.height = height; // Math.max(height, this.minHeight);
} }
}, },
genEventObject: function genEventObject(params) { genEventObject: function genEventObject(params) {
//todo: clean this up //todo: clean this up (change to ...)
return __WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */].util.extend({ return __WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */].util.extend({
name: this.name, name: this.name,
ref: this.$refs.modal, ref: this.$refs.modal,
@@ -717,9 +738,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
this.$emit(beforeEventName, beforeEvent); this.$emit(beforeEventName, beforeEvent);
if (!stopEventExecution) { if (!stopEventExecution) {
this.visible = !!state;
var afterEvent = this.genEventObject({ state: state, params: params }); var afterEvent = this.genEventObject({ state: state, params: params });
this.visible = !!state;
this.$emit(afterEventName, afterEvent); this.$emit(afterEventName, afterEvent);
} }
}, },
@@ -734,6 +755,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
} }
}, },
addDraggableListeners: function addDraggableListeners() { addDraggableListeners: function addDraggableListeners() {
var _this3 = this;
if (!this.draggable) { if (!this.draggable) {
return; return;
} }
@@ -741,7 +764,37 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
var dragger = this.getDraggableElement(); var dragger = this.getDraggableElement();
if (dragger) { 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() { removeDraggableListeners: function removeDraggableListeners() {
@@ -751,15 +804,18 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
}; };
/***/ }), /***/ }),
/* 6 */ /* 7 */
/***/ (function(module, __webpack_exports__, __webpack_require__) { /***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict"; "use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(0);
// //
// //
// //
/* harmony default export */ __webpack_exports__["default"] = { /* harmony default export */ __webpack_exports__["default"] = {
name: 'Resizer', name: 'Resizer',
props: { props: {
@@ -817,21 +873,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
var width = event.clientX - el.offsetLeft; var width = event.clientX - el.offsetLeft;
var height = event.clientY - el.offsetTop; var height = event.clientY - el.offsetTop;
if (width < this.minWidth) { width = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* inRange */])(this.minWidth, window.innerWidth, width);
width = this.minWidth; height = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* inRange */])(this.minHeight, window.innerHeight, height);
}
if (width > window.innerWidth) {
width = window.innerWidth;
}
if (height < this.minHeight) {
height = this.minHeight;
}
if (height > window.innerHeight) {
height = window.innerHeight;
}
this.size = { width: width, height: height }; this.size = { width: width, height: height };
el.style.width = width + 'px'; el.style.width = width + 'px';
@@ -847,10 +890,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
}; };
/***/ }), /***/ }),
/* 7 */ /* 8 */
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(); exports = module.exports = __webpack_require__(1)();
// imports // 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__) { /***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(); exports = module.exports = __webpack_require__(1)();
// imports // 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__) { /***/ (function(module, exports, __webpack_require__) {
/* styles */ /* styles */
__webpack_require__(13) __webpack_require__(14)
var Component = __webpack_require__(1)( var Component = __webpack_require__(2)(
/* script */ /* script */
__webpack_require__(6), __webpack_require__(7),
/* template */ /* template */
__webpack_require__(11), __webpack_require__(12),
/* scopeId */ /* scopeId */
null, null,
/* cssModules */ /* cssModules */
@@ -897,7 +940,7 @@ module.exports = Component.exports
/***/ }), /***/ }),
/* 10 */ /* 11 */
/***/ (function(module, exports) { /***/ (function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; 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: []} },staticRenderFns: []}
/***/ }), /***/ }),
/* 11 */ /* 12 */
/***/ (function(module, exports) { /***/ (function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; 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: []} },staticRenderFns: []}
/***/ }), /***/ }),
/* 12 */ /* 13 */
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag // style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles // load the styles
var content = __webpack_require__(7); var content = __webpack_require__(8);
if(typeof content === 'string') content = [[module.i, content, '']]; if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals; if(content.locals) module.exports = content.locals;
// add the styles to the DOM // add the styles to the DOM
var update = __webpack_require__(2)("3bb0039f", content, true); var update = __webpack_require__(3)("3bb0039f", content, true);
// Hot Module Replacement // Hot Module Replacement
if(false) { if(false) {
// When the styles change, update the <style> tags // When the styles change, update the <style> tags
@@ -975,17 +1018,17 @@ if(false) {
} }
/***/ }), /***/ }),
/* 13 */ /* 14 */
/***/ (function(module, exports, __webpack_require__) { /***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag // style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles // load the styles
var content = __webpack_require__(8); var content = __webpack_require__(9);
if(typeof content === 'string') content = [[module.i, content, '']]; if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals; if(content.locals) module.exports = content.locals;
// add the styles to the DOM // add the styles to the DOM
var update = __webpack_require__(2)("c392065e", content, true); var update = __webpack_require__(3)("c392065e", content, true);
// Hot Module Replacement // Hot Module Replacement
if(false) { if(false) {
// When the styles change, update the <style> tags // When the styles change, update the <style> tags
@@ -1001,7 +1044,7 @@ if(false) {
} }
/***/ }), /***/ }),
/* 14 */ /* 15 */
/***/ (function(module, exports) { /***/ (function(module, exports) {
/** /**
@@ -1034,7 +1077,7 @@ module.exports = function listToStyles (parentId, list) {
/***/ }), /***/ }),
/* 15 */ /* 16 */
/***/ (function(module, __webpack_exports__, __webpack_require__) { /***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict"; "use strict";
@@ -10346,10 +10389,10 @@ Vue$3.compile = compileToFunctions;
/* harmony default export */ __webpack_exports__["a"] = Vue$3; /* harmony default export */ __webpack_exports__["a"] = Vue$3;
/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(16))) /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(17)))
/***/ }), /***/ }),
/* 16 */ /* 17 */
/***/ (function(module, exports) { /***/ (function(module, exports) {
var g; var g;

2
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "vue-js-modal", "name": "vue-js-modal",
"description": "Modal Component for Vue.js", "description": "Modal Component for Vue.js",
"version": "1.0.15", "version": "1.0.16",
"author": "euvl <yev.vlasenko@gmail.com>", "author": "euvl <yev.vlasenko@gmail.com>",
"main": "dist/index.js", "main": "dist/index.js",
"repository": { "repository": {

85
src/Modal.vue
View File

@@ -10,7 +10,7 @@
:class="modalClass" :class="modalClass"
:style="modalStyle" :style="modalStyle"
@mousedown.stop> @mousedown.stop>
<slot></slot> <slot/>
<resizer v-if="resizable" <resizer v-if="resizable"
:min-width="minWidth" :min-width="minWidth"
:min-height="minHeight" :min-height="minHeight"
@@ -24,6 +24,7 @@
import Vue from 'vue' import Vue from 'vue'
import Modal from './index' import Modal from './index'
import Resizer from './Resizer.vue' import Resizer from './Resizer.vue'
import { inRange } from './util'
export default { export default {
name: 'Modal', name: 'Modal',
@@ -92,6 +93,11 @@
overlay: false overlay: false
}, },
shift: {
left: 0,
top: 0
},
modal: { modal: {
width: this.width, width: this.width,
height: this.height height: this.height
@@ -107,7 +113,6 @@
}, },
watch: { watch: {
visible (value) { visible (value) {
// if (this.delay > 0) {
if (value) { if (value) {
this.visibility.overlay = true this.visibility.overlay = true
@@ -126,16 +131,8 @@
this.removeDraggableListeners() this.removeDraggableListeners()
}) })
}, this.delay) }, this.delay)
// this.removeDraggableHandlers()
} }
// } else { }
// this.visibility.overlay = value
// this.$nextTick(() => {
// this.visibility.modal = value
// })
// }
},
}, },
created () { created () {
Modal.event.$on('toggle', (name, state, params) => { Modal.event.$on('toggle', (name, state, params) => {
@@ -154,9 +151,16 @@
}, },
computed: { computed: {
position () { position () {
const { window, modal, shift } = this
const maxLeft = window.width - modal.width
const maxTop = window.height - modal.height
const left = shift.left + this.pivotX * (window.width - modal.width)
const top = shift.top + this.pivotY * (window.height - modal.height)
return { return {
left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0), left: inRange(0, maxLeft, left),
top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0) top: inRange(0, maxTop, top)
} }
}, },
modalClass () { modalClass () {
@@ -169,7 +173,7 @@
width: this.modal.width + 'px', width: this.modal.width + 'px',
height: this.modal.height + 'px' height: this.modal.height + 'px'
} }
}, }
}, },
methods: { methods: {
onWindowResize () { onWindowResize () {
@@ -177,29 +181,24 @@
this.window.height = window.innerHeight this.window.height = window.innerHeight
if (this.adaptive) { if (this.adaptive) {
let width = Math.min(this.window.width, this.modal.width) this.modal.width = inRange(0, this.window.width, this.modal.width)
let height = Math.min(this.window.height, this.modal.height) this.modal.height = inRange(0, this.window.height, this.modal.height)
this.modal.width = width // Math.max(width, this.minWidth);
this.modal.height = height // Math.max(height, this.minHeight);
} }
}, },
genEventObject (params) { genEventObject (params) {
//todo: clean this up //todo: clean this up (change to ...)
return Vue.util.extend( return Vue.util.extend({
{
name: this.name, name: this.name,
ref: this.$refs.modal, ref: this.$refs.modal,
timestamp: Date.now() timestamp: Date.now()
}, }, params || {});
params || {});
}, },
resize (event) { resize (event) {
this.modal.width = event.size.width this.modal.width = event.size.width
this.modal.height = event.size.height this.modal.height = event.size.height
let { size } = this.modal const { size } = this.modal
let resizeEvent = this.genEventObject({ size }); const resizeEvent = this.genEventObject({ size });
this.$emit('resize', resizeEvent) this.$emit('resize', resizeEvent)
}, },
@@ -215,9 +214,9 @@
this.$emit(beforeEventName, beforeEvent) this.$emit(beforeEventName, beforeEvent)
if (!stopEventExecution) { if (!stopEventExecution) {
this.visible = !!state
const afterEvent = this.genEventObject({ state, params }) const afterEvent = this.genEventObject({ state, params })
this.visible = !!state
this.$emit(afterEventName, afterEvent) this.$emit(afterEventName, afterEvent)
} }
}, },
@@ -243,7 +242,35 @@
let dragger = this.getDraggableElement() let dragger = this.getDraggableElement()
if (dragger) { if (dragger) {
console.log(dragger) let startX = 0
let startY = 0
let cachedShiftX = 0
let cachedShiftY = 0
let mousedown = (event) => {
document.addEventListener('mousemove', mousemove)
document.addEventListener('mouseup', mouseup)
startX = event.clientX
startY = event.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
event.preventDefault()
}
let mouseup = (event) => {
document.removeEventListener('mousemove', mousemove)
document.removeEventListener('mouseup', mouseup)
event.preventDefault()
}
dragger.addEventListener('mousedown', mousedown)
} }
}, },

19
src/Resizer.vue
View File

@@ -2,6 +2,8 @@
<div :class="className"></div> <div :class="className"></div>
</template> </template>
<script> <script>
import { inRange } from './util'
export default { export default {
name: 'Resizer', name: 'Resizer',
props: { props: {
@@ -58,21 +60,8 @@ export default {
var width = event.clientX - el.offsetLeft var width = event.clientX - el.offsetLeft
var height = event.clientY - el.offsetTop var height = event.clientY - el.offsetTop
if (width < this.minWidth) { width = inRange(this.minWidth, window.innerWidth, width)
width = this.minWidth height = inRange(this.minHeight, window.innerHeight, height)
}
if (width > window.innerWidth) {
width = window.innerWidth
}
if (height < this.minHeight) {
height = this.minHeight
}
if (height > window.innerHeight) {
height = window.innerHeight
}
this.size = {width, height} this.size = {width, height}
el.style.width = width + 'px' el.style.width = width + 'px'

9
src/util.js Normal file
View File

@@ -0,0 +1,9 @@
export const inRange = (from, to, value) => {
if (value > to) {
return to
}
if (value < from) {
return from
}
return value
}