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

[Library & common-assets | new-theme]: 

1. landing-utils.css: Deleted .landing-background-default-color (replaced in html with uk-background-default).
2. resultLanding.component.html & project.component.html & organization.component.html & dataProvider.component.html: Updates and fixes for redesign.
   a. #graph_and_feedback outside margins and checks (invisible when no info).
   b. [Bug fix] margin-top of center column fixed (uk-sticky-placeholder was adding space).
   c. [Bug fix] Show again right sidebar when screen becomes medium+.
   d. [Bug fix] Added grid in labels.
3. resultLanding.component.ts & project.component.ts & organization.component.ts & dataProvider.component.ts: Added ResizeObserver and updated how graph_offset is calculated | Added graph_height field to set margin-top of center column.
4. project.component.ts: In getFileNameType() use OpenaireEntities.
5. organization.component.ts:
   a. In contentTypes field added type file names from OpenaireEntities
   b. Added field contentFileName.
   c. Added field shouldSticky and observer for "bottom" to stop sticky title & tabs when bottom is in viewport.
6. dataProvider.component.ts: Added field "provenanceUrls" and method "getProvenanceUrls()" to flatten all urls from dataProviderInfo.provenance.
This commit is contained in:
Konstantina Galouni 2022-05-05 20:54:01 +03:00
parent 39a54e060a
commit 8b94b7f98a
8 changed files with 1169 additions and 1039 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,11 +8,11 @@
</div> </div>
</div> </div>
<div *ngIf="dataProviderInfo" class="dataprovider"> <div class="dataprovider">
<div *ngIf="!showFeedback" class="uk-grid"> <div *ngIf="!showFeedback" class="uk-grid">
<!-- left box - actions --> <!-- left box - actions -->
<div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color"> <div *ngIf="dataProviderInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky" <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> 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"> <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@ -43,7 +43,7 @@
</div> </div>
<!-- center box--> <!-- center box-->
<div *ngIf="dataProviderInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color"> <div class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template> <ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom"> <div class="uk-flex uk-margin-small-top uk-margin-small-bottom">
<!-- Last Index Info--> <!-- Last Index Info-->
@ -64,17 +64,20 @@
</div> </div>
</ng-template> </ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" <div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset"> uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container> <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div> </div>
<div class="uk-margin-medium-top"> <div class="uk-margin-large-left uk-margin-large-right">
<ng-container *ngIf="dataProviderInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<!-- schema.org--> <!-- schema.org-->
<schema2jsonld [data]=dataProviderInfo <schema2jsonld [data]=dataProviderInfo
[URL]="properties.domain+ properties.baseLink +properties.searchLinkToDataProvider +datasourceId" [URL]="properties.domain+ properties.baseLink +properties.searchLinkToDataProvider +datasourceId"
type="datasource" type="datasource"
[otherURL]="(dataProviderInfo.openDoarId)?(properties.openDoarURL+dataProviderInfo.openDoarId):((dataProviderInfo.r3DataId)?properties.r3DataURL+dataProviderInfo.r3DataId:null)"></schema2jsonld> [otherURL]="(dataProviderInfo.provenance)?provenanceUrls:null"></schema2jsonld>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper> [texts]="pageContents['top']"></helper>
@ -95,7 +98,7 @@
</div> </div>
<!-- Labels --> <!-- Labels -->
<div class="uk-margin-bottom"> <div class="uk-margin-bottom uk-margin-remove-left uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="dataProviderInfo.compatibility"> <ng-container *ngIf="dataProviderInfo.compatibility">
<span class="uk-label uk-text-truncate" title="Compatibility"> <span class="uk-label uk-text-truncate" title="Compatibility">
<a *ngIf="dataProviderInfo.compatibility.id" <a *ngIf="dataProviderInfo.compatibility.id"
@ -112,13 +115,12 @@
</span> </span>
</span>&#160; </span>&#160;
</ng-container> </ng-container>
<ng-container *ngIf="dataProviderInfo.aggregationStatus && dataProviderInfo.aggregationStatus.fulltexts && dataProviderInfo.aggregationStatus.fulltexts > 0" <ng-container *ngIf="dataProviderInfo.aggregationStatus && dataProviderInfo.aggregationStatus.fulltexts && dataProviderInfo.aggregationStatus.fulltexts > 0">
class="uk-label uk-text-truncate"> <span class="uk-label uk-text-truncate">OpenAIRE Text Mining</span>&#160;
<span>OpenAIRE Text Mining</span>&#160;
</ng-container> </ng-container>
<ng-container *ngIf="dataProviderInfo.countries && removeUnknown(dataProviderInfo.countries).length > 0"> <ng-container *ngIf="dataProviderInfo.countries && removeUnknown(dataProviderInfo.countries).length > 0">
<ng-container *ngFor="let country of removeUnknown(dataProviderInfo.countries)"> <ng-container *ngFor="let country of removeUnknown(dataProviderInfo.countries)">
<span class="uk-label custom-label label-country" title="Country">{{country}}</span>&#160; <span class="uk-label label-country" title="Country">{{country}}</span>&#160;
</ng-container> </ng-container>
</ng-container> </ng-container>
</div> </div>
@ -198,7 +200,7 @@
<div *ngIf="hasAggregationStatusInfo || dataProviderInfo.fundedContent" <div *ngIf="hasAggregationStatusInfo || dataProviderInfo.fundedContent"
class="uk-margin-medium-bottom uk-animation-fade uk-animation-fast"> class="uk-margin-medium-bottom uk-animation-fade uk-animation-fast">
<span *ngIf="dataProviderInfo.aggregationStatus?.fulltexts && dataProviderInfo.aggregationStatus?.fulltexts != -1" <span *ngIf="dataProviderInfo.aggregationStatus?.fulltexts && dataProviderInfo.aggregationStatus?.fulltexts != -1"
class="uk-margin-right"> class="uk-margin-right uk-display-inline-block">
<div class="uk-text-meta uk-margin-small-bottom">Collected full-texts</div> <div class="uk-text-meta uk-margin-small-bottom">Collected full-texts</div>
{{dataProviderInfo.aggregationStatus.fulltexts | number}} {{dataProviderInfo.aggregationStatus.fulltexts | number}}
</span> </span>
@ -385,6 +387,8 @@
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div> <div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper> [texts]="pageContents['bottom']"></helper>
</ng-container>
</div>
</div> </div>
</div> </div>
</div> </div>

