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

Closing modal when ESC button pressed

Browse Source
This commit is contained in:
euvl
2017-11-19 09:04:18 +00:00
parent 0be4f011ef
commit 7d66dc9d8c
3 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
dist/index.js vendored
View File

@@ -207,7 +207,7 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(18);
var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Dialog.vue",
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Dialog.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."),
@@ -215,7 +215,7 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(19);
var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Modal.vue",
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Modal.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."),
@@ -440,9 +440,10 @@
_this2.updateRenderedHeight();
}));
}
this.clickToClose && window.addEventListener("keyup", this.onEscapeKeyUp);
},
beforeDestroy: function() {
window.removeEventListener("resize", this.onWindowResize);
window.removeEventListener("resize", this.onWindowResize), this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp);
},
computed: {
isAutoHeight: function() {
@@ -488,6 +489,9 @@
modal.width = width.value, modal.widthType = width.type, modal.height = height.value,
modal.heightType = height.type;
},
onEscapeKeyUp: function(event) {
27 === (event.keyCode || event.which) && this.visible && this.$modal.hide(this.name);
},
onWindowResize: function() {
this.window.width = window.innerWidth, this.window.height = window.innerHeight;
},
@@ -710,7 +714,7 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(20);
var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Resizer.vue",
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Resizer.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."),
@@ -866,4 +870,4 @@
return styles;
};
} ]);
});
});

14
dist/ssr.index.js vendored
View File

@@ -161,7 +161,7 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(18);
var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Dialog.vue",
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Dialog.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."),
@@ -169,7 +169,7 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(19);
var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Modal.vue",
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Modal.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."),
@@ -394,9 +394,10 @@
_this2.updateRenderedHeight();
}));
}
this.clickToClose && window.addEventListener("keyup", this.onEscapeKeyUp);
},
beforeDestroy: function() {
window.removeEventListener("resize", this.onWindowResize);
window.removeEventListener("resize", this.onWindowResize), this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp);
},
computed: {
isAutoHeight: function() {
@@ -442,6 +443,9 @@
modal.width = width.value, modal.widthType = width.type, modal.height = height.value,
modal.heightType = height.type;
},
onEscapeKeyUp: function(event) {
27 === (event.keyCode || event.which) && this.visible && this.$modal.hide(this.name);
},
onWindowResize: function() {
this.window.width = window.innerWidth, this.window.height = window.innerHeight;
},
@@ -664,7 +668,7 @@
}, function(module, exports, __webpack_require__) {
__webpack_require__(20);
var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
Component.options.__file = "/Users/yev/Projects/vue/vue-js-modal/src/Resizer.vue",
Component.options.__file = "/Users/admin/Projects/vue/vue-js-modal/src/Resizer.vue",
Component.esModule && Object.keys(Component.esModule).some(function(key) {
return "default" !== key && "__esModule" !== key;
}) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."),
@@ -820,4 +824,4 @@
return styles;
};
} ]);
});
});

14
src/Modal.vue
View File

@@ -256,12 +256,20 @@
})
}
}
if (this.clickToClose) {
window.addEventListener('keyup', this.onEscapeKeyUp)
}
},
/**
* Removes "resize" window listener
*/
beforeDestroy () {
window.removeEventListener('resize', this.onWindowResize)
if (this.clickToClose) {
window.removeEventListener('keyup', this.onEscapeKeyUp)
}
},
computed: {
/**
@@ -372,6 +380,12 @@
modal.heightType = height.type
},
onEscapeKeyUp (event) {
if ((event.keyCode || event.which) === 27 && this.visible) {
this.$modal.hide(this.name)
}
},
onWindowResize () {
this.window.width = window.innerWidth
this.window.height = window.innerHeight