MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 12 Wiki Activity

Add mutation observer to handle active text in scrolling section

This commit is contained in:
Konstantinos Triantafyllou 2022-05-05 10:44:00 +03:00
parent eaaa4b863c
commit cfaffcc271
4 changed files with 106 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/home/home.component.css
View File

@ -18,7 +18,7 @@
background-size: 25%;
}
#contact-us .left img {
.contact-us .left img {
position: absolute;
top: 0;
left: 0;
@ -29,7 +29,7 @@
transform: matrix(1, -0.07, 0.07, 1, 0, 0);
}
#contact-us .right img {
.contact-us .right img {
position: absolute;
bottom: 0;
right: 0;

8
src/app/home/home.component.html
View File

@ -26,14 +26,14 @@
</div>
<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">
Get a <span class="uk-text-primary">360° view <br> of research results.</span>
</h3>
<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>
</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">
Monitor <span class="uk-text-primary">Open Science <br></span> compliance<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.
Discover Open <br> Science trends for your organization. See how <br> you fare in European Open Science Cloud.</p>
</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">
Turn <span class="uk-text-primary">research <br> results </span> to insights<span
class="uk-text-primary">.</span>
@ -280,7 +280,7 @@
</ng-template>
</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="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">

89
src/app/home/home.component.ts
View File

@ -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 {Meta, Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@ -20,13 +29,14 @@ import {properties} from "../../environments/environment";
import {Subscriber} from "rxjs";
import {QuickContactService} from '../openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
import {CanExitGuard, IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
import {element} from "protractor";
@Component({
selector: 'home',
templateUrl: 'home.component.html',
styleUrls: ['home.component.css']
})
export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateComponent {
export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactivateComponent {
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 stakeholders: StakeholderInfo[] = [];
@ -44,9 +54,6 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
public loading: boolean = true;
public errorCodes: ErrorCodes;
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 publicationsSize: any = null;
public datasetsSize: any = null;
@ -58,7 +65,8 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
private errorMessages: ErrorMessagesComponent;
private subscriptions = [];
private user: User;
private observer: IntersectionObserver = null;
@ViewChildren('scrolling_element') elements: QueryList<ElementRef>;
@ViewChild('contact') contact: ElementRef;
constructor(
private route: ActivatedRoute,
@ -101,42 +109,35 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
}
canExit(): boolean {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
}
});
if (this.observer) {
this.observer.disconnect();
}
this.clear();
return true;
}
OnDestroy() {
ngOnDestroy() {
this.clear();
}
clear() {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
} else if (value instanceof IntersectionObserver || value instanceof MutationObserver) {
value.disconnect();
}
});
if (this.observer) {
this.observer.disconnect();
}
}
ngAfterViewInit() {
if (typeof document !== "undefined") {
this.createObserver();
}
this.createObservers();
}
createObserver() {
let target = document.querySelector('#contact-us');
createObservers() {
let options = {
root: null,
rootMargin: '200px',
threshold: 1.0
};
this.observer = new IntersectionObserver(entries => {
let intersectionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting && this.showQuickContact) {
this.showQuickContact = false;
@ -145,9 +146,29 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
this.showQuickContact = true;
this.quickContactService.setDisplay(this.showQuickContact);
}
})
});
}, options);
this.observer.observe(target);
intersectionObserver.observe(this.contact.nativeElement);
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() {
@ -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() {
this.subscriptions.push(this._refineFieldResultsService.getRefineFieldsResultsByEntityName(["funder"], "project", this.properties).subscribe(
data => {
@ -310,14 +323,6 @@ export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateCompo
}
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
private handleError(message: string, error): number {
let code = "";
if (!error.status) {

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 4aabb739bff1e66301aa1e65a8046350fe8853ec
Subproject commit 58edff917732a45b75ad4175e2d647388d60c164