Revision 60181
Added by Argiro Kokogiannaki over 3 years ago
| citeThis.component.ts | ||
|---|---|---|
| 10 | 10 |
import {Citation, CitationData} from './citation.class';
|
| 11 | 11 |
import {ResultLandingInfo} from "../../../utils/entities/resultLandingInfo";
|
| 12 | 12 |
import {DOCUMENT} from "@angular/common";
|
| 13 |
import {EnvProperties} from "../../../utils/properties/env-properties";
|
|
| 14 |
import {properties} from "../../../../../environments/environment";
|
|
| 13 | 15 |
|
| 14 |
declare var CSL: any; |
|
| 15 |
declare var Sys: any; |
|
| 16 |
declare var UIkit: any; |
|
| 17 |
|
|
| 16 |
declare var Cite: any; |
|
| 17 |
// Based on https://citation.js.org/api/tutorial-getting_started.html browser release |
|
| 18 | 18 |
//<citeThis ></citeThis> |
| 19 | 19 |
@Component({
|
| 20 | 20 |
selector: 'citeThis', |
| ... | ... | |
| 38 | 38 |
<span class="uk-margin-small-left">COPY</span> |
| 39 | 39 |
</button> |
| 40 | 40 |
</div> |
| 41 |
<div *ngIf="properties.environment == 'development'" class="uk-margin-small-top"> |
|
| 42 |
<mat-form-field class="matSelectionFormField uk-width-1-1"> |
|
| 43 |
<mat-label>Or select file format to download</mat-label> |
|
| 44 |
<mat-select class="matSelection" id="fileformats" name="fileformatsSelect" [(ngModel)]="selectedFormat" |
|
| 45 |
(ngModelChange)="formatChanged()" |
|
| 46 |
[disableOptionCentering]="true" |
|
| 47 |
panelClass="matSelectionPanel"> |
|
| 48 |
<mat-option *ngFor=" let format of citation.fileFormats let i = index" |
|
| 49 |
[value]="format">{{format + " (" +citation.fileSuffix[i] + ")"}}</mat-option>
|
|
| 50 |
</mat-select> |
|
| 51 |
</mat-form-field> |
|
| 52 |
|
|
| 53 |
<!-- <div *ngIf="selectedFormat"> |
|
| 54 |
<div id="citation" class="box-content uk-margin-small-top uk-overflow-auto uk-padding-small" [innerHTML]="fileText"></div> |
|
| 55 |
</div>--> |
|
| 56 |
<button class=" uk-button uk-button-primary uk-button-small copy uk-margin-small-top uk-icon uk-float-right" |
|
| 57 |
title="Copy to clipboard" [disabled]="!selectedFormat" (click)="downloadFile()"> |
|
| 58 |
<span class="custom-icon " uk-icon="download"></span> |
|
| 59 |
<span class="uk-margin-small-left">Download</span> |
|
| 60 |
</button> |
|
| 61 |
</div> |
|
| 41 | 62 |
</div> |
| 42 | 63 |
` |
| 43 | 64 |
}) |
| 44 | 65 |
export class CiteThisComponent implements OnInit, OnDestroy {
|
| 45 |
private sub: any; |
|
| 46 | 66 |
public selectedStyle: string = null; |
| 67 |
public selectedFormat: string = null; |
|
| 68 |
public fileText: string; |
|
| 69 |
properties:EnvProperties; |
|
| 47 | 70 |
public citationText: string; |
| 48 | 71 |
public citation: Citation = new Citation(); |
| 49 |
// public cite: any; |
|
| 50 | 72 |
@Input() result: ResultLandingInfo; |
| 51 | 73 |
@Input() id: string; |
| 52 | 74 |
@Input() type: string = "article"; |
| 53 |
public citeproc; |
|
| 54 |
public data; |
|
| 75 |
public data:CitationData; |
|
| 55 | 76 |
public clipboard; |
| 56 | 77 |
timeout; |
| 78 |
cite;citeConfig; |
|
| 57 | 79 |
constructor( @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2){
|
| 58 |
|
|
| 59 |
|
|
| 60 | 80 |
} |
| 61 | 81 |
ngOnInit() {
|
| 82 |
this.properties = properties; |
|
| 62 | 83 |
try{
|
| 63 |
if (!this.document.getElementById('citeThisScript')) {
|
|
| 64 |
const renderer = this.rendererFactory.createRenderer(this.document, {
|
|
| 65 |
id: '-1', |
|
| 66 |
encapsulation: ViewEncapsulation.None, |
|
| 67 |
styles: [], |
|
| 68 |
data: {}
|
|
| 69 |
}); |
|
| 70 |
const head = this.document.head; |
|
| 71 |
if (head === null) {
|
|
| 72 |
throw new Error('<head> not found within DOCUMENT.');
|
|
| 84 |
if (!this.document.getElementById('citationjs')) {
|
|
| 85 |
const renderer = this.rendererFactory.createRenderer(this.document, {
|
|
| 86 |
id: '-1', |
|
| 87 |
encapsulation: ViewEncapsulation.None, |
|
| 88 |
styles: [], |
|
| 89 |
data: {}
|
|
| 90 |
}); |
|
| 91 |
const head = this.document.head; |
|
| 92 |
if (head === null) {
|
|
| 93 |
throw new Error('<head> not found within DOCUMENT.');
|
|
| 94 |
} |
|
| 95 |
const script = renderer.createElement('script');
|
|
| 96 |
renderer.setAttribute(script, "id", "citationjs"); |
|
| 97 |
renderer.setAttribute(script, "src", "assets/common-assets/citation-0.4.0-9.min.js"); |
|
| 98 |
renderer.setAttribute(script, "type", "text/javascript"); |
|
| 99 |
renderer.appendChild(head, script); |
|
| 100 |
this.timeout = setTimeout(() => {
|
|
| 101 |
const script2 = renderer.createElement('script');
|
|
| 102 |
renderer.setAttribute(script2, "type", "text/javascript"); |
|
| 103 |
renderer.setProperty(script2, "text","const Cite = require('citation-js')");
|
|
| 104 |
renderer.appendChild(head, script2); |
|
| 105 |
}, 300); |
|
| 73 | 106 |
} |
| 74 |
const script = renderer.createElement('script');
|
|
| 75 |
renderer.setAttribute(script, "id", "citeThisScript"); |
|
| 76 |
renderer.setAttribute(script, "src", "assets/common-assets/citeproc.js"); |
|
| 77 |
renderer.setAttribute(script, "type", "text/javascript"); |
|
| 78 |
renderer.appendChild(head, script); |
|
| 79 |
} |
|
| 80 | 107 |
this.timeout = setTimeout(() => {
|
| 108 |
this.citeConfig = Cite.plugins.config.get('csl');
|
|
| 109 |
this.cite = new Cite(); |
|
| 81 | 110 |
this.parseData(); |
| 82 | 111 |
this.selectedStyle = this.citation.templates[0]; |
| 83 |
this.updateCitation(); |
|
| 112 |
this.selectedFormat = this.citation.fileFormats[0]; |
|
| 113 |
this.styleChanged(); |
|
| 114 |
this.formatChanged(); |
|
| 84 | 115 |
this.createClipboard(); |
| 85 | 116 |
}, 800); |
| 86 | 117 |
|
| ... | ... | |
| 119 | 150 |
} |
| 120 | 151 |
} |
| 121 | 152 |
citationData.id = this.id; |
| 122 |
if (this.result.types != undefined && this.result.types.length > 0 && this.result.types[0]) {
|
|
| 123 |
citationData.type = this.result.types[0].toLowerCase(); |
|
| 124 |
} |
|
| 153 |
citationData.type = this.mapTypes(); |
|
| 125 | 154 |
if (this.result.title) {
|
| 126 | 155 |
citationData.title = this.result.title; |
| 127 | 156 |
} |
| ... | ... | |
| 178 | 207 |
|
| 179 | 208 |
|
| 180 | 209 |
this.data = citationData; |
| 181 |
// console.log(this.data);
|
|
| 210 |
this.cite.set(this.data);
|
|
| 182 | 211 |
|
| 183 | 212 |
} |
| 184 |
|
|
| 213 |
private mapTypes(){
|
|
| 214 |
if (this.result.types != undefined && this.result.types.length > 0) {
|
|
| 215 |
if(this.result.types.indexOf("Article") != -1) {
|
|
| 216 |
return "article"; |
|
| 217 |
}else if(this.result.types.indexOf("Conference object") != -1){
|
|
| 218 |
return "paper-conference"; |
|
| 219 |
}else if( this.result.types[0]){
|
|
| 220 |
return this.result.types[0].toLowerCase(); |
|
| 221 |
} |
|
| 222 |
} |
|
| 223 |
return ""; |
|
| 224 |
} |
|
| 185 | 225 |
styleChanged() {
|
| 186 |
this.updateCitation();
|
|
| 226 |
this.citationText = this.get(this.selectedStyle);
|
|
| 187 | 227 |
|
| 188 | 228 |
} |
| 189 |
|
|
| 190 |
updateCitation() {
|
|
| 191 |
var Sys = |
|
| 192 |
function Sys(lang, data) {
|
|
| 193 |
this.lang = lang; |
|
| 194 |
this.data = data; |
|
| 195 |
this.changeName = function (name) {
|
|
| 196 |
this.lastName = name; |
|
| 197 |
}; |
|
| 198 |
this.retrieveLocale = function (lang) {
|
|
| 199 |
|
|
| 200 |
return this.lang; |
|
| 201 |
} |
|
| 202 |
this.retrieveItem = function (id) {
|
|
| 203 |
return this.data; |
|
| 204 |
} |
|
| 205 |
}; |
|
| 229 |
formatChanged() {
|
|
| 230 |
this.fileText = this.get(this.selectedFormat, false); |
|
| 231 |
} |
|
| 232 |
downloadFile(){
|
|
| 233 |
if (typeof document !== 'undefined') {
|
|
| 234 |
var url = window.URL.createObjectURL(new Blob([this.fileText])); |
|
| 235 |
var a = window.document.createElement('a');
|
|
| 236 |
window.document.body.appendChild(a); |
|
| 237 |
a.setAttribute('style', 'display: none');
|
|
| 238 |
a.href = url; |
|
| 239 |
a.download = this.selectedFormat + this.citation.fileSuffix[this.citation.fileFormats.indexOf(this.selectedFormat)]; |
|
| 240 |
a.click(); |
|
| 241 |
window.URL.revokeObjectURL(url); |
|
| 242 |
a.remove(); // remove the element |
|
| 243 |
} |
|
| 244 |
} |
|
| 245 |
|
|
| 246 |
get(style:string, isBibliography:boolean = true){
|
|
| 206 | 247 |
try {
|
| 207 |
var citeproc = new CSL.Engine(new Sys(this.citation.locale, this.data), this.citation[(this.selectedStyle == "0") ? this.citation.templates[0] : this.selectedStyle]); |
|
| 208 |
citeproc.updateItems([this.data.id]); |
|
| 209 |
this.citationText = citeproc.makeBibliography(); |
|
| 210 |
this.citationText = ((this.citationText != null) && (this.citationText.length > 1) && (this.citationText[1].length > 0)) ? this.citationText[1][0] : ''; |
|
| 248 |
if (!isBibliography && style != "bibtex") {
|
|
| 249 |
return this.getFormat(style); |
|
| 250 |
} else {
|
|
| 251 |
return this.getBibliography(style); |
|
| 252 |
} |
|
| 211 | 253 |
}catch (e) {
|
| 254 |
console.error(e); |
|
| 255 |
return ""; |
|
| 256 |
} |
|
| 257 |
} |
|
| 212 | 258 |
|
| 259 |
/** |
|
| 260 |
* Supports formats bibtex, bibtxt, ris |
|
| 261 |
* @param format |
|
| 262 |
*/ |
|
| 263 |
getFormat(format:string) {
|
|
| 264 |
return this.cite.format(format, {
|
|
| 265 |
format: 'text' |
|
| 266 |
}); |
|
| 267 |
} |
|
| 268 |
|
|
| 269 |
/** |
|
| 270 |
* Based on this and citeproc library https://citation.js.org/api/tutorial-plugins.html |
|
| 271 |
* if the template doesn;t exist add the CSL xml and the library will produce the citation |
|
| 272 |
* @param template |
|
| 273 |
*/ |
|
| 274 |
|
|
| 275 |
getBibliography(template:string) {
|
|
| 276 |
if (!this.citeConfig.templates.get(template)) {
|
|
| 277 |
this.citeConfig.templates.add(template, this.citation[template]); |
|
| 213 | 278 |
} |
| 214 |
|
|
| 279 |
return this.cite.format('bibliography', {
|
|
| 280 |
format: 'text', |
|
| 281 |
template: template, |
|
| 282 |
lang: 'en-US' |
|
| 283 |
}); |
|
| 215 | 284 |
} |
| 216 |
|
|
| 217 | 285 |
} |
Also available in: Unified diff
[Library|Trunk]
Citations:
- update library and use citation-js
- allow download for bibtex and ris formats
- update bibtext cls
Result landing: update checks for no index tag