From 343ee3a843e853380bbfbecde206dcdff8f61afc Mon Sep 17 00:00:00 2001
From: Gion-Andri Cantieni <gion-andri@gmx.ch>
Date: Tue, 5 Dec 2023 16:16:19 +0100
Subject: [PATCH] feat: do not allow fab to overlap footer

---
 .../new-event-button.component.html           |  2 +-
 .../directives/fab-position.directive.ts      | 60 +++++++++++++++++++
 .../directives/scrollable-title.directive.ts  |  4 +-
 src/app/shared/shared.module.ts               |  3 +
 4 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 src/app/shared/directives/fab-position.directive.ts

diff --git a/src/app/shared/components/new-event-button/new-event-button.component.html b/src/app/shared/components/new-event-button/new-event-button.component.html
index 1b0df12..28c0838 100644
--- a/src/app/shared/components/new-event-button/new-event-button.component.html
+++ b/src/app/shared/components/new-event-button/new-event-button.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="!isInIframe">
-    <div class="fab" #fab>
+    <div class="fab" #fab fabPosition>
         <div class="fab-inner">
             <div class="fab-menu" [routerLink]="'/user/new-event'">
                 {{ 'COMPONENTS.NEW_EVENT_BTN.NEW_EVENT' | translate }}
diff --git a/src/app/shared/directives/fab-position.directive.ts b/src/app/shared/directives/fab-position.directive.ts
new file mode 100644
index 0000000..690ca74
--- /dev/null
+++ b/src/app/shared/directives/fab-position.directive.ts
@@ -0,0 +1,60 @@
+import { Directive, ElementRef, HostBinding, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+@Directive({
+    selector: '[fabPosition]',
+})
+export class FabPositionDirective implements OnInit, OnDestroy {
+    @HostBinding('style.bottom') setBottom?: string;
+
+    constructor(
+        private el: ElementRef,
+        @Inject(PLATFORM_ID) private platformId: any,
+    ) {
+    }
+
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            const that = this;
+            window.addEventListener('scroll', () => this._checkScroll());
+            const observer = new MutationObserver(function (mutationsList, observer) {
+                for (let mutation of mutationsList) {
+                    if (mutation.type === "childList") {
+                        that._checkScroll();
+                        break;
+                    }
+                }
+            });
+            observer.observe(document.body, {childList: true, subtree: true});
+
+            this._checkScroll();
+        }
+    }
+
+    ngOnDestroy() {
+        if (isPlatformBrowser(this.platformId)) {
+            window.removeEventListener('scroll', () => this._checkScroll());
+        }
+    }
+
+    private _checkScroll() {
+        if (isPlatformBrowser(this.platformId)) {
+            const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            const diff = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
+
+            if (width < 768) {
+                if (diff < 152) {
+                    this.setBottom = (152 - diff + 20) + 'px';
+                } else {
+                    this.setBottom = undefined;
+                }
+            } else {
+                if (diff < 97) {
+                    this.setBottom = (97 - diff + 45) + 'px';
+                } else {
+                    this.setBottom = undefined;
+                }
+            }
+        }
+    }
+}
diff --git a/src/app/shared/directives/scrollable-title.directive.ts b/src/app/shared/directives/scrollable-title.directive.ts
index 69e5e87..dec6427 100644
--- a/src/app/shared/directives/scrollable-title.directive.ts
+++ b/src/app/shared/directives/scrollable-title.directive.ts
@@ -5,7 +5,7 @@ import { isPlatformBrowser } from '@angular/common';
     selector: '[scrollableTitle]',
 })
 export class ScrollableTitleDirective implements OnInit, OnDestroy {
-    @HostBinding('class.isOnTop') shadow: boolean = false;
+    @HostBinding('class.isOnTop') addClass: boolean = false;
 
     constructor(
         private el: ElementRef,
@@ -35,7 +35,7 @@ export class ScrollableTitleDirective implements OnInit, OnDestroy {
                 scrollX,
             } = window
             const topPos = t + scrollX
-            this.shadow = topPos <= 75;
+            this.addClass = topPos <= 75;
         }
     }
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 22dca2b..00a5d6c 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -18,6 +18,7 @@ import { RouterModule } from '@angular/router';
 import { LinkyPipe } from './pipes/linky.pipe';
 import { InfoButtonComponent } from './components/forms/info-button/info-button.component';
 import { NetiquetteComponent } from './components/netiquette/netiquette.component';
+import { FabPositionDirective } from './directives/fab-position.directive';
 
 
 @NgModule({
@@ -34,6 +35,7 @@ import { NetiquetteComponent } from './components/netiquette/netiquette.componen
         LinkyPipe,
         InfoButtonComponent,
         NetiquetteComponent,
+        FabPositionDirective,
     ],
     imports: [
         CommonModule,
@@ -62,6 +64,7 @@ import { NetiquetteComponent } from './components/netiquette/netiquette.componen
         NewEventButtonComponent,
 
         SortableDirective,
+        FabPositionDirective,
 
         LinkyPipe,
         ShortDomainPipe,