D-Net

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

import {OpenaireProperties} from '../utils/properties/openaireProperties';

@Component({

    selector: 'showIdentifiers',

    template: `

                <span *ngIf="showAll && countIdentifiers() > 10">

                    <a class="uk-text-muted" (click)="showAll = !showAll;">View less identifiers</a>

                </span>

                <ng-container *ngFor="let key of identifiers.keys() let i=index">

                    <ng-container *ngFor="let item of identifiers.get(key) let j=index">

                      <span *ngIf="(i+j)<10 || showAll" class="custom-external custom-icon">

                        <a *ngIf="key=='doi'" href="{{doiURL}}{{item}}" target="_blank">{{key}}: {{item}}</a><a

                        *ngIf="key=='pmc'" href="{{pmcURL}}{{item}}" target="_blank">{{key}}: {{item}}</a></span><span

                        *ngIf="((i+j)<10 || showAll) && ((i+j) < countIdentifiers()-1)">{{", "}}</span>

                      <span *ngIf="!showAll && (i+j)==10"> ... </span>

                    </ng-container>

                </ng-container>

                <span *ngIf="!showAll && countIdentifiers() > 10">

                    <a class="uk-text-muted" (click)="showAll = !showAll;">

                        view all {{countIdentifiers()}} identifiers

                    </a>

                </span>

                <span *ngIf="showAll && countIdentifiers() > 10">

                    <a class="uk-text-muted" (click)="showAll = !showAll; scroll()">View less identifiers</a>

                </span>

    `

    })

export class ShowIdentifiersComponent {

    @Input() identifiers: Map<string, string[]>;

    doiURL: string;

    pmcURL: string;

    public showAll: boolean = false;

    public num: number = -1;

    constructor (private element: ElementRef) {

        this.doiURL = OpenaireProperties.getDoiURL();

        this.pmcURL = OpenaireProperties.getPmcURL();

    }

    ngOnInit() {}

    public countIdentifiers() {

      if(this.num < 0) {

        let num = 0;

        if(this.identifiers != undefined) {

            this.identifiers.forEach(function (value, key, map) {

                num += value.length;

            });

        }

        this.num = num;

      }

      return this.num;

    }

    public scroll() {

      console.info("scroll into view");

      if (typeof document !== 'undefined') {

         this.element.nativeElement.scrollIntoView();

      }

    }

}