Skip to content

Commit

Permalink
Minor cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@euvl
euvl committed Aug 27, 2018
1 parent 51501b1 commit 9c516af
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 35 deletions.
24 changes: 15 additions & 9 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,18 +191,18 @@
this.componentName = options.componentName || "modal", Vue.prototype.$modal = {
show: function(modal, paramsOrProps, params) {
var events = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
if ("string" == typeof modal) Plugin.event.$emit("toggle", modal, !0, paramsOrProps); else {
if ("string" == typeof modal) Plugin.event.$emit("toggle-" + modal, !0, paramsOrProps); else {
var root = Plugin.rootInstance;
params && params.root && (root = params.root);
var dynamicContainer = getModalsContainer(Vue, options, root);
dynamicContainer ? dynamicContainer.add(modal, paramsOrProps, params, events) : console.warn("[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page");
}
},
hide: function(name, params) {
Plugin.event.$emit("toggle", name, !1, params);
Plugin.event.$emit("toggle-" + name, !1, params);
},
toggle: function(name, params) {
Plugin.event.$emit("toggle", name, void 0, params);
Plugin.event.$emit("toggle-" + name, void 0, params);
}
}, Vue.component(this.componentName, _Modal2.default), options.dialog && Vue.component("v-dialog", _Dialog2.default),
options.dynamic && (Vue.component("modals-container", _ModalsContainer2.default),
Expand Down Expand Up @@ -463,8 +463,8 @@
},
beforeMount: function() {
var _this2 = this;
if (_index2.default.event.$on("toggle", function(name, state, params) {
name === _this2.name && (void 0 === state && (state = !_this2.visible), _this2.toggle(state, params));
if (_index2.default.event.$on("toggle-" + this.name, function(state, params) {
void 0 === state && (state = !_this2.visible), _this2.toggle(state, params);
}), window.addEventListener("resize", this.onWindowResize), this.onWindowResize(),
this.scrollable && !this.isAutoHeight && console.warn('Modal "' + this.name + '" has scrollable flag set to true but height is not "auto" (' + this.height + ")"),
this.isAutoHeight) {
Expand All @@ -482,8 +482,8 @@
this.clickToClose && window.addEventListener("keyup", this.onEscapeKeyUp);
},
beforeDestroy: function() {
window.removeEventListener("resize", this.onWindowResize), this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp),
this.scrollable && document.body.classList.remove("v--modal-block-scroll");
_index2.default.event.$off("toggle-" + this.name), window.removeEventListener("resize", this.onWindowResize),
this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp), this.scrollable && document.body.classList.remove("v--modal-block-scroll");
},
computed: {
isAutoHeight: function() {
Expand Down Expand Up @@ -561,7 +561,7 @@
var reset = this.reset, scrollable = this.scrollable, visible = this.visible;
if (visible !== state) {
var beforeEventName = visible ? "before-close" : "before-open";
"before-open" === beforeEventName ? (document.activeElement && "function" == typeof document.activeElement.blur && document.activeElement.blur(),
"before-open" === beforeEventName ? (document.activeElement && "BODY" !== document.activeElement.tagName && document.activeElement.blur && document.activeElement.blur(),
reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
Expand Down Expand Up @@ -631,7 +631,9 @@
},
disconnectObserver: function() {
this.mutationObserver && this.mutationObserver.disconnect();
}
},
beforeTransitionEnter: function() {},
afterTransitionLeave: function() {}
}
};
}, function(module, exports, __webpack_require__) {
Expand Down Expand Up @@ -928,6 +930,10 @@
}, [ _vm._t("top-right") ], 2), _vm._v(" "), _c("transition", {
attrs: {
name: _vm.transition
},
on: {
"before-enter": _vm.beforeTransitionEnter,
"after-leave": _vm.afterTransitionLeave
}
}, [ _vm.visibility.modal ? _c("div", {
ref: "modal",
Expand Down
24 changes: 15 additions & 9 deletions dist/ssr.index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,18 +145,18 @@
this.componentName = options.componentName || "modal", Vue.prototype.$modal = {
show: function(modal, paramsOrProps, params) {
var events = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
if ("string" == typeof modal) Plugin.event.$emit("toggle", modal, !0, paramsOrProps); else {
if ("string" == typeof modal) Plugin.event.$emit("toggle-" + modal, !0, paramsOrProps); else {
var root = Plugin.rootInstance;
params && params.root && (root = params.root);
var dynamicContainer = getModalsContainer(Vue, options, root);
dynamicContainer ? dynamicContainer.add(modal, paramsOrProps, params, events) : console.warn("[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page");
}
},
hide: function(name, params) {
Plugin.event.$emit("toggle", name, !1, params);
Plugin.event.$emit("toggle-" + name, !1, params);
},
toggle: function(name, params) {
Plugin.event.$emit("toggle", name, void 0, params);
Plugin.event.$emit("toggle-" + name, void 0, params);
}
}, Vue.component(this.componentName, _Modal2.default), options.dialog && Vue.component("v-dialog", _Dialog2.default),
options.dynamic && (Vue.component("modals-container", _ModalsContainer2.default),
Expand Down Expand Up @@ -417,8 +417,8 @@
},
beforeMount: function() {
var _this2 = this;
if (_index2.default.event.$on("toggle", function(name, state, params) {
name === _this2.name && (void 0 === state && (state = !_this2.visible), _this2.toggle(state, params));
if (_index2.default.event.$on("toggle-" + this.name, function(state, params) {
void 0 === state && (state = !_this2.visible), _this2.toggle(state, params);
}), window.addEventListener("resize", this.onWindowResize), this.onWindowResize(),
this.scrollable && !this.isAutoHeight && console.warn('Modal "' + this.name + '" has scrollable flag set to true but height is not "auto" (' + this.height + ")"),
this.isAutoHeight) {
Expand All @@ -436,8 +436,8 @@
this.clickToClose && window.addEventListener("keyup", this.onEscapeKeyUp);
},
beforeDestroy: function() {
window.removeEventListener("resize", this.onWindowResize), this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp),
this.scrollable && document.body.classList.remove("v--modal-block-scroll");
_index2.default.event.$off("toggle-" + this.name), window.removeEventListener("resize", this.onWindowResize),
this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp), this.scrollable && document.body.classList.remove("v--modal-block-scroll");
},
computed: {
isAutoHeight: function() {
Expand Down Expand Up @@ -515,7 +515,7 @@
var reset = this.reset, scrollable = this.scrollable, visible = this.visible;
if (visible !== state) {
var beforeEventName = visible ? "before-close" : "before-open";
"before-open" === beforeEventName ? (document.activeElement && "function" == typeof document.activeElement.blur && document.activeElement.blur(),
"before-open" === beforeEventName ? (document.activeElement && "BODY" !== document.activeElement.tagName && document.activeElement.blur && document.activeElement.blur(),
reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
Expand Down Expand Up @@ -585,7 +585,9 @@
},
disconnectObserver: function() {
this.mutationObserver && this.mutationObserver.disconnect();
}
},
beforeTransitionEnter: function() {},
afterTransitionLeave: function() {}
}
};
}, function(module, exports, __webpack_require__) {
Expand Down Expand Up @@ -882,6 +884,10 @@
}, [ _vm._t("top-right") ], 2), _vm._v(" "), _c("transition", {
attrs: {
name: _vm.transition
},
on: {
"before-enter": _vm.beforeTransitionEnter,
"after-leave": _vm.afterTransitionLeave
}
}, [ _vm.visibility.modal ? _c("div", {
ref: "modal",
Expand Down
24 changes: 15 additions & 9 deletions dist/ssr.nocss.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,18 +82,18 @@
this.componentName = options.componentName || "modal", Vue.prototype.$modal = {
show: function(modal, paramsOrProps, params) {
var events = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
if ("string" == typeof modal) Plugin.event.$emit("toggle", modal, !0, paramsOrProps); else {
if ("string" == typeof modal) Plugin.event.$emit("toggle-" + modal, !0, paramsOrProps); else {
var root = Plugin.rootInstance;
params && params.root && (root = params.root);
var dynamicContainer = getModalsContainer(Vue, options, root);
dynamicContainer ? dynamicContainer.add(modal, paramsOrProps, params, events) : console.warn("[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page");
}
},
hide: function(name, params) {
Plugin.event.$emit("toggle", name, !1, params);
Plugin.event.$emit("toggle-" + name, !1, params);
},
toggle: function(name, params) {
Plugin.event.$emit("toggle", name, void 0, params);
Plugin.event.$emit("toggle-" + name, void 0, params);
}
}, Vue.component(this.componentName, _Modal2.default), options.dialog && Vue.component("v-dialog", _Dialog2.default),
options.dynamic && (Vue.component("modals-container", _ModalsContainer2.default),
Expand Down Expand Up @@ -354,8 +354,8 @@
},
beforeMount: function() {
var _this2 = this;
if (_index2.default.event.$on("toggle", function(name, state, params) {
name === _this2.name && (void 0 === state && (state = !_this2.visible), _this2.toggle(state, params));
if (_index2.default.event.$on("toggle-" + this.name, function(state, params) {
void 0 === state && (state = !_this2.visible), _this2.toggle(state, params);
}), window.addEventListener("resize", this.onWindowResize), this.onWindowResize(),
this.scrollable && !this.isAutoHeight && console.warn('Modal "' + this.name + '" has scrollable flag set to true but height is not "auto" (' + this.height + ")"),
this.isAutoHeight) {
Expand All @@ -373,8 +373,8 @@
this.clickToClose && window.addEventListener("keyup", this.onEscapeKeyUp);
},
beforeDestroy: function() {
window.removeEventListener("resize", this.onWindowResize), this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp),
this.scrollable && document.body.classList.remove("v--modal-block-scroll");
_index2.default.event.$off("toggle-" + this.name), window.removeEventListener("resize", this.onWindowResize),
this.clickToClose && window.removeEventListener("keyup", this.onEscapeKeyUp), this.scrollable && document.body.classList.remove("v--modal-block-scroll");
},
computed: {
isAutoHeight: function() {
Expand Down Expand Up @@ -452,7 +452,7 @@
var reset = this.reset, scrollable = this.scrollable, visible = this.visible;
if (visible !== state) {
var beforeEventName = visible ? "before-close" : "before-open";
"before-open" === beforeEventName ? (document.activeElement && "function" == typeof document.activeElement.blur && document.activeElement.blur(),
"before-open" === beforeEventName ? (document.activeElement && "BODY" !== document.activeElement.tagName && document.activeElement.blur && document.activeElement.blur(),
reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
var stopEventExecution = !1, stop = function() {
stopEventExecution = !0;
Expand Down Expand Up @@ -522,7 +522,9 @@
},
disconnectObserver: function() {
this.mutationObserver && this.mutationObserver.disconnect();
}
},
beforeTransitionEnter: function() {},
afterTransitionLeave: function() {}
}
};
}, function(module, exports, __webpack_require__) {
Expand Down Expand Up @@ -813,6 +815,10 @@
}, [ _vm._t("top-right") ], 2), _vm._v(" "), _c("transition", {
attrs: {
name: _vm.transition
},
on: {
"before-enter": _vm.beforeTransitionEnter,
"after-leave": _vm.afterTransitionLeave
}
}, [ _vm.visibility.modal ? _c("div", {
ref: "modal",
Expand Down
33 changes: 25 additions & 8 deletions src/Modal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@
<div class="v--modal-top-right">
<slot name="top-right"/>
</div>
<transition :name="transition">
<transition
:name="transition"
@before-enter="beforeTransitionEnter"
@after-leave="afterTransitionLeave">
<div v-if="visibility.modal"
ref="modal"
:class="modalClass"
Expand Down Expand Up @@ -243,7 +246,9 @@ export default {
}
return false
})()
/**
* https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
*/
if (MutationObserver) {
this.mutationObserver = new MutationObserver(mutations => {
this.updateRenderedHeight()
Expand Down Expand Up @@ -401,7 +406,6 @@ export default {
this.window.width = window.innerWidth
this.window.height = window.innerHeight
},
/**
* Generates event object
*/
Expand Down Expand Up @@ -437,7 +441,11 @@ export default {
*/
toggle (state, params) {
const { reset, scrollable, visible } = this
if (visible === state) return
if (visible === state) {
return
}
const beforeEventName = visible ? 'before-close' : 'before-open'
if (beforeEventName === 'before-open') {
Expand All @@ -446,8 +454,8 @@ export default {
* all keypress events (ESC press, for example) will trigger on that element.
*/
if (document.activeElement &&
document.activeElement.tagName.toLowerCase() !== 'body' &&
typeof document.activeElement.blur === 'function') {
document.activeElement.tagName !== 'BODY' &&
document.activeElement.blur) {
document.activeElement.blur()
}
Expand Down Expand Up @@ -485,7 +493,9 @@ export default {
getDraggableElement () {
var selector =
typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable
typeof this.draggable !== 'string'
? '.v--modal-box'
: this.draggable
if (selector) {
const handler = this.$refs.overlay.querySelector(selector)
Expand Down Expand Up @@ -572,7 +582,6 @@ export default {
removeDraggableListeners () {
// console.log('removing draggable handlers')
},
/**
* 'opened' and 'closed' events are `$emit`ed here.
* This is called in watch.visible.
Expand Down Expand Up @@ -626,6 +635,14 @@ export default {
if (this.mutationObserver) {
this.mutationObserver.disconnect()
}
},
beforeTransitionEnter () {
// console.log('before transition enter')
},
afterTransitionLeave () {
// console.log('after transtion leave')
}
}
}
Expand Down

0 comments on commit 9c516af

Please sign in to comment.