52
landingPages/dataProvider/dataProvider.component.ts
View File

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, HostListener, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
@ -29,6 +29,7 @@ import {Subscriber} from "rxjs";
import {TabComponent} from "../../utils/tabs/tab.component"; import {TabComponent} from "../../utils/tabs/tab.component";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
declare var ResizeObserver;
@Component({ @Component({
selector: 'dataprovider', selector: 'dataprovider',
@ -41,6 +42,7 @@ export class DataProviderComponent {
@Input() communityId = null; @Input() communityId = null;
public dataProviderInfo: DataProviderInfo; public dataProviderInfo: DataProviderInfo;
public datasourceId: string; public datasourceId: string;
public provenanceUrls: string[] = null;
// Message variables // Message variables
public warningMessage = ""; public warningMessage = "";
@ -122,10 +124,10 @@ export class DataProviderComponent {
public offset: number; public offset: number;
public stickyHeader: boolean = false; public stickyHeader: boolean = false;
public graph_offset: number = 0; public graph_offset: number = 0;
public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
private observer: IntersectionObserver;
subscriptions = []; subscriptions = [];
properties: EnvProperties = properties; properties: EnvProperties = properties;
@ -143,7 +145,8 @@ export class DataProviderComponent {
private seoService: SEOService, private seoService: SEOService,
private helper: HelperService, private helper: HelperService,
private _location: Location, private _location: Location,
private indexInfoService: IndexInfoService) { private indexInfoService: IndexInfoService,
private cdr: ChangeDetectorRef) {
this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService); this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService);
this.fetchDatasets = new FetchResearchResults(this._searchResearchResultsService); this.fetchDatasets = new FetchResearchResults(this._searchResearchResultsService);
this.fetchSoftware = new FetchResearchResults(this._searchResearchResultsService); this.fetchSoftware = new FetchResearchResults(this._searchResearchResultsService);
@ -190,29 +193,50 @@ export class DataProviderComponent {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); let bottom = document.getElementById('bottom');
if(bottom) { if(bottom) {
this.observer = new IntersectionObserver(entries => { let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; this.shouldSticky = !entry.isIntersecting;
}) })
}); });
this.observer.observe(bottom); this.subscriptions.push(observer);
observer.observe(bottom);
}
if(this.graph_and_feedback) {
this.observeGraphAndFeedback();
} }
} }
} }
ngAfterContentChecked() { ngAfterContentChecked() {
if(this.graph_and_feedback && window) { if(this.graph_and_feedback && window) {
this.graph_offset = this.calcGraphOffset(); this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
} }
} }
calcGraphOffset() {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; public observeGraphAndFeedback() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.graph_offset = this.calcGraphOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.graph_and_feedback.nativeElement);
}
calcGraphOffset(element) {
this.graph_height = element.offsetHeight;
return window.innerHeight-this.graph_height;
} }
public initializeValues() { public initializeValues() {
this._numberOfTabs = 0; this._numberOfTabs = 0;
this.tabsAreInitialized = false; this.tabsAreInitialized = false;
this.dataProviderInfo = null; this.dataProviderInfo = null;
this.provenanceUrls = null;
this.aggregationStatusIsInitialized = false; this.aggregationStatusIsInitialized = false;
this.fetchProjects.searchUtils.status = this.errorCodes.LOADING; this.fetchProjects.searchUtils.status = this.errorCodes.LOADING;
this.fetchProjects.searchUtils.totalResults = 0; this.fetchProjects.searchUtils.totalResults = 0;
@ -246,6 +270,8 @@ export class DataProviderComponent {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) { if (subscription instanceof Subscriber) {
subscription.unsubscribe(); subscription.unsubscribe();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
} }
}); });
this.fetchDatasets.clearSubscriptions(); this.fetchDatasets.clearSubscriptions();
@ -254,10 +280,6 @@ export class DataProviderComponent {
this.fetchPublications.clearSubscriptions(); this.fetchPublications.clearSubscriptions();
this.fetchDataproviders.clearSubscriptions(); this.fetchDataproviders.clearSubscriptions();
this.fetchProjects.clearSubscriptions(); this.fetchProjects.clearSubscriptions();
if(this.observer) {
this.observer.disconnect();
}
} }
private getDataProviderInfo(id: string) { private getDataProviderInfo(id: string) {
@ -266,6 +288,7 @@ export class DataProviderComponent {
this.showLoading = true; this.showLoading = true;
this.dataProviderInfo = null; this.dataProviderInfo = null;
this.provenanceUrls = null;
this.showTabs = false; this.showTabs = false;
if (this.datasourceId == null || this.datasourceId == '') { if (this.datasourceId == null || this.datasourceId == '') {
@ -275,6 +298,7 @@ export class DataProviderComponent {
this.subscriptions.push(this._dataproviderService.getDataproviderInfo(this.datasourceId, this.properties).subscribe( this.subscriptions.push(this._dataproviderService.getDataproviderInfo(this.datasourceId, this.properties).subscribe(
data => { data => {
this.dataProviderInfo = data; this.dataProviderInfo = data;
this.getProvenanceUrls();
this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url); this.seoService.createLinkForCanonicalURL(this.properties.domain +this.properties.baseLink + this._router.url);
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.getDataProviderAggregationStatus(this.dataProviderInfo.originalId); this.getDataProviderAggregationStatus(this.dataProviderInfo.originalId);
@ -756,4 +780,8 @@ export class DataProviderComponent {
public getKeys( map) { public getKeys( map) {
return Array.from(map.keys()); return Array.from(map.keys());
} }
public getProvenanceUrls() {
this.provenanceUrls = Array.from(this.dataProviderInfo.provenance.values()).map(res => res['url']).reduce((acc, val) => acc.concat(val), []);
}
} }

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

@ -3,10 +3,10 @@
<!-- TODO: Error messages --> <!-- TODO: Error messages -->
<div></div> <div></div>
<div *ngIf="organizationInfo" class="organization"> <div class="organization">
<div *ngIf="!showFeedback" class="uk-grid" uk-grid> <div *ngIf="!showFeedback" class="uk-grid" uk-grid>
<!-- left column --> <!-- left column -->
<div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color"> <div *ngIf="organizationInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-right landing-sidebar-height uk-sticky" <div class="uk-flex uk-flex-column uk-flex-right landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> uk-sticky="bottom: true" [attr.offset]="offset">
<div class="uk-margin-large-bottom uk-align-center"> <div class="uk-margin-large-bottom uk-align-center">
@ -36,10 +36,10 @@
</div> </div>
</div> </div>
<!-- center/right column --> <!-- center/right column -->
<div *ngIf="organizationInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color"> <div class="uk-width-expand uk-padding-remove uk-background-default">
<!-- Graph and feedback --> <!-- Graph and feedback -->
<ng-template #graph_and_feedback_template> <ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom"> <div class="uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!organizationInfo">
<!-- Last Index Info--> <!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2 graph"> <div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon> <icon name="graph" customClass="uk-text-primary"></icon>
@ -57,11 +57,15 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" uk-sticky="bottom: true;" [attr.offset]="graph_offset"> <div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container> <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div> </div>
<div class="uk-margin-large-left uk-margin-large-right">
<ng-container *ngIf="organizationInfo">
<!-- Main content --> <!-- Main content -->
<div class="uk-margin-medium-top"> <div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<!-- Schema --> <!-- Schema -->
<schema2jsonld *ngIf="organizationInfo" [data]=organizationInfo <schema2jsonld *ngIf="organizationInfo" [data]=organizationInfo
[URL]="properties.domain + properties.baseLink+this.properties.searchLinkToOrganization+organizationInfo.relcanId" [URL]="properties.domain + properties.baseLink+this.properties.searchLinkToOrganization+organizationInfo.relcanId"
@ -86,7 +90,7 @@
<!-- Basic info --> <!-- Basic info -->
<div class="uk-text-small"> <div class="uk-text-small">
<!-- Web Page --> <!-- Web Page -->
<div *ngIf="organizationInfo.title && organizationInfo.title.url" class="uk-margin-small-bottom"> <div *ngIf="organizationInfo.title && organizationInfo.title.url" class="uk-margin-small-bottom uk-display-inline-block">
<span class="uk-text-meta">Web page: </span> <span class="uk-text-meta">Web page: </span>
<a [href]="organizationInfo.title.url" target="_blank" class="uk-button uk-button-text uk-text-lowercase uk-text-normal custom-external"> <a [href]="organizationInfo.title.url" target="_blank" class="uk-button uk-button-text uk-text-lowercase uk-text-normal custom-external">
{{organizationInfo.title.url}} {{organizationInfo.title.url}}
@ -184,6 +188,8 @@
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"> [texts]="pageContents['bottom']">
</helper> </helper>
</ng-container>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -206,11 +212,11 @@
</organizationsDeletedByInference> </organizationsDeletedByInference>
</modal-alert> </modal-alert>
<!-- Share --> <!-- Share -->
<modal-alert #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle"> <modal-alert *ngIf="organizationInfo" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
<addThis></addThis> <addThis></addThis>
</modal-alert> </modal-alert>
<!-- Download --> <!-- Download -->
<modal-alert #downloadReportsModal large="true"> <modal-alert *ngIf="organizationInfo" #downloadReportsModal large="true">
<div class="uk-padding-small uk-margin-small-left uk-margin-small-right"> <div class="uk-padding-small uk-margin-small-left uk-margin-small-right">
<div class="uk-padding-small uk-padding-remove-vertical"> <div class="uk-padding-small uk-padding-remove-vertical">
<div class="uk-grid uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match=".subtitle"> <div class="uk-grid uk-grid-divider uk-child-width-1-2@m" uk-grid uk-height-match=".subtitle">
@ -223,7 +229,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="total > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="total > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('results'), 'results' + '-report')"> (click)="downloadFile(getCSVAffiliated('results'), openaireEntities.RESULTS_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
all {{openaireEntities.RESULTS}} (CSV) all {{openaireEntities.RESULTS}} (CSV)
</div> </div>
@ -232,7 +238,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="fetchPublications.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="fetchPublications.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('publications'), 'publications' + '-report')"> (click)="downloadFile(getCSVAffiliated('publications'), openaireEntities.PUBLICATIONS_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.PUBLICATIONS}} (CSV) {{openaireEntities.PUBLICATIONS}} (CSV)
</div> </div>
@ -241,7 +247,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="fetchDatasets.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="fetchDatasets.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('datasets'), 'datasets' + '-report')"> (click)="downloadFile(getCSVAffiliated('datasets'), openaireEntities.DATASETS_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.DATASETS}} (CSV) {{openaireEntities.DATASETS}} (CSV)
</div> </div>
@ -250,7 +256,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="fetchSoftware.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="fetchSoftware.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('software'), 'software' + '-report')"> (click)="downloadFile(getCSVAffiliated('software'), openaireEntities.SOFTWARE_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.SOFTWARE}} (CSV) {{openaireEntities.SOFTWARE}} (CSV)
</div> </div>
@ -259,7 +265,7 @@
title="No report available"> title="No report available">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
[class]="fetchOrps.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'" [class]="fetchOrps.searchUtils.totalResults > 0 ? '' : 'uk-disabled uk-text-muted'"
(click)="downloadFile(getCSVAffiliated('other'), 'other' + '-report')"> (click)="downloadFile(getCSVAffiliated('other'), openaireEntities.OTHER_FILE + '-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.OTHER}} (CSV) {{openaireEntities.OTHER}} (CSV)
</div> </div>
@ -280,14 +286,14 @@
<ul class="uk-list uk-margin-remove-bottom"> <ul class="uk-list uk-margin-remove-bottom">
<li> <li>
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
(click)="downloadFile(getFunderProjects(), funder.name + '-projects-report')"> (click)="downloadFile(getFunderProjects(), funder.name + '-'+openaireEntities.PROJECTS_FILE+'-report')">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{openaireEntities.PROJECTS}} (CSV) {{openaireEntities.PROJECTS}} (CSV)
</div> </div>
</li> </li>
<li *ngFor="let contentType of contentTypes"> <li *ngFor="let contentType of contentTypes">
<div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal" <div class="uk-flex uk-flex-middle uk-button uk-button-link uk-text-normal"
(click)="confirmOpenApplyAll(contentType[0])"> (click)="confirmOpenApplyAll(contentType[0], contentType[2])">
<icon name="download" flex="true" class="uk-margin-small-right"></icon> <icon name="download" flex="true" class="uk-margin-small-right"></icon>
{{contentType[1]}} (CSV) {{contentType[1]}} (CSV)
</div> </div>

74
landingPages/organization/organization.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ElementRef, Input, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
import {OrganizationService} from '../../services/organization.service'; import {OrganizationService} from '../../services/organization.service';
@ -27,6 +27,8 @@ import {properties} from "../../../../environments/environment";
import {OpenaireEntities} from '../../utils/properties/searchFields'; import {OpenaireEntities} from '../../utils/properties/searchFields';
import {Option} from '../../sharedComponents/input/input.component'; import {Option} from '../../sharedComponents/input/input.component';
declare var ResizeObserver;
@Component({ @Component({
selector: 'organization', selector: 'organization',
templateUrl: 'organization.component.html', templateUrl: 'organization.component.html',
@ -84,13 +86,14 @@ export class OrganizationComponent {
public divContents = null; public divContents = null;
// Helper variables to specify funder in downloadPublicationsFile function // Helper variables to specify funder in downloadPublicationsFile function
public contentTypes: [string, string][] = [ public contentTypes: [string, string, string][] = [
['results', 'all ' + OpenaireEntities.RESULTS], ['results', 'all ' + OpenaireEntities.RESULTS, OpenaireEntities.RESULTS_FILE],
['publications', OpenaireEntities.PUBLICATIONS], ['publications', OpenaireEntities.PUBLICATIONS, OpenaireEntities.PUBLICATIONS_FILE],
['datasets', OpenaireEntities.DATASETS], ['datasets', OpenaireEntities.DATASETS, OpenaireEntities.DATASETS_FILE],
['software', OpenaireEntities.SOFTWARE], ['software', OpenaireEntities.SOFTWARE, OpenaireEntities.SOFTWARE_FILE],
['other', OpenaireEntities.OTHER], ['other', OpenaireEntities.OTHER, OpenaireEntities.OTHER_FILE],
]; ];
public contentFileName: string = '';
public funderContentType: string = ''; public funderContentType: string = '';
public funder: any = ""; public funder: any = "";
private funderId: string; private funderId: string;
@ -101,8 +104,11 @@ export class OrganizationComponent {
public offset: number; public offset: number;
public stickyHeader: boolean = false; public stickyHeader: boolean = false;
public graph_offset: number = 0; public graph_offset: number = 0;
public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true;
subscriptions = []; subscriptions = [];
innerReportSubscriptions = []; innerReportSubscriptions = [];
properties: EnvProperties; properties: EnvProperties;
@ -131,7 +137,8 @@ export class OrganizationComponent {
private helper: HelperService, private helper: HelperService,
private seoService: SEOService, private seoService: SEOService,
private _location: Location, private _location: Location,
private indexInfoService: IndexInfoService) { private indexInfoService: IndexInfoService,
private cdr: ChangeDetectorRef) {
this.fetchProjects = new FetchProjects(this._searchProjectsService); this.fetchProjects = new FetchProjects(this._searchProjectsService);
this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService); this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService); this.fetchPublications = new FetchResearchResults(this._searchResearchResultsService);
@ -179,16 +186,50 @@ export class OrganizationComponent {
//this.csvAffiliatedPublications = this.downloadURLAPI + "?format=csv&type=publications&fq=(((oaftype exact result) and (resulttypeid exact publication)) and (relorganizationid exact \"" + this.organizationId + "\"))"; //this.csvAffiliatedPublications = this.downloadURLAPI + "?format=csv&type=publications&fq=(((oaftype exact result) and (resulttypeid exact publication)) and (relorganizationid exact \"" + this.organizationId + "\"))";
this.csvProjectParamsHead = 'format=csv&type=projects&fq=((funder exact "'; this.csvProjectParamsHead = 'format=csv&type=projects&fq=((funder exact "';
//this.csvPublicationParamsHead = 'format=csv-special&type=publications&page=0&query=((((oaftype exact result) and (resulttypeid exact publication)) and (funderid exact '; //this.csvPublicationParamsHead = 'format=csv-special&type=publications&page=0&query=((((oaftype exact result) and (resulttypeid exact publication)) and (funderid exact ';
}
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom');
if(bottom) {
let observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting;
})
});
this.subscriptions.push(observer);
observer.observe(bottom);
}
if(this.graph_and_feedback) {
this.observeGraphAndFeedback();
}
}
} }
ngAfterContentChecked() { ngAfterContentChecked() {
if(this.graph_and_feedback && window) { if(this.graph_and_feedback && window) {
this.graph_offset = this.calcGraphOffset(); this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
} }
} }
calcGraphOffset() {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; public observeGraphAndFeedback() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.graph_offset = this.calcGraphOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.graph_and_feedback.nativeElement);
}
calcGraphOffset(element) {
this.graph_height = element.offsetHeight;
return window.innerHeight-this.graph_height;
} }
private getPageContents() { private getPageContents() {
@ -211,6 +252,8 @@ export class OrganizationComponent {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) { if (subscription instanceof Subscriber) {
subscription.unsubscribe(); subscription.unsubscribe();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
} }
}); });
this.innerReportSubscriptions.forEach(subscription => { this.innerReportSubscriptions.forEach(subscription => {
@ -419,7 +462,7 @@ export class OrganizationComponent {
let title: boolean = false; let title: boolean = false;
let title_index: number = 0; let title_index: number = 0;
let filename: string = 'funder-project-' + this.funderContentType + '-report'; let filename: string = 'funder-project-' + this.contentFileName + '-report';
this.subscriptions.push(this._searchProjectsService.getProjectsForOrganizations(this.organizationId, ' and (funder exact "' + this.encodeURI(this.funderId) + '" ) ', 1, this.funderCount, [], this.properties).subscribe( this.subscriptions.push(this._searchProjectsService.getProjectsForOrganizations(this.organizationId, ' and (funder exact "' + this.encodeURI(this.funderId) + '" ) ', 1, this.funderCount, [], this.properties).subscribe(
data => { data => {
@ -570,7 +613,7 @@ export class OrganizationComponent {
} }
} }
public confirmOpenApplyAll(contentType: string) { public confirmOpenApplyAll(contentType: string, contentFileName: string) {
this.alertApplyAll.cancelButton = true; this.alertApplyAll.cancelButton = true;
this.alertApplyAll.okButton = true; this.alertApplyAll.okButton = true;
this.alertApplyAll.alertTitle = "CSV FILE"; this.alertApplyAll.alertTitle = "CSV FILE";
@ -581,6 +624,7 @@ export class OrganizationComponent {
this.funderId = this.funder.id; this.funderId = this.funder.id;
this.funderCount = this.funder.number; this.funderCount = this.funder.number;
this.funderContentType = contentType; this.funderContentType = contentType;
this.contentFileName = contentFileName;
} }
public confirmCloseApplyAll() { public confirmCloseApplyAll() {
@ -627,10 +671,6 @@ export class OrganizationComponent {
return this.downloadURLAPI + '?' + this.csvProjectParamsHead + encodeURI(this.funder.id) + this.csvParamsTail; return this.downloadURLAPI + '?' + this.csvProjectParamsHead + encodeURI(this.funder.id) + this.csvParamsTail;
} }
open(value: any) {
console.log(value);
}
openDownloadReportsModal() { openDownloadReportsModal() {
this.funder = this.fetchProjects.funders[0]; this.funder = this.fetchProjects.funders[0];
this.downloadReportsModal.cancelButton = false; this.downloadReportsModal.cancelButton = false;

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

@ -8,11 +8,11 @@
</div> </div>
</div> </div>
<div *ngIf="projectInfo" class="project"> <div class="project">
<div *ngIf="!showFeedback" class="uk-grid"> <div *ngIf="!showFeedback" class="uk-grid">
<!-- left box - actions --> <!-- left box - actions -->
<div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color"> <div *ngIf="projectInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky" <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> 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"> <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@ -82,9 +82,9 @@
</div> </div>
<!-- center box--> <!-- center box-->
<div *ngIf="projectInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color"> <div class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template> <ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom"> <div class="uk-flex uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!projectInfo">
<!-- Last Index Info--> <!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2 graph"> <div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon> <icon name="graph" customClass="uk-text-primary"></icon>
@ -103,12 +103,14 @@
</div> </div>
</ng-template> </ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" <div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset"> uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container> <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div> </div>
<div class="uk-margin-medium-top"> <div class="uk-margin-large-left uk-margin-large-right">
<ng-container *ngIf="projectInfo">
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<!-- schema.org--> <!-- schema.org-->
<schema2jsonld [data]=projectInfo <schema2jsonld [data]=projectInfo
[URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId" [URL]="properties.domain+properties.baseLink+properties.searchLinkToProject+projectId"
@ -124,7 +126,7 @@
[status]="projectInfo.status"> [status]="projectInfo.status">
</landing-header> </landing-header>
<!-- Labels --> <!-- Labels -->
<div class="uk-margin-bottom"> <div class="uk-margin-bottom uk-margin-remove-left uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="projectInfo.openAccessMandatePublications != undefined && projectInfo.openAccessMandatePublications && projectInfo.openAccessMandateDatasets != undefined && projectInfo.openAccessMandateDatasets"> <ng-container *ngIf="projectInfo.openAccessMandatePublications != undefined && projectInfo.openAccessMandatePublications && projectInfo.openAccessMandateDatasets != undefined && projectInfo.openAccessMandateDatasets">
<span class="uk-label uk-label-success uk-text-truncate" <span class="uk-label uk-label-success uk-text-truncate"
title="Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}}"> title="Open Access mandate for {{openaireEntities.PUBLICATIONS}} and {{openaireEntities.DATASETS}}">
@ -210,7 +212,7 @@
</div> </div>
</div> </div>
<div *ngIf="projectInfo.urlInfo" class="uk-margin-bottom"> <div *ngIf="projectInfo.urlInfo" class="uk-margin-bottom">
<a target="_blank" href="{{projectInfo.url}}" class="uk-button-text custom-external"> <a target="_blank" href="{{projectInfo.url}}" class="uk-button uk-button-text custom-external uk-text-capitalize uk-text-normal">
{{projectInfo.urlInfo}} {{projectInfo.urlInfo}}
</a> </a>
</div> </div>
@ -409,6 +411,8 @@
<div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div> <div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper> [texts]="pageContents['bottom']"></helper>
</ng-container>
</div>
</div> </div>
</div> </div>

66
landingPages/project/project.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, HostListener, Input, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
@ -30,6 +30,8 @@ import {properties} from "../../../../environments/environment";
import {Option} from "../../sharedComponents/input/input.component"; import {Option} from "../../sharedComponents/input/input.component";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
declare var ResizeObserver;
@Component({ @Component({
selector: 'project', selector: 'project',
templateUrl: 'project.component.html', templateUrl: 'project.component.html',
@ -149,10 +151,10 @@ export class ProjectComponent {
public offset: number; public offset: number;
public stickyHeader: boolean = false; public stickyHeader: boolean = false;
public graph_offset: number = 0; public graph_offset: number = 0;
public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
private observer: IntersectionObserver;
subscriptions = []; subscriptions = [];
properties: EnvProperties; properties: EnvProperties;
@ -170,7 +172,8 @@ export class ProjectComponent {
private _searchResearchResultsService: SearchResearchResultsService, private _searchResearchResultsService: SearchResearchResultsService,
private _reportsService: ReportsService, private _reportsService: ReportsService,
private htmlService: HtmlProjectReportService, private htmlService: HtmlProjectReportService,
private indexInfoService: IndexInfoService) {} private indexInfoService: IndexInfoService,
private cdr: ChangeDetectorRef) {}
ngOnInit() { ngOnInit() {
@ -232,38 +235,61 @@ export class ProjectComponent {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); let bottom = document.getElementById('bottom');
if(bottom) { if(bottom) {
this.observer = new IntersectionObserver(entries => { let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; this.shouldSticky = !entry.isIntersecting;
}) })
}); });
this.observer.observe(bottom); this.subscriptions.push(observer);
observer.observe(bottom);
}
if(this.graph_and_feedback) {
this.observeGraphAndFeedback();
} }
} }
} }
ngAfterContentChecked() { ngAfterContentChecked() {
if(this.graph_and_feedback && window) { if(this.graph_and_feedback && window) {
this.graph_offset = this.calcGraphOffset(); this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
} }
} }
calcGraphOffset() {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; public observeGraphAndFeedback() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.graph_offset = this.calcGraphOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.graph_and_feedback.nativeElement);
}
calcGraphOffset(element) {
this.graph_height = element.offsetHeight;
return window.innerHeight-this.graph_height;
} }
public getFileNameType(type: string) { public getFileNameType(type: string) {
if(type == "results") { if(type == "publications") {
return OpenaireEntities.RESULTS.replace(" ", "-"); // return OpenaireEntities.PUBLICATIONS.replace(" ", "-");
} else if(type == "publications") { return OpenaireEntities.PUBLICATIONS_FILE;
return OpenaireEntities.PUBLICATIONS.replace(" ", "-");
} else if(type == "datasets") { } else if(type == "datasets") {
return OpenaireEntities.DATASETS.replace(" ", "-"); // return OpenaireEntities.DATASETS.replace(" ", "-");
return OpenaireEntities.DATASETS_FILE;
} else if(type == "software") { } else if(type == "software") {
return OpenaireEntities.SOFTWARE.replace(" ", "-"); // return OpenaireEntities.SOFTWARE.replace(" ", "-");
return OpenaireEntities.SOFTWARE_FILE;
} else if(type == "other") { } else if(type == "other") {
return OpenaireEntities.OTHER.replace(" ", "-"); // return OpenaireEntities.OTHER.replace(" ", "-");
return OpenaireEntities.OTHER_FILE;
} }
return OpenaireEntities.RESULTS.replace(" ", "-"); // return OpenaireEntities.RESULTS.replace(" ", "-");
return OpenaireEntities.RESULTS_FILE;
} }
public getCsvParams(type: string) { public getCsvParams(type: string) {
@ -319,6 +345,8 @@ export class ProjectComponent {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) { if (subscription instanceof Subscriber) {
subscription.unsubscribe(); subscription.unsubscribe();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
} }
}); });
this.fetchDatasets.clearSubscriptions(); this.fetchDatasets.clearSubscriptions();
@ -326,10 +354,6 @@ export class ProjectComponent {
this.fetchSoftware.clearSubscriptions(); this.fetchSoftware.clearSubscriptions();
this.fetchOrps.clearSubscriptions(); this.fetchOrps.clearSubscriptions();
this.fetchDmps.clearSubscriptions(); this.fetchDmps.clearSubscriptions();
if(this.observer) {
this.observer.disconnect();
}
} }
private createClipboard() { private createClipboard() {
@ -953,7 +977,5 @@ export class ProjectComponent {
(!this.projectInfo.funding || this.fetchOrps.searchUtils.totalResults == 0 (!this.projectInfo.funding || this.fetchOrps.searchUtils.totalResults == 0
|| this.fetchOrps.searchUtils.status != this.errorCodes.DONE)} || this.fetchOrps.searchUtils.status != this.errorCodes.DONE)}
]; ];
console.log(this.resultTypesForDownloading);
} }
} }

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

