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

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

@ -1,6 +1,6 @@
<template>
<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">
<template v-for="(item, i) of model">
<template v-if="item.items && visible(item) && !item.separator">
@ -54,6 +54,7 @@ export default {
outsideClickListener: null,
resizeListener: null,
relativeAlign: false,
container: null,
beforeUnmount() {
this.restoreAppend();
this.unbindResizeListener();
@ -96,7 +97,7 @@ export default {
this.bindResizeListener();
if (this.autoZIndex) {
this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
},
onLeave() {
@ -105,15 +106,15 @@ export default {
},
alignOverlay() {
if (this.relativeAlign)
DomHandler.relativePosition(this.$refs.container, this.target);
DomHandler.relativePosition(this.container, this.target);
else
DomHandler.absolutePosition(this.$refs.container, this.target);
DomHandler.absolutePosition(this.container, this.target);
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
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();
}
};
@ -148,17 +149,17 @@ export default {
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.$refs.container);
document.body.appendChild(this.container);
else
document.getElementById(this.appendTo).appendChild(this.$refs.container);
document.getElementById(this.appendTo).appendChild(this.container);
}
},
restoreAppend() {
if (this.$refs.container && this.appendTo) {
if (this.container && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.$refs.container);
document.body.removeChild(this.container);
else
document.getElementById(this.appendTo).removeChild(this.$refs.container);
document.getElementById(this.appendTo).removeChild(this.container);
}
},
beforeUnmount() {
@ -166,9 +167,13 @@ export default {
this.unbindResizeListener();
this.unbindOutsideClickListener();
this.target = null;
this.container = null;
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
},
containerRef(el) {
this.container = el;
}
},
computed: {

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

@ -1,6 +1,6 @@
<template>
<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"/>
</div>
</transition>
@ -34,6 +34,7 @@ export default {
}
},
target: null,
container: null,
outsideClickListener: null,
resizeListener: null,
data() {
@ -46,6 +47,7 @@ export default {
this.unbindResizeListener();
this.unbindOutsideClickListener();
this.target = null;
this.container = null;
},
methods: {
itemClick(event) {
@ -76,7 +78,7 @@ export default {
this.bindResizeListener();
if (this.autoZIndex) {
this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
},
onLeave() {
@ -84,12 +86,12 @@ export default {
this.unbindResizeListener();
},
alignOverlay() {
DomHandler.absolutePosition(this.$refs.container, this.target);
DomHandler.absolutePosition(this.container, this.target);
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
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();
}
};
@ -124,23 +126,26 @@ export default {
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.$refs.container);
document.body.appendChild(this.container);
else
document.getElementById(this.appendTo).appendChild(this.$refs.container);
document.getElementById(this.appendTo).appendChild(this.container);
}
},
restoreAppend() {
if (this.$refs.container && this.appendTo) {
if (this.container && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.$refs.container);
document.body.removeChild(this.container);
else
document.getElementById(this.appendTo).removeChild(this.$refs.container);
document.getElementById(this.appendTo).removeChild(this.container);
}
},
onLeafClick() {
if (this.popup) {
this.hide();
}
},
containerRef(el) {
this.container = el;
}
},
computed: {