Fixed #880

primefaces · Sep 12, 2016 · e3da3e3 · e3da3e3
1 parent 40b496f
commit e3da3e3
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 23 deletions.
diff --git a/components/breadcrumb/breadcrumb.ts b/components/breadcrumb/breadcrumb.ts
@@ -12,7 +12,7 @@ import {Router} from '@angular/router';
                 <li class="fa fa-home"></li>
                 <template ngFor let-item let-end="last" [ngForOf]="model">
                     <li role="menuitem">
-                        <a [href]="item.url||'#'" class="ui-menuitem-link" (click)="itemClick($event, item)">
+                        <a [href]="item.url||'#'" class="ui-menuitem-link" (click)="itemClick($event, item)" [ngClass]="{'ui-state-disabled':item.disabled}">
                             <span class="ui-menuitem-text">{{item.label}}</span>
                         </a>
                     </li>
@@ -33,6 +33,11 @@ export class Breadcrumb implements OnDestroy {
     constructor(protected router: Router) {}
 
     itemClick(event, item: MenuItem) {
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
         if(!item.url||item.routerLink) {
             event.preventDefault();
         }

diff --git a/components/common/api.ts b/components/common/api.ts
@@ -28,6 +28,7 @@ export interface MenuItem {
     eventEmitter?: EventEmitter<any>;
     items?: MenuItem[];
     expanded?: boolean;
+    disabled?: boolean;
 }
 
 export interface Message {

diff --git a/components/contextmenu/contextmenu.ts b/components/contextmenu/contextmenu.ts
@@ -12,8 +12,9 @@ import {Router} from '@angular/router';
             (click)="listClick($event)">
             <template ngFor let-child [ngForOf]="(root ? item : item.items)">
                 <li #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':item==activeItem}"
-                    (mouseenter)="onItemMouseEnter($event, item)" (mouseleave)="onItemMouseLeave($event, item)">
-                    <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [ngClass]="{'ui-state-hover':link==activeLink}" (click)="itemClick($event, child)">
+                    (mouseenter)="onItemMouseEnter($event,item,child)" (mouseleave)="onItemMouseLeave($event,item)">
+                    <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" 
+                        [ngClass]="{'ui-state-hover':link==activeLink&&!child.disabled,'ui-state-disabled':child.disabled}" (click)="itemClick($event, child)">
                         <span class="ui-submenu-icon fa fa-fw fa-caret-right" *ngIf="child.items"></span>
                         <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
                         <span class="ui-menuitem-text">{{child.label}}</span>
@@ -37,7 +38,11 @@ export class ContextMenuSub {
 
     activeLink: any;
 
-    onItemMouseEnter(event, item) {
+    onItemMouseEnter(event, item, menuitem) {
+        if(menuitem.disabled) {
+            return;
+        }
+
         this.activeItem = item;
         this.activeLink = item.children[0];
         let nextElement =  item.children[0].nextElementSibling;
@@ -56,6 +61,11 @@ export class ContextMenuSub {
     }
 
     itemClick(event, item: MenuItem) {
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
         if(!item.url||item.routerLink) {
             event.preventDefault();
         }

diff --git a/components/megamenu/megamenu.ts b/components/megamenu/megamenu.ts
@@ -13,8 +13,8 @@ import {Router} from '@angular/router';
             <ul class="ui-menu-list ui-helper-reset">
                 <template ngFor let-category [ngForOf]="model">
                     <li #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':category.items,'ui-menuitem-active':item==activeItem}"
-                        (mouseenter)="onItemMouseEnter($event, item)" (mouseleave)="onItemMouseLeave($event, item)">
-                        <a #link class="ui-menuitem-link ui-corner-all ui-submenu-link" [ngClass]="{'ui-state-hover':link==activeLink}">
+                        (mouseenter)="onItemMouseEnter($event, item, category)" (mouseleave)="onItemMouseLeave($event, item)">
+                        <a #link class="ui-menuitem-link ui-corner-all ui-submenu-link" [ngClass]="{'ui-state-hover':link==activeLink&&!category.disabled,'ui-state-disabled':category.disabled}">
                             <span class="ui-submenu-icon fa fa-fw" [ngClass]="{'fa-caret-down':orientation=='horizontal','fa-caret-right':orientation=='vertical'}"></span>
                             <span class="ui-menuitem-icon fa fa-fw" [ngClass]="category.icon"></span>
                             {{category.label}}
@@ -28,7 +28,8 @@ import {Router} from '@angular/router';
                                                 <ul class="ui-menu-list ui-helper-reset">
                                                     <li class="ui-widget-header ui-corner-all"><h3>{{submenu.label}}</h3></li>
                                                     <li *ngFor="let item of submenu.items" class="ui-menuitem ui-widget ui-corner-all">
-                                                        <a #link [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [ngClass]="{'ui-state-hover':link==hoveredItem}"
+                                                        <a #link [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" 
+                                                            [ngClass]="{'ui-state-hover':link==hoveredItem&&!item.disabled,'ui-state-disabled':item.disabled}"
                                                             (mouseenter)="hoveredItem=$event.target" (mouseleave)="hoveredItem=null" (click)="itemClick($event, item)">
                                                             <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
                                                             <span class="ui-menuitem-text">{{item.label}}</span>
@@ -64,7 +65,11 @@ export class MegaMenu implements OnDestroy {
 
     constructor(protected el: ElementRef, protected domHandler: DomHandler, protected renderer: Renderer, protected router: Router) {}
 
-    onItemMouseEnter(event, item) {
+    onItemMouseEnter(event, item, menuitem: MenuItem) {
+        if(menuitem.disabled) {
+            return;
+        }
+
         this.activeItem = item;
         this.activeLink = item.children[0];
         let submenu =  item.children[0].nextElementSibling;
@@ -88,6 +93,11 @@ export class MegaMenu implements OnDestroy {
     }
 
     itemClick(event, item: MenuItem) {
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
         if(!item.url||item.routerLink) {
             event.preventDefault();
         }

diff --git a/components/menu/menu.css b/components/menu/menu.css
@@ -418,5 +418,8 @@
 
 .ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem .ui-icon { 
     float: left; 
-    cursor: pointer; 
-}
+}
+
+.ui-tabmenu .ui-tabmenu-nav .ui-tabmenuitem.ui-state-disabled a {
+     cursor: default;
+} 
diff --git a/components/menu/menu.ts b/components/menu/menu.ts
@@ -13,7 +13,8 @@ import {Router} from '@angular/router';
                 <template ngFor let-submenu [ngForOf]="model" *ngIf="hasSubMenu()">
                     <li class="ui-widget-header ui-corner-all"><h3>{{submenu.label}}</h3></li>
                     <li *ngFor="let item of submenu.items" class="ui-menuitem ui-widget ui-corner-all">
-                        <a #link [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [ngClass]="{'ui-state-hover':link==hoveredItem}"
+                        <a #link [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" 
+                            [ngClass]="{'ui-state-hover':link==hoveredItem&&!item.disabled,'ui-state-disabled':item.disabled}"
                             (mouseenter)="hoveredItem=$event.target" (mouseleave)="hoveredItem=null" (click)="itemClick($event, item)">
                             <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
                             <span class="ui-menuitem-text">{{item.label}}</span>
@@ -22,7 +23,8 @@ import {Router} from '@angular/router';
                 </template>
                 <template ngFor let-item [ngForOf]="model" *ngIf="!hasSubMenu()">
                     <li class="ui-menuitem ui-widget ui-corner-all">
-                        <a #link [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [ngClass]="{'ui-state-hover':link==hoveredItem}"
+                        <a #link [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" 
+                            [ngClass]="{'ui-state-hover':link==hoveredItem&&!item.disabled,'ui-state-disabled':item.disabled}"
                             (mouseenter)="hoveredItem=$event.target" (mouseleave)="hoveredItem=null" (click)="itemClick($event, item)">
                             <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
                             <span class="ui-menuitem-text">{{item.label}}</span>
@@ -94,6 +96,11 @@ export class Menu implements AfterViewInit,OnDestroy {
     }
 
     itemClick(event, item: MenuItem) {
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
         if(!item.url||item.routerLink) {
             event.preventDefault();
         }

diff --git a/components/menubar/menubar.ts b/components/menubar/menubar.ts
@@ -12,8 +12,9 @@ import {Router} from '@angular/router';
             (click)="listClick($event)">
             <template ngFor let-child [ngForOf]="(root ? item : item.items)">
                 <li #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':item==activeItem}"
-                    (mouseenter)="onItemMouseEnter($event, item)" (mouseleave)="onItemMouseLeave($event, item)">
-                    <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [ngClass]="{'ui-state-hover':link==activeLink}" (click)="itemClick($event, child)">
+                    (mouseenter)="onItemMouseEnter($event,item,child)" (mouseleave)="onItemMouseLeave($event,item)">
+                    <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" 
+                        [ngClass]="{'ui-state-hover':link==activeLink&&!child.disabled,'ui-state-disabled':child.disabled}" (click)="itemClick($event, child)">
                         <span class="ui-submenu-icon fa fa-fw" *ngIf="child.items" [ngClass]="{'fa-caret-down':root,'fa-caret-right':!root}"></span>
                         <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
                         <span class="ui-menuitem-text">{{child.label}}</span>
@@ -37,7 +38,11 @@ export class MenubarSub {
 
     activeLink: any;
 
-    onItemMouseEnter(event, item) {
+    onItemMouseEnter(event, item, menuitem: MenuItem) {
+        if(menuitem.disabled) {
+            return;
+        }
+
         this.activeItem = item;
         this.activeLink = item.children[0];
         let nextElement =  item.children[0].nextElementSibling;
@@ -62,6 +67,11 @@ export class MenubarSub {
     }
 
     itemClick(event, item: MenuItem) {
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
         if(!item.url||item.routerLink) {
             event.preventDefault();
         }

diff --git a/components/panelmenu/panelmenu.ts b/components/panelmenu/panelmenu.ts
@@ -9,6 +9,11 @@ export class BasePanelMenuItem {
     constructor(protected router: Router) {}
 
     handleClick(event, item) {
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
         item.expanded = !item.expanded;
         event.preventDefault();
 
@@ -40,7 +45,8 @@ export class BasePanelMenuItem {
         <ul class="ui-menu-list ui-helper-reset" [style.display]="expanded ? 'block' : 'none'">
             <li *ngFor="let child of item.items" class="ui-menuitem ui-corner-all" [ngClass]="{'ui-menu-parent':child.items}">
                 <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" 
-                    [ngClass]="{'ui-menuitem-link-hasicon':child.icon&&child.items,'ui-state-hover':(hoveredLink==link)}" (click)="handleClick($event,child)"
+                    [ngClass]="{'ui-menuitem-link-hasicon':child.icon&&child.items,'ui-state-hover':(hoveredLink==link&&!child.disabled),'ui-state-disabled':child.disabled}" 
+                    (click)="handleClick($event,child)"
                     (mouseenter)="hoveredLink=link" (mouseleave)="hoveredLink=null">
                     <span class="ui-panelmenu-icon fa fa-fw" [ngClass]="{'fa-caret-right':!child.expanded,'fa-caret-down':child.expanded}" *ngIf="child.items"></span>
                     <span class="ui-menuitem-icon fa fa-fw" [ngClass]="child.icon" *ngIf="child.icon"></span>
@@ -68,7 +74,7 @@ export class PanelMenuSub extends BasePanelMenuItem {
         <div [class]="styleClass" [ngStyle]="style" [ngClass]="'ui-panelmenu ui-widget'">
             <div *ngFor="let item of model" class="ui-panelmenu-panel">
                 <div tabindex="0" [ngClass]="{'ui-widget ui-panelmenu-header ui-state-default':true,'ui-corner-all':!item.expanded,
-                    'ui-state-active ui-corner-top':item.expanded,'ui-state-hover':(item == hoveredItem)}">
+                    'ui-state-active ui-corner-top':item.expanded,'ui-state-hover':(item == hoveredItem && !item.disabled),'ui-state-disabled':item.disabled}">
                     <a [href]="item.url||'#'" [ngClass]="{'ui-panelmenu-headerlink-hasicon':item.icon}"
                         (mouseenter)="hoveredItem=item" (mouseleave)="hoveredItem=null" (click)="handleClick($event,item)">
                         <span class="ui-panelmenu-icon fa fa-fw" [ngClass]="{'fa-caret-right':!item.expanded,'fa-caret-down':item.expanded}"></span>

diff --git a/components/slidemenu/slidemenu.ts b/components/slidemenu/slidemenu.ts
@@ -13,7 +13,8 @@ import {Router} from '@angular/router';
             [style.transitionProperty]="root ? 'left' : 'none'" [style.transitionDuration]="effectDuration" [style.transitionTimingFunction]="easing">
             <template ngFor let-child [ngForOf]="(root ? item : item.items)">
                 <li #listitem [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':listitem==activeItem}">
-                    <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [ngClass]="{'ui-state-hover':link==hoveredLink,'ui-menuitem-link-parent':child.items}" 
+                    <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" 
+                        [ngClass]="{'ui-state-hover':link==hoveredLink&&!child.disabled,'ui-menuitem-link-parent':child.items,'ui-state-disabled':child.disabled}" 
                         (click)="itemClick($event, child, listitem)" (mouseenter)="hoveredLink=link" (mouseleave)="hoveredLink=null">
                         <span class="ui-submenu-icon fa fa-fw fa-caret-right" *ngIf="child.items"></span>
                         <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
@@ -46,6 +47,11 @@ export class SlideMenuSub implements OnDestroy {
     hoveredLink: any;
 
     itemClick(event, item: MenuItem, listitem: any) {
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
         if(!item.url||item.routerLink) {
             event.preventDefault();
         }

diff --git a/components/tabmenu/tabmenu.ts b/components/tabmenu/tabmenu.ts
@@ -11,9 +11,9 @@ import {Router} from '@angular/router';
         <div [ngClass]="'ui-tabmenu ui-widget ui-widget-content ui-corner-all'" [ngStyle]="style" [class]="styleClass">
             <ul class="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                 <li *ngFor="let item of model" 
-                    [ngClass]="{'ui-tabmenuitem ui-state-default ui-corner-top':true,
+                    [ngClass]="{'ui-tabmenuitem ui-state-default ui-corner-top':true,'ui-state-disabled':item.disabled,
                         'ui-tabmenuitem-hasicon':item.icon,'ui-state-hover':hoveredItem==item,'ui-state-active':activeItem==item}"
-                    (mouseenter)="hoveredItem=item" (mouseleave)="hoveredItem=null">
+                    (mouseenter)="hoveredItem=item&&!item.disabled" (mouseleave)="hoveredItem=null">
                     <a [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" (click)="itemClick($event,item)">
                         <span class="ui-menuitem-icon fa" [ngClass]="item.icon"></span>
                         <span class="ui-menuitem-text">{{item.label}}</span>
@@ -47,6 +47,11 @@ export class TabMenu implements OnDestroy {
     }
 
     itemClick(event, item: MenuItem) {
+        if(item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
         if(!item.url||item.routerLink) {
             event.preventDefault();
         }

diff --git a/components/tieredmenu/tieredmenu.ts b/components/tieredmenu/tieredmenu.ts
@@ -12,8 +12,9 @@ import {Router} from '@angular/router';
             (click)="listClick($event)">
             <template ngFor let-child [ngForOf]="(root ? item : item.items)">
                 <li #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':item==activeItem}"
-                    (mouseenter)="onItemMouseEnter($event, item)" (mouseleave)="onItemMouseLeave($event, item)">
-                    <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [ngClass]="{'ui-state-hover':link==activeLink}" (click)="itemClick($event, child)">
+                    (mouseenter)="onItemMouseEnter($event, item, child)" (mouseleave)="onItemMouseLeave($event, item)">
+                    <a #link [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" 
+                        [ngClass]="{'ui-state-hover':link==activeLink&&!child.disabled,'ui-state-disabled':child.disabled}" (click)="itemClick($event, child)">
                         <span class="ui-submenu-icon fa fa-fw fa-caret-right" *ngIf="child.items"></span>
                         <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
                         <span class="ui-menuitem-text">{{child.label}}</span>
@@ -37,7 +38,11 @@ export class TieredMenuSub {
 
     activeLink: any;
 
-    onItemMouseEnter(event, item) {
+    onItemMouseEnter(event, item, menuitem: MenuItem) {
+        if(menuitem.disabled) {
+            return;
+        }
+
         this.activeItem = item;
         this.activeLink = item.children[0];
         let nextElement =  item.children[0].nextElementSibling;
@@ -56,6 +61,11 @@ export class TieredMenuSub {
     }
 
     itemClick(event, item: MenuItem) {
+        if(item.disabled) {
+            event.preventDefault();
+            return true;
+        }
+
         if(!item.url||item.routerLink) {
             event.preventDefault();
         }

diff --git a/showcase/demo/menumodel/menumodelapi.html b/showcase/demo/menumodel/menumodelapi.html
@@ -102,6 +102,12 @@ <h3 style="margin-top:0px">MenuItem</h3>
                     <td>false</td>
                     <td>Visibility of submenu.</td>
                 </tr>
+                <tr>
+                    <td>disabled</td>
+                    <td>boolean</td>
+                    <td>false</td>
+                    <td>When set as true, disables the menuitem.</td>
+                </tr>
             </tbody>
         </table>
     </div>