D-Net

import {

  AfterViewInit, ChangeDetectorRef,

  Component,

  Directive,

  ElementRef,

  HostListener,

  Input,

  OnInit, QueryList,

  ViewChild,

  ViewChildren, ViewContainerRef

} from '@angular/core';

import {HelperFunctions} from "../../utils/HelperFunctions.class";

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

import {properties} from "../../../../environments/environment";

@Component({

  selector: 'showIdentifiers',

  template: `

    <div class="uk-text-muted">Persistent Identifiers</div>

    <div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top">

      <ng-container *ngFor="let key of keys let i=index">

        <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1">

          <p class="custom-break uk-margin-remove">

          <span #content [id]="key">

            <span class="uk-text-bold uk-text-uppercase">{{key}}: </span>

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

              <a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">

                {{item}} <span class="custom-external custom-icon space"></span>

              </a>

              <a *ngIf="key=='pmc'" [href]="properties.pmcURL + item" target="_blank">

                {{item}} <span class="custom-external custom-icon space"></span>

              </a>

              <a *ngIf="key=='pmid'" [href]="properties.pmidURL + item" target="_blank">

                {{item}} <span class="custom-external custom-icon space"></span>

              </a>

              <a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank">

                {{item}} <span class="custom-external custom-icon space"></span>

              </a>

              <ng-container *ngIf="(j !== (identifiers.get(key).length - 1))">, </ng-container>

            </ng-container>

          </span>

          </p>

        </div>

      </ng-container>

    </div>

    <div *ngIf="isLarge && showViewAll" class="uk-text-right uk-margin-small-top">

      <a (click)="showAll = !showAll">View {{showAll?'less':'all'}}</a>

    </div>

  `

})

export class ShowIdentifiersComponent implements AfterViewInit {

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

  @Input() showViewAll: boolean = false;

  large: Map<string, boolean> = new Map<string, boolean>();

  showAll: boolean = false;

  properties: EnvProperties = properties;

  @ViewChildren("content", { read: ElementRef }) types: QueryList<ElementRef>;

  constructor(private cdr: ChangeDetectorRef) {

  }

  @HostListener('window:resize', ['$event'])

  onResize(event) {

    this.checkLarge();

  }

  ngAfterViewInit() {

    this.checkLarge();

  }

  checkLarge() {

    let overflow = (this.keys.length === 1?42:21);

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

      this.keys.forEach(key => {

        let type = this.types.find(type => type.nativeElement.id === key);

        this.large.set(key, type && type.nativeElement.offsetHeight > overflow);

      });

      this.cdr.detectChanges();

    }

  }

  get isLarge() {

    for(let key of this.keys) {

      if (this.large.get(key)) {

        return true;

      }

    }

    return false;

  }

  public get keys(): string[] {

    return Array.from(this.identifiers.keys()).sort((a: string, b: string) => {

      if (a === 'doi') {

        return -1;

      } else if (b === 'doi') {

        return 1;

      } else {

        return 0;

      }

    });

  }

}