[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
parent
8cdeb0e9ca
commit
773d4d81fc
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue