Add mutation observer to handle active text in scrolling section
This commit is contained in:
parent
eaaa4b863c
commit
cfaffcc271
|
@ -18,7 +18,7 @@
|
||||||
background-size: 25%;
|
background-size: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact-us .left img {
|
.contact-us .left img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -29,7 +29,7 @@
|
||||||
transform: matrix(1, -0.07, 0.07, 1, 0, 0);
|
transform: matrix(1, -0.07, 0.07, 1, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
#contact-us .right img {
|
.contact-us .right img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
|
@ -26,14 +26,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ng-template #scrolling_text let-position_class="position_class">
|
<ng-template #scrolling_text let-position_class="position_class">
|
||||||
<div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">
|
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">
|
||||||
<h3 class="uk-h2">
|
<h3 class="uk-h2">
|
||||||
Get a <span class="uk-text-primary">360° view <br> of research results.</span>
|
Get a <span class="uk-text-primary">360° view <br> of research results.</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="uk-text-large">Track and discover your organization’s research output. <br> Use the OpenAIRE Research
|
<p class="uk-text-large">Track and discover your organization’s research output. <br> Use the OpenAIRE Research
|
||||||
Graph to view your publications-data-code <br> and how they interconnect.</p>
|
Graph to view your publications-data-code <br> and how they interconnect.</p>
|
||||||
</div>
|
</div>
|
||||||
<div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 80%,0">
|
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 80%,0">
|
||||||
<h3 class="uk-h2">
|
<h3 class="uk-h2">
|
||||||
Monitor <span class="uk-text-primary">Open Science <br></span> compliance<span
|
Monitor <span class="uk-text-primary">Open Science <br></span> compliance<span
|
||||||
class="uk-text-primary">.</span>
|
class="uk-text-primary">.</span>
|
||||||
|
@ -41,7 +41,7 @@
|
||||||
<p class="uk-text-large"> Work with the Open Science expert community <br> for open and transparent metrics.
|
<p class="uk-text-large"> Work with the Open Science expert community <br> for open and transparent metrics.
|
||||||
Discover Open <br> Science trends for your organization. See how <br> you fare in European Open Science Cloud.</p>
|
Discover Open <br> Science trends for your organization. See how <br> you fare in European Open Science Cloud.</p>
|
||||||
</div>
|
</div>
|
||||||
<div [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
|
<div #scrolling_element [class]="position_class" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
|
||||||
<h3 class="uk-h2">
|
<h3 class="uk-h2">
|
||||||
Turn <span class="uk-text-primary">research <br> results </span> to insights<span
|
Turn <span class="uk-text-primary">research <br> results </span> to insights<span
|
||||||
class="uk-text-primary">.</span>
|
class="uk-text-primary">.</span>
|
||||||
|
@ -280,7 +280,7 @@
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="contact-us" class="uk-section uk-container uk-container-large uk-margin-large-bottom">
|
<div #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom contact-us">
|
||||||
<div class="uk-grid" uk-grid>
|
<div class="uk-grid" uk-grid>
|
||||||
<div class="left uk-position-relative uk-width-1-1 uk-width-1-5@m">
|
<div class="left uk-position-relative uk-width-1-1 uk-width-1-5@m">
|
||||||
<img class="uk-box-shadow-large" src="assets/monitor-assets/avatar2.jpg">
|
<img class="uk-box-shadow-large" src="assets/monitor-assets/avatar2.jpg">
|
||||||
|
|
|
@ -1,4 +1,13 @@
|
||||||
import {Component, ViewChild, OnDestroy, AfterViewInit} from '@angular/core';
|
import {
|
||||||
|
Component,
|
||||||
|
ViewChild,
|
||||||
|
OnDestroy,
|
||||||
|
AfterViewInit,
|
||||||
|
ElementRef,
|
||||||
|
ViewChildren,
|
||||||
|
QueryList,
|
||||||
|
OnInit
|
||||||
|
} 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 {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
|
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
|
||||||
|
@ -20,13 +29,14 @@ import {properties} from "../../environments/environment";
|
||||||
import {Subscriber} from "rxjs";
|
import {Subscriber} from "rxjs";
|
||||||
import {QuickContactService} from '../openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
|
import {QuickContactService} from '../openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
|
||||||
import {CanExitGuard, IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
|
import {CanExitGuard, IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
|
||||||
|
import {element} from "protractor";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'home',
|
selector: 'home',
|
||||||
templateUrl: 'home.component.html',
|
templateUrl: 'home.component.html',
|
||||||
styleUrls: ['home.component.css']
|
styleUrls: ['home.component.css']
|
||||||
})
|
})
|
||||||
export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateComponent {
|
export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactivateComponent {
|
||||||
public pageTitle = "OpenAIRE | Monitor";
|
public pageTitle = "OpenAIRE | Monitor";
|
||||||
public description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators.";
|
public description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators.";
|
||||||
public stakeholders: StakeholderInfo[] = [];
|
public stakeholders: StakeholderInfo[] = [];
|
||||||
|
@ -44,22 +54,20 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
public loading: boolean = true;
|
public loading: boolean = true;
|
||||||
public errorCodes: ErrorCodes;
|
public errorCodes: ErrorCodes;
|
||||||
public properties: EnvProperties = properties;
|
public properties: EnvProperties = properties;
|
||||||
/* Section scroll Map */
|
|
||||||
public map: Map<string, string> = new Map<string, string>([['1st', 'ipad'], ['2nd', 'ipad'], ['3rd', 'ipad']])
|
|
||||||
public type: string = null;
|
|
||||||
public directLink: boolean = true;
|
public directLink: boolean = true;
|
||||||
public publicationsSize: any = null;
|
public publicationsSize: any = null;
|
||||||
public datasetsSize: any = null;
|
public datasetsSize: any = null;
|
||||||
public softwareSize: any = null;
|
public softwareSize: any = null;
|
||||||
public otherSize: any = null;
|
public otherSize: any = null;
|
||||||
public fundersSize: any = null;
|
public fundersSize: any = null;
|
||||||
public showQuickContact: boolean = true;
|
public showQuickContact: boolean = true;
|
||||||
@ViewChild('AlertModal') modal;
|
@ViewChild('AlertModal') modal;
|
||||||
private errorMessages: ErrorMessagesComponent;
|
private errorMessages: ErrorMessagesComponent;
|
||||||
private subscriptions = [];
|
private subscriptions = [];
|
||||||
private user: User;
|
private user: User;
|
||||||
private observer: IntersectionObserver = null;
|
@ViewChildren('scrolling_element') elements: QueryList<ElementRef>;
|
||||||
|
@ViewChild('contact') contact: ElementRef;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private _router: Router,
|
private _router: Router,
|
||||||
|
@ -72,8 +80,8 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
private helper: HelperService,
|
private helper: HelperService,
|
||||||
private seoService: SEOService,
|
private seoService: SEOService,
|
||||||
private _refineFieldResultsService: RefineFieldResultsService,
|
private _refineFieldResultsService: RefineFieldResultsService,
|
||||||
private _searchResearchResultsService: SearchResearchResultsService,
|
private _searchResearchResultsService: SearchResearchResultsService,
|
||||||
private quickContactService: QuickContactService) {
|
private quickContactService: QuickContactService) {
|
||||||
this._meta.updateTag({content: this.description}, "name='description'");
|
this._meta.updateTag({content: this.description}, "name='description'");
|
||||||
this._meta.updateTag({content: this.description}, "property='og:description'");
|
this._meta.updateTag({content: this.description}, "property='og:description'");
|
||||||
this._meta.updateTag({content: this.pageTitle}, "property='og:title'");
|
this._meta.updateTag({content: this.pageTitle}, "property='og:title'");
|
||||||
|
@ -82,7 +90,7 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
this.errorMessages = new ErrorMessagesComponent();
|
this.errorMessages = new ErrorMessagesComponent();
|
||||||
this.status = this.errorCodes.LOADING;
|
this.status = this.errorCodes.LOADING;
|
||||||
}
|
}
|
||||||
|
|
||||||
public ngOnInit() {
|
public ngOnInit() {
|
||||||
let url = this.properties.domain + this.properties.baseLink + this._router.url;
|
let url = this.properties.domain + this.properties.baseLink + this._router.url;
|
||||||
this.seoService.createLinkForCanonicalURL(url, false);
|
this.seoService.createLinkForCanonicalURL(url, false);
|
||||||
|
@ -101,55 +109,68 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
}
|
}
|
||||||
|
|
||||||
canExit(): boolean {
|
canExit(): boolean {
|
||||||
this.subscriptions.forEach(value => {
|
this.clear();
|
||||||
if (value instanceof Subscriber) {
|
|
||||||
value.unsubscribe();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (this.observer) {
|
|
||||||
this.observer.disconnect();
|
|
||||||
}
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
OnDestroy() {
|
ngOnDestroy() {
|
||||||
|
this.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
this.subscriptions.forEach(value => {
|
this.subscriptions.forEach(value => {
|
||||||
if (value instanceof Subscriber) {
|
if (value instanceof Subscriber) {
|
||||||
value.unsubscribe();
|
value.unsubscribe();
|
||||||
|
} else if (value instanceof IntersectionObserver || value instanceof MutationObserver) {
|
||||||
|
value.disconnect();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (this.observer) {
|
|
||||||
this.observer.disconnect();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit() {
|
ngAfterViewInit() {
|
||||||
if (typeof document !== "undefined") {
|
this.createObservers();
|
||||||
this.createObserver();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
createObserver() {
|
createObservers() {
|
||||||
let target = document.querySelector('#contact-us');
|
let options = {
|
||||||
let options = {
|
root: null,
|
||||||
root: null,
|
rootMargin: '200px',
|
||||||
rootMargin: '200px',
|
threshold: 1.0
|
||||||
threshold: 1.0
|
};
|
||||||
};
|
let intersectionObserver = new IntersectionObserver(entries => {
|
||||||
this.observer = new IntersectionObserver(entries => {
|
entries.forEach(entry => {
|
||||||
entries.forEach(entry => {
|
if (entry.isIntersecting && this.showQuickContact) {
|
||||||
if(entry.isIntersecting && this.showQuickContact) {
|
this.showQuickContact = false;
|
||||||
this.showQuickContact = false;
|
this.quickContactService.setDisplay(this.showQuickContact);
|
||||||
this.quickContactService.setDisplay(this.showQuickContact);
|
} else if (!entry.isIntersecting && !this.showQuickContact) {
|
||||||
} else if(!entry.isIntersecting && !this.showQuickContact) {
|
this.showQuickContact = true;
|
||||||
this.showQuickContact = true;
|
this.quickContactService.setDisplay(this.showQuickContact);
|
||||||
this.quickContactService.setDisplay(this.showQuickContact);
|
}
|
||||||
}
|
});
|
||||||
})
|
}, options);
|
||||||
}, options);
|
intersectionObserver.observe(this.contact.nativeElement);
|
||||||
this.observer.observe(target);
|
let mutationObserver = new MutationObserver(entries => {
|
||||||
}
|
entries.forEach(entry => {
|
||||||
|
if (entry.attributeName === 'style') {
|
||||||
|
let opacities: number[] = this.elements.map(element => +element.nativeElement.style.opacity);
|
||||||
|
let active: number = opacities.indexOf(Math.max(...opacities));
|
||||||
|
this.elements.forEach((element, index) => {
|
||||||
|
if (index === active) {
|
||||||
|
element.nativeElement.classList.remove('uk-disabled');
|
||||||
|
} else {
|
||||||
|
element.nativeElement.classList.add('uk-disabled');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.elements.forEach(element => {
|
||||||
|
mutationObserver.observe(element.nativeElement, {attributes: true});
|
||||||
|
});
|
||||||
|
this.subscriptions.push(intersectionObserver);
|
||||||
|
this.subscriptions.push(mutationObserver);
|
||||||
|
}
|
||||||
|
|
||||||
private getPageContents() {
|
private getPageContents() {
|
||||||
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
|
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
|
||||||
this.pageContents = contents;
|
this.pageContents = contents;
|
||||||
|
@ -162,14 +183,6 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
public get stakeholdersNumber(): number {
|
|
||||||
if(this.type === null) {
|
|
||||||
return this.stakeholders.length;
|
|
||||||
} else {
|
|
||||||
return this.stakeholders.filter(stakeholder => stakeholder.type === this.type).length;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getNumbers() {
|
getNumbers() {
|
||||||
this.subscriptions.push(this._refineFieldResultsService.getRefineFieldsResultsByEntityName(["funder"], "project", this.properties).subscribe(
|
this.subscriptions.push(this._refineFieldResultsService.getRefineFieldsResultsByEntityName(["funder"], "project", this.properties).subscribe(
|
||||||
data => {
|
data => {
|
||||||
|
@ -181,7 +194,7 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
//console.log(err);
|
//console.log(err);
|
||||||
this.handleError("Error getting 'funder' field results of projects", err);
|
this.handleError("Error getting 'funder' field results of projects", err);
|
||||||
}));
|
}));
|
||||||
|
|
||||||
this.subscriptions.push(this._searchResearchResultsService.numOfSearchResults("publication", "", this.properties).subscribe(
|
this.subscriptions.push(this._searchResearchResultsService.numOfSearchResults("publication", "", this.properties).subscribe(
|
||||||
data => {
|
data => {
|
||||||
if (data && data > 0) {
|
if (data && data > 0) {
|
||||||
|
@ -193,7 +206,7 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
this.handleError("Error getting number of publications", err);
|
this.handleError("Error getting number of publications", err);
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
|
|
||||||
this.subscriptions.push(this._searchResearchResultsService.numOfSearchResults("dataset", "", this.properties).subscribe(
|
this.subscriptions.push(this._searchResearchResultsService.numOfSearchResults("dataset", "", this.properties).subscribe(
|
||||||
data => {
|
data => {
|
||||||
if (data && data > 0) {
|
if (data && data > 0) {
|
||||||
|
@ -205,7 +218,7 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
this.handleError("Error getting number of research data", err);
|
this.handleError("Error getting number of research data", err);
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
|
|
||||||
this.subscriptions.push(this._searchResearchResultsService.numOfSearchResults("software", "", this.properties).subscribe(
|
this.subscriptions.push(this._searchResearchResultsService.numOfSearchResults("software", "", this.properties).subscribe(
|
||||||
data => {
|
data => {
|
||||||
if (data && data > 0) {
|
if (data && data > 0) {
|
||||||
|
@ -216,7 +229,7 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
this.handleError("Error getting number of software data", err);
|
this.handleError("Error getting number of software data", err);
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
|
|
||||||
this.subscriptions.push(this._searchResearchResultsService.numOfSearchResults("other", "", this.properties).subscribe(
|
this.subscriptions.push(this._searchResearchResultsService.numOfSearchResults("other", "", this.properties).subscribe(
|
||||||
data => {
|
data => {
|
||||||
if (data && data > 0) {
|
if (data && data > 0) {
|
||||||
|
@ -270,10 +283,10 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
public slider(stakeholders: StakeholderInfo[], size: number = 6): StakeholderInfo[][] {
|
public slider(stakeholders: StakeholderInfo[], size: number = 6): StakeholderInfo[][] {
|
||||||
let slider: StakeholderInfo[][] = [];
|
let slider: StakeholderInfo[][] = [];
|
||||||
for(let i = 0; i < (stakeholders.length/size); i++) {
|
for (let i = 0; i < (stakeholders.length / size); i++) {
|
||||||
slider.push(stakeholders.slice(i*size, ((i+1)*size)));
|
slider.push(stakeholders.slice(i * size, ((i + 1) * size)));
|
||||||
}
|
}
|
||||||
return slider;
|
return slider;
|
||||||
}
|
}
|
||||||
|
@ -281,41 +294,33 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
|
||||||
get publicStakeholders(): StakeholderInfo[] {
|
get publicStakeholders(): StakeholderInfo[] {
|
||||||
return this.stakeholders.filter(stakeholder => stakeholder.visibility === "PUBLIC");
|
return this.stakeholders.filter(stakeholder => stakeholder.visibility === "PUBLIC");
|
||||||
}
|
}
|
||||||
|
|
||||||
get privateStakeholders(): StakeholderInfo[] {
|
get privateStakeholders(): StakeholderInfo[] {
|
||||||
return this.stakeholders.filter(stakeholder => stakeholder.visibility !== "PUBLIC");
|
return this.stakeholders.filter(stakeholder => stakeholder.visibility !== "PUBLIC");
|
||||||
}
|
}
|
||||||
|
|
||||||
get funders(): StakeholderInfo[] {
|
get funders(): StakeholderInfo[] {
|
||||||
if(this.stakeholders) {
|
if (this.stakeholders) {
|
||||||
return this.stakeholders.filter(stakeholder => stakeholder.type === "funder");
|
return this.stakeholders.filter(stakeholder => stakeholder.type === "funder");
|
||||||
} else {
|
} else {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get ris(): StakeholderInfo[] {
|
get ris(): StakeholderInfo[] {
|
||||||
if(this.stakeholders) {
|
if (this.stakeholders) {
|
||||||
return this.stakeholders.filter(stakeholder => stakeholder.type === "ri");
|
return this.stakeholders.filter(stakeholder => stakeholder.type === "ri");
|
||||||
} else {
|
} else {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get organizations(): StakeholderInfo[] {
|
get organizations(): StakeholderInfo[] {
|
||||||
if(this.stakeholders) {
|
if (this.stakeholders) {
|
||||||
return this.stakeholders.filter(stakeholder => stakeholder.type === "organization");
|
return this.stakeholders.filter(stakeholder => stakeholder.type === "organization");
|
||||||
} else {
|
} else {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy() {
|
|
||||||
this.subscriptions.forEach(subscription => {
|
|
||||||
if (subscription instanceof Subscriber) {
|
|
||||||
subscription.unsubscribe();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleError(message: string, error): number {
|
private handleError(message: string, error): number {
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit 4aabb739bff1e66301aa1e65a8046350fe8853ec
|
Subproject commit 58edff917732a45b75ad4175e2d647388d60c164
|
Loading…
Reference in New Issue