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