Project

General

Profile

« Previous | Next » 

Revision 59388

Added by Konstantinos Triantafyllou about 4 years ago

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

View differences:

modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/iframe.component.ts
5 5 
  selector: 'i-frame',
6 6 
  template: `
7 7 
    <div  *ngIf="!style" class="iframeContainer uk-height-large">
8 
      <iframe  [src]="safeUrl"></iframe>
8 
      <iframe allowtransparency="true"   [src]="safeUrl"></iframe>
9 9 
    </div>
10 10 
    <div *ngIf="style"  class="iframeContainer" [ngStyle]="style">
11 11 
      <iframe [src]="safeUrl"></iframe>
......
17 17 
  @Input() url ;
18 18 
  @Input() width: number;
19 19 
  @Input() height: number;
20 
  @Input() unit: string = 'px';
20 21 
  public style: any;
21 22
22 23 
  constructor(private sanitizer: DomSanitizer) {
23 24 
  }
24 25 
  ngOnInit() {
25 26 
    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
27 
    let width = 'width.' + this.unit;
28 
    let height = 'height.' + this.unit;
26 29 
    if(this.width && this.height) {
27 
      this.style = {
28 
        "width.px": this.width,
29 
        "height.px": this.height
30 
      };
30 
      this.style = {};
31 
      this.style[width] = this.width;
32 
      this.style[height] = this.height;
31 33 
    } else if(this.height) {
32 
      this.style = {
33 
        "height.px": this.height
34 
      };
34 
      this.style = {};
35 
      this.style[height] = this.height;
35 36 
    }
36 37 
  }
37 38 
}
modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/full-page-slider/full-page-slider.component.ts
1 1 
import {AfterContentInit, Component, ContentChildren, Input, OnInit, QueryList} from "@angular/core";
2 2 
import {SlideComponent} from "./slide.component";
3 
import {BehaviorSubject, Observable} from 'rxjs';
3 4 

  		




  4
  5
  
    
@Component({


  		




  5
  6
  
    
  selector: 'fp-slider',


  		




  6
  7
  
    
  template: `


  		




  7
  8
  
    
    <div class="menu">


  		




  8
  9
  
    
      <img class="logo" *ngIf="logoURL" [src]="logoURL">


  		




  9
  
  
    
      <a *ngIf="state > 1" class="previous" (click)="onClick(state - 1)">


  		




  
  10
  
    
      <a *ngIf="stateValue > 1" class="previous" (click)="onClick(stateValue - 1)">


  		




  10
  11
  
    
        <svg xmlns="http://www.w3.org/2000/svg" width="17.155" height="17.155" viewBox="0 0 17.155 17.155">


  		




  11
  12
  
    
          <g id="Group_3053" data-name="Group 3053" transform="translate(0)">


  		




  12
  13
  
    
            <path id="arrow-down-left2"


  		




  ......




  17
  18
  
    
      </a>


  		




  18
  19
  
    
      <nav>


  		




  19
  20
  
    
        <ul>


  		




  20
  
  
    
          <li *ngFor="let slide of slides.toArray();let i=index" [class.uk-active]="i === (state - 1)">


  		




  
  21
  
    
          <li *ngFor="let slide of slides.toArray();let i=index" [class.uk-active]="i === (stateValue - 1)">


  		




  21
  22
  
    
            <a (click)="onClick(i + 1)"></a>


  		




  22
  23
  
    
          </li>


  		




  23
  24
  
    
        </ul>


  		




  24
  25
  
    
      </nav>


  		




  25
  
  
    
      <a *ngIf="state < slides.length" class="next" (click)="onClick(state + 1)">


  		




  
  26
  
    
      <a *ngIf="stateValue < slides.length" class="next" (click)="onClick(stateValue + 1)">


  		




  26
  27
  
    
        <svg xmlns="http://www.w3.org/2000/svg" width="17.155" height="17.155" viewBox="0 0 17.155 17.155">


  		




  27
  28
  
    
          <g id="Group_2442" data-name="Group 2442" transform="translate(-1221 -675)">


  		




  28
  29
  
    
            <path id="arrow-down-left2"


  		




  ......




  35
  36
  
    
    <div [ngClass]="topBar" class="top-bar"></div>


  		




  36
  37
  
    
    <section (wheel)="onWheel($event)">


  		




  37
  38
  
    
      <ng-content></ng-content>


  		




  38
  
  
    
    </section>`,


  		




  
  39
  
    
    </section>


  		




  
  40
  
    
    <bottom *ngIf="hasFooter && state.value === slides.length" class="bottom-bar uk-animation-slide-bottom"


  		




  
  41
  
    
             [shortView]="true" [ngClass]="footerClass"


  		




  
  42
  
    
             [showOpenaire]="true" [darkBackground]="false"></bottom>


  		




  
  43
  
    
  `,


  		




  39
  44
  
    
  styleUrls: ['full-page-slider.component.css']


  		




  40
  45
  
    
})


  		




  41
  46
  
    
