From 773d4d81fcaa48b9d43a13b104c4bf9ed9c5b62a Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 12 Apr 2021 15:33:39 +0000 Subject: [PATCH] [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 | 11 ++- sharedComponents/navigationBar.component.ts | 71 ++++++++----------- 2 files changed, 34 insertions(+), 48 deletions(-) diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index 8790ed5f..0a7750ab 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -77,11 +77,12 @@
  • Home
    • -
  • {{menu.rootItem.title}} -
  • +
  • {{submenu.title}} @@ -202,7 +203,7 @@ Home
    • -
  • {{menu.rootItem.title}} - -
    @@ -223,7 +222,7 @@
  • + submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"> {{submenu.title}} diff --git a/sharedComponents/navigationBar.component.ts b/sharedComponents/navigationBar.component.ts index 736207dd..c72464e9 100644 --- a/sharedComponents/navigationBar.component.ts +++ b/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,32 +47,26 @@ 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, private route: ActivatedRoute, private config: ConfigurationService) { } - + ngOnInit() { - this.activeRouteEnabled = false; - //this.subscriptions = this.route.queryParams.subscribe(params => { - //console.log("params: ",params); this.initialize(); - //}); } - + ngOnDestroy() { for (let sub of this.subs) { sub.unsubscribe(); } } - + initialize() { if ((['provide', 'develop']).indexOf(this.portal) != -1) { this.header = { @@ -95,22 +89,21 @@ 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']; - + } } } @@ -120,14 +113,14 @@ export class NavigationBarComponent implements OnInit, OnDestroy{ })); } } - - + + isEnabled(required, enabled) { if (!required) { return true; } - - + + for (let requiredEntity of required) { if (typeof enabled[requiredEntity] === 'undefined' || enabled[requiredEntity] == false) { return false; @@ -135,12 +128,12 @@ export class NavigationBarComponent implements OnInit, OnDestroy{ } return true; } - + isAtleastOneEnabled(required, enabled) { if (!required || required.length == 0) { return true; } - + var count = required.length; for (let requiredEntity of required) { if (typeof enabled[requiredEntity] === 'undefined' || enabled[requiredEntity] == false) { @@ -149,39 +142,33 @@ export class NavigationBarComponent implements OnInit, OnDestroy{ } return (count > 0) ? true : false; } - + private handleError(message: string, error) { 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 + "/")) { - this.activeRouteEnabled = true; + if (this.isTheActiveMenuItem(menu.rootItem)) { return true; } else if (menu.items.length > 0) { for (let menuItem of menu.items) { - if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/")) { - this.activeRouteEnabled = true; + if (this.isTheActiveMenuItem(menuItem)) { return true; } } } return false; } - isTheActiveSubMenu(menuItem: MenuItem): boolean { - let currentRoute = this.getCurrentRoute(); - if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) { - this.activeRouteEnabled = true; - return true; - } - return false; + + isTheActiveMenuItem(menuItem: MenuItem): boolean { + let currentRoute = { + route: this.router.url.split('?')[0].split('#')[0], + fragment: this.route.snapshot.fragment + }; + return (menuItem.route == currentRoute.route || menuItem.route == (currentRoute.route + "/")) && + currentRoute.fragment == menuItem.fragment; } }