openaire-library/landingPages/landing-utils/relatedTo.component.ts

import {Component, Input} from '@angular/core';
import {HelperFunctions} from "../../utils/HelperFunctions.class";

@Component({
  selector: 'relatedTo',
  template: `
    <div class="uk-margin-bottom">
      <div class="uk-text-small">
        <div class="uk-text-muted">
          Communities:
        </div>
        <div class="uk-margin-small-left" *ngFor="let item of contexts.slice(0, showNum); let i=index">
          <span *ngIf="!item['inline']">
            <span>{{item['labelContext']}}</span>
            <span *ngIf="item['labelCategory']"><span uk-icon="icon: arrow-right"></span>{{item['labelCategory']}}</span>
            <span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
          </span>
          <mark *ngIf="item['inline']">
            <span>{{item['labelContext']}}</span>
            <span *ngIf="item['labelCategory']"><span
                uk-icon="icon: arrow-right"></span>{{item['labelCategory']}}</span>
            <span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
          </mark>
        </div>
      </div>
      <div *ngIf="showNum > threshold" class="uk-text-right">
        <a (click)="showNum = threshold; scroll()">
          View less
        </a>
      </div>
      <div *ngIf="showNum == threshold && contexts && contexts.length > threshold" class="uk-text-right">
        <a (click)="showNum = contexts.length;">
          View more
        </a>
      </div>
    </div>
  `
})

export class RelatedToComponent {
  @Input() contexts: { "labelContext": string, "labelCategory": string, "labelConcept": string, "inline": boolean }[];
  
  public threshold: number = 5;
  public showNum: number = 5;
  
  constructor() {
  }
  
  ngOnInit() {
  }
  
  public scroll() {
    HelperFunctions.scroll();
  }
}