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

Demo updated added pivotX and pivotY props

Browse Source
This commit is contained in:
euvl
2017-04-05 12:13:47 +01:00
parent 2d913af2f4
commit ff98ff80f2
6 changed files with 72 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.npmignore
View File

@@ -1 +1,2 @@
demo

2
demo/package.json
View File

@@ -7,7 +7,7 @@
},
"dependencies": {
"vue": "^2.0.0",
"vue-js-modal": "^1.0.11"
"vue-js-modal": "^1.0.12"
},
"devDependencies": {
"babel-core": "^6.0.0",

8
demo/src/App.vue
View File

@@ -11,8 +11,12 @@
<h2>Vue.js Modal</h2>
<pre>
<pre style="line-height: 1.5;">
npm install --save vue-js-modal
...
import vmodal from 'vue-js-modal'
Vue.use(vmodal)
</pre>
<table>
@@ -92,7 +96,7 @@ export default {
props: {
name: {
required: true,
type: [String, Number],
type: String,
},
delay: {
type: Number,

52
dist/index.js vendored
View File

@@ -560,6 +560,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
minHeight: {
type: Number,
default: 0
},
pivotX: {
type: Number,
default: 0.5
},
pivotY: {
type: Number,
default: 0.5
}
},
components: {
@@ -594,18 +602,18 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
if (value) {
this.visibility.overlay = true;
setTimeout(function () {
return _this.visibility.modal = true;
_this.visibility.modal = true;
}, this.delay);
} else {
this.visibility.modal = false;
setTimeout(function () {
return _this.visibility.overlay = false;
_this.visibility.overlay = false;
}, this.delay);
}
} else {
this.visibility.overlay = value;
__WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */].nextTick(function () {
return _this.visibility.modal = value;
this.$nextTick(function () {
_this.visibility.modal = value;
});
}
}
@@ -621,6 +629,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
window.addEventListener('resize', this.onWindowResize);
},
beforeDestroy: function beforeDestroy() {
window.removeEventListener('resize', this.onWindowResize);
},
beforeMount: function beforeMount() {
this.onWindowResize();
},
@@ -628,8 +639,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
computed: {
position: function position() {
return {
left: Math.max(0.5 * (this.window.width - this.modal.width), 0),
top: Math.max(0.5 * (this.window.height - this.modal.height), 0)
left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0),
top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0)
};
},
modalClass: function modalClass() {
@@ -650,15 +661,15 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
this.window.height = window.innerHeight;
if (this.adaptive) {
var width = this.window.width > this.modal.width ? this.modal.width : this.window.width;
var height = this.window.height > this.modal.height ? this.modal.height : this.window.height;
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);
}
},
genEventObject: function genEventObject(params) {
//todo: clean this up
return __WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */].util.extend({
name: this.name,
ref: this.$refs.modal,
@@ -669,9 +680,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
this.modal.width = event.size.width;
this.modal.height = event.size.height;
var resizeEvent = this.genEventObject({
size: this.modal
});
var size = this.modal.size;
var resizeEvent = this.genEventObject({ size: size });
this.$emit('resize', resizeEvent);
},
@@ -681,24 +692,17 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
var stopEventExecution = false;
var beforeEvent = this.genEventObject({
stop: function stop() {
return stopEventExecution = false;
},
state: state,
params: params
});
var stop = function stop() {
stopEventExecution = false;
};
var beforeEvent = this.genEventObject({ stop: stop, state: state, params: params });
this.$emit(beforeEventName, beforeEvent);
if (!stopEventExecution) {
this.visible = !!state;
var afterEvent = this.genEventObject({
state: state,
params: params
});
var afterEvent = this.genEventObject({ state: state, params: params });
this.$emit(afterEventName, afterEvent);
}
}

4
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "vue-js-modal",
"description": "Modal Component for Vue.js",
"version": "1.0.12",
"version": "1.0.13",
"author": "euvl <yev.vlasenko@gmail.com>",
"main": "dist/index.js",
"repository": {
@@ -23,7 +23,7 @@
"license": "MIT",
"devDependencies": {
"babel-preset-latest": "^6.0.0",
"vue": "^2.1.10",
"vue": "^2.2.6",
"babel-core": "^6.0.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.0.0",

57
src/Modal.vue
View File

@@ -65,6 +65,14 @@
minHeight: {
type: Number,
default: 0
},
pivotX: {
type: Number,
default: 0.5
},
pivotY: {
type: Number,
default: 0.5
}
},
components: {
@@ -95,14 +103,20 @@
if (this.delay > 0) {
if (value) {
this.visibility.overlay = true
setTimeout(() => this.visibility.modal = true, this.delay)
setTimeout(() => {
this.visibility.modal = true
}, this.delay)
} else {
this.visibility.modal = false
setTimeout(() => this.visibility.overlay = false, this.delay)
setTimeout(() => {
this.visibility.overlay = false
}, this.delay)
}
} else {
this.visibility.overlay = value
Vue.nextTick(() => this.visibility.modal = value)
this.$nextTick(() => {
this.visibility.modal = value
})
}
},
},
@@ -115,14 +129,17 @@
window.addEventListener('resize', this.onWindowResize)
},
beforeDestroy () {
window.removeEventListener('resize', this.onWindowResize)
},
beforeMount () {
this.onWindowResize();
this.onWindowResize()
},
computed: {
position() {
return {
left: Math.max(0.5 * (this.window.width - this.modal.width), 0),
top: Math.max(0.5 * (this.window.height - this.modal.height), 0)
left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0),
top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0)
}
},
modalClass() {
@@ -143,19 +160,15 @@
this.window.height = window.innerHeight
if (this.adaptive) {
var width = this.window.width > this.modal.width
? this.modal.width
: this.window.width
var height = this.window.height > this.modal.height
? this.modal.height
: this.window.height
let width = Math.min(this.window.width, this.modal.width)
let 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);
}
},
genEventObject(params) {
//todo: clean this up
return Vue.util.extend(
{
name: this.name,
@@ -168,9 +181,8 @@
this.modal.width = event.size.width
this.modal.height = event.size.height
let resizeEvent = this.genEventObject({
size: this.modal
});
let { size } = this.modal
let resizeEvent = this.genEventObject({ size });
this.$emit('resize', resizeEvent)
},
@@ -180,22 +192,15 @@
let stopEventExecution = false
const beforeEvent = this.genEventObject({
stop: () => stopEventExecution = false,
state,
params
})
const stop = () => { stopEventExecution = false }
const beforeEvent = this.genEventObject({ stop, state, params })
this.$emit(beforeEventName, beforeEvent)
if (!stopEventExecution) {
this.visible = !!state
const afterEvent = this.genEventObject({
state,
params
})
const afterEvent = this.genEventObject({ state, params })
this.$emit(afterEventName, afterEvent)
}
},