MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
landingPages/landing-utils/citeThis/citeThis.component.ts
View File

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