187 lines
8.6 KiB
TypeScript
187 lines
8.6 KiB
TypeScript
import {Component, Input, OnInit, ViewChild} from "@angular/core";
|
|
import {StringUtils} from "../string-utils.class";
|
|
import {RouterHelper} from "../routerHelper.class";
|
|
import {properties} from "../../../../environments/environment";
|
|
import {Router} from "@angular/router";
|
|
import {Option} from "../../sharedComponents/input/input.component";
|
|
import {OpenaireEntities} from "../properties/searchFields";
|
|
import {EnvProperties} from "../properties/env-properties";
|
|
|
|
@Component({
|
|
selector: 'entity-actions',
|
|
template: `
|
|
<div class="" [ngClass]="isMobile ? 'uk-flex uk-flex-column' : 'uk-grid uk-grid-small uk-child-width-auto'" [attr.uk-grid]="!isMobile ? '' : null">
|
|
<div *ngIf="linking && isRouteAvailable('participate/direct-claim')">
|
|
<a [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'], [id,type,linkTo])"
|
|
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
|
|
[attr.uk-tooltip]="showTooltip ? 'title: Link '+openaireEntities.RESULTS+' with a '+openaireEntities.PROJECT+', a '+openaireEntities.COMMUNITY+' or other '+openaireEntities.RESULTS+' and make the new information available in OpenAIRE information space.; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
|
|
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
|
|
<icon [flex]="true" [ratio]="0.7" name="link_to" visuallyHidden="link"></icon>
|
|
<span class="uk-margin-xsmall-left">Link to</span>
|
|
</a>
|
|
</div>
|
|
<div *ngIf="share">
|
|
<a (click)="openAddThisModal()"
|
|
[attr.uk-tooltip]="showTooltip ? 'title: Share this '+getTypeName()+' in your social networks; pos: bottom; cls: uk-active uk-text-small uk-padding-small' : 'cls: uk-invisible'"
|
|
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
|
|
<icon class="uk-text-bolder" [flex]="true" [ratio]="0.8" name="share" visuallyHidden="share"></icon>
|
|
<span class="uk-margin-xsmall-left">Share</span>
|
|
</a>
|
|
</div>
|
|
<div *ngIf="cite">
|
|
<a (click)="openCiteModal()"
|
|
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
|
|
<icon class="uk-text-bolder" [flex]="true" [ratio]="0.7" name="cite" visuallyHidden="cite"></icon>
|
|
<span class="uk-margin-xsmall-left">Cite</span>
|
|
</a>
|
|
</div>
|
|
<div *ngIf="deposit && isRouteAvailable('participate/deposit/learn-how')">
|
|
<a routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
|
|
[attr.uk-tooltip]="showTooltip ? 'title: Find a repository to deposit or publish your research in Open Access; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
|
|
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
|
|
<icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
|
|
<span class="uk-margin-xsmall-left">Deposit</span>
|
|
</a>
|
|
</div>
|
|
<div *ngIf="embed" >
|
|
<a (click)="openEmbedResultsModal()"
|
|
[attr.uk-tooltip]="showTooltip ? 'title: Embed the related '+openaireEntities.RESULTS+' of this '+getTypeName()+' in your website; pos: bottom; cls: uk-active uk-text-small uk-padding-small uk-width-medium' : 'cls: uk-invisible'"
|
|
class="uk-flex uk-flex-middle uk-button-link" [ngClass]="isMobile ? 'uk-margin-left uk-margin-xsmall-bottom' : 'uk-text-bolder uk-flex-center'">
|
|
<icon flex="true" ratio="0.8" name="code" visuallyHidden="code"></icon>
|
|
<span class="uk-margin-xsmall-left">Embed</span>
|
|
</a>
|
|
</div>
|
|
<ng-content></ng-content>
|
|
</div>
|
|
<modal-alert *ngIf="cite" #citeModal>
|
|
<citeThis *ngIf="citeThisClicked" [result]="result" [id]="id"
|
|
[type]="getTypeName().toLowerCase()"></citeThis>
|
|
</modal-alert>
|
|
<modal-alert *ngIf="share" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
|
|
<addThis [url]="url"></addThis>
|
|
</modal-alert>
|
|
<modal-alert *ngIf="result" #embedResultsModal large="true">
|
|
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right">
|
|
<div class="uk-padding-small uk-padding-remove-vertical">
|
|
<div input type="select" placeholder="Select content type to embed" inputClass="flat x-small"
|
|
[options]="resultTypesForEmbedding" [(value)]="embed_research_results_type"></div>
|
|
<div *ngIf="embed_research_results_type" class="clipboard-wrapper box-content uk-grid uk-margin-auto uk-margin-small-top ">
|
|
<pre id="dynamic_content_id" class="uk-overflow-auto uk-padding-small uk-padding-remove-vertical uk-margin-top"><code
|
|
>{{getDynamicContent(embed_research_results_type)}}</code></pre>
|
|
<div class="uk-width-1-1 uk-padding-small uk-text-right">
|
|
<a class="uk-link copy clipboard_btn" data-clipboard-target="#dynamic_content_id" title="Copy script">
|
|
COPY SCRIPT
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-text-small uk-margin-top">
|
|
For further information contact us at
|
|
<u><a [href]="'mailto:'+properties.helpdeskEmail" class="uk-link-text">{{properties.helpdeskEmail}}</a></u>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</modal-alert>
|
|
`
|
|
})
|
|
export class EntityActionsComponent implements OnInit {
|
|
@Input() result: any;
|
|
@Input() type: string;
|
|
@Input() id: string;
|
|
@Input() linking: boolean = false;
|
|
@Input() share: boolean = false;
|
|
@Input() cite: boolean = false;
|
|
@Input() deposit: boolean = false;
|
|
@Input() embed: boolean = false;
|
|
@Input() url: string;
|
|
@Input() isMobile: boolean = false;
|
|
@Input() showTooltip: boolean = true;
|
|
public citeThisClicked: boolean;
|
|
public routerHelper: RouterHelper = new RouterHelper();
|
|
@ViewChild('citeModal') citeModal;
|
|
@ViewChild('embedResultsModal') embedResultsModal;
|
|
@ViewChild('addThisModal') addThisModal;
|
|
properties: EnvProperties = properties;
|
|
openaireEntities = OpenaireEntities;
|
|
|
|
|
|
/* Embed */
|
|
public embed_research_results_type: string = "result";
|
|
public clipboard;
|
|
public resultTypesForEmbedding: Option[]=[
|
|
{label: "All "+OpenaireEntities.RESULTS, value: "result"},
|
|
{label: OpenaireEntities.PUBLICATIONS, value: "publication"},
|
|
{label: OpenaireEntities.DATASETS, value: "dataset"},
|
|
{label: OpenaireEntities.SOFTWARE, value: "software"},
|
|
{label: OpenaireEntities.OTHER, value: "other"}];
|
|
|
|
constructor(private router: Router) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.createClipboard();
|
|
}
|
|
|
|
get linkTo():string {
|
|
return this.type === 'project'?'result':'project';
|
|
}
|
|
|
|
public getTypeName(): string {
|
|
return StringUtils.getEntityName(this.type, false);
|
|
}
|
|
|
|
public openCiteModal() {
|
|
this.citeThisClicked = true;
|
|
this.citeModal.cancelButton = false;
|
|
this.citeModal.okButton = false;
|
|
this.citeModal.alertTitle = "Cite this " + this.getTypeName();
|
|
this.citeModal.open();
|
|
}
|
|
|
|
public openAddThisModal() {
|
|
this.addThisModal.cancelButton = false;
|
|
this.addThisModal.okButton = false;
|
|
this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks";
|
|
this.addThisModal.open();
|
|
}
|
|
|
|
public openEmbedResultsModal() {
|
|
this.embedResultsModal.cancelButton = false;
|
|
this.embedResultsModal.okButton = false;
|
|
this.embedResultsModal.alertTitle = "Embed results";
|
|
this.embedResultsModal.open();
|
|
}
|
|
|
|
private createClipboard() {
|
|
if (typeof window !== 'undefined') {
|
|
delete this.clipboard;
|
|
let Clipboard;
|
|
Clipboard = require('clipboard');
|
|
this.clipboard = new Clipboard('.clipboard_btn');
|
|
}
|
|
}
|
|
|
|
getDynamicContent(type: string) {
|
|
return "<script type=\"text/javascript\">"
|
|
+ "\n<!--"
|
|
+ "\ndocument.write('<div id=\"oa_widget\"></div>');"
|
|
+ "\ndocument.write('<script type=\"text/javascript\""
|
|
+ " src=\"" + this.properties.widgetLink
|
|
+ this.result.id + "&type="
|
|
+ type
|
|
+ "\"></script>');"
|
|
+ "\n-->"
|
|
+ "\n</script>";
|
|
}
|
|
|
|
isRouteAvailable(routeToCheck: string) {
|
|
for (let i = 0; i < this.router.config.length; i++) {
|
|
let routePath: string = this.router.config[i].path;
|
|
if (routePath == routeToCheck || routeToCheck.split('/')[0] == routePath) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
}
|