@ -8,11 +8,11 @@
</div> </div>
</div> </div>
<div *ngIf="resultLandingInfo" class="publication"> <div class="publication">
<div *ngIf="!showFeedback" class="uk-grid"> <div *ngIf="!showFeedback" class="uk-grid">
<!-- left box - actions --> <!-- left box - actions -->
<div class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color"> <div *ngIf="resultLandingInfo" class="landing-left-sidebar-width landing-left-sidebar-border landing-background-light-color">
<div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky" <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center landing-sidebar-height uk-sticky"
uk-sticky="bottom: true" [attr.offset]="offset"> 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"> <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
@ -72,9 +72,9 @@
</div> </div>
<!-- center box--> <!-- center box-->
<div *ngIf="resultLandingInfo" class="uk-width-expand uk-padding-remove uk-margin-large-left uk-margin-large-right landing-background-default-color"> <div class="uk-width-expand uk-padding-remove uk-background-default">
<ng-template #graph_and_feedback_template> <ng-template #graph_and_feedback_template>
<div class="uk-flex uk-margin-small-top uk-margin-small-bottom"> <div class="uk-flex uk-margin-small-bottom uk-margin-small-top" [class.uk-invisible]="!resultLandingInfo">
<!-- Last Index Info--> <!-- Last Index Info-->
<div class="uk-width-2-3@m uk-width-1-2 graph"> <div class="uk-width-2-3@m uk-width-1-2 graph">
<icon name="graph" customClass="uk-text-primary"></icon> <icon name="graph" customClass="uk-text-primary"></icon>
@ -93,12 +93,16 @@
</div> </div>
</ng-template> </ng-template>
<div #graph_and_feedback id="graph_and_feedback" class="uk-text-xsmall uk-visible@m" <div #graph_and_feedback id="graph_and_feedback" class="uk-padding uk-padding-remove-vertical uk-text-xsmall uk-visible@m"
uk-sticky="bottom: true;" [attr.offset]="graph_offset"> uk-sticky="bottom: true;" [attr.offset]="graph_offset">
<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container> <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
</div> </div>
<div class="uk-margin-medium-top"> <div class="uk-margin-large-left uk-margin-large-right uk-height-1-1">
<ng-container *ngIf="resultLandingInfo">
<!-- in small screens there is no sticky #graph_and_feedback so margin-top is medium (40px) -->
<!-- else margin is medium (40px) - the actual height of uk-sticky-placeholder (graph_height - 20px -> margins of #graph_and_feedback) -->
<div [attr.style]="'margin-top: '+(graph_height? 'calc(40px + 20px - '+graph_height+'px)': '40px')">
<!-- schema.org--> <!-- schema.org-->
<schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record <schema2jsonld *ngIf="resultLandingInfo.record" [data]=resultLandingInfo.record
[URL]="canonicalUrl"></schema2jsonld> [URL]="canonicalUrl"></schema2jsonld>
@ -119,7 +123,7 @@
[year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate"> [year]="resultLandingInfo.date" [embargoEndDate]="resultLandingInfo.embargoEndDate">
</landing-header> </landing-header>
<!-- Labels --> <!-- Labels -->
<div class="uk-margin-bottom"> <div class="uk-margin-bottom uk-margin-remove-left uk-grid uk-grid-small uk-flex-middle" uk-grid>
<ng-container *ngIf="resultLandingInfo.accessMode && resultLandingInfo.accessMode.toLowerCase() !== 'not available'"> <ng-container *ngIf="resultLandingInfo.accessMode && resultLandingInfo.accessMode.toLowerCase() !== 'not available'">
<span [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')" <span [class]="'uk-label uk-text-truncate '+ (accessClass(resultLandingInfo.accessMode) == 'open' ? 'uk-label-success' : '')"
title="Access Mode">{{resultLandingInfo.accessMode}} title="Access Mode">{{resultLandingInfo.accessMode}}
@ -330,6 +334,8 @@
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper> [texts]="pageContents['bottom']"></helper>
</ng-container>
</div>
</div> </div>
@ -342,7 +348,8 @@
</div> </div>
<div id="right-column-offcanvas" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;"> <div id="right-column-offcanvas" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;">
<div class="uk-offcanvas-bar"> <div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button"> <button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button"
(click)="rightSidebarOffcanvasClicked = false">
<icon name="close" ratio="1.5" visuallyHidden="close"></icon> <icon name="close" ratio="1.5" visuallyHidden="close"></icon>
</button> </button>
<div *ngIf="rightSidebarOffcanvasClicked" class="uk-padding"> <div *ngIf="rightSidebarOffcanvasClicked" class="uk-padding">

41
landingPages/result/resultLanding.component.ts
View File

@ -1,4 +1,4 @@
import {ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'; import {ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
@ -26,7 +26,7 @@ import {UserManagementService} from "../../services/user-management.service";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
import {Option} from "../../sharedComponents/input/input.component"; import {Option} from "../../sharedComponents/input/input.component";
declare var UIkit; declare var ResizeObserver;
@Component({ @Component({
selector: 'result-landing', selector: 'result-landing',
@ -127,10 +127,10 @@ export class ResultLandingComponent {
public offset: number; public offset: number;
public stickyHeader: boolean = false; public stickyHeader: boolean = false;
public graph_offset: number = 0; public graph_offset: number = 0;
public graph_height: number = 0;
@ViewChild("graph_and_feedback") graph_and_feedback; @ViewChild("graph_and_feedback") graph_and_feedback;
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
private observer: IntersectionObserver;
public viewAll: string = ""; public viewAll: string = "";
public noCommunities: boolean = false; public noCommunities: boolean = false;
@ -224,23 +224,43 @@ export class ResultLandingComponent {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height'));
let bottom = document.getElementById('bottom'); let bottom = document.getElementById('bottom');
if(bottom) { if(bottom) {
this.observer = new IntersectionObserver(entries => { let observer = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting; this.shouldSticky = !entry.isIntersecting;
}) })
}); });
this.observer.observe(bottom); this.subscriptions.push(observer);
observer.observe(bottom);
}
if(this.graph_and_feedback) {
this.observeGraphAndFeedback();
} }
} }
} }
ngAfterContentChecked() { ngAfterContentChecked() {
if(this.graph_and_feedback && window) { if(this.graph_and_feedback && window) {
this.graph_offset = this.calcGraphOffset(); this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
} }
} }
calcGraphOffset() {
return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight; public observeGraphAndFeedback() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.graph_offset = this.calcGraphOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.graph_and_feedback.nativeElement);
}
calcGraphOffset(element) {
this.graph_height = element.offsetHeight;
return window.innerHeight-this.graph_height;
} }
private initMetaAndLinks(type: string) { private initMetaAndLinks(type: string) {
@ -299,12 +319,11 @@ export class ResultLandingComponent {
subscription.unsubscribe(); subscription.unsubscribe();
} else if (subscription instanceof Function) { } else if (subscription instanceof Function) {
subscription(); subscription();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
} }
}); });
this._vocabulariesService.clearSubscriptions(); this._vocabulariesService.clearSubscriptions();
if(this.observer) {
this.observer.disconnect();
}
} }
public pidInit(event) { public pidInit(event) {