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

progress on all landing page types

This commit is contained in:
Alex Martzios 2023-01-23 16:19:00 +02:00
parent 95de86e767
commit c58bc15a74
14 changed files with 259 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
landingPages/dataProvider/dataProvider.component.html
View File

@ -4,7 +4,7 @@
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box - actions -->
<div id="landing-left-sidebar" *ngIf="dataProviderInfo" class="uk-visible@s uk-padding-remove-horizontal">
<!-- <div id="landing-left-sidebar" *ngIf="dataProviderInfo" class="uk-visible@s uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@ -19,7 +19,6 @@
<div class="uk-margin-large-bottom uk-align-center">
<div class="uk-text-meta uk-text-uppercase">Actions</div>
<ul class="uk-list">
<!-- Share -->
<li class="uk-text-center">
<a (click)="openAddThisModal()"
[title]="'Share this '+openaireEntities.DATASOURCE+' in your social networks'"
@ -32,7 +31,7 @@
</ul>
</div>
</div>
</div>
</div> -->
<!-- center box-->
<div class="uk-width-expand uk-padding-remove uk-background-default">
@ -70,8 +69,22 @@
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<div class="uk-margin-large-left uk-margin-large-right" [style]="'margin-bottom: '+graph_height+'px'">
<div class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
<!-- Actions -->
<a (click)="openAddThisModal()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-xsmall-left">Share</span>
</a>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-left uk-margin-large-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="dataProviderInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<!-- schema.org-->
@ -99,18 +112,21 @@
[subTitle]="(dataProviderInfo.officialName
&& dataProviderInfo.title.name !== dataProviderInfo.officialName)?dataProviderInfo.officialName:null"
[types]="dataProviderInfo.type ? [dataProviderInfo.type] : null"
[entityType]="getTypeName()">
[entityType]="getTypeName()"
[compatibility]="dataProviderInfo.compatibility" [aggregationStatus]="dataProviderInfo.aggregationStatus"
[thematic]="dataProviderInfo.thematic" [type]="type">
</landing-header>
<!-- Labels -->
<div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
<!-- To be moved inside the landing-header -->
<!-- <div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="dataProviderInfo.compatibility &&
!(dataProviderInfo.compatibility.info == 'not available' && type == 'service')">
<div>
<span class="uk-label uk-text-truncate" [class.uk-label-danger]="dataProviderInfo.compatibility.info == 'not available'" title="Compatibility">
<a *ngIf="dataProviderInfo.compatibility.id"
[queryParams]="{datasourceId: dataProviderInfo.compatibility.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToDataProvider.split('?')[0]">
[queryParams]="{datasourceId: dataProviderInfo.compatibility.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToDataProvider.split('?')[0]">
{{dataProviderInfo.compatibility.info}}
<ng-container *ngIf="dataProviderInfo.compatibility.name">{{dataProviderInfo.compatibility.name}}</ng-container>
</a>
@ -143,7 +159,7 @@
<span class="uk-label uk-text-truncate">Thematic</span>
</div>
</ng-container>
</div>
</div> -->
<!-- Web Page -->
<div *ngIf="dataProviderInfo.title && dataProviderInfo.title.url"

6
landingPages/landing-utils/availableOn.component.ts
View File

@ -11,9 +11,9 @@ declare var UIkit;
<div class="uk-flex uk-flex-middle uk-flex-center">
<a *ngIf="availableOn[0].downloadUrl" [href]="availableOn[0].downloadUrl" target="_blank"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder custom-external">
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')"
<span [class]="'uk-margin-xsmall-right ' + (availableOn[0].accessRightIcon == 'open_access' ? 'uk-text-success' : 'uk-text-meta')"
uk-tooltip [title]="availableOn[0].accessRight ? availableOn[0].accessRight : 'Not available'">
<icon [name]="availableOn[0].accessRightIcon" flex="true" type="outlined"></icon>
<icon [name]="availableOn[0].accessRightIcon" flex="true" ratio="0.8"></icon>
</span>
<span>{{sliceString(availableOn[0].downloadNames.join("; "), 20)}}</span>
</a>
@ -26,7 +26,7 @@ declare var UIkit;
<div *ngFor="let instance of availableOn let i=index" class="download-drop-item uk-flex uk-flex-top">
<span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')"
uk-tooltip [title]="instance.accessRight ? instance.accessRight : 'Not available'">
<icon [name]="instance.accessRightIcon" flex="true" type="outlined"></icon>
<icon [name]="instance.accessRightIcon" flex="true"></icon>
</span>
<div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
<span class="uk-text-emphasis">

127
landingPages/landing-utils/landing-header/landing-header.component.ts
View File

