vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed overlay menus

pull/496/head
Cagatay Civici 2020-09-23 14:08:06 +03:00
parent adb6978198
commit 98c20dbf3c
3 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/contextmenu/ContextMenu.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="p-contextmenu" @enter="onEnter" @leave="onLeave"> <transition name="p-contextmenu" @enter="onEnter" @leave="onLeave">
<div ref="container" class="p-contextmenu p-component" v-if="visible"> <div :ref="containerRef" class="p-contextmenu p-component" v-if="visible">
<ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" /> <ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" />
</div> </div>
</transition> </transition>
@ -39,6 +39,7 @@ export default {
documentContextMenuListener: null, documentContextMenuListener: null,
pageX: null, pageX: null,
pageY: null, pageY: null,
container: null,
data() { data() {
return { return {
visible: false visible: false
@ -49,6 +50,7 @@ export default {
this.unbindResizeListener(); this.unbindResizeListener();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.unbindDocumentContextMenuListener(); this.unbindDocumentContextMenuListener();
this.container = null;
}, },
mounted() { mounted() {
if (this.global) { if (this.global) {
@ -95,7 +97,7 @@ export default {
this.bindResizeListener(); this.bindResizeListener();
if (this.autoZIndex) { if (this.autoZIndex) {
this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex()); this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
} }
}, },
onLeave() { onLeave() {
@ -105,8 +107,8 @@ export default {
position() { position() {
let left = this.pageX + 1; let left = this.pageX + 1;
let top = this.pageY + 1; let top = this.pageY + 1;
let width = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container); let width = this.container.offsetParent ? this.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.container);
let height = this.$refs.container.offsetParent ? this.$refs.container.offsetHeight : DomHandler.getHiddenElementOuterHeight(this.$refs.container); let height = this.container.offsetParent ? this.container.offsetHeight : DomHandler.getHiddenElementOuterHeight(this.container);
let viewport = DomHandler.getViewport(); let viewport = DomHandler.getViewport();
//flip //flip
@ -129,13 +131,13 @@ export default {
top = document.body.scrollTop; top = document.body.scrollTop;
} }
this.$refs.container.style.left = left + 'px'; this.container.style.left = left + 'px';
this.$refs.container.style.top = top + 'px'; this.container.style.top = top + 'px';
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
if (this.visible && this.$refs.container && !this.$refs.container.contains(event.target)) { if (this.visible && this.container && !this.container.contains(event.target)) {
this.hide(); this.hide();
} }
}; };
@ -167,17 +169,17 @@ export default {
appendContainer() { appendContainer() {
if (this.appendTo) { if (this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.appendChild(this.$refs.container); document.body.appendChild(this.container);
else else
document.getElementById(this.appendTo).appendChild(this.$refs.container); document.getElementById(this.appendTo).appendChild(this.container);
} }
}, },
restoreAppend() { restoreAppend() {
if (this.$refs.container && this.appendTo) { if (this.container && this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.removeChild(this.$refs.container); document.body.removeChild(this.container);
else else
document.getElementById(this.appendTo).removeChild(this.$refs.container); document.getElementById(this.appendTo).removeChild(this.container);
} }
}, },
bindDocumentContextMenuListener() { bindDocumentContextMenuListener() {
@ -194,6 +196,9 @@ export default {
document.removeEventListener('contextmenu', this.documentContextMenuListener); document.removeEventListener('contextmenu', this.documentContextMenuListener);
this.documentContextMenuListener = null; this.documentContextMenuListener = null;
} }
},
containerRef(el) {
this.container = el;
} }
}, },
components: { components: {
@ -240,7 +245,7 @@ export default {
margin-left: auto; margin-left: auto;
} }
.p-contextmenu-enter { .p-contextmenu-enter-from {
opacity: 0; opacity: 0;
} }

25
src/components/menu/Menu.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave"> <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
<div ref="container" :class="containerClass" v-if="popup ? overlayVisible : true"> <div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true">
<ul class="p-menu-list p-reset" role="menu"> <ul class="p-menu-list p-reset" role="menu">
<template v-for="(item, i) of model"> <template v-for="(item, i) of model">
<template v-if="item.items && visible(item) && !item.separator"> <template v-if="item.items && visible(item) && !item.separator">
@ -54,6 +54,7 @@ export default {
outsideClickListener: null, outsideClickListener: null,
resizeListener: null, resizeListener: null,
relativeAlign: false, relativeAlign: false,
container: null,
beforeUnmount() { beforeUnmount() {
this.restoreAppend(); this.restoreAppend();
this.unbindResizeListener(); this.unbindResizeListener();
@ -96,7 +97,7 @@ export default {
this.bindResizeListener(); this.bindResizeListener();
if (this.autoZIndex) { if (this.autoZIndex) {
this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex()); this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
} }
}, },
onLeave() { onLeave() {
@ -105,15 +106,15 @@ export default {
}, },
alignOverlay() { alignOverlay() {
if (this.relativeAlign) if (this.relativeAlign)
DomHandler.relativePosition(this.$refs.container, this.target); DomHandler.relativePosition(this.container, this.target);
else else
DomHandler.absolutePosition(this.$refs.container, this.target); DomHandler.absolutePosition(this.container, this.target);
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
if (this.overlayVisible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) { if (this.overlayVisible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
this.hide(); this.hide();
} }
}; };
@ -148,17 +149,17 @@ export default {
appendContainer() { appendContainer() {
if (this.appendTo) { if (this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.appendChild(this.$refs.container); document.body.appendChild(this.container);
else else
document.getElementById(this.appendTo).appendChild(this.$refs.container); document.getElementById(this.appendTo).appendChild(this.container);
} }
}, },
restoreAppend() { restoreAppend() {
if (this.$refs.container && this.appendTo) { if (this.container && this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.removeChild(this.$refs.container); document.body.removeChild(this.container);
else else
document.getElementById(this.appendTo).removeChild(this.$refs.container); document.getElementById(this.appendTo).removeChild(this.container);
} }
}, },
beforeUnmount() { beforeUnmount() {
@ -166,9 +167,13 @@ export default {
this.unbindResizeListener(); this.unbindResizeListener();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.target = null; this.target = null;
this.container = null;
}, },
visible(item) { visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false); return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
},
containerRef(el) {
this.container = el;
} }
}, },
computed: { computed: {

23
src/components/tieredmenu/TieredMenu.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave"> <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
<div ref="container" :class="containerClass" v-if="popup ? visible : true"> <div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true">
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/> <TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick"/>
</div> </div>
</transition> </transition>
@ -34,6 +34,7 @@ export default {
} }
}, },
target: null, target: null,
container: null,
outsideClickListener: null, outsideClickListener: null,
resizeListener: null, resizeListener: null,
data() { data() {
@ -46,6 +47,7 @@ export default {
this.unbindResizeListener(); this.unbindResizeListener();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.target = null; this.target = null;
this.container = null;
}, },
methods: { methods: {
itemClick(event) { itemClick(event) {
@ -76,7 +78,7 @@ export default {
this.bindResizeListener(); this.bindResizeListener();
if (this.autoZIndex) { if (this.autoZIndex) {
this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex()); this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
} }
}, },
onLeave() { onLeave() {
@ -84,12 +86,12 @@ export default {
this.unbindResizeListener(); this.unbindResizeListener();
}, },
alignOverlay() { alignOverlay() {
DomHandler.absolutePosition(this.$refs.container, this.target); DomHandler.absolutePosition(this.container, this.target);
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
if (this.visible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) { if (this.visible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
this.hide(); this.hide();
} }
}; };
@ -124,23 +126,26 @@ export default {
appendContainer() { appendContainer() {
if (this.appendTo) { if (this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.appendChild(this.$refs.container); document.body.appendChild(this.container);
else else
document.getElementById(this.appendTo).appendChild(this.$refs.container); document.getElementById(this.appendTo).appendChild(this.container);
} }
}, },
restoreAppend() { restoreAppend() {
if (this.$refs.container && this.appendTo) { if (this.container && this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.removeChild(this.$refs.container); document.body.removeChild(this.container);
else else
document.getElementById(this.appendTo).removeChild(this.$refs.container); document.getElementById(this.appendTo).removeChild(this.container);
} }
}, },
onLeafClick() { onLeafClick() {
if (this.popup) { if (this.popup) {
this.hide(); this.hide();
} }
},
containerRef(el) {
this.container = el;
} }
}, },
computed: { computed: {