export class FullPageSliderComponent implements AfterContentInit {


  		




  ......




  46
  51
  
    
  @Input()


  		




  47
  52
  
    
  public logoURL;


  		




  48
  53
  
    
  @Input() topBar: string = null;


  		




  
  54
  
    
  @Input() hasFooter: boolean = null;


  		




  
  55
  
    
  @Input() footerClass: string;


  		




  49
  56
  
    
  public animate: boolean = false;


  		




  50
  
  
    
  public state = 0;


  		




  
  57
  
    
  public state: BehaviorSubject<number> = new BehaviorSubject<number>(0);


  		




  51
  58
  
    
  


  		




  52
  59
  
    
  ngAfterContentInit() {


  		




  53
  
  
    
    this.state = this.initSlide;


  		




  54
  
  
    
    this.setSlides(this.state);


  		




  
  60
  
    
    this.state.next(this.initSlide);


  		




  
  61
  
    
    this.setSlides(this.state.value);


  		




  55
  62
  
    
  }


  		




  56
  63
  
    
  


  		




  57
  64
  
    
  setSlides(state = 1) {


  		




  ......




  64
  71
  
    
  onWheel(event) {


  		




  65
  72
  
    
    if (!this.animate) {


  		




  66
  73
  
    
      this.animate = true;


  		




  67
  
  
    
      if (event.deltaY > 0 && (this.state < this.slides.length)) {


  		




  68
  
  
    
        this.state++;


  		




  69
  
  
    
        this.setSlides(this.state);


  		




  
  74
  
    
      if (event.deltaY > 0 && (this.state.value < this.slides.length)) {


  		




  
  75
  
    
        this.state.next(+this.state.value + 1);


  		




  
  76
  
    
        this.setSlides(this.state.value);


  		




  70
  77
  
    
        setTimeout(() => {


  		




  71
  78
  
    
          this.animate = false;


  		




  72
  79
  
    
        }, 500);


  		




  73
  
  
    
      } else if (event.deltaY < 0 && (this.state !== 1)) {


  		




  74
  
  
    
        this.state--;


  		




  75
  
  
    
        this.setSlides(this.state);


  		




  
  80
  
    
      } else if (event.deltaY < 0 && (this.state.value !== 1)) {


  		




  
  81
  
    
        this.state.next(this.state.value - 1);


  		




  
  82
  
    
        this.setSlides(this.state.value);


  		




  76
  83
  
    
        setTimeout(() => {


  		




  77
  84
  
    
          this.animate = false;


  		




  78
  85
  
    
        }, 500);


  		




  ......




  85
  92
  
    
  public onClick(index: number) {


  		




  86
  93
  
    
    if (!this.animate) {


  		




  87
  94
  
    
      this.animate = true;


  		




  88
  
  
    
      this.state = index;


  		




  89
  
  
    
      this.setSlides(this.state);


  		




  
  95
  
    
      this.state.next(index);


  		




  
  96
  
    
      this.setSlides(this.state.value);


  		




  90
  97
  
    
      setTimeout(() => {


  		




  91
  98
  
    
        this.animate = false;


  		




  92
  99
  
    
      }, 500);


  		




  93
  100
  
    
    }


  		




  94
  101
  
    
  }


  		




  
  102
  
    
  


  		




  
  103
  
    
  public get stateValue() {


  		




  
  104
  
    
    return this.state.value;


  		




  
  105
  
    
  }


  		




  
  106
  
    
  


  		




  
  107
  
    
  public get stateAsObservable(): Observable<number> {


  		




  
  108
  
    
    return this.state.asObservable();


  		




  
  109
  
    
  }


  		




  95
  110
  
    
}


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/full-page-slider/full-page-slider.component.css
    
  





  1
  1
  
    
.top-bar {


  		




  2
  2
  
    
  position: fixed;


  		




  3
  3
  
    
  top: 0;


  		




  4
  
  
    
  left: 0;


  		




  
  4
  
    
  left: 121px;


  		




  5
  5
  
    
  height: 100px;


  		




  6
  
  
    
  width: 100%;


  		




  
  6
  
    
  width: calc(100% - 121px);


  		




  7
  7
  
    
  z-index: 1;


  		




  8
  8
  
    
}


  		




  9
  9
  
    

  		




  
  10
  
    
.bottom-bar {


  		




  
  11
  
    
  position: fixed;


  		




  
  12
  
    
  bottom: 0;


  		




  
  13
  
    
  left: 121px;


  		




  
  14
  
    
  height: 100px;


  		




  
  15
  
    
  width: calc(100% - 121px);


  		




  
  16
  
    
  z-index: 1;


  		




  
  17
  
    
}


  		




  
  18
  
    

  		




  10
  19
  
    
section {


  		




  11
  20
  
    
  position: fixed;


  		




  12
  
  
    
  top:10%;


  		




  
  21
  
    
  top: 100px;


  		




  13
  22
  
    
  left: 120px;


  		




  14
  23
  
    
  height: calc(100% - 100px);


  		




  15
  24
  
    
  width: calc(100% - 120px);


  		




  ......




  23
  32
  
    
  width: 120px;


  		




  24
  33
  
    
  border-right: 1px solid #4687E6;


  		




  25
  34
  
    
  background-color: white;


  		




  26
  
  
    
  z-index: 2;


  		




  
  35
  
    
  z-index: 1;


  		




  27
  36
  
    
}


  		




  28
  37
  
    

  		




  29
  38
  
    
.menu .logo {


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/full-page-slider/full-page-slider.module.ts
    
  





  2
  2
  
    
import {CommonModule} from "@angular/common";


  		




  3
  3
  
    
import {FullPageSliderComponent} from "./full-page-slider.component";


  		




  4
  4
  
    
import {SlideComponent} from "./slide.component";


  		




  
  5
  
    
import {BottomModule} from '../../sharedComponents/bottom.module';


  		




  5
  6
  
    

  		




  6
  7
  
    
@NgModule({


  		




  7
  
  
    
  imports: [CommonModule],


  		




  
  8
  
    
  imports: [CommonModule, BottomModule],


  		




  8
  9
  
    
  declarations: [FullPageSliderComponent, SlideComponent],


  		




  9
  10
  
    
  exports: [FullPageSliderComponent, SlideComponent],


  		




  10
  11
  
    
})


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/full-page-slider/slide.component.ts
    
  





  1
  
  
    
import {Component} from "@angular/core";


  		




  
  1
  
    
import {Component, Input} from '@angular/core';


  		




  2
  2
  
    
import {animation} from "./animation";


  		




  3
  3
  
    
import {transition, trigger} from "@angular/animations";


  		




  4
  4
  
    

  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/properties/env-properties.ts
    
  





  120
  120
  
    
  altMetricsAPIURL?: string;


  		




  121
  121
  
    
  b2noteAPIURL?: string;


  		




  122
  122
  
    
  adminPortalURL?: string;


  		




  
  123
  
    
  sushiliteURL?: string;


  		




  123
  124
  
    
}


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/navigationBar.component.html
    
  





  87
  87
  
    
                      <!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"  [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->


  		




  88
  88
  
    
                      <a *ngIf="menu.rootItem.route.length > 0 && isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired "


  		




  89
  89
  
    
                         routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"


  		




  90
  
  
    
                         [queryParams]=menu.rootItem.params


  		




  
  90
  
    
                         [queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment"


  		




  91
  91
  
    
                         class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a>


  		




  92
  92
  
    
                      <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"


  		




  93
  93
  
    
                         routerLinkActive="uk-link" href="{{menu.rootItem.url}}" target="_blank"


  		




  ......




  99
  99
  
    
                        <ng-container *ngFor="let submenu of menu.items">


  		




  100
  100
  
    
                          <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)  && (submenu.route.length > 0 || submenu.url.length > 0)">


  		




  101
  101
  
    
                            <a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"


  		




  102
  
  
    
                               routerLink="{{submenu.route}}" [queryParams]=submenu.params


  		




  
  102
  
    
                               routerLink="{{submenu.route}}" [queryParams]=submenu.params [fragment]="submenu.fragment"


  		




  103
  103
  
    
                               class="uk-offcanvas-close custom-offcanvas-close">{{submenu.title}}</a>


  		




  104
  104
  
    
                            <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link"


  		




  105
  105
  
    
                               href="{{submenu.url}}" target="_blank"


  		




  ......




  264
  264
  
    
                  <!--a routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"   [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->


  		




  265
  265
  
    
                  <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired )"


  		




  266
  266
  
    
                     routerLinkActive="uk-link" routerLink="{{menu.rootItem.route}}"


  		




  267
  
  
    
                     [queryParams]=menu.rootItem.params> {{menu.rootItem.title}}</a>


  		




  
  267
  
    
                     [queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment"> {{menu.rootItem.title}}</a>


  		




  268
  268
  
    
                  <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" routerLinkActive="uk-link"


  		




  269
  269
  
    
                     href="{{menu.rootItem.url}}" target="_blank" aria-expanded="false">{{menu.rootItem.title}}</a>


  		




  270
  270
  
    
                  <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
  279
  
    
                          <ng-container *ngFor="let submenu of menu.items">


  		




  280
  280
  
    
                            <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)">


  		




  281
  281
  
    
                              <a *ngIf="submenu.route.length > 0" routerLinkActive="uk-link"


  		




  282
  
  
    
                                 routerLink="{{submenu.route}}" [queryParams]=submenu.params>{{submenu.title}}</a>


  		




  
  282
  
    
                                 routerLink="{{submenu.route}}" [queryParams]="submenu.params" [fragment]="submenu.fragment">{{submenu.title}}</a>


  		




  283
  283
  
    
                              <a *ngIf="submenu.route.length == 0 && submenu.url.length > 0" routerLinkActive="uk-link"


  		




  284
  284
  
    
                                 href="{{submenu.url}}" target="_blank">{{submenu.title}}</a>


  		




  285
  285
  
    
                            </li>


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/menu.ts
    
  





  7
  7
  
    
  entitiesRequired: string[] = []; // openaire entities used in page "publication, dataset, organization, software, project, datasource"


  		




  8
  8
  
    
  routeRequired: string[] = []; // the routes that if aren't enable the menu item doesn't make sense


  		




  9
  9
  
    
  params: any = {};


  		




  
  10
  
    
  fragment: string;


  		




  10
  11
  
    
  markAsActive: boolean;


  		




  11
  12
  
    
  items: MenuItem[] = [];


  		




  12
  13
  
    
  icon: string;


  		




  13
  14
  
    
  open: boolean;


  		




  14
  15
  
    

  		




  15
  
  
    
  constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null) {


  		




  
  16
  
    
  constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null) {


  		




  16
  17
  
    
    this.id = id;


  		




  17
  18
  
    
    this.title = title;


  		




  18
  19
  
    
    this.url = url;


  		




  ......




  24
  25
  
    
    this.markAsActive = true;


  		




  25
  26
  
    
    this.items = [];


  		




  26
  27
  
    
    this.icon = icon;


  		




  
  28
  
    
    this.fragment = fragment;


  		




  27
  29
  
    
  }


  		




  28
  30
  
    

  		




  29
  31
  
    
  public setMarkAsActive(showActive: boolean) {


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/bottom.component.ts
    
  





  5
  5
  
    
import { ConfigurationService } from '../utils/configuration/configuration.service';


  		




  6
  6
  
    
import {EnvProperties} from "../utils/properties/env-properties";


  		




  7
  7
  
    
import {Subscription} from "rxjs";


  		




  
  8
  
    
import {properties} from '../../../environments/environment';


  		




  8
  9
  
    

  		




  9
  10
  
    
@Component({


  		




  10
  11
  
    
  selector: 'bottom',


  		




  ......




  25
  26
  
    
@Input() grantAdvance:boolean = true;


  		




  26
  27
  
    
grantAdvanceText = "OpenAIRE-Advance receives funding from the European Union's Horizon 2020 Research and Innovation programme under Grant Agreement No. 777541.";


  		




  27
  28
  
    
grantConenctText = "OpenAIRE-Connect receives funding from the European Union's Horizon 2020 Research and Innovation programme under grant agreement No. 731011 and  No. 777541.";


  		




  28
  
  
    
@Input()  properties:EnvProperties;


  		




  
  29
  
    
@Input()  properties:EnvProperties = properties;


  		




  29
  30
  
    
@Input() darkBackground:boolean=true;


  		




  30
  31
  
    
@Input() centered:boolean=false;


  		




  
  32
  
    
@Input() shortView: boolean = false;


  		




  31
  33
  
    
sectionClass= "uk-section-primary";


  		




  32
  34
  
    

  		




  33
  35
  
    
subs: Subscription[] = [];


  		












  

    
      modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/bottom.component.html
    
  





  
  1
  
    
<ng-container *ngIf="shortView;else longView">


  		




  
  2
  
    
  <div class="uk-padding uk-flex uk-flex-middle">


  		




  
  3
  
    
    <div *ngIf="showCommision" class="uk-width-1-2">


  		




  
  4
  
    
      <div class="uk-flex uk-flex-middle" >


  		




  
  5
  
    
        <div>


  		




  
  6
  
    
          <img style="margin-right: 8px; float: left;"


  		




  
  7
  
    
               [src]="assetsPath + 'common/commission.jpg'"


  		




  
  8
  
    
               alt="flag black white low" width="50" height="33">


  		




  
  9
  
    
        </div>


  		




  
  10
  
    
        <div class="uk-margin-left">


  		




  
  11
  
    
          <div *ngIf="!grantAdvance" class="">


  		




  
  12
  
    
            <span style="font-size: 8pt; line-height: 0.7!important;" [innerHtml] = "grantConenctText"></span>


  		




  
  13
  
    
          </div>


  		




  
  14
  
    
          <div  *ngIf="grantAdvance"  class="">


  		




  
  15
  
    
            <span style="font-size: 8pt; line-height: 0.7!important;" [innerHtml] = "grantAdvanceText"></span>


  		




  
  16
  
    
          </div>


  		




  
  17
  
    
        </div>


  		




  
  18
  
    
      </div>


  		




  
  19
  
    
    </div>


  		




  
  20
  
    
    <div *ngIf="showOpenaire" class="uk-text-right uk-width-1-2">


  		




  
  21
  
    
      <img [src]="assetsPath + 'common/Logo_Horizontal_'+(darkBackground?'white':'dark')+'_small.png'"


  		




  
  22
  
    
           data-width="126"


  		




  
  23
  
    
           data-height="30" class="el-image" alt="OpenAIRE">


  		




  
  24
  
    
    </div>


  		




  
  25
  
    
  </div>


  		




  
  26
  
    
</ng-container>


  		




  
  27
  
    
<ng-template #longView>


  		




  1
  28
  
    
<div [class]="sectionClass + '  uk-section uk-section-small uk-padding-remove-bottom'">


  		




  2
  29
  
    
   <div [class]="'uk-container  ' +(centered?'uk-container-small':'uk-container-expand') ">


  		




  3
  30
  
    
<!--      <div class="uk-container uk-container-expand uk-margin-small">-->


  		




  ......




  176
  203
  
    

  		




  177
  204
  
    

  		




  178
  205
  
    
</div>


  		




  179
  
  
    
<!--<div [class]="sectionClass + ' uk-section uk-section-xsmall'">


  		




  180
  
  
    
   <div class="uk-container">


  		




  181
  
  
    
      <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">


  		




  182
  
  
    
         <div class="uk-width-expand@m">


  		




  183
  
  
    
         </div>


  		




  184
  
  
    
      </div>


  		




  185
  
  
    
   </div>


  		




  186
  
  
    
</div>-->


  		




  187
  206
  
    
<div [class]="sectionClass + ' uk-section uk-section-xsmall'">


  		




  188
  207
  
    
   <div class="uk-container uk-container-expand">


  		




  189
  208
  
    
      <div class="uk-grid-margin uk-grid" uk-grid="">


  		




  ......




  240
  259
  
    
      </div>


  		




  241
  260
  
    
   </div>


  		




  242
  261
  
    
</div>


  		




  
  262
  
    
</ng-template>


  		












Also available in:  Unified diff