Add mutation observer to handle active text in scrolling section
This commit is contained in:
parent
47a96f93f4
commit
9734b93f7a
|
@ -138,7 +138,7 @@
|
||||||
</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">
|
||||||
<span class="uk-text-primary">Deposit</span> your research<span class="uk-text-primary">.</span>
|
<span class="uk-text-primary">Deposit</span> your research<span class="uk-text-primary">.</span>
|
||||||
</h3>
|
</h3>
|
||||||
|
@ -149,7 +149,7 @@
|
||||||
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/deposit/learn-how">Start Deposit</a>
|
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/participate/deposit/learn-how">Start Deposit</a>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
||||||
<span class="uk-text-primary">Link</span> your work<span class="uk-text-primary">.</span>
|
<span class="uk-text-primary">Link</span> your work<span class="uk-text-primary">.</span>
|
||||||
</h3>
|
</h3>
|
||||||
|
|
|
@ -1,5 +1,14 @@
|
||||||
import {Component, ViewChild} from '@angular/core';
|
import {
|
||||||
import {Subscription} from 'rxjs';
|
AfterViewInit,
|
||||||
|
Component,
|
||||||
|
ElementRef,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
QueryList,
|
||||||
|
ViewChild,
|
||||||
|
ViewChildren
|
||||||
|
} from '@angular/core';
|
||||||
|
import {Subscriber, Subscription} from 'rxjs';
|
||||||
import {ActivatedRoute, Router} from '@angular/router';
|
import {ActivatedRoute, Router} from '@angular/router';
|
||||||
import {Location} from '@angular/common';
|
import {Location} from '@angular/common';
|
||||||
import {Meta, Title} from '@angular/platform-browser';
|
import {Meta, Title} from '@angular/platform-browser';
|
||||||
|
@ -27,7 +36,7 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
|
||||||
templateUrl: 'home.component.html',
|
templateUrl: 'home.component.html',
|
||||||
styleUrls: ['home.component.css']
|
styleUrls: ['home.component.css']
|
||||||
})
|
})
|
||||||
export class HomeComponent {
|
export class HomeComponent implements OnInit, OnDestroy, AfterViewInit{
|
||||||
// MAX 12 logos in every slide
|
// MAX 12 logos in every slide
|
||||||
public logos = {
|
public logos = {
|
||||||
"publication": [
|
"publication": [
|
||||||
|
@ -125,7 +134,8 @@ export class HomeComponent {
|
||||||
properties: EnvProperties = properties;
|
properties: EnvProperties = properties;
|
||||||
public readMore: boolean = false;
|
public readMore: boolean = false;
|
||||||
|
|
||||||
subs: Subscription[] = [];
|
subscriptions: any[] = [];
|
||||||
|
@ViewChildren('scrolling_element') elements: QueryList<ElementRef>;
|
||||||
|
|
||||||
resultsQuickFilter: { filter: Filter, selected: boolean, filterId: string, value: string } = {
|
resultsQuickFilter: { filter: Filter, selected: boolean, filterId: string, value: string } = {
|
||||||
filter: null,
|
filter: null,
|
||||||
|
@ -167,6 +177,8 @@ export class HomeComponent {
|
||||||
];
|
];
|
||||||
stringUtils = new StringUtils();
|
stringUtils = new StringUtils();
|
||||||
disableSelect: boolean = true;
|
disableSelect: boolean = true;
|
||||||
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private _router: Router,
|
private _router: Router,
|
||||||
|
@ -188,7 +200,7 @@ export class HomeComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
private getPageContents() {
|
private getPageContents() {
|
||||||
this.subs.push(this.helper.getPageHelpContents(this.properties, 'openaire', this._router.url).subscribe(contents => {
|
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'openaire', this._router.url).subscribe(contents => {
|
||||||
this.pageContents = contents;
|
this.pageContents = contents;
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
@ -209,6 +221,16 @@ export class HomeComponent {
|
||||||
return Math.ceil(num);
|
return Math.ceil(num);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
this.subscriptions.forEach(value => {
|
||||||
|
if (value instanceof Subscriber) {
|
||||||
|
value.unsubscribe();
|
||||||
|
} else if (value instanceof IntersectionObserver || value instanceof MutationObserver) {
|
||||||
|
value.disconnect();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
public ngOnInit() {
|
public ngOnInit() {
|
||||||
this.seoService.createLinkForCanonicalURL(this.properties.domain + this.properties.baseLink + this._router.url, false);
|
this.seoService.createLinkForCanonicalURL(this.properties.domain + this.properties.baseLink + this._router.url, false);
|
||||||
this.getPageContents();
|
this.getPageContents();
|
||||||
|
@ -216,10 +238,10 @@ export class HomeComponent {
|
||||||
var url = this.properties.domain + this.properties.baseLink + this._router.url;
|
var url = this.properties.domain + this.properties.baseLink + this._router.url;
|
||||||
this._meta.updateTag({content: url}, "property='og:url'");
|
this._meta.updateTag({content: url}, "property='og:url'");
|
||||||
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
|
if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
|
||||||
this.subs.push(this._piwikService.trackView(this.properties, "OpenAIRE").subscribe());
|
this.subscriptions.push(this._piwikService.trackView(this.properties, "OpenAIRE").subscribe());
|
||||||
}
|
}
|
||||||
//this.config.getCommunityInformation(this.properties, this.properties.adminToolsCommunity ).subscribe(data => {
|
//this.config.getCommunityInformation(this.properties, this.properties.adminToolsCommunity ).subscribe(data => {
|
||||||
this.subs.push(this.config.communityInformationState.subscribe(data => {
|
this.subscriptions.push(this.config.communityInformationState.subscribe(data => {
|
||||||
if (data) {
|
if (data) {
|
||||||
var showEntity = {};
|
var showEntity = {};
|
||||||
for (var i = 0; i < data['entities'].length; i++) {
|
for (var i = 0; i < data['entities'].length; i++) {
|
||||||
|
@ -255,9 +277,33 @@ export class HomeComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
public ngOnDestroy() {
|
public ngOnDestroy() {
|
||||||
for (let sub of this.subs) {
|
this.clear();
|
||||||
sub.unsubscribe();
|
}
|
||||||
}
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.createObserver();
|
||||||
|
}
|
||||||
|
|
||||||
|
createObserver() {
|
||||||
|
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(mutationObserver);
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleError(message: string, error) {
|
private handleError(message: string, error) {
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit 06e8eb29dd411ce035cde27e13ff0cd474439348
|
Subproject commit 575d56c9af0858fb16fc10572fefdb28e3633c56
|
Loading…
Reference in New Issue