[Library|Trunk]

Cite this component:
	- show download (not only in dev)
	- UI updates 
	- show citation after the user selects a format.
	


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60324 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2021-02-01 09:46:24 +00:00
parent 225e203b74
commit c886f7d2e4
1 changed files with 25 additions and 25 deletions

View File

@ -30,15 +30,17 @@ declare var Cite: any;
[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 uk-padding-small" [innerHTML]=citationText></div>
<button class="clipboard_btn uk-button uk-button-primary uk-button-small copy uk-margin-small-top uk-icon uk-float-right"
data-clipboard-target="#citation" title="Copy to clipboard">
<span class="custom-icon custom-copy-white"></span>
<span class="uk-margin-small-left">COPY</span>
</button>
<div *ngIf="selectedStyle" class="box-content uk-grid uk-margin-auto ">
<div id="citation" class=" uk-overflow-auto uk-padding-small" [innerHTML]=citationText></div>
<div class="uk-width-1-1">
<button class="clipboard_btn uk-button uk-button-primary uk-button-small copy uk-icon uk-float-right"
data-clipboard-target="#citation" title="Copy to clipboard">
<span class="custom-icon custom-copy-white"></span>
<!-- <span class="uk-margin-small-left">COPY</span>-->
</button>
</div>
</div>
<div *ngIf="properties.environment == 'development'" class="uk-margin-small-top">
<div class="uk-margin-top">
<mat-form-field class="matSelectionFormField uk-width-1-1">
<mat-label>Or select file format to download</mat-label>
<mat-select class="matSelection" id="fileformats" name="fileformatsSelect" [(ngModel)]="selectedFormat"
@ -49,11 +51,7 @@ declare var Cite: any;
[value]="format">{{format + " (" +citation.fileSuffix[i] + ")"}}</mat-option>
</mat-select>
</mat-form-field>
<!-- <div *ngIf="selectedFormat">
<div id="citation" class="box-content uk-margin-small-top uk-overflow-auto uk-padding-small" [innerHTML]="fileText"></div>
</div>-->
<button class=" uk-button uk-button-primary uk-button-small copy uk-margin-small-top uk-icon uk-float-right"
<button *ngIf="selectedFormat" class=" uk-button uk-button-primary uk-button-small uk-margin-small-top uk-icon uk-float-right"
title="Copy to clipboard" [disabled]="!selectedFormat" (click)="downloadFile()">
<span class="custom-icon " uk-icon="download"></span>
<span class="uk-margin-small-left">Download</span>
@ -99,21 +97,12 @@ export class CiteThisComponent implements OnInit, OnDestroy {
renderer.appendChild(head, script);
this.timeout = setTimeout(() => {
const script2 = renderer.createElement('script');
renderer.setAttribute(script2, "id", "citationjs2");
renderer.setAttribute(script2, "type", "text/javascript");
renderer.setProperty(script2, "text","const Cite = require('citation-js')");
renderer.appendChild(head, script2);
}, 300);
}, 500);
}
this.timeout = setTimeout(() => {
this.citeConfig = Cite.plugins.config.get('csl');
this.cite = new Cite();
this.parseData();
this.selectedStyle = this.citation.templates[0];
this.selectedFormat = this.citation.fileFormats[0];
this.styleChanged();
this.formatChanged();
this.createClipboard();
}, 800);
}catch (e) {
console.error(e)
@ -124,7 +113,12 @@ export class CiteThisComponent implements OnInit, OnDestroy {
delete this.clipboard;
clearTimeout(this.timeout);
}
private initiate(){
this.citeConfig = Cite.plugins.config.get('csl');
this.cite = new Cite();
this.parseData();
this.createClipboard();
}
private createClipboard() {
if (typeof window !== 'undefined') {
delete this.clipboard;
@ -261,6 +255,9 @@ export class CiteThisComponent implements OnInit, OnDestroy {
* @param format
*/
getFormat(format:string) {
if(!this.cite){
this.initiate();
}
return this.cite.format(format, {
format: 'text'
});
@ -273,6 +270,9 @@ export class CiteThisComponent implements OnInit, OnDestroy {
*/
getBibliography(template:string) {
if(!this.cite || !this.citeConfig ){
this.initiate();
}
if (!this.citeConfig.templates.get(template)) {
this.citeConfig.templates.add(template, this.citation[template]);
}