Skip to content

Commit

Permalink
Fixed #2449
Browse files Browse the repository at this point in the history
  • Loading branch information
@Merve7
Merve7 committed Jan 11, 2018
1 parent 229bfa8 commit 77e624c
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 31 deletions.
110 changes: 86 additions & 24 deletions src/app/components/menubar/menubar.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {NgModule,Component,ElementRef,AfterViewInit,Input,Output,Renderer2} from '@angular/core';
import {NgModule,Component,ElementRef,Input,Renderer2,OnDestroy} from '@angular/core';
import {CommonModule} from '@angular/common';
import {DomHandler} from '../dom/domhandler';
import {MenuItem} from '../common/menuitem';
Expand All @@ -14,21 +14,21 @@ import {RouterModule} from '@angular/router';
<li *ngIf="child.separator" class="ui-menu-separator ui-widget-content" [ngClass]="{'ui-helper-hidden': child.visible === false}">
<li *ngIf="!child.separator" #listItem [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,
'ui-menu-parent':child.items,'ui-menuitem-active':listItem==activeItem,'ui-helper-hidden': child.visible === false}"
(mouseenter)="onItemMouseEnter($event,listItem,child)" (mouseleave)="onItemMouseLeave($event)">
(mouseenter)="onItemMouseEnter($event,listItem,child)" (mouseleave)="onItemMouseLeave($event)" (click)="onItemMenuClick($event, listItem, child)">
<a *ngIf="!child.routerLink" [href]="child.url||'#'" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id" (click)="itemClick($event, child)"
[ngClass]="{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':child.disabled}" [ngStyle]="child.style" [class]="child.styleClass">
<span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
<span class="ui-menuitem-text">{{child.label}}</span>
<span class="ui-submenu-icon fa fa-fw" *ngIf="child.items" [ngClass]="{'fa-caret-down':root,'fa-caret-right':!root}"></span>
</a>
<a *ngIf="child.routerLink" [routerLink]="child.routerLink" [queryParams]="child.queryParams" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}"
<a *ngIf="child.routerLink" [routerLink]="child.routerLink" [queryParams]="child.queryParams" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}"
[attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id"
(click)="itemClick($event, child)" [ngClass]="{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':child.disabled}" [ngStyle]="child.style" [class]="child.styleClass">
<span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
<span class="ui-menuitem-text">{{child.label}}</span>
<span class="ui-submenu-icon fa fa-fw" *ngIf="child.items" [ngClass]="{'fa-caret-down':root,'fa-caret-right':!root}"></span>
</a>
<p-menubarSub class="ui-submenu" [item]="child" *ngIf="child.items"></p-menubarSub>
<p-menubarSub class="ui-submenu" [item]="child" *ngIf="child.items" [autoDisplay]="true"></p-menubarSub>
</li>
</ng-template>
<li class="ui-menuitem ui-menuitem-custom ui-widget ui-corner-all">
Expand All @@ -38,40 +38,91 @@ import {RouterModule} from '@angular/router';
`,
providers: [DomHandler]
})
export class MenubarSub {
export class MenubarSub implements OnDestroy{

@Input() item: MenuItem;

@Input() root: boolean;

@Input() autoDisplay: boolean;

documentClickListener: any;

menuClick: boolean;

constructor(public domHandler: DomHandler) {}

activeItem: any;

onItemMenuClick(event: Event, item: HTMLLIElement, menuitem: MenuItem) {
if (!this.autoDisplay) {

if (menuitem.disabled) {
return;
}

this.activeItem = item;
let nextElement = <HTMLLIElement> item.children[0].nextElementSibling;
if (nextElement) {
let sublist = <HTMLUListElement> nextElement.children[0];
sublist.style.zIndex = String(++DomHandler.zindex);

if (this.root) {
sublist.style.top = this.domHandler.getOuterHeight(item.children[0]) + 'px';
sublist.style.left = '0px'
}
else {
sublist.style.top = '0px';
sublist.style.left = this.domHandler.getOuterWidth(item.children[0]) + 'px';
}
}

this.menuClick = true;
this.bindEventListener();
}
}

onItemMouseEnter(event: Event, item: HTMLLIElement, menuitem: MenuItem) {
if(menuitem.disabled) {
return;
bindEventListener() {
if(!this.documentClickListener) {
this.documentClickListener = (event) => {
if (!this.menuClick) {
this.activeItem = null;
}
this.menuClick = false;
};

document.addEventListener('click', this.documentClickListener);
}
}

onItemMouseEnter(event: Event, item: HTMLLIElement, menuitem: MenuItem) {
if (this.autoDisplay) {
if (menuitem.disabled) {
return;
}

this.activeItem = item;
let nextElement = <HTMLLIElement> item.children[0].nextElementSibling;
if(nextElement) {
let sublist = <HTMLUListElement> nextElement.children[0];
sublist.style.zIndex = String(++DomHandler.zindex);
if(this.root) {
this.activeItem = item;
let nextElement = <HTMLLIElement> item.children[0].nextElementSibling;
if (nextElement) {
let sublist = <HTMLUListElement> nextElement.children[0];
sublist.style.zIndex = String(++DomHandler.zindex);

if (this.root) {
sublist.style.top = this.domHandler.getOuterHeight(item.children[0]) + 'px';
sublist.style.left = '0px'
}
else {
}
else {
sublist.style.top = '0px';
sublist.style.left = this.domHandler.getOuterWidth(item.children[0]) + 'px';
}
}
}
}

onItemMouseLeave(event: Event) {
this.activeItem = null;
if (this.autoDisplay) {
this.activeItem = null;
}
}

itemClick(event, item: MenuItem) {
Expand All @@ -84,7 +135,7 @@ export class MenubarSub {
event.preventDefault();
}

if(item.command) {
if(item.command) {
item.command({
originalEvent: event,
item: item
Expand All @@ -93,19 +144,28 @@ export class MenubarSub {

this.activeItem = null;
}

listClick(event) {
this.activeItem = null;
if (this.autoDisplay) {
this.activeItem = null;
}
}

ngOnDestroy(){
if(this.documentClickListener) {
document.removeEventListener('click', this.documentClickListener);
}

}

}

@Component({
selector: 'p-menubar',
template: `
<div [ngClass]="{'ui-menubar ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true}"
<div [ngClass]="{'ui-menubar ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true}"
[class]="styleClass" [ngStyle]="style">
<p-menubarSub [item]="model" root="root">
<p-menubarSub [item]="model" root="root" [autoDisplay]="autoDisplay">
<ng-content></ng-content>
</p-menubarSub>
</div>
Expand All @@ -119,7 +179,9 @@ export class Menubar {
@Input() style: any;

@Input() styleClass: string;


@Input() autoDisplay: boolean = true;

constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) {}
}

