Add mutation observer to handle active text in scrolling section

explore/src/app/home/home.component.html

@@ -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>

explore/src/app/home/home.component.ts

@@ -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) {

explore/src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 06e8eb29dd411ce035cde27e13ff0cd474439348
+Subproject commit 575d56c9af0858fb16fc10572fefdb28e3633c56