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

[Library | Trunk]: 1. Add fragment on menu items. 2. Add footer option for fp-slider. 3. Add sushilite porperty 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59388 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-09-15 13:53:18 +00:00
parent 78fed00f1d
commit c87f16dac3
10 changed files with 94 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
sharedComponents/bottom.component.html
View File

@ -1,3 +1,30 @@
<ng-container *ngIf="shortView;else longView">
<div class="uk-padding uk-flex uk-flex-middle">
<div *ngIf="showCommision" class="uk-width-1-2">
<div class="uk-flex uk-flex-middle" >
<div>
<img style="margin-right: 8px; float: left;"
[src]="assetsPath + 'common/commission.jpg'"
alt="flag black white low" width="50" height="33">
</div>
<div class="uk-margin-left">
<div *ngIf="!grantAdvance" class="">
<span style="font-size: 8pt; line-height: 0.7!important;" [innerHtml] = "grantConenctText"></span>
</div>
<div *ngIf="grantAdvance" class="">
<span style="font-size: 8pt; line-height: 0.7!important;" [innerHtml] = "grantAdvanceText"></span>
</div>
</div>
</div>
</div>
<div *ngIf="showOpenaire" class="uk-text-right uk-width-1-2">
<img [src]="assetsPath + 'common/Logo_Horizontal_'+(darkBackground?'white':'dark')+'_small.png'"
data-width="126"
data-height="30" class="el-image" alt="OpenAIRE">
</div>
</div>
</ng-container>
<ng-template #longView>
<div [class]="sectionClass + ' uk-section uk-section-small uk-padding-remove-bottom'">
<div [class]="'uk-container ' +(centered?'uk-container-small':'uk-container-expand') ">
<!-- <div class="uk-container uk-container-expand uk-margin-small">-->
@ -176,14 +203,6 @@
</div>
<!--<div [class]="sectionClass + ' uk-section uk-section-xsmall'">
<div class="uk-container">
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
<div class="uk-width-expand@m">
</div>
</div>
</div>
</div>-->
<div [class]="sectionClass + ' uk-section uk-section-xsmall'">
<div class="uk-container uk-container-expand">
<div class="uk-grid-margin uk-grid" uk-grid="">
@ -240,3 +259,4 @@
</div>
</div>
</div>
</ng-template>

4
sharedComponents/bottom.component.ts
View File

