From fde83755242bebb7d4cecb29bfb7f0cc127ed2e4 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 21 Feb 2022 16:33:02 +0200
Subject: [PATCH] Make a map for dynamic contect in left and scroll section

---
 .../section-scroll.component.ts               | 105 +++++++-----------
 1 file changed, 42 insertions(+), 63 deletions(-)

diff --git a/utils/section-scroll/section-scroll.component.ts b/utils/section-scroll/section-scroll.component.ts
index 64d40d9a..12f1267d 100644
--- a/utils/section-scroll/section-scroll.component.ts
+++ b/utils/section-scroll/section-scroll.component.ts
@@ -1,4 +1,4 @@
-import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angular/core";
+import {AfterViewInit, Component, Input, ViewEncapsulation} from "@angular/core";
 
 
 /**
@@ -26,104 +26,83 @@ import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angula
   styleUrls: ['section-scroll.component.css'],
   encapsulation: ViewEncapsulation.None
 })
-export class SectionScrollComponent implements OnInit {
+export class SectionScrollComponent implements AfterViewInit {
   
   @Input()
   public customClass = null;
   @Input()
   public childrenCustomClass = null;
-  private absolute: HTMLCollectionOf<Element>;
-  private scroll: HTMLElement;
-
+  @Input()
+  public animationSteps: number = 20;
   private observer: IntersectionObserver = null;
-
-  constructor() {}
-
-  @HostListener('window:resize', ['$event'])
-  onResize(event) {
-    //this.setHeight();
+  /**
+   * Define as keys the ids of elements in scroll section and as values the ids of left section
+   * */
+  @Input()
+  private map: Map<string, string> = null;
+  private left: Map<string, HTMLElement> = new Map<string, HTMLElement>();
+  private scroll: Map<string, HTMLElement> = new Map<string, HTMLElement>();
+  private lastElementId: string = null;
+  
+  constructor() {
   }
   
   ngOnDestroy() {
-    if(this.observer) {
+    if (this.observer) {
       this.observer.disconnect();
     }
   }
-
-  ngOnInit() {
-    //this.setHeight();
-  }
-
-  setHeight() {
-    if(typeof document !== "undefined") {
-      // this.absolute = document.querySelector('[absolute]');
-      this.absolute = document.getElementsByClassName('absolute');
-      this.scroll = document.querySelector('[scroll]');
-      this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
-
-    }
-  }
   
-  get height():number {
-    let htmlElement = this.absolute&&this.absolute.length>0?this.absolute[0]:null;
-    return htmlElement?htmlElement['offsetHeight']:0;
-  }
-
   ngAfterViewInit() {
-    if(typeof document !== "undefined") {
+    if (typeof document !== "undefined" && this.map) {
       this.createObserver();
     }
   }
-
+  
   createObserver() {
     let observer;
-
     let options = {
       root: null,
       rootMargin: "-20%",
       threshold: this.buildThresholdList()
     };
-
-    let imgElement1: HTMLElement = document.getElementById("imgId1");
-    let imgElement2: HTMLElement = document.getElementById("imgId2");
-    let imgElement3: HTMLElement = document.getElementById("imgId3");
-    let imgElement4: HTMLElement = document.getElementById("imgId4");
-    let imgElement5: HTMLElement = document.getElementById("imgId5");
-
+    Array.from(this.map.values()).forEach(value => {
+      this.left.set(value, document.getElementById(value));
+      this.left.get(value).style.display = 'none';
+    })
+    Array.from(this.map.keys()).forEach(key => {
+      this.scroll.set(key, document.getElementById(key));
+    })
     observer = new IntersectionObserver(entries => {
       entries.forEach((entry) => {
-        entry.target['style'].opacity = entry.intersectionRatio;
-
-        if (entry.target.id == "1st") {
-          imgElement1.parentElement.style.opacity = String(entry.intersectionRatio);
-        } else if (entry.target.id == "2nd") {
-          imgElement2.parentElement.style.opacity = String(entry.intersectionRatio);
-        } else if (entry.target.id == "3rd") {
-          imgElement3.parentElement.style.opacity = String(entry.intersectionRatio);
-        } else if (entry.target.id == "4th") {
-          imgElement4.parentElement.style.opacity = String(entry.intersectionRatio);
-        } else if (entry.target.id == "5th") {
-          imgElement5.parentElement.style.opacity = String(entry.intersectionRatio);
+        entry.target['style'].opacity = String(entry.intersectionRatio);
+        let id = this.map.get(entry.target.id);
+        if (this.left.has(id) && this.lastElementId !== id) {
+          if(entry.isIntersecting) {
+            this.lastElementId = id;
+            Array.from(this.left.keys()).forEach(element => {
+              if (element !== id) {
+                this.left.get(element).style.display = 'none';
+              } else {
+                this.left.get(element).style.display = 'block';
+              }
+            });
+          }
+          // this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
         }
       });
     }, options);
-
-    let targets: NodeListOf<HTMLElement> = document.getElementsByName('txt');
-    targets.forEach(target =>
-    {
+    Array.from(this.scroll.values()).forEach(target => {
       observer.observe(target)
     });
   }
-
+  
   buildThresholdList() {
     let thresholds = [];
-    let numSteps = 20;
-
-    for (let i=1.0; i<=numSteps; i++) {
-      let ratio = i/numSteps;
+    for (let i = 1.0; i <= this.animationSteps; i++) {
+      let ratio = i / this.animationSteps;
       thresholds.push(ratio);
     }
-
     thresholds.push(0);
     return thresholds;
   }