From 29100c8d6f43be760498381bc92402432855461d Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 30 Aug 2022 13:11:32 +0300
Subject: [PATCH] Page content: Remove observer component vars and add them in
 subscriptions array.

---
 .../page-content/page-content.component.ts    | 106 +++++++++---------
 1 file changed, 51 insertions(+), 55 deletions(-)

diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts
index f5ee7ada..36e21a7e 100644
--- a/dashboard/sharedComponents/page-content/page-content.component.ts
+++ b/dashboard/sharedComponents/page-content/page-content.component.ts
@@ -65,13 +65,11 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   public shouldSticky: boolean = true;
   @ViewChild('header') header: ElementRef;
   @ViewChild('actions') actions: ElementRef;
-  private headerObserver: IntersectionObserver;
-  private bottomObserver: IntersectionObserver;
   public footer_offset: number = 0;
   public footer_height: number = 0;
   @ViewChild("sticky_footer") sticky_footer;
   subscriptions = [];
-
+  
   constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef) {
   }
   
@@ -82,8 +80,8 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   }
   
   get isStickyActive() {
-    if(this.header && this.actions && this.shouldSticky) {
-      let sticky = (this.headerSticky)?this.header.nativeElement:this.actions.nativeElement;
+    if (this.header && this.actions && this.shouldSticky) {
+      let sticky = this.headerSticky ? this.header.nativeElement : this.actions.nativeElement;
       return UIkit.sticky(sticky).isActive;
     } else {
       return false;
@@ -91,71 +89,69 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   }
   
   ngAfterViewInit() {
-    if(typeof document !== "undefined") {
-      let bottom = document.getElementById('bottom');
-      if(bottom) {
-        this.bottomObserver = new IntersectionObserver(entries => {
-          entries.forEach(entry => {
-            this.shouldSticky = !entry.isIntersecting;
-          })
-        });
-        this.bottomObserver.observe(bottom);
-      }
-      if(this.header) {
-        this.headerObserver = new IntersectionObserver(entries => {
-          entries.forEach(entry => {
-            this.layoutService.setReplaceHeader(!entry.isIntersecting);
-          })
-        }, {threshold: 0.5});
-        this.headerObserver.observe(this.header.nativeElement);
-      }
-
-      if(this.sticky_footer) {
-        this.observeStickyFooter();
-      }
+    if (typeof document !== "undefined") {
+      this.observeBottom();
+      this.observeHeader();
+      this.observeStickyFooter();
     }
   }
   
   ngOnDestroy() {
-    if(this.bottomObserver) {
-      this.bottomObserver.disconnect();
-    }
-    if(this.headerObserver) {
-      this.headerObserver.disconnect();
-    }
     this.subscriptions.forEach(subscription => {
-      if (subscription instanceof Subscription) {
-        subscription.unsubscribe();
-      } else if (subscription instanceof Function) {
-        subscription();
-      } else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
+      if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
         subscription.disconnect();
       }
     });
   }
-
+  
   ngAfterContentChecked() {
-    if(this.sticky_footer && typeof document !== 'undefined') {
+    if (this.sticky_footer && typeof document !== 'undefined') {
       this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
     }
   }
-
-  public observeStickyFooter() {
-    let resizeObs = new ResizeObserver(entries => {
-      entries.forEach(entry => {
-        setTimeout(() => {
-          // console.log(entry);
-          this.footer_offset = this.calcStickyFooterOffset(entry.target);
-          this.cdr.detectChanges();
-        });
-      })
-    });
-    this.subscriptions.push(resizeObs);
-    resizeObs.observe(this.sticky_footer.nativeElement);
+  
+  private observeBottom() {
+    let bottom = document.getElementById('bottom');
+    if (bottom) {
+      let bottomObs = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          this.shouldSticky = !entry.isIntersecting;
+        })
+      });
+      this.subscriptions.push(bottomObs);
+      bottomObs.observe(bottom);
+    }
   }
-
+  
+  private observeHeader() {
+    if (this.header) {
+      let headerObs = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          this.layoutService.setReplaceHeader(!entry.isIntersecting);
+        })
+      }, {threshold: 0.5});
+      this.subscriptions.push(headerObs);
+      headerObs.observe(this.header.nativeElement);
+    }
+  }
+  
+  private observeStickyFooter() {
+    if (this.sticky_footer) {
+      let resizeObs = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          setTimeout(() => {
+            this.footer_offset = this.calcStickyFooterOffset(entry.target);
+            this.cdr.detectChanges();
+          });
+        })
+      });
+      this.subscriptions.push(resizeObs);
+      resizeObs.observe(this.sticky_footer.nativeElement);
+    }
+  }
+  
   calcStickyFooterOffset(element) {
     this.footer_height = element.offsetHeight;
-    return window.innerHeight-this.footer_height;
+    return window.innerHeight - this.footer_height;
   }
 }