@ -5,6 +5,7 @@ import{MenuItem} from './menu';
import { ConfigurationService } from '../utils/configuration/configuration.service';
import {EnvProperties} from "../utils/properties/env-properties";
import {Subscription} from "rxjs";
import {properties} from '../../../environments/environment';
@Component({
selector: 'bottom',
@ -25,9 +26,10 @@ showPage ={};
@Input() grantAdvance:boolean = true;
grantAdvanceText = "OpenAIRE-Advance receives funding from the European Union's Horizon 2020 Research and Innovation programme under Grant Agreement No. 777541.";
grantConenctText = "OpenAIRE-Connect receives funding from the European Union's Horizon 2020 Research and Innovation programme under grant agreement No. 731011 and No. 777541.";
@Input() properties:EnvProperties;
@Input() properties:EnvProperties = properties;
@Input() darkBackground:boolean=true;
@Input() centered:boolean=false;
@Input() shortView: boolean = false;
sectionClass= "uk-section-primary";
subs: Subscription[] = [];

4
sharedComponents/menu.ts
View File

@ -7,12 +7,13 @@ export class MenuItem {
entitiesRequired: string[] = []; // openaire entities used in page "publication, dataset, organization, software, project, datasource"
routeRequired: string[] = []; // the routes that if aren't enable the menu item doesn't make sense
params: any = {};
fragment: string;
markAsActive: boolean;
items: MenuItem[] = [];
icon: string;
open: boolean;
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null) {
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null) {
this.id = id;
this.title = title;
this.url = url;
@ -24,6 +25,7 @@ export class MenuItem {
this.markAsActive = true;
this.items = [];
this.icon = icon;
this.fragment = fragment;
}
public setMarkAsActive(showActive: boolean) {

8
sharedComponents/navigationBar.component.html
View File

@ -87,7 +87,7 @@
<!--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}}"
[queryParams]=menu.rootItem.params
[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"
routerLinkActive="uk-link" href="{{menu.rootItem.url}}" target="_blank"
@ -99,7 +99,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)">
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"
routerLink="{{submenu.route}}" [queryParams]=submenu.params
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 && submenu.url.length > 0" routerLinkActive="uk-link"
href="{{submenu.url}}" target="_blank"
@ -264,7 +264,7 @@
<!--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 )"
routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"
[queryParams]=menu.rootItem.params> {{menu.rootItem.title}}</a>
[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="_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)) "
@ -279,7 +279,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)">
<a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"
routerLink="{{submenu.route}}" [queryParams]=submenu.params>{{submenu.title}}</a>
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="_blank">{{submenu.title}}</a>
</li>

17
utils/full-page-slider/full-page-slider.component.css
View File

@ -1,15 +1,24 @@
.top-bar {
position: fixed;
top: 0;
left: 0;
left: 121px;
height: 100px;
width: 100%;
width: calc(100% - 121px);
z-index: 1;
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 121px;
height: 100px;
width: calc(100% - 121px);
z-index: 1;
}
section {
position: fixed;
top:10%;
top: 100px;
left: 120px;
height: calc(100% - 100px);
width: calc(100% - 120px);
@ -23,7 +32,7 @@ section {
width: 120px;
border-right: 1px solid #4687E6;
background-color: white;
z-index: 2;
z-index: 1;
}
.menu .logo {

45
utils/full-page-slider/full-page-slider.component.ts
View File

@ -1,12 +1,13 @@
import {AfterContentInit, Component, ContentChildren, Input, OnInit, QueryList} from "@angular/core";
import {SlideComponent} from "./slide.component";
import {BehaviorSubject, Observable} from 'rxjs';
@Component({
selector: 'fp-slider',
template: `
<div class="menu">
<img class="logo" *ngIf="logoURL" [src]="logoURL">
<a *ngIf="state > 1" class="previous" (click)="onClick(state - 1)">
<a *ngIf="stateValue > 1" class="previous" (click)="onClick(stateValue - 1)">
<svg xmlns="http://www.w3.org/2000/svg" width="17.155" height="17.155" viewBox="0 0 17.155 17.155">
<g id="Group_3053" data-name="Group 3053" transform="translate(0)">
<path id="arrow-down-left2"
@ -17,12 +18,12 @@ import {SlideComponent} from "./slide.component";
</a>
<nav>
<ul>
<li *ngFor="let slide of slides.toArray();let i=index" [class.uk-active]="i === (state - 1)">
<li *ngFor="let slide of slides.toArray();let i=index" [class.uk-active]="i === (stateValue - 1)">
<a (click)="onClick(i + 1)"></a>
</li>
</ul>
</nav>
<a *ngIf="state < slides.length" class="next" (click)="onClick(state + 1)">
<a *ngIf="stateValue < slides.length" class="next" (click)="onClick(stateValue + 1)">
<svg xmlns="http://www.w3.org/2000/svg" width="17.155" height="17.155" viewBox="0 0 17.155 17.155">
<g id="Group_2442" data-name="Group 2442" transform="translate(-1221 -675)">
<path id="arrow-down-left2"
@ -35,7 +36,11 @@ import {SlideComponent} from "./slide.component";
<div [ngClass]="topBar" class="top-bar"></div>
<section (wheel)="onWheel($event)">
<ng-content></ng-content>
</section>`,
</section>
<bottom *ngIf="hasFooter && state.value === slides.length" class="bottom-bar uk-animation-slide-bottom"
[shortView]="true" [ngClass]="footerClass"
[showOpenaire]="true" [darkBackground]="false"></bottom>
`,
styleUrls: ['full-page-slider.component.css']
})
export class FullPageSliderComponent implements AfterContentInit {
@ -46,12 +51,14 @@ export class FullPageSliderComponent implements AfterContentInit {
@Input()
public logoURL;
@Input() topBar: string = null;
@Input() hasFooter: boolean = null;
@Input() footerClass: string;
public animate: boolean = false;
public state = 0;
public state: BehaviorSubject<number> = new BehaviorSubject<number>(0);
ngAfterContentInit() {
this.state = this.initSlide;
this.setSlides(this.state);
this.state.next(this.initSlide);
this.setSlides(this.state.value);
}
setSlides(state = 1) {
@ -64,15 +71,15 @@ export class FullPageSliderComponent implements AfterContentInit {
onWheel(event) {
if (!this.animate) {
this.animate = true;
if (event.deltaY > 0 && (this.state < this.slides.length)) {
this.state++;
this.setSlides(this.state);
if (event.deltaY > 0 && (this.state.value < this.slides.length)) {
this.state.next(+this.state.value + 1);
this.setSlides(this.state.value);
setTimeout(() => {
this.animate = false;
}, 500);
} else if (event.deltaY < 0 && (this.state !== 1)) {
this.state--;
this.setSlides(this.state);
} else if (event.deltaY < 0 && (this.state.value !== 1)) {
this.state.next(this.state.value - 1);
this.setSlides(this.state.value);
setTimeout(() => {
this.animate = false;
}, 500);
@ -85,11 +92,19 @@ export class FullPageSliderComponent implements AfterContentInit {
public onClick(index: number) {
if (!this.animate) {
this.animate = true;
this.state = index;
this.setSlides(this.state);
this.state.next(index);
this.setSlides(this.state.value);
setTimeout(() => {
this.animate = false;
}, 500);
}
}
public get stateValue() {
return this.state.value;
}
public get stateAsObservable(): Observable<number> {
return this.state.asObservable();
}
}

3
utils/full-page-slider/full-page-slider.module.ts
View File

@ -2,9 +2,10 @@ import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {FullPageSliderComponent} from "./full-page-slider.component";
import {SlideComponent} from "./slide.component";
import {BottomModule} from '../../sharedComponents/bottom.module';
@NgModule({
imports: [CommonModule],
imports: [CommonModule, BottomModule],
declarations: [FullPageSliderComponent, SlideComponent],
exports: [FullPageSliderComponent, SlideComponent],
})

2
utils/full-page-slider/slide.component.ts
View File

@ -1,4 +1,4 @@
import {Component} from "@angular/core";
import {Component, Input} from '@angular/core';
import {animation} from "./animation";
import {transition, trigger} from "@angular/animations";

17
utils/iframe.component.ts
View File

@ -5,7 +5,7 @@ import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
selector: 'i-frame',
template: `
<div *ngIf="!style" class="iframeContainer uk-height-large">
<iframe [src]="safeUrl"></iframe>
<iframe allowtransparency="true" [src]="safeUrl"></iframe>
</div>
<div *ngIf="style" class="iframeContainer" [ngStyle]="style">
<iframe [src]="safeUrl"></iframe>
@ -17,21 +17,22 @@ export class IFrameComponent {
@Input() url ;
@Input() width: number;
@Input() height: number;
@Input() unit: string = 'px';
public style: any;
constructor(private sanitizer: DomSanitizer) {
}
ngOnInit() {
this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
let width = 'width.' + this.unit;
let height = 'height.' + this.unit;
if(this.width && this.height) {
this.style = {
"width.px": this.width,
"height.px": this.height
};
this.style = {};
this.style[width] = this.width;
this.style[height] = this.height;
} else if(this.height) {
this.style = {
"height.px": this.height
};
this.style = {};
this.style[height] = this.height;
}
}
}

1
utils/properties/env-properties.ts
View File

@ -120,4 +120,5 @@ export interface EnvProperties {
altMetricsAPIURL?: string;
b2noteAPIURL?: string;
adminPortalURL?: string;
sushiliteURL?: string;
}