D-Net

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-select #matSelect class="matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()"

                [disableOptionCentering]="true" modal-select [matSelect]="matSelect"

                panelClass="matSelectionPanel">

      <mat-option value="0">select a citation style</mat-option>

      <mat-option *ngFor=" let  style of this.citation.templates let i = index" [value]="style">{{style}}</mat-option>

    </mat-select>

    <div *ngIf="selectedStyle!='0'">

      <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="0";

  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.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] : '';

  }

}