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

Cleaned demo

Browse Source
This commit is contained in:
euvl
2017-04-09 13:37:14 +01:00
parent 45bba6dfcd
commit d165145124
6 changed files with 184 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -24,7 +24,7 @@ Create modal
Call it from anywhere in the app Call it from anywhere in the app
```javascript ```javascript
methods: { methods: {
show() { show () {
this.$modal.show('hello-word'); this.$modal.show('hello-word');
}, },
hide () { hide () {

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>

88
demo/src/App.vue
View File

@@ -61,88 +61,23 @@
<button @click="show(false, false, true)">Draggable (under development)</button> <button @click="show(false, false, true)">Draggable (under development)</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: {
@@ -206,15 +141,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>

71
dist/index.js vendored
View File

@@ -587,6 +587,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 +610,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 +628,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() {
@@ -656,8 +652,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
computed: { computed: {
position: function position() { position: function position() {
return { return {
left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0), left: Math.max(this.shift.left + this.pivotX * (this.window.width - this.modal.width), 0),
top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0) top: Math.max(this.shift.top + this.pivotY * (this.window.height - this.modal.height), 0)
}; };
}, },
modalClass: function modalClass() { modalClass: function modalClass() {
@@ -680,9 +676,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
if (this.adaptive) { if (this.adaptive) {
var width = Math.min(this.window.width, this.modal.width); var width = Math.min(this.window.width, this.modal.width);
var height = Math.min(this.window.height, this.modal.height); var height = Math.min(this.window.height, this.modal.height);
// Math.max(width, this.minWidth);
this.modal.width = width; // Math.max(width, this.minWidth); this.modal.width = width;
this.modal.height = height; // Math.max(height, this.minHeight); // Math.max(height, this.minHeight);
this.modal.height = height;
} }
}, },
genEventObject: function genEventObject(params) { genEventObject: function genEventObject(params) {
@@ -734,6 +731,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 +740,49 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
var dragger = this.getDraggableElement(); var dragger = this.getDraggableElement();
if (dragger) { if (dragger) {
(function () {
var startX = 0;
var startY = 0;
var left = 0;
var top = 0;
var mousedown = function mousedown(event) {
left = _this3.position.left;
top = _this3.position.top;
document.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
startX = event.clientX;
startY = event.clientY;
event.preventDefault();
};
var mousemove = function mousemove(event) {
_this3.shift.left = event.clientX - startX;
_this3.shift.top = event.clientY - startY;
console.log(_this3.shift);
event.preventDefault();
};
var mouseup = function mouseup(event) {
//dragger.removeEventListener('mousedown', mousedown)
document.removeEventListener('mousemove', mousemove);
document.removeEventListener('mouseup', mouseup);
// this.shiftX = shiftX
// this.shiftY = shiftY
// console.log(shiftX, shiftY)
event.preventDefault();
};
dragger.addEventListener('mousedown', mousedown);
console.log(dragger); console.log(dragger);
})();
} }
}, },
removeDraggableListeners: function removeDraggableListeners() { removeDraggableListeners: function removeDraggableListeners() {
@@ -855,7 +896,7 @@ exports = module.exports = __webpack_require__(0)();
// module // 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;background:#ff0!important}.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}.nice-modal.nice-modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}", ""]);
// exports // exports

35
src/Modal.vue
View File

@@ -149,12 +149,18 @@
this.onWindowResize() this.onWindowResize()
}, },
computed: { computed: {
position () { center () {
return { return {
left: Math.max(this.shift.left + this.pivotX * x: 0.5 * this.window.width
(this.window.width - this.modal.width), 0), y: 0.5 * this.window.height
top: Math.max(this.shift.top + this.pivotY * }
(this.window.height - this.modal.height), 0) },
position () {
let left = 0.5 * this.window.width - this.modal.width
let top = 0.5 * this.window.height - this.modal.height
return {
left: Math.max(/*this.shift.left + */ this.pivotX * (this.window.width - this.modal.width), 0),
top: Math.max(/*this.shift.top + */ this.pivotY * (this.window.height - this.modal.height), 0)
} }
}, },
modalClass () { modalClass () {
@@ -175,12 +181,8 @@
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 = Math.min(this.window.width, this.modal.width)
let height = Math.min(this.window.height, this.modal.height) this.modal.height = Math.min(this.window.height, this.modal.height)
// Math.max(width, this.minWidth);
this.modal.width = width
// Math.max(height, this.minHeight);
this.modal.height = height
} }
}, },
genEventObject (params) { genEventObject (params) {
@@ -242,10 +244,15 @@
if (dragger) { if (dragger) {
let startX = 0 let startX = 0
let startY = 0 let startY = 0
//let shiftX = 0
//let shiftY = 0 let left = 0
let top = 0
let mousedown = (event) => { let mousedown = (event) => {
// left = this.position.left
// top = this.position.top
document.addEventListener('mousemove', mousemove) document.addEventListener('mousemove', mousemove)
document.addEventListener('mouseup', mouseup) document.addEventListener('mouseup', mouseup)
@@ -265,7 +272,7 @@
} }
let mouseup = (event) => { let mouseup = (event) => {
dragger.removeEventListener('mousedown', mousedown) //dragger.removeEventListener('mousedown', mousedown)
document.removeEventListener('mousemove', mousemove) document.removeEventListener('mousemove', mousemove)
document.removeEventListener('mouseup', mouseup) document.removeEventListener('mouseup', mouseup)
// this.shiftX = shiftX // this.shiftX = shiftX