revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

[UI] Emit one and only one open/close modal event.

Browse source
This commit is contained in:
Fabio Manganiello 2024-09-22 01:41:52 +02:00
parent 0d0665ca7c
commit 839948e4e6
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 29 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
platypush/backend/http/webapp/src/components/Modal.vue
View file

@ -98,7 +98,6 @@ export default {
return { return {
ignoreEscape: false, ignoreEscape: false,
isVisible: this.visible, isVisible: this.visible,
prevVisible: this.visible,
timeoutId: undefined, timeoutId: undefined,
} }
}, },
@ -117,9 +116,11 @@ export default {
if (event) if (event)
event.preventDefault() event.preventDefault()
this.prevVisible = this.isVisible if (!this.isVisible)
return
this.isVisible = false this.isVisible = false
bus.emit('modal-close') this.visibleHndl(false, true)
}, },
hide() { hide() {
@ -127,8 +128,11 @@ export default {
}, },
show() { show() {
this.prevVisible = this.isVisible if (this.isVisible)
return
this.isVisible = true this.isVisible = true
this.visibleHndl(true, false)
}, },
open() { open() {
@ -175,28 +179,40 @@ export default {
setTimeout(() => this.ignoreEscape = false, 100) setTimeout(() => this.ignoreEscape = false, 100)
}, },
visibleHndl(visible) { visibleHndl(visible, oldVisible) {
if (!visible) if (!this.$el?.classList?.contains('modal-container'))
return
if (!visible && oldVisible) {
this.$emit('close') this.$emit('close')
else bus.emit('modal-close', this)
} else if (visible && !oldVisible) {
this.$emit('open') this.$emit('open')
bus.emit('modal-open', this)
}
}, },
}, },
watch: { watch: {
visible(value) { visible(value, oldValue) {
this.visibleHndl(value) this.visibleHndl(value, oldValue)
this.isVisible = value this.$nextTick(() => this.isVisible = value)
}, },
isVisible(value) { isVisible(value, oldValue) {
this.visibleHndl(value) oldValue = oldValue == null ? this.visible : oldValue
this.visibleHndl(value, oldValue)
}, },
}, },
mounted() { mounted() {
document.body.addEventListener('keyup', this.onKeyUp) document.body.addEventListener('keyup', this.onKeyUp)
bus.on('modal-close', this.onModalCloseMessage) this.visibleHndl(this.isVisible, this.isVisible ? false : undefined)
},
unmouted() {
document.body.removeEventListener('keyup', this.onKeyUp)
this.visibleHndl(false, this.isVisible)
}, },
unmounted() { unmounted() {
@ -204,7 +220,6 @@ export default {
}, },
updated() { updated() {
this.prevVisible = this.isVisible
if (this.isVisible) { if (this.isVisible) {
// Make sure that a newly opened or visible+updated modal always comes to the front // Make sure that a newly opened or visible+updated modal always comes to the front
let maxZIndex = parseInt(getComputedStyle(this.$el).zIndex) let maxZIndex = parseInt(getComputedStyle(this.$el).zIndex)