koFi

Ui/src/app/navigation/navigation.component.ts

@@ -4,6 +4,8 @@ import {LoggedInUser} from "../models/user.model";
 import {Subscription} from "rxjs";
 import {environment} from "../../environments/environment";
 
+declare var kofiWidgetOverlay: any;
+
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
@@ -24,8 +26,10 @@ export class NavigationComponent implements OnInit, OnDestroy {
       next: ((response) => {
         if (response) {
           this.loggedInUser = response;
+          this.loadKoFiWidget();
         } else {
           this.loggedInUser = null;
+          this.removeKoFiWidget();
         }
       })
     });
@@ -34,9 +38,35 @@ export class NavigationComponent implements OnInit, OnDestroy {
 
   onLogout() {
     this._authenticationService.logout();
+    this.removeKoFiWidget();
+  }
+
+  loadKoFiWidget() {
+    if (document.getElementById('ko-fi-script')) return;
+
+    const script = document.createElement('script');
+    script.src = 'https://storage.ko-fi.com/cdn/scripts/overlay-widget.js';
+    script.onload = () => {
+      kofiWidgetOverlay.draw('tomasideveloping', {
+        'type': 'floating-chat',
+        'floating-chat.donateButton.text': 'Donate',
+        'floating-chat.donateButton.background-color': '#794bc4',
+        'floating-chat.donateButton.text-color': '#fff'
+      });
+    };
+    document.body.appendChild(script);
+  }
+
+  removeKoFiWidget(): void {
+    const widget = document.querySelector('.kofi-widget');
+    if (widget) widget.remove();
+
+    const script = document.getElementById('ko-fi-script');
+    if (script) script.remove();
   }
 
   ngOnDestroy() {
+    this.removeKoFiWidget();
     if (this._authStateChange$) {
       this._authStateChange$.unsubscribe();
     }