diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts index c099bb5bc67..364e43792f1 100755 --- a/src/app/components/contextmenu/contextmenu.ts +++ b/src/app/components/contextmenu/contextmenu.ts @@ -58,8 +58,6 @@ export class ContextMenuSub { activeItemKey: string; - containerOffset: any; - hideTimeout: any; activeItemKeyChangeSubscription: Subscription; @@ -73,7 +71,7 @@ export class ContextMenuSub { this.activeItemKey = activeItemKey; if (this.isActive(this.parentItemKey) && DomHandler.hasClass(this.sublistViewChild.nativeElement, 'p-submenu-list-active')) { - this.position(); + this.contextMenu.positionSubmenu(this.sublistViewChild.nativeElement); } this.contextMenu.cd.markForCheck(); @@ -103,12 +101,14 @@ export class ContextMenuSub { return; } - if (item.items) { - this.contextMenu.removeActiveFromSubLists(event.currentTarget); - } + if (this.contextMenu.el.nativeElement.contains( event.toElement)) { + if (item.items) { + this.contextMenu.removeActiveFromSubLists(event.currentTarget); + } - if (this.contextMenu.el.nativeElement.contains( event.toElement) && !this.root) { - this.contextMenu.contextMenuService.changeKey(this.parentItemKey); + if (!this.root) { + this.contextMenu.contextMenuService.changeKey(this.parentItemKey); + } } } @@ -157,35 +157,6 @@ export class ContextMenuSub { this.leafClick.emit(); } - position() { - let sublist = this.sublistViewChild.nativeElement; - let parentMenuItem = sublist.parentElement.parentElement; - let viewport = DomHandler.getViewport(); - let sublistWidth = sublist.offsetParent ? sublist.offsetWidth : DomHandler.getHiddenElementOuterWidth(sublist); - let sublistHeight = sublist.offsetHeight ? sublist.offsetHeight : DomHandler.getHiddenElementOuterHeight(sublist); - let itemOuterWidth = DomHandler.getOuterWidth(parentMenuItem.children[0]); - let itemOuterHeight = DomHandler.getOuterHeight(parentMenuItem.children[0]); - this.containerOffset = DomHandler.getOffset(parentMenuItem.parentElement); - - this.sublistViewChild.nativeElement.style.zIndex = ++DomHandler.zindex; - - if ((parseInt(this.containerOffset.top) + itemOuterHeight + sublistHeight) > (viewport.height - DomHandler.calculateScrollbarHeight())) { - sublist.style.removeProperty('top'); - sublist.style.bottom = '0px'; - } - else { - sublist.style.removeProperty('bottom'); - sublist.style.top = '0px'; - } - - if ((parseInt(this.containerOffset.left) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) { - sublist.style.left = -sublistWidth + 'px'; - } - else { - sublist.style.left = itemOuterWidth + 'px'; - } - } - getKey(index) { return this.root ? String(index) : this.parentItemKey + '_' + index; } @@ -336,6 +307,34 @@ export class ContextMenu implements AfterViewInit, OnDestroy { } } + positionSubmenu(sublist) { + let parentMenuItem = sublist.parentElement.parentElement; + let viewport = DomHandler.getViewport(); + let sublistWidth = sublist.offsetParent ? sublist.offsetWidth : DomHandler.getHiddenElementOuterWidth(sublist); + let sublistHeight = sublist.offsetHeight ? sublist.offsetHeight : DomHandler.getHiddenElementOuterHeight(sublist); + let itemOuterWidth = DomHandler.getOuterWidth(parentMenuItem.children[0]); + let itemOuterHeight = DomHandler.getOuterHeight(parentMenuItem.children[0]); + let containerOffset = DomHandler.getOffset(parentMenuItem.parentElement); + + sublist.style.zIndex = ++DomHandler.zindex; + + if ((parseInt(containerOffset.top) + itemOuterHeight + sublistHeight) > (viewport.height - DomHandler.calculateScrollbarHeight())) { + sublist.style.removeProperty('top'); + sublist.style.bottom = '0px'; + } + else { + sublist.style.removeProperty('bottom'); + sublist.style.top = '0px'; + } + + if ((parseInt(containerOffset.left) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) { + sublist.style.left = -sublistWidth + 'px'; + } + else { + sublist.style.left = itemOuterWidth + 'px'; + } + } + isItemMatched(menuitem) { return DomHandler.hasClass(menuitem, 'p-menuitem') && !DomHandler.hasClass(menuitem.children[0], 'p-disabled'); } @@ -501,7 +500,7 @@ export class ContextMenu implements AfterViewInit, OnDestroy { case 'Enter': if (activeItem) { - this.handleItemClick(event, this.findModelItemFromKey(this.contextMenuService.activeItemKey)); + this.handleItemClick(event, this.findModelItemFromKey(this.contextMenuService.activeItemKey), activeItem); } event.preventDefault(); @@ -525,7 +524,7 @@ export class ContextMenu implements AfterViewInit, OnDestroy { }, null); } - handleItemClick(event, item) { + handleItemClick(event, item, menuitem) { if (!item || item.disabled) { return; } @@ -537,6 +536,20 @@ export class ContextMenu implements AfterViewInit, OnDestroy { }); } + if (item.items) { + let childSublist = DomHandler.findSingle(menuitem, '.p-submenu-list'); + + if (childSublist) { + if (DomHandler.hasClass(childSublist, 'p-submenu-list-active')) { + this.removeActiveFromSubLists(menuitem); + } + else { + DomHandler.addClass(childSublist, 'p-submenu-list-active'); + this.positionSubmenu(childSublist); + } + } + } + if (!item.items) { this.hide(); }