MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change navbar base on new theme

This commit is contained in:
Konstantinos Triantafyllou 2022-02-28 14:38:26 +02:00
parent ada419f8e8
commit d590732aba
3 changed files with 222 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
login/userMini.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from './utils/helper.class';
import {RouterHelper} from '../utils/routerHelper.class';
@ -6,72 +6,44 @@ import {Subscriber} from "rxjs";
import {MenuItem} from "../sharedComponents/menu";
import {UserManagementService} from "../services/user-management.service";
// declare var logoutClicked;
declare var UIkit;
@Component({
selector: 'user-mini',
template: `
<ng-container *ngIf="!dashboard">
<ul *ngIf="!mobileView" class="uk-navbar-nav" [class.uk-dark]="dark">
<li class="uk-parent">
<a *ngIf="loggedIn" class="login">
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<ng-container *ngIf="loggedIn">
<a class="login uk-icon">
<svg height="60" width="60">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
<text *ngIf="firstLetters" x="50%" y="50%" text-anchor="middle" dy=".4em"
font-size="16">
{{firstLetters}}
<text x="50%" y="50%" text-anchor="middle" dy=".4em" font-size="16">
{{firstLetters?firstLetters:'AN'}}
</text>
<svg *ngIf="!firstLetters" ratio="1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" width="20"
x="20">
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
<path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
</svg>
</svg>
</a>
<a *ngIf="!loggedIn" class="loginLink" id="userMenu-parent" (click)="logIn()">Sign in <span
class=" uk-margin-small-left uk-margin-small-right uk-icon"><svg width="20" height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
ratio="1"><circle fill="none"
stroke="#000"
stroke-width="1.1"
cx="9.9" cy="6.4"
r="4.4"></circle><path
fill="none" stroke="#000" stroke-width="1.1"
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
</a>
<div *ngIf="loggedIn" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" id="userMenu" uk-toggle>
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
<div class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left">
<ul class="uk-nav uk-navbar-dropdown-nav">
<!--li><a href="" >My profile</a></li>
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [class.uk-active]="isTheActiveSubMenu(item)">
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}"
[queryParams]=item.params>{{item.title}}</a>
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization"
[class.uk-active]="isTheActiveSubMenu(item)">
<a *ngIf="item.route.length > 0" [routerLink]="item.route"
[queryParams]="item.params">{{item.title}}</a>
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}"
target="_blank">{{item.title}}</a>
</li>
</ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()" id="logout">Log out</a></li>
<li><a (click)="logOut()">Log out</a></li>
</ul>
</div>
<div id="logout1"></div>
</div>
</div>
</ng-container>
</li>
</ul>
</ng-container>
<ng-container *ngIf="!dashboard">
<li *ngIf="mobileView" class="uk-nav-header uk-parent ">
<ul *ngIf="mobileView" class="uk-nav uk-nav-default">
<li>
<span *ngIf="loggedIn" class="uk-flex uk-flex-middle">
<span>{{user.fullname + " "}}</span>
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20"
@ -87,44 +59,22 @@ import {UserManagementService} from "../services/user-management.service";
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg>
</span>
</span>
<span *ngIf="!loggedIn">
<a class="loginLink" (click)="logIn()">Sign in <span class="uk-margin-small-right uk-icon"><svg width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
ratio="1"><circle
fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none"
stroke="#000"
stroke-width="1.1"
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span>
</a>
</span>
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<ul *ngIf="loggedIn" class="uk-nav-sub">
<!--li><a href="" >My profile</a></li>
<li><a routerLinkActive="uk-link" routerLink="/myclaims">My Claims</a></li>
<li *ngIf="isAuthorized"><a routerLinkActive="uk-link" routerLink="/claims">Manage all Claims</a></li-->
<ng-container *ngFor="let item of userMenuItems ">
<li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization">
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}">{{item.title}}</a>
<a *ngIf="item.route.length == 0 && item.url.length > 0" href="{{item.url}}">{{item.title}}</a>
<a *ngIf="item.route.length > 0" routerLink="{{item.route}}" (click)="closeCanvas()">{{item.title}}</a>
<a *ngIf="item.route.length == 0 && item.url.length > 0" (click)="closeCanvas()" href="{{item.url}}">{{item.title}}</a>
</li>
</ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()" id="logout">Log out</a></li>
<li><a (click)="logOut()">Log out</a></li>
</ul>
</li>
</ul>
</ng-container>
<ng-container *ngIf="dashboard">
<a *ngIf="!loggedIn" class="uk-flex" (click)="logIn()">
<span>Sign in</span>
<span class="uk-margin-small-left uk-margin-small-right uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">
<circle cx="9.9" cy="6.4" r="4.4" stroke-width="1.1"></circle>
<path d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2" stroke-width="1.1"></path>
</svg>
</span>
</a>
<a *ngIf="!loggedIn" class="uk-flex" (click)="logIn()">Sign in</a>
<a *ngIf="loggedIn" class="login uk-icon">
<svg height="60" width="60">
<circle cx="30" cy="30" r="20" stroke-width="2"></circle>
@ -152,7 +102,7 @@ import {UserManagementService} from "../services/user-management.service";
</li>
</ng-container>
<li *ngIf="userMenuItems.length > 0" class="uk-nav-divider"></li>
<li><a (click)="logOut()" id="logout">Log out</a></li>
<li><a (click)="logOut()">Log out</a></li>
</ul>
</div>
</ng-container>
@ -172,7 +122,8 @@ export class UserMiniComponent implements OnInit, OnChanges {
@Input() logOutUrl;
@Input() cookieDomain;
@Input() dark: boolean = false;
subscriptions = [];
@Output() closeCanvasEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
private subscriptions = [];
constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) {
}
@ -198,6 +149,10 @@ export class UserMiniComponent implements OnInit, OnChanges {
});
}
closeCanvas() {
this.closeCanvasEmitter.emit(true);
}
initUser() {
if (this.user) {
this.loggedIn = true;
@ -225,11 +180,9 @@ export class UserMiniComponent implements OnInit, OnChanges {
isTheActiveSubMenu(menuItem: MenuItem): boolean {
let currentRoute = this.router.url.split('?')[0];
if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) {
return true;
}
return false;
return menuItem.route == currentRoute || menuItem.route == (currentRoute + "/");
}
parseName() {
this.firstLetters = "";
if (this.user && this.user.firstname) {

152
sharedComponents/navigationBar.component.html
View File

@ -32,74 +32,54 @@
</a>
</div>
</nav>
</div>
<div *ngIf="specialAnnouncementContent" class="uk-hidden@m" [innerHTML]="specialAnnouncementContent">
</div>
<div id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+offCanvasFlip:'')" mode="slide" overlay=""
<div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
class="uk-offcanvas uk-hidden@m"
style="z-index:9999;">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
<div class="uk-child-width-1-1 uk-grid" uk-grid="">
<div>
<div class="uk-panel" id="module-0">
<div class="uk-padding">
<ul class="uk-nav uk-nav-default">
<!-- <li *ngIf="(['explore','connect','monitor','provide','develop']).indexOf(portal)!=-1"
class="uk-nav-header uk-parent">
Dashboards
<ul class="uk-nav-sub">
<li *ngIf="portal!='explore'"><a
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development' ?'beta.':'')+'explore.openaire.eu'"
target="_blank" class="uk-heading-bullet explore-heading-bullet">EXPLORE</a></li>
<li *ngIf="portal!='provide'"><a
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'provide.openaire.eu'"
target="_blank" class="uk-heading-bullet provide-heading-bullet">PROVIDE</a></li>
<li *ngIf="portal!='connect'"><a
[href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'connect.openaire.eu'"
target="_blank" class="uk-heading-bullet connect-heading-bullet">CONNECT</a></li>
<li *ngIf="portal!='monitor'"><a [href]="'https://'+(properties.environment =='beta' ||
properties.environment =='development'?'beta.':'')+'monitor.openaire.eu'" target="_blank"
class="uk-heading-bullet monitor-heading-bullet">MONITOR</a></li>
<li *ngIf="portal!='develop'"><a href="https://develop.openaire.eu" target="_blank"
class="uk-heading-bullet develop-heading-bullet">DEVELOP</a></li>
</ul>
</li>-->
<ng-container *ngIf="!onlyTop">
<ng-container *ngFor="let menu of menuItems">
<li class="uk-nav-header uk-parent " *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLinkActive="uk-link" routerLink="/">Home</a>
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLinkActive="uk-link" routerLink="/" (click)="closeCanvas(canvas)">Home</a>
</li>
<li class="uk-nav-header uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
<li [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>
[routerLinkActiveOptions]="{exact: true}" (click)="closeCanvas(canvas)"
[queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
routerLinkActive="uk-link" href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{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>
routerLinkActive="uk-link" href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)"
target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{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))" (click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a>
<ul class="uk-nav-sub">
<ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenuItem(submenu)" *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)"
[class.uk-parent]="submenu.items && submenu.items.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>
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link" (click)="closeCanvas(canvas)"
routerLink="{{submenu.route}}" [queryParams]=submenu.params
[fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link"
href="{{submenu.url}}" target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
href="{{submenu.url}}" (click)="closeCanvas(canvas)"
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items">
<li>
<a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link"
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0" routerLinkActive="uk-link"
href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
[fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
routerLinkActive="uk-link" href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)"
target="_blank">{{subsubmenu.title}}</a>
</li>
</ng-container>
</ul>
@ -107,20 +87,16 @@
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
class="uk-nav-header">{{submenu.title}}</li>
</ng-container>
</ul>
</li>
</ng-container>
</ng-container>
</ul>
<ng-container *ngIf="userMenu">
<user-mini [user]="user" mobileView=true
<user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
</ng-container>
</ul>
</div>
</div>
</div>
</div>
</div>
@ -161,12 +137,10 @@
</div>
</div>
</div>-->
<div *ngIf="specialAnnouncementContent" class="uk-visible@m" [innerHTML]="specialAnnouncementContent">
</div>
<div class="tm-header uk-visible@m tm-header-transparent" uk-header="">
<div id="stickyNavbar" [class]="'uk-navbar-container uk-sticky uk-navbar-transparent '+portal+'-menu'" uk-sticky="show-on-up: true"
media="768" cls-active="uk-active uk-navbar-sticky"
<div *ngIf="specialAnnouncementContent" class="uk-visible@m" [innerHTML]="specialAnnouncementContent"></div>
<div class="uk-visible@m">
<div [class]="'uk-sticky uk-navbar-transparent '+portal+'-menu'"
uk-sticky="show-on-up: true" media="768" cls-active="uk-active uk-navbar-sticky"
[attr.animation]="(header.stickyAnimation != false ?'uk-animation-slide-top':null)"
top=".tm-header + [class*=&quot;uk-section&quot;]" cls-inactive="uk-navbar-transparent" style="">
<div
@ -175,25 +149,39 @@
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 102px; width: 102px">
</div>
<div class="uk-container uk-container-expand">
<nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;center&quot;}">
<nav class="uk-navbar uk-navbar-container" uk-navbar>
<div *ngIf="showLogo && header.position== 'left'" class="uk-navbar-left uk-visible@l">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</div>
<div *ngIf="showLogo && header.position == 'left'" class="uk-navbar-left uk-visible@m uk-hidden@l">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</div>
<div *ngIf="showLogo && header.position == 'center' && header.menuPosition != 'center' " class="uk-margin-auto uk-visible@m">
<div *ngIf="showLogo && header.position == 'center' && header.menuPosition != 'center' "
class="uk-margin-auto uk-visible@m">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</div>
<!-- <div *ngIf="!onlyTop" class="uk-navbar-center"> -->
<div *ngIf="!onlyTop" [class.uk-navbar-right]="header.menuPosition != 'center'"
[class.uk-navbar-center]="header.menuPosition == 'center'">
<ng-container *ngIf="!onlyTop">
<div *ngIf="showLogo && header.position == 'center' && header.menuPosition == 'center' "
class="uk-margin-large-right uk-visible@m">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</div>
<ul [class]="'uk-navbar-nav'+(!userMenu?' uk-margin-right':'')">
<div class="uk-navbar-center">
<ng-container *ngIf="header.menuPosition === 'center'">
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
</ng-container>
</div>
<div class="uk-navbar-right">
<ng-container *ngIf="header.menuPosition === 'right'">
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
</ng-container>
<user-mini *ngIf="userMenu" [user]="user" [dark]="dark"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain></user-mini>
<ng-content select="[after-login]"></ng-content>
</div>
<ng-template #mainMenu>
<ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
<li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLinkActive="uk-link" routerLink="/">Home</a>
</li>
@ -205,12 +193,14 @@
routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"
[queryParams]="menu.rootItem.params"
[fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" routerLinkActive="uk-link"
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}" aria-expanded="false">{{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
routerLinkActive="uk-link"
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
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>
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="">
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
<ul class="uk-nav uk-navbar-dropdown-nav">
@ -222,15 +212,18 @@
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"
routerLink="{{submenu.route}}" [queryParams]="submenu.params"
[fragment]="submenu.fragment">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link"
href="{{submenu.url}}" target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
routerLinkActive="uk-link"
href="{{submenu.url}}"
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
<ng-container *ngFor="let subsubmenu of submenu.items">
<li>
<a *ngIf="subsubmenu.route.length > 0" routerLinkActive="uk-link"
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0" routerLinkActive="uk-link"
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
routerLinkActive="uk-link"
href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
</li>
</ng-container>
@ -251,7 +244,8 @@
<ng-container *ngFor="let menu of customMenuItems">
<li class="uk-parent">
<!-- INTERNAL ROOT-->
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)" routerLinkActive="uk-link"
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
routerLinkActive="uk-link"
routerLink="{{menu.route}}"
[queryParams]="menu.params"
[fragment]="menu.fragment">
@ -275,7 +269,8 @@
<ng-container *ngFor="let submenu of menu.items">
<li>
<!-- INTERNAL CHILD -->
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)" routerLinkActive="uk-link"
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
routerLinkActive="uk-link"
routerLink="{{submenu.route}}"
[queryParams]="submenu.params"
[fragment]="submenu.fragment"
@ -297,27 +292,12 @@
</li>
</ng-container>
</ng-container>
</ul>
<!-- </div> -->
<!-- <div *ngIf="userMenu" class="uk-navbar-right"> -->
<!-- <div *ngIf="userMenu" class="uk-navbar-right"> -->
<user-mini *ngIf="userMenu" [user]="user" [dark]="dark"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain></user-mini>
</div>
</ng-template>
</ng-container>
</nav>
</div>
</div>
</div>
<div class="first_page_section uk-section-default uk-section uk-padding-remove-vertical">
<div
class="first_page_banner_headline uk-grid-collapse uk-flex-middle uk-margin-remove-vertical uk-grid uk-grid-stack"
uk-grid="">
</div>
</div>
</div>
<ng-template #header_template let-mobile="mobile">
<a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="header.position !== 'left'"

15
sharedComponents/navigationBar.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from '../login/utils/helper.class';
import {ConfigurationService} from '../utils/configuration/configuration.service';
@ -7,6 +7,8 @@ import {EnvProperties} from '../utils/properties/env-properties';
import {Subscription} from 'rxjs';
import {HelpContentService} from '../services/help-content.service';
declare var UIkit;
export interface Header {
route?: string,
url?: string,
@ -69,6 +71,10 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
}
}
closeCanvas(element) {
UIkit.offcanvas(element).hide();
}
initialize() {
if ((['provide', 'develop']).indexOf(this.portal) != -1) {
this.header = {
@ -88,13 +94,13 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
this.subs.push(this.config.communityInformationState.subscribe(data => {
if (data) {
if (data['entities']) {
for (var i = 0; i < data['entities'].length; i++) {
for (let i = 0; i < data['entities'].length; i++) {
this.showEntity['' + data['entities'][i]['pid'] + ''] = data['entities'][i]['isEnabled'];
}
}
if (data['pages']) {
for (var i = 0; i < data['pages'].length; i++) {
for (let i = 0; i < data['pages'].length; i++) {
this.showPage[data['pages'][i]['route']] = data['pages'][i]['isEnabled'];
}
@ -117,7 +123,6 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
}
}
isEnabled(required, enabled) {
if (!required) {
return true;
@ -143,7 +148,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
count--;
}
}
return (count > 0) ? true : false;
return (count > 0);
}
private handleError(message: string, error) {