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

ContextMenu positioning for submenus

pull/132/head
cagataycivici 2019-12-04 16:57:50 +03:00
parent a791be15fa
commit 9ca8437f0a
2 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,7 +47,6 @@ export default {
this.restoreAppend();
this.unbindResizeListener();
this.unbindOutsideClickListener();
this.target = null;
},
methods: {
itemClick(event) {
@ -71,12 +70,10 @@ export default {
this.pageX = event.pageX;
this.pageY = event.pageY;
if (this.visible) {
if (this.visible)
this.position();
}
else {
else
this.visible = true;
}
event.stopPropagation();
event.preventDefault();

19
src/components/contextmenu/ContextMenuSub.vue
View File

@ -1,5 +1,6 @@
<template>
<ul :class="containerClass" role="menu">
<transition name="p-contextmenusub" @enter="onEnter">
<ul ref="container" :class="containerClass" role="menu" v-if="root ? true : parentActive">
<template v-for="(item, i) of model">
<li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
@ -20,6 +21,7 @@
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
</template>
</ul>
</transition>
</template>
<script>
@ -87,20 +89,23 @@ export default {
this.activeItem = null;
this.$emit('leaf-click');
},
onEnter() {
this.position();
},
position() {
const parentItem = this.$el.parentElement;
const containerOffset = DomHandler.getOffset(this.$el.parentElement)
const parentItem = this.$refs.container.parentElement;
const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement)
const viewport = DomHandler.getViewport();
const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
const sublistWidth = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container);
const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
this.$el.style.top = '0px';
this.$refs.container.style.top = '0px';
if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
this.$el.style.left = -1 * sublistWidth + 'px';
this.$refs.container.style.left = -1 * sublistWidth + 'px';
}
else {
this.$el.style.left = itemOuterWidth + 'px';
this.$refs.container.style.left = itemOuterWidth + 'px';
}
},
getItemClass(item) {