@ -2,6 +2,7 @@ import {Component, Input} from "@angular/core";
import {EnvProperties} from "../../../utils/properties/env-properties";
import {Author} from "../../../utils/result-preview/result-preview";
import {AlertModal} from "../../../utils/modal/alert";
import {OpenaireEntities} from "src/app/openaireLibrary/utils/properties/searchFields";
@Component({
selector: 'landing-header',
@ -14,6 +15,23 @@ import {AlertModal} from "../../../utils/modal/alert";
</div>
</div>
<div class="uk-margin-bottom uk-text-xsmall uk-text-emphasis uk-flex uk-flex-middle">
<!-- oa -->
<ng-container *ngIf="(openAccessMandatePublications != undefined && openAccessMandatePublications) || (openAccessMandateDatasets != undefined && openAccessMandateDatasets)">
<span class="uk-margin-xsmall-right uk-text-success">
<icon name="open_access" flex="true" ratio="0.8"></icon>
</span>
<span class="uk-text-bolder" *ngIf="openAccessMandatePublications != undefined && openAccessMandatePublications && openAccessMandateDatasets != undefined && openAccessMandateDatasets">
Open Access Mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}}
</span>
<span class="uk-text-bolder" *ngIf="openAccessMandatePublications != undefined && openAccessMandatePublications && (openAccessMandateDatasets == undefined || !openAccessMandateDatasets)">
Open Access Mandate for {{openaireEntities.PUBLICATIONS}}
</span>
<span class="uk-text-bolder" *ngIf="openAccessMandateDatasets != undefined && openAccessMandateDatasets && (openAccessMandatePublications == undefined || !openAccessMandatePublications)">
Open Access Mandate for {{openaireEntities.DATASETS}}
</span>
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
</ng-container>
<!-- types -->
<span *ngIf="entityType" class="uk-margin-xsmall-right">
<icon *ngIf="entityType.toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" ratio="0.8"></icon>
<icon *ngIf="entityType.toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" ratio="0.8"></icon>
@ -32,35 +50,41 @@ import {AlertModal} from "../../../utils/modal/alert";
<span *ngIf="types && removeUnknown(types, true).length > 0" class="uk-text-italic">
{{removeUnknown(types, true).join(' , ')}}
</span>
<span>
<span *ngIf="startDate || endDate">
{{' . '}}
</span>
<span *ngIf="startDate && !endDate">
{{'from '}}
</span>
<span *ngIf="!startDate && endDate">
{{'until '}}
</span>
<span *ngIf="startDate">
{{startDate | date: 'yyyy'}}
</span>
<span *ngIf="startDate && endDate">
{{' - '}}
</span>
<span *ngIf="endDate">
{{endDate | date: 'yyyy'}}
</span>
</span>
<span *ngIf="status && status != ''">
{{' . ' + status}}
</span>
<span *ngIf="year && year != ''">
{{' . ' + year}}
</span>
<span *ngIf="embargoEndDate">
. Embargo end date: {{embargoEndDate | date: 'dd MMM yyyy'}}
</span>
<!-- dates -->
<ng-container *ngIf="startDate && !endDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span class="uk-margin-xsmall-right">From</span>
<span>{{startDate | date: 'dd MMM yyyy'}}</span>
</ng-container>
<ng-container *ngIf="!startDate && endDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span class="uk-margin-xsmall-right">Until</span>
<span>{{endDate | date: 'dd MMM yyyy'}}</span>
</ng-container>
<ng-container *ngIf="startDate && endDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<ng-container *ngIf="startDate">
<span>{{startDate | date: 'dd MMM yyyy'}}</span>
<span class="uk-margin-xsmall-left">(Started)</span>
</ng-container>
<span *ngIf="startDate && endDate" class="uk-margin-xsmall-left uk-margin-xsmall-right">-</span>
<ng-container *ngIf="endDate">
<span>{{endDate | date: 'dd MMM yyyy'}}</span>
<span class="uk-margin-xsmall-left">{{currentDate >= endDate ? '(Ended)' : '(Ending)'}}</span>
</ng-container>
</ng-container>
<ng-container *ngIf="status && status != ''">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>{{status}}</span>
</ng-container>
<ng-container *ngIf="date">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>{{date | date: 'dd MMM yyyy': 'UTC'}}</span>
</ng-container>
<ng-container *ngIf="embargoEndDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>Embargo end date: {{embargoEndDate | date: 'dd MMM yyyy'}}</span>
</ng-container>
<span *ngIf="underCuration">
. <span title="{{buildCurationTooltip()}}"
uk-tooltip="pos:bottom-right; delay:10;"
@ -81,8 +105,37 @@ import {AlertModal} from "../../../utils/modal/alert";
</ng-container>
</ng-container>
<!-- published info -->
<showPublisher [publisher]="publisher" [publishDate]="publishDate"
[journal]="journal" [properties]="properties"></showPublisher>
<showPublisher [publisher]="publisher" [journal]="journal" [properties]="properties"></showPublisher>
<!-- data provider labels -->
<ng-container *ngIf="compatibility && !(compatibility.info == 'not available' && type == 'service')">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>
<!-- link not working - dont know why -->
<a *ngIf="compatibility.id"
[queryParams]="{datasourceId: compatibility.id}" routerLinkActive="router-link-active"
[routerLink]="properties.searchLinkToDataProvider.split('?')[0]">
{{compatibility.info}}
<ng-container *ngIf="compatibility.name">{{compatibility.name}}</ng-container>
</a>
<span *ngIf="!compatibility.id">
<ng-container *ngIf="compatibility.info.toLowerCase() != 'not yet registered'">{{compatibility.info}}</ng-container>
<ng-container *ngIf="compatibility.info.toLowerCase() == 'not yet registered'">
{{compatibility.info}} <span *ngIf="properties.adminToolsPortalType == 'eosc'">in OpenAIRE</span>
</ng-container>
</span>
<span *ngIf="compatibility.name && !compatibility.id">
{{compatibility.name}}
</span>
</span>
</ng-container>
<ng-container *ngIf="aggregationStatus && aggregationStatus.fulltexts && aggregationStatus.fulltexts > 0">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>OpenAIRE Text Mining</span>
</ng-container>
<ng-container *ngIf="thematic">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>Thematic</span>
</ng-container>
</div>
<div *ngIf="authors">
<showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [isSticky]="isSticky"></showAuthors>
@ -95,8 +148,11 @@ export class LandingHeaderComponent {
@Input() types: string[];
@Input() startDate: number; // project landing
@Input() endDate: number; // project landing
@Input() currentDate: number; // project landing
@Input() status: string; // project landing
@Input() year: string;
@Input() openAccessMandatePublications: boolean // project landing
@Input() openAccessMandateDatasets: boolean // project landing
@Input() date: Date;
@Input() embargoEndDate: Date;
@Input() title: string;
@Input() subTitle: string;
@ -109,10 +165,15 @@ export class LandingHeaderComponent {
@Input() isTitleH1:boolean =true;
@Input() isSticky: boolean = false;
@Input() publisher; // showPublisher component
@Input() publishDate: Date; // showPublisher component
@Input() journal; // showPublisher component
@Input() languages;
@Input() programmingLanguages;
@Input() compatibility; // data provider landing
@Input() aggregationStatus; // data provider landing
@Input() thematic: boolean; // data provider landing
@Input() type; // data provider landing
public openaireEntities = OpenaireEntities;
public removeUnknown(array: string[], type: boolean = false): string[] {
if (type) {

4
landingPages/landing-utils/parsingFunctions.class.ts
View File

@ -20,8 +20,8 @@ export class ParsingFunctions {
private notebook_label: string = "EOSC";
private notebook_value: string = "EOSC Jupyter Notebook";
public open = 'lock_open';
public closed = 'lock';
public open = 'open_access';
public closed = 'closed_access';
public unknown = 'question_mark';
private instanceWithDoiExists: boolean = false;

7
landingPages/landing-utils/showPublisher.component.ts
View File

@ -4,12 +4,8 @@ import {EnvProperties} from "../../utils/properties/env-properties";
@Component({
selector: 'showPublisher, [showPublisher]',
template: `
<ng-container *ngIf="publishDate || journal && (journal['journal'] || journal['issn'] || journal['lissn']
<ng-container *ngIf="journal && (journal['journal'] || journal['issn'] || journal['lissn']
|| journal['volume'] || journal['eissn'] || journal['issue'])">
<ng-container *ngIf="publishDate">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
<span>{{publishDate | date: 'dd MMM yyyy' : 'UTC'}}</span>
</ng-container>
<ng-container *ngIf="journal && (journal['journal'] || journal['issn'] || journal['lissn']
|| journal['volume'] || journal['eissn'] || journal['issue'])">
<span class="uk-margin-xsmall-left uk-margin-xsmall-right">&#x2022;</span>
@ -77,7 +73,6 @@ import {EnvProperties} from "../../utils/properties/env-properties";
`
})
export class ShowPublisherComponent {
@Input() publishDate: Date;
@Input() publisher;
@Input() journal;
//@Input() sherpaUrl = 'http://www.sherpa.ac.uk/romeo/search.php?issn=';

43
landingPages/organization/organization.component.html
View File

@ -3,13 +3,12 @@
<div class="organization">
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left column -->
<div id="landing-left-sidebar" *ngIf="organizationInfo" class="uk-visible@s uk-padding-remove-horizontal">
<!-- <div id="landing-left-sidebar" *ngIf="organizationInfo" class="uk-visible@s uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-column uk-flex-right uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-margin-large-bottom uk-align-center">
<div class="uk-text-meta uk-text-uppercase">Actions</div>
<ul class="uk-list">
<!-- Share -->
<li class="uk-text-center">
<a (click)="openAddThisModal()" [title]="'Share this '+openaireEntities.ORGANIZATION+' in your social networks'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'">
@ -18,7 +17,6 @@
</span>
</a>
</li>
<!-- Download -->
<li class="uk-text-center"
[title]="'Download reports'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'">
@ -31,7 +29,8 @@
</ul>
</div>
</div>
</div>
</div> -->
<!-- center/right column -->
<div class="uk-width-expand uk-padding-remove uk-background-default">
<div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
@ -63,11 +62,43 @@
</div>
</div>
</ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-blur-background uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<!-- new action bar -->
<div class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
<!-- Versions -->
<a *ngIf="organizationInfo?.deletedByInferenceIds" (click)="openDeletedByInference()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="versions" visuallyHidden="versions"></icon>
<span class="uk-margin-xsmall-left">
View all {{organizationInfo.deletedByInferenceIds.length}} versions
</span>
</a>
<!-- Divider -->
<span *ngIf="organizationInfo?.deletedByInferenceIds" class="landing-action-bar-divider"></span>
<!-- Actions -->
<a (click)="openAddThisModal()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-xsmall-left">Share</span>
</a>
<a (click)="buildFunderOptions(); openDownloadReportsModal()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="download" visuallyHidden="download"></icon>
<span class="uk-margin-xsmall-left">Download</span>
</a>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-left uk-margin-large-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="organizationInfo">
<!-- Main content -->
@ -100,12 +131,12 @@
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<!-- Versions -->
<span *ngIf="organizationInfo.deletedByInferenceIds" class="uk-text-primary uk-flex uk-flex-middle">
<!-- <span *ngIf="organizationInfo.deletedByInferenceIds" class="uk-text-primary uk-flex uk-flex-middle">
<icon flex="true" ratio="0.8" name="auto_awesome_motion"></icon>
<a (click)="openDeletedByInference()" class="uk-text-primary uk-text-small uk-margin-small-left">
View all {{organizationInfo.deletedByInferenceIds.length}} versions
</a>
</span>
</span> -->
<!-- Landing header -->
<landing-header [properties]="properties" [title]="organizationInfo.title.name"
[subTitle]="(organizationInfo.name

4
landingPages/organization/organization.module.ts
View File

@ -30,7 +30,7 @@ import {LoadingModule} from '../../utils/loading/loading.module';
import {IconsModule} from '../../utils/icons/icons.module';
import {InputModule} from '../../sharedComponents/input/input.module';
import {IconsService} from '../../utils/icons/icons.service';
import {graph} from "../../utils/icons/icons";
import {graph, versions} from "../../utils/icons/icons";
@NgModule({
@ -60,6 +60,6 @@ import {graph} from "../../utils/icons/icons";
})
export class OrganizationModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([graph]);
this.iconsService.registerIcons([graph, versions]);
}
}

71
landingPages/project/project.component.html
View File

@ -4,7 +4,7 @@
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box - actions -->
<div id="landing-left-sidebar" *ngIf="projectInfo" class="uk-visible@s uk-padding-remove-horizontal">
<!-- <div id="landing-left-sidebar" *ngIf="projectInfo" class="uk-visible@s uk-padding-remove-horizontal">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@ -19,7 +19,6 @@
<div class="uk-margin-large-bottom uk-align-center">
<div class="uk-text-meta uk-text-uppercase">Actions</div>
<ul class="uk-list">
<!-- Share -->
<li class="uk-text-center">
<a (click)="openAddThisModal()"
[title]="'Share this '+openaireEntities.PROJECT+' in your social networks'"
@ -29,7 +28,6 @@
</span>
</a>
</li>
<!-- Link to -->
<li *ngIf="isRouteAvailable('participate/direct-claim')" class="uk-text-center"
[title]="'<span class=\'uk-flex uk-flex-middle\'>Link this project to '+openaireEntities.RESULTS+'<span class=\'material-icons uk-margin-small-left\'>east</span></span>'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'">
@ -57,7 +55,6 @@
<icon name="code_off" visuallyHidden="code"></icon>
</span>
</a>
</li>
<li class="uk-text-center"
[title]="'Download report'"
@ -71,7 +68,7 @@
</ul>
</div>
</div>
</div>
</div> -->
<!-- center box-->
<div class="uk-width-expand uk-padding-remove uk-background-default">
@ -109,6 +106,45 @@
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div>
<!-- new action bar -->
<div class="uk-margin-top uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
<div class="uk-flex uk-text-xsmall" style="grid-gap: 20px;">
<!-- Actions -->
<a *ngIf="isRouteAvailable('participate/direct-claim')"
[queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[projectId, 'project','result'])"
routerLinkActive="router-link-active" routerLink="/participate/direct-claim"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.7" name="link_to" visuallyHidden="link"></icon>
<span class="uk-margin-xsmall-left">Link to</span>
</a>
<a (click)="openAddThisModal()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="share" visuallyHidden="share"></icon>
<span class="uk-margin-xsmall-left">Share</span>
</a>
<a *ngIf="isRouteAvailable('participate/deposit/learn-how')"
routerLinkActive="router-link-active" routerLink="/participate/deposit/learn-how"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.7" name="upload" visuallyHidden="upload"></icon>
<span class="uk-margin-xsmall-left">Deposit</span>
</a>
<a (click)="openEmbedResultsModal()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="code_off" visuallyHidden="code"></icon>
<span class="uk-margin-xsmall-left">Embed</span>
</a>
<a (click)="openDownloadReportModal()"
class="uk-flex uk-flex-middle uk-flex-center uk-button-link uk-text-bolder">
<icon flex="true" ratio="0.8" name="download" visuallyHidden="download"></icon>
<span class="uk-margin-xsmall-left">Download</span>
</a>
</div>
</div>
</div>
</div>
<div class="uk-margin-large-left uk-margin-large-right" [style]="'margin-bottom: '+graph_height+'px'">
<ng-container *ngIf="projectInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
@ -171,12 +207,14 @@
<landing-header [properties]="properties" [title]="projectName"
[subTitle]="projectInfo.acronym ? projectInfo.title : ''"
[entityType]="'project'"
[startDate]="projectInfo.startDate"
[endDate]="projectInfo.endDate"
[status]="projectInfo.status">
[startDate]="projectInfo.startDate" [endDate]="projectInfo.endDate"
[currentDate]="projectInfo.currentDate" [status]="projectInfo.status"
[openAccessMandatePublications]="projectInfo.openAccessMandatePublications"
[openAccessMandateDatasets]="projectInfo.openAccessMandateDatasets">
</landing-header>
<!-- Labels -->
<div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
<!-- To be moved inside the landing-header -->
<!-- <div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="projectInfo.openAccessMandatePublications != undefined && projectInfo.openAccessMandatePublications && projectInfo.openAccessMandateDatasets != undefined && projectInfo.openAccessMandateDatasets">
<div>
<span class="uk-label uk-label-success uk-text-truncate"
@ -206,12 +244,7 @@
</span>
</div>
</ng-container>
<!-- <ng-container *ngIf="projectInfo.specialClause39">-->
<!-- <span class="uk-label custom-label label-sc39" title="Special Clause 39">-->
<!-- Special Clause 39-->
<!-- </span>&#160;-->
<!-- </ng-container>-->
</div>
</div> -->
<div class="uk-text-small">
<div *ngIf="projectInfo.funding" class="uk-margin-bottom">
<div class="uk-margin-small-bottom">
@ -245,13 +278,13 @@
</span>
</div>
</div>
<div *ngIf="projectInfo.status" class="uk-margin-right">
<!-- <div *ngIf="projectInfo.status" class="uk-margin-right">
<span>
<span class="uk-text-meta">Status: </span>
<span class="uk-text-secondary">{{projectInfo.status}}</span>
</span>
</div>
<div *ngIf="projectInfo.startDate || projectInfo.endDate" class="uk-width-large uk-margin-bottom">
</div> -->
<!-- <div *ngIf="projectInfo.startDate || projectInfo.endDate" class="uk-width-large uk-margin-bottom">
<progress *ngIf="projectInfo.startDate && projectInfo.endDate"
class="uk-progress uk-box-shadow-inner uk-margin-small-top uk-margin-small-bottom"
[value]="(projectInfo.currentDate > projectInfo.startDate ? projectInfo.currentDate-projectInfo.startDate : 0)"
@ -268,7 +301,7 @@
<ng-container *ngIf="projectInfo.currentDate < projectInfo.endDate">(Ending)</ng-container>
</span>
</div>
</div>
</div> -->
<div *ngIf="projectInfo.urlInfo" class="uk-margin-bottom">
<a target="_blank" href="{{projectInfo.url}}" class="uk-button uk-button-text custom-external uk-text-capitalize uk-text-normal">
{{projectInfo.urlInfo}}

4
landingPages/project/project.module.ts
View File

@ -31,7 +31,7 @@ import {LoadingModule} from "../../utils/loading/loading.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {InputModule} from "../../sharedComponents/input/input.module";
import {IconsService} from "../../utils/icons/icons.service";
import {graph, link} from "../../utils/icons/icons";
import {graph, link, link_to, open_access} from "../../utils/icons/icons";
@NgModule({
imports: [
@ -55,6 +55,6 @@ import {graph, link} from "../../utils/icons/icons";
})
export class ProjectModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([link, graph])
this.iconsService.registerIcons([link, graph, link_to, open_access])
}
}

72
landingPages/result/resultLanding.component.html
View File

@ -217,10 +217,9 @@
[authors]="resultLandingInfo.authors"
[underCuration]="resultLandingInfo.underCurationMessage"
[entityType]="getTypeName()" [types]="resultLandingInfo.types"
[year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate"
[publisher]="resultLandingInfo.publisher" [publishDate]="resultLandingInfo.dateofacceptance"
[journal]="resultLandingInfo.journal" [languages]="resultLandingInfo.languages"
[programmingLanguages]="resultLandingInfo.programmingLanguages">
[date]="resultLandingInfo.dateofacceptance" [embargoEndDate]="resultLandingInfo.embargoEndDate"
[publisher]="resultLandingInfo.publisher" [journal]="resultLandingInfo.journal"
[languages]="resultLandingInfo.languages" [programmingLanguages]="resultLandingInfo.programmingLanguages">
</landing-header>
<!-- Labels -->
<!-- Not used anymore - access labels will be in action bars, languages in the landing-header component -->
@ -271,7 +270,7 @@
[authors]="resultLandingInfo.authors"
[underCuration]="resultLandingInfo.underCurationMessage"
[entityType]="getTypeName()" [types]="resultLandingInfo.types"
[year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate"
[date]="resultLandingInfo.dateofacceptance" [embargoEndDate]="resultLandingInfo.embargoEndDate"
isSticky="true">
</landing-header>
<!-- <showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
@ -292,8 +291,7 @@
[tabTitle]="'Enermaps Tool'" [tabId]="'enermaps'"
customClass="portalTab">
</my-tab>
<!-- New metrics tab -->
<my-tab *ngIf="resultLandingInfo && resultLandingInfo.measure"
<my-tab *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)"
[tabTitle]="'Metrics'" [tabId]="'metrics'">
</my-tab>
</my-tabs>
@ -452,7 +450,7 @@
</ul>
</div>
</ng-container>
<ng-container *ngIf="resultLandingInfo && resultLandingInfo.measure">
<ng-container *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
<div id="metrics" class="landing-section uk-padding uk-padding-remove-horizontal">
<ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
<li>
@ -461,7 +459,7 @@
<li *ngIf="resultLandingInfo.measure.citations || resultLandingInfo.measure.popularity || resultLandingInfo.measure.influence || resultLandingInfo.measure.impulse">
<a href="#">Impact</a>
</li>
<li>
<li *ngIf="hasAltMetrics">
<a href="#">Social</a>
</li>
<li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
@ -533,38 +531,8 @@
</div>
</div>
</div>
<div id="altmetrics">
<div class="uk-grid-divider" uk-grid>
<div>
<div class="uk-text-center uk-margin-small-bottom">
<img src="assets/common-assets/" loading="lazy" alt="Altmetric">
</div>
<span class="uk-text-uppercase uk-text-xsmall">Social by</span>
<span class="uk-display-block uk-text-bolder">Altmetric</span>
</div>
<div>
<table class="uk-table uk-table-small">
<tbody>
<tr>
<td class="uk-padding-remove-top">
Facebook
</td>
<td class="uk-padding-remove-top uk-text-uppercase uk-text-bolder">
1
</td>
</tr>
<tr>
<td class="uk-padding-remove-bottom">
Twitter
</td>
<td class="uk-padding-remove-bottom uk-text-uppercase uk-text-bolder">
4
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="altmetrics" *ngIf="hasAltMetrics">
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
</div>
<div id="usagecounts" *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
<div class="uk-grid-divider" uk-grid>
@ -671,8 +639,8 @@
</div>
</li>
<!-- social -->
<li>
3
<li *ngIf="hasAltMetrics">
<altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics>
</li>
<!-- usage -->
<li *ngIf="resultLandingInfo.measure.downloads || resultLandingInfo.measure.views">
@ -680,8 +648,16 @@
<div>
Stats
</div>
<div class="uk-margin-large-left">
Chart
<div *ngIf="viewsFrameUrl || downloadsFrameUrl" class="uk-margin-large-left">
<div *ngIf="viewsFrameUrl">
<i-frame [height]="200" [url]=viewsFrameUrl [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply">
</i-frame>
</div>
<div *ngIf="downloadsFrameUrl">
<i-frame [height]="200" [url]=downloadsFrameUrl [addClass]="false"
customContainerClass="uk-background-default" customIframeClass="uk-blend-multiply"></i-frame>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
@ -747,21 +723,21 @@
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="fire" ratio="0.8" [flex]="true"></icon></div>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="landmark" ratio="0.8" [flex]="true"></icon></div>
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="download" ratio="0.8" [flex]="true"></icon></div>
<div *ngIf="resultLandingInfo.measure.views" class="cell uk-margin-xsmall-bottom uk-flex uk-flex-middle"><icon name="visibility" ratio="0.8" [flex]="true"></icon></div>
<div *ngIf="resultLandingInfo.measure.views" class="cell uk-flex uk-flex-middle"><icon name="visibility" ratio="0.8" [flex]="true"></icon></div>
</div>
<div>
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">Citations</div>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">Popularity</div>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">Influence</div>
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">Downloads</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell uk-margin-xsmall-bottom">Views</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell">Views</div>
</div>
<div class="uk-text-uppercase uk-text-bolder">
<div *ngIf="resultLandingInfo.measure.citations" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.citations}}</div>
<div *ngIf="resultLandingInfo.measure.popularity" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.popularity}}</div>
<div *ngIf="resultLandingInfo.measure.influence" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.influence}}</div>
<div *ngIf="resultLandingInfo.measure.downloads" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.downloads}}</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell uk-margin-xsmall-bottom">{{resultLandingInfo.measure.views}}</div>
<div *ngIf="resultLandingInfo.measure.views" class="cell">{{resultLandingInfo.measure.views}}</div>
</div>
</div>
</div>

