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

import {Component, ElementRef, Input, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Citation, CitationData} from './citation.class';
import {ResultLandingInfo} from "../../../utils/entities/resultLandingInfo";

declare var CSL: any;
declare var Sys: any;
declare var UIkit: any;

//<addThis ></addThis>
@Component({
  selector: 'citeThis',
  template: `
    <div class="uk-padding">
      <mat-form-field class="matSelectionFormField uk-width-1-1">
        <mat-label>Select a citation style</mat-label>
        <mat-select #matSelect class="matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle"
                    (ngModelChange)="styleChanged()"
                    [disableOptionCentering]="true" modal-select [matSelect]="matSelect"
                    panelClass="matSelectionPanel">
          <mat-option *ngFor=" let  style of this.citation.templates let i = index"
                      [value]="style">{{style}}</mat-option>
        </mat-select>
      </mat-form-field>
      <div *ngIf="selectedStyle">
        <div id="citation" class="box-content uk-margin-small-top uk-overflow-auto" [innerHTML]=citationText></div>
        <button
            class="clipboard_btn uk-button uk-button-small uk-button-secondary uk-margin-small-top uk-icon uk-float-right"
            data-clipboard-target="#citation" title="Copy to clipboard">
          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="copy" ratio="1">
            <rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect>
            <polyline fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline>
          </svg>
          <span class="uk-margin-small-left">COPY</span>
        </button>
      </div>
    </div>
  `
})
export class CiteThisComponent implements OnInit, OnDestroy {
  private sub: any;
  public selectedStyle: string = null;
  public citationText: string;
  public citation: Citation = new Citation();
  // public cite: any;
  @Input() result: ResultLandingInfo;
  @Input() id: string;
  @Input() type: string = "article";
  public citeproc;
  public data;
  public clipboard;
  
  ngOnInit() {
    if (typeof window !== 'undefined') {
      // this.citeproc = require('./citeproc.js');
      // console.log(this.citeproc);
      this.parseData();
      this.selectedStyle = this.citation.templates[0];
      this.updateCitation();
      this.createClipboard();
    }
  }
  
  ngOnDestroy() {
    delete this.clipboard;
  }
  
  private createClipboard() {
    if (typeof window !== 'undefined') {
      delete this.clipboard;
      let Clipboard;
      Clipboard = require('clipboard');
      this.clipboard = new Clipboard('.clipboard_btn');
    }
  }
  
  parseData() {
    var citationData: CitationData = new CitationData();
    
    if (this.result.identifiers && Array.from(this.result.identifiers.keys()).length > 0) {
      var keys = Array.from(this.result.identifiers.keys());
      for (var i = 0; i < keys.length; i++) {
        if (keys[i] == "doi") {
          var ids = this.result.identifiers.get(keys[i]);
          for (var j = 0; j < ids.length; j++) {
            citationData.DOI = ids[j];
            break;
          }
        }
      }
    }
    citationData.id = this.id;
    if (this.result.types != undefined && this.result.types.length > 0 && this.result.types[0]) {
      citationData.type = this.result.types[0].toLowerCase();
    }
    if (this.result.title) {
      citationData.title = this.result.title;
    }
    if (this.result.publisher) {
      citationData.publisher = this.result.publisher;
    }
    if (this.result.authors) {
      citationData.author = [];
      var max_length = (this.result.authors.length > 10) ? 10 : this.result.authors.length;
      for (var i = 0; i < max_length; i++) {
        if (this.result.authors[i] && this.result.authors[i].fullName && this.result.authors[i].fullName.indexOf(", ") !== -1) {
          citationData.author.push({
            given: this.result.authors[i].fullName.split(", ")[1],
            family: this.result.authors[i].fullName.split(", ")[0],
            'parse-names': true
          });
        } else {
          citationData.author.push({given: "", family: this.result.authors[i].fullName, 'parse-names': true});
        }
        // citationData.authors.push(this.result.authors[i]);
      }
    }
    if (this.result.dateofacceptance != undefined) {
      citationData.issued = {};
      var date: string = (this.result.dateofacceptance.getFullYear()) + ""; // transform to string in case it is an integer
      var dateArray: string[] = (date && (date).indexOf('-') !== -1) ? [date.split('-')[0]] : [date];
      if (dateArray.length < 3) {
        // dateArray.push[1];
        // dateArray.push[1];
      }
      citationData.issued = {"date-parts": [["" + dateArray[0]]]};
      if (this.result.date) {
        citationData.date = this.result.date;
      }
      if (this.result.journal) {
        if (this.result.journal.journal) {
          citationData["container-title"] = this.result.journal.journal;
        }
        if (this.result.journal.issn) {
          citationData.ISSN = this.result.journal.issn;
        }
        if (this.result.journal.issue) {
          citationData.issue = this.result.journal.issue;
        }
        citationData.type = "article-journal"; // in case of APA volume and pages appear only in specific types not just article
        if (this.result.journal.volume) {
          citationData.volume = this.result.journal.volume;
        }
        if (this.result.journal["start_page"] && this.result.journal["end_page"]) {
          citationData.page = this.result.journal["start_page"] + "-" + this.result.journal["end_page"];
        }
      }
    }
    
    
    this.data = citationData;
    // console.log(this.data);
    
  }
  
  styleChanged() {
    this.updateCitation();
    
  }
  
  updateCitation() {
    var Sys =
      function Sys(lang, data) {
        this.lang = lang;
        this.data = data;
        this.changeName = function (name) {
          this.lastName = name;
        };
        this.retrieveLocale = function (lang) {
          
          return this.lang;
        }
        this.retrieveItem = function (id) {
          return this.data;
        }
      };
    
    var citeproc = new CSL.Engine(new Sys(this.citation.locale, this.data), this.citation[(this.selectedStyle == "0") ? this.citation.templates[0] : this.selectedStyle]);
    citeproc.updateItems([this.data.id]);
    this.citationText = citeproc.makeBibliography();
    this.citationText = ((this.citationText != null) && (this.citationText.length > 1) && (this.citationText[1].length > 0)) ? this.citationText[1][0] : '';
    
  }
  
}