[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

sharedComponents/bottom.component.html

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

sharedComponents/bottom.component.ts

@@ -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[] = [];

sharedComponents/menu.ts

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

sharedComponents/navigationBar.component.html

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

utils/full-page-slider/full-page-slider.component.css

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

utils/full-page-slider/full-page-slider.component.ts

@@ -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.state.next(this.initSlide);
-    this.setSlides(this.state);
+    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)) {
+      if (event.deltaY > 0 && (this.state.value < this.slides.length)) {
-        this.state++;
+        this.state.next(+this.state.value + 1);
-        this.setSlides(this.state);
+        this.setSlides(this.state.value);
         setTimeout(() => {
           this.animate = false;
         }, 500);
-      } else if (event.deltaY < 0 && (this.state !== 1)) {
+      } else if (event.deltaY < 0 && (this.state.value !== 1)) {
-        this.state--;
+        this.state.next(this.state.value - 1);
-        this.setSlides(this.state);
+        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.state.next(index);
-      this.setSlides(this.state);
+      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();
+  }
 }

utils/full-page-slider/full-page-slider.module.ts

@@ -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],
 })

utils/full-page-slider/slide.component.ts

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

utils/iframe.component.ts

@@ -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 = {
+      this.style = {};
-        "width.px": this.width,
+      this.style[width] = this.width;
-        "height.px": this.height
+      this.style[height] = this.height;
-      };
     } else if(this.height) {
-      this.style = {
+      this.style = {};
-        "height.px": this.height
+      this.style[height] = this.height;
-      };
     }
   }
 }

utils/properties/env-properties.ts

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