[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
This commit is contained in:
k.triantafyllou 2021-04-12 15:33:39 +00:00
parent 8cdeb0e9ca
commit 773d4d81fc
2 changed files with 34 additions and 48 deletions

View File

@ -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>

View File

@ -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 + "/")) {
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;
}
}