feat: do not allow fab to overlap footer

farscrl · Dec 5, 2023 · 343ee3a · 343ee3a
1 parent 9993ec0
commit 343ee3a
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 3 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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,