Expand Down
31 changes: 24 additions & 7 deletions src/app/showcase/components/menubar/menubardemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,17 @@
</div>

<div class="content-section implementation">
<h3 class="first">With AutoDisplay</h3>
<p-menubar [model]="items">
<input type="text" pInputText placeholder="Search">
<button pButton label="Logout" icon="fa-sign-out"></button>
</p-menubar>

<h3>Without AutoDisplay</h3>
<p-menubar [model]="items" [autoDisplay]="false">
<input type="text" pInputText placeholder="Search">
<button pButton label="Logout" icon="fa-sign-out"></button>
</p-menubar>
</div>

<div class="content-section documentation">
Expand Down Expand Up @@ -44,7 +51,7 @@ <h3>Getting Started</h3>
&#123;
label: 'File',
items: [&#123;
label: 'New',
label: 'New',
icon: 'fa-plus',
items: [
&#123;label: 'Project'&#125;,
Expand Down Expand Up @@ -99,6 +106,12 @@ <h3>Properties</h3>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>autoDisplay</td>
<td>boolean</td>
<td>true</td>
<td>Display menu item when mouse enter or display menu item when clicked</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
Expand All @@ -114,7 +127,7 @@ <h3>Properties</h3>
</tbody>
</table>
</div>

<h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
<div class="doc-tablewrapper">
Expand Down Expand Up @@ -169,6 +182,10 @@ <h3>Dependencies</h3>
&lt;input type="text" pInputText placeholder="Search"&gt;
&lt;button pButton label="Logout" icon="fa-sign-out"&gt;&lt;/button&gt;
&lt;/p-menubar&gt;
&lt;p-menubar [model]="items" [autoDisplay]="false"&gt;
&lt;input type="text" pInputText placeholder="Search"&gt;
&lt;button pButton label="Logout" icon="fa-sign-out"&gt;&lt;/button&gt;
&lt;/p-menubar&gt;
</code>
</pre>

Expand All @@ -184,7 +201,7 @@ <h3>Dependencies</h3>
label: 'File',
icon: 'fa-file-o',
items: [&#123;
label: 'New',
label: 'New',
icon: 'fa-plus',
items: [
&#123;label: 'Project'&#125;,
Expand Down Expand Up @@ -212,11 +229,11 @@ <h3>Dependencies</h3>
label: 'Contents'
&#125;,
&#123;
label: 'Search',
icon: 'fa-search',
label: 'Search',
icon: 'fa-search',
items: [
&#123;
label: 'Text',
label: 'Text',
items: [
&#123;
label: 'Workspace'
Expand Down Expand Up @@ -260,4 +277,4 @@ <h3>Dependencies</h3>
</pre>
</p-tabPanel>
</p-tabView>
</div>
</div>

0 comments on commit 77e624c

Please sign in to comment.