4
landingPages/result/resultLanding.module.ts
View File

@ -33,7 +33,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
import {MatSelectModule} from "@angular/material/select";
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {graph, link, quotes, cite, link_to, versions, rocket, fire, landmark} from "../../utils/icons/icons";
import {graph, link, quotes, cite, link_to, versions, rocket, fire, landmark, open_access, closed_access} from "../../utils/icons/icons";
import {InputModule} from "../../sharedComponents/input/input.module";
import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.module";
@ -58,6 +58,6 @@ import {EGIDataTransferModule} from "../../utils/dataTransfer/transferData.modul
})
export class ResultLandingModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([link, graph, quotes, cite, link_to, versions, rocket, fire, landmark])
this.iconsService.registerIcons([link, graph, quotes, cite, link_to, versions, rocket, fire, landmark, open_access, closed_access])
}
}

1
landingPages/result/resultLanding.service.ts
View File

@ -127,7 +127,6 @@ export class ResultLandingService {
parseResultLandingInfo (data: any, subjectsVocabulary: any, properties: EnvProperties): any {
this.resultLandingInfo = new ResultLandingInfo();
// res
this.resultLandingInfo.record = data[15];
this.resultLandingInfo.objIdentifier = data[15]["result"]["header"]["dri:objIdentifier"];

9
utils/altmetrics.component.ts
View File

@ -6,12 +6,13 @@ declare var loadAltmetrics:any;
@Component({
selector: 'altmetrics',
template: `
<div [innerHTML]="altmetrics | safeHtml"></div>
<div [innerHTML]="altmetrics | safeHtml"></div>
`
})
export class AltMetricsComponent {
@Input() id ;
@Input() id;
@Input() type = 'doi'; // doi or arxiv
@Input() size: string = 'donut';
// public doi="10.7717/peerj.1150";
public altmetrics:string;
@ -26,9 +27,9 @@ export class AltMetricsComponent {
ngOnInit() {
this.sub = this.route.queryParams.subscribe(data => {
if(this.type == "doi"){
this.altmetrics='<div data-badge-popover="right" data-hide-no-mentions="true" data-badge-type="donut" data-doi="'+this.id+'" class="altmetric-embed uk-text-center"> </div>';
this.altmetrics='<div data-badge-details="right" data-hide-no-mentions="true" data-link-target="_blank" data-badge-type="'+this.size+'" data-doi="'+this.id+'" class="altmetric-embed"> </div>';
}else{
this.altmetrics='<div data-badge-popover="right" data-hide-no-mentions="true" data-badge-type="donut" data-arxiv-id="'+this.id+'" class="altmetric-embed uk-text-center"> </div>';
this.altmetrics='<div data-badge-details="right" data-hide-no-mentions="true" data-link-target="_blank" data-badge-type="'+this.size+'" data-arxiv-id="'+this.id+'" class="altmetric-embed"> </div>';
}
if (typeof document !== 'undefined') {
// let yourModule = require('../utils/altmetrics.js');

10
utils/icons/icons.ts
View File

@ -142,4 +142,14 @@ export const landmark = {
name: 'landmark',
data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M240.1 4.2c9.8-5.6 21.9-5.6 31.8 0l171.8 98.1L448 104l0 .9 47.9 27.4c12.6 7.2 18.8 22 15.1 36s-16.4 23.8-30.9 23.8H32c-14.5 0-27.2-9.8-30.9-23.8s2.5-28.8 15.1-36L64 104.9V104l4.4-1.6L240.1 4.2zM64 224h64V416h40V224h64V416h48V224h64V416h40V224h64V420.3c.6 .3 1.2 .7 1.8 1.1l48 32c11.7 7.8 17 22.4 12.9 35.9S494.1 512 480 512H32c-14.1 0-26.5-9.2-30.6-22.7s1.1-28.1 12.9-35.9l48-32c.6-.4 1.2-.7 1.8-1.1V224z"/></svg>'
}
export const open_access = {
name: 'open_access',
data: '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="1000" viewBox="0 0 640 1000"> <metadata><rdf:RDF><cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> <dc:creator>art designer at PLoS, modified by Wikipedia users Nina, Beao, JakobVoss, and AnonMoos</dc:creator> <dc:description>Open Access logo, converted into svg, designed by PLoS. This version with transparent background.</dc:description> <dc:source>http://commons.wikimedia.org/wiki/File:Open_Access_logo_PLoS_white.svg</dc:source> <dc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/"/> <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/"/> <cc:attributionName>art designer at PLoS, modified by Wikipedia users Nina, Beao, JakobVoss, and AnonMoos</cc:attributionName> <cc:attributionURL>http://www.plos.org/</cc:attributionURL> </cc:Work></rdf:RDF></metadata> <g stroke="#f68212" stroke-width="104.764" fill="none"> <path d="M111.387,308.135V272.408A209.21,209.214 0 0,1 529.807,272.408V530.834"/> <circle cx="320.004" cy="680.729" r="256.083"/> </g> <circle fill="#f68212" cx="321.01" cy="681.659" r="86.4287"/> </svg>'
}
export const closed_access = {
name: 'closed_access',
data: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="1000" viewBox="0 0 640 1000"> <metadata> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <cc:Work xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:creator>Jakob Voss, based on art designer at PLoS, modified by Wikipedia users Nina and Beao</dc:creator> <dc:description>Closed Access logo, derived from PLoS Open Access logo. This version with transparent background.</dc:description> <dc:source>http://commons.wikimedia.org/wiki/File:Closed_Access_logo_transparent.svg</dc:source> <dc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" /> <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" /> <cc:attributionName>Jakob Voss, based on art designer at PLoS, modified by Wikipedia users Nina and Beao</cc:attributionName> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(-528.67833,-378.69073)"> <path d="m 587.6826,651.09852 -2.7e-4,258.42721 104.764,0 0,-258.42721 c 0,-86.48025 70.36161,-156.8333 156.82974,-156.8333 86.46813,0 156.82523,70.35304 156.82523,156.8333 l 0,258.42721 104.7642,-2.5e-4 0,-258.42696 c 0,-144.2401 -117.35336,-261.59346 -261.58943,-261.59346 -144.23204,0 -261.59374,117.35336 -261.59374,261.59346" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <path d="m 936.11577,1060.3489 c 0,47.7233 -38.69235,86.4157 -86.42773,86.4157 -47.73135,0 -86.42776,-38.6924 -86.42776,-86.4157 0,-47.7515 38.69641,-86.44787 86.42776,-86.44787 47.73538,0 86.42773,38.69637 86.42773,86.44787" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <path d="m 644.97395,1059.416 c 0,-112.32498 91.38747,-203.70437 203.7084,-203.70437 112.3169,0 203.69225,91.3794 203.69225,203.70437 0,112.3128 -91.37537,203.7084 -203.69224,203.7084 -112.32093,0 -203.7084,-91.3956 -203.7084,-203.7084 m -104.76018,0 c 0,170.0686 138.39184,308.4604 308.46858,308.4604 170.08084,0 308.46054,-138.3918 308.46054,-308.4604 0,-170.09295 -138.3797,-308.46857 -308.46056,-308.46857 -170.07674,0 -308.46858,138.37563 -308.46858,308.46857" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> </g> </svg>'
}
/** Add new icon under this line to be sure that it will be added on preview */