D-Net

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

@Component({

    selector: 'availableOn',

    template: `

    <dl class="uk-description-list-line">

        <dt class="title">Available on</dt>

        <dd class="line" *ngFor="let available of availableOn.slice(0, showNum) let i=index" >

            <div>

              <!--div class="{{available['bestAccessMode']}}"-->

              <div [class]="available['bestAccessMode'] ? available['bestAccessMode'] : 'UNKNOWN ACCESSMODE'">

                <span *ngIf="available.downloadUrl.length > 1"

                      class="custom-external custom-icon">

                      {{available.downloadName}}

                  <span *ngFor="let url of available.downloadUrl; let i=index;">

                      <a  href="{{url}}" target="_blank"

                          attr.uk-tooltip="pos:right; delay:10"

                          [title]="available.accessMode[i] ? available.accessMode[i] : 'UNKNOWN ACCESSMODE'">

                          [{{(i+1) | number}}]

                      </a>

                  </span>

                </span>

                <a  class="custom-external custom-icon"

                    *ngIf="available['downloadUrl'].length == 1"

                    href="{{available['downloadUrl']}}"

                    target="_blank"

                    attr.uk-tooltip="pos:right; delay:10"

                    [title]="available.bestAccessMode ? available.bestAccessMode : 'UNKNOWN ACCESSMODE'">

                    {{available.downloadName}}

                </a>

                <span *ngIf="available.collectedName" class="uk-text-bold">via</span>

                <a *ngIf="available.collectedName"

                    [queryParams]="{datasourceId: available.collectedId}" routerLinkActive="router-link-active" routerLink="/search/dataprovider">

                  {{available.collectedName}}

                </a>

                <span *ngIf="available.type || available.year">(<span *ngIf="available.type">{{available.type}}<span *ngIf="available.year">, </span></span><span *ngIf="available.year">{{available.year}}</span>)</span>

              </div>

            </div>

        </dd>

    </dl>

    <div *ngIf="showNum > threshold" class="uk-text-right">

      <a (click)="showNum = threshold; scroll()">

        View less

      </a>

    </div>

    <div *ngIf="showNum == threshold && availableOn && availableOn.length > 5">...</div>

    <div *ngIf="showNum == threshold && availableOn && availableOn.length > 5" class="uk-text-right">

      <a (click)="showNum = availableOn.length;">

        View more

      </a>

    </div>

    `

    })

export class AvailableOnComponent {

    @Input() availableOn: { "downloadName": string, "downloadUrl": string[],

                            "collectedName": string, "collectedId": string,

                            "accessMode": string[], "bestAccessMode": string,

                            "type": string, "year":string }[];

    public threshold: number = 5;

    public showNum: number = 5;

    constructor (private element: ElementRef) {}

    ngOnInit() {}

    public scroll() {

      console.info("scroll into view");

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

         this.element.nativeElement.scrollIntoView();

      }

    }

}