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

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

@ -1,25 +1,27 @@
<template> <template>
<ul :class="containerClass" role="menu"> <transition name="p-contextmenusub" @enter="onEnter">
<template v-for="(item, i) of model"> <ul ref="container" :class="containerClass" role="menu" v-if="root ? true : parentActive">
<li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i" <template v-for="(item, i) of model">
@mouseenter="onItemMouseEnter($event, item)"> <li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @mouseenter="onItemMouseEnter($event, item)">
@click.native="onItemClick($event, item)"> <router-link v-if="item.to" :to="item.to" class="p-menuitem-link"
<span :class="['p-menuitem-icon', item.icon]"></span> @click.native="onItemClick($event, item)">
<span class="p-menuitem-text">{{item.label}}</span> <span :class="['p-menuitem-icon', item.icon]"></span>
</router-link> <span class="p-menuitem-text">{{item.label}}</span>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" </router-link>
@click="onItemClick($event, item)"> <a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target"
<span :class="['p-menuitem-icon', item.icon]"></span> @click="onItemClick($event, item)">
<span class="p-menuitem-text">{{item.label}}</span> <span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span> <span class="p-menuitem-text">{{item.label}}</span>
</a> <span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
<sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'" </a>
@leaf-click="onLeafClick" :parentActive="item === activeItem" /> <sub-menu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'"
</li> @leaf-click="onLeafClick" :parentActive="item === activeItem" />
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li> </li>
</template> <li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
</ul> </template>
</ul>
</transition>
</template> </template>
<script> <script>
@ -87,20 +89,23 @@ export default {
this.activeItem = null; this.activeItem = null;
this.$emit('leaf-click'); this.$emit('leaf-click');
}, },
onEnter() {
this.position();
},
position() { position() {
const parentItem = this.$el.parentElement; const parentItem = this.$refs.container.parentElement;
const containerOffset = DomHandler.getOffset(this.$el.parentElement) const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement)
const viewport = DomHandler.getViewport(); 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]); 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())) { 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 { else {
this.$el.style.left = itemOuterWidth + 'px'; this.$refs.container.style.left = itemOuterWidth + 'px';
} }
}, },
getItemClass(item) { getItemClass(item) {