[Library | Trunk]: Set active menu add condition for fragment

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60840 d315682c-612b-4755-9ff5-7f18f6832af3

sharedComponents/navigationBar.component.html

@@ -77,11 +77,12 @@
                   <li class="uk-nav-header uk-parent " *ngIf="showHomeMenuItem && getCurrentRoute()!='/'">
                     <a routerLinkActive="uk-link" routerLink="/">Home</a>
                   </li>
-                  <li class="uk-nav-header uk-parent"
+                  <li class="uk-nav-header uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
                       *ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
                     <!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"  [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
                     <a *ngIf="menu.rootItem.route.length > 0 && isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired "
                        routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"
+                       [routerLinkActiveOptions]="{exact: true}"
                        [queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment"
                        class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
                     <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
@@ -92,7 +93,7 @@
 
                     <ul class="uk-nav-sub">
                       <ng-container *ngFor="let submenu of menu.items">
-                        <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)  && (submenu.route.length > 0 || submenu.url.length > 0)">
+                        <li [class.uk-active]="isTheActiveMenuItem(submenu)" *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)  && (submenu.route.length > 0 || submenu.url.length > 0)">
                           <a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"
                              routerLink="{{submenu.route}}" [queryParams]=submenu.params [fragment]="submenu.fragment"
                              class="uk-offcanvas-close custom-offcanvas-close">{{submenu.title}}</a>
@@ -202,7 +203,7 @@
                 <a routerLinkActive="uk-link" routerLink="/">Home</a>
               </li>
               <ng-container *ngFor="let menu of menuItems">
-                <li [class]="(isTheActiveMenu(menu)?'uk-active':'')+' uk-parent'"
+                <li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
                     *ngIf="isAtleastOneEnabled(menu.rootItem.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)">
                   <!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"   [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
                   <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )"
@@ -213,8 +214,6 @@
                      href="{{menu.rootItem.url}}" target="_blank" aria-expanded="false">{{menu.rootItem.title}}</a>
                   <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)) "
                      class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>
-
-
                   <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
                        style="top: 80px; left: 0px;" id="{{menu.rootItem.id}}" uk-toggle>
                     <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
@@ -223,7 +222,7 @@
                           <ng-container *ngFor="let submenu of menu.items">
                             <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
                             isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
-                            submenu.url.length > 0)" [class.uk-active]="isTheActiveSubMenu(submenu)">
+                            submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)">
                               <a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"
                                  routerLink="{{submenu.route}}" [queryParams]="submenu.params"
                                  [fragment]="submenu.fragment">{{submenu.title}}</a>

sharedComponents/navigationBar.component.ts

@@ -15,14 +15,14 @@ export interface Header {
   logoSmallUrl: string,
   position: 'left' | 'center' | 'right',
   badge: boolean
-  stickyAnimation?:boolean
+  stickyAnimation?: boolean
 }
 
 @Component({
   selector: 'navbar',
   templateUrl: 'navigationBar.component.html'
 })
-export class NavigationBarComponent implements OnInit, OnDestroy{
+export class NavigationBarComponent implements OnInit, OnDestroy {
   @Input() portal: string = 'connect';
   @Input() dark: boolean = false;
   @Input() onlyTop: boolean;
@@ -47,11 +47,9 @@ export class NavigationBarComponent implements OnInit, OnDestroy{
   keyword: string = '';
   public isAuthorized: boolean = false;
   subs: Subscription[] = [];
-
   showEntity = {};
   showPage = {};
   specialAnnouncementContent: string = null;
-  activeRouteEnabled = false;
   
   
   constructor(private router: Router,
@@ -60,11 +58,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy{
   }
   
   ngOnInit() {
-    this.activeRouteEnabled = false;
-    //this.subscriptions = this.route.queryParams.subscribe(params => {
-    //console.log("params: ",params);
     this.initialize();
-    //});
   }
   
   ngOnDestroy() {
@@ -95,19 +89,18 @@ export class NavigationBarComponent implements OnInit, OnDestroy{
         badge: true
       };
     }
-    this.activeRouteEnabled = false;
     this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user);
     if (this.properties.adminToolsAPIURL && this.communityId) {
       //this.config.getCommunityInformation(this.properties, this.communityId).subscribe(data => {
       this.subs.push(this.config.communityInformationState.subscribe(data => {
           if (data) {
-            if(data['entities']) {
+            if (data['entities']) {
               for (var i = 0; i < data['entities'].length; i++) {
                 
                 this.showEntity['' + data['entities'][i]['pid'] + ''] = data['entities'][i]['isEnabled'];
               }
             }
-            if(data['pages']) {
+            if (data['pages']) {
               for (var i = 0; i < data['pages'].length; i++) {
                 this.showPage[data['pages'][i]['route']] = data['pages'][i]['isEnabled'];
                 
@@ -154,34 +147,28 @@ export class NavigationBarComponent implements OnInit, OnDestroy{
     console.error('NavigationBar (component): ' + message, error);
   }
   
-  getCurrentRoute() {
-    return this.router.url.split('?')[0];
-  }
-
   isTheActiveMenu(menu: RootMenuItem): boolean {
-    let currentRoute = this.getCurrentRoute();
     if (!menu.rootItem.markAsActive) {
       return false;
     }
-    if (currentRoute == menu.rootItem.route || menu.rootItem.route == (currentRoute + "/")) {
+    if (this.isTheActiveMenuItem(menu.rootItem)) {
-      this.activeRouteEnabled = true;
       return true;
     } else if (menu.items.length > 0) {
       for (let menuItem of menu.items) {
-        if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/")) {
+        if (this.isTheActiveMenuItem(menuItem)) {
-          this.activeRouteEnabled = true;
           return true;
         }
       }
     }
     return false;
   }
-  isTheActiveSubMenu(menuItem: MenuItem): boolean {
+  
-    let currentRoute = this.getCurrentRoute();
+  isTheActiveMenuItem(menuItem: MenuItem): boolean {
-    if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) {
+    let currentRoute = {
-      this.activeRouteEnabled = true;
+      route: this.router.url.split('?')[0].split('#')[0],
-      return true;
+      fragment: this.route.snapshot.fragment
-    }
+    };
-    return false;
+    return (menuItem.route == currentRoute.route || menuItem.route == (currentRoute.route + "/")) &&
+      currentRoute.fragment == menuItem.fragment;
   }
 }