🎨 Remove Ko-Fi widget from DOM when hidden

TheAsel · Oct 7, 2024 · a56c116 · a56c116
1 parent 863aebb
commit a56c116
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -63,18 +63,5 @@
   </head>
   <body>
     <!-- quasar:entry-point -->
-    <script
-      src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"
-      integrity="sha384-4VTAIPa7wvHSDJMT8MfIGjeEbXASOBA77epDpVRQtDVTUsNX/7CwMwduSyirANhd sha384-jGw6wt6amAt5Rwe5EdDa+wll23XiHB4nWU3uXZhEWxxuQgzWa7UlGBpnauIcXt9M"
-      crossorigin="anonymous"
-    ></script>
-    <script>
-      kofiWidgetOverlay.draw('theasel', {
-        type: 'floating-chat',
-        'floating-chat.donateButton.text': 'Support Us',
-        'floating-chat.donateButton.background-color': '#00b9fe',
-        'floating-chat.donateButton.text-color': '#fff'
-      });
-    </script>
   </body>
 </html>
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
@@ -28,12 +28,10 @@ const settings = settingsStore();
 
 TailwindDarkFix();
 
-const supportButton = ref(
-  document.querySelectorAll('[id^=kofi-widget-overlay-]').item(0) as HTMLElement
-);
-if (supportButton.value) {
-  supportButton.value.classList.add('hide-print');
+interface Widget {
+  draw: (username, type) => void;
 }
+declare let kofiWidgetOverlay: Widget;
 
 const route = useRoute();
 const currentPath = ref(route.path);
@@ -72,34 +70,58 @@ const localSupport = ref(localStorage.getItem('hide_support'));
 switch (localSupport.value) {
   case 'true':
     hideSupport.value = true;
-    if (supportButton.value) {
-      supportButton.value.style.display = 'none';
-    }
     break;
   case 'false':
     hideSupport.value = false;
-    if (supportButton.value) {
-      supportButton.value.style.display = 'block';
-    }
     break;
   default:
     hideSupport.value = false;
-    if (supportButton.value) {
-      supportButton.value.style.display = 'block';
-    }
     localStorage.setItem('hide_support', 'false');
     break;
 }
 
-const toggleSupport = () => {
-  localStorage.setItem('hide_support', JSON.stringify(hideSupport.value));
-  if (supportButton.value) {
-    if (hideSupport.value) {
-      supportButton.value.style.display = 'none';
+const loadKofiWidget = () => {
+  return new Promise<void>((resolve, reject) => {
+    let kofiWidget = document.createElement('script');
+    kofiWidget.src = 'https://storage.ko-fi.com/cdn/scripts/overlay-widget.js';
+    kofiWidget.integrity =
+      'sha512-M5C7x3flCdJVRDM/E9jAWOtukG3A+9K2vGYYsi5D8fr49cvowu+aPOS47S/gzuUFfzMy2OJ7IqfBB+NE9kmnEw==';
+    kofiWidget.crossOrigin = 'anonymous';
+    kofiWidget.async = true;
+    kofiWidget.onload = () => {
+      resolve();
+    };
+    kofiWidget.onerror = () => reject(new Error('Failed to load script'));
+    document.body.appendChild(kofiWidget);
+  });
+};
+
+if (!hideSupport.value) {
+  try {
+    await loadKofiWidget();
+    if (kofiWidgetOverlay && typeof kofiWidgetOverlay.draw === 'function') {
+      kofiWidgetOverlay.draw('theasel', {
+        type: 'floating-chat',
+        'floating-chat.donateButton.text': 'Support Us',
+        'floating-chat.donateButton.background-color': '#00b9fe',
+        'floating-chat.donateButton.text-color': '#fff'
+      });
+      let supportButton = document
+        .querySelectorAll('[id^=kofi-widget-overlay-]')
+        .item(0) as HTMLElement;
+
+      supportButton.classList.add('hide-print');
     } else {
-      supportButton.value.style.display = 'block';
+      throw new Error('Error loading Ko-Fi widget');
     }
+  } catch (error) {
+    console.log(error);
   }
+}
+
+const toggleSupport = () => {
+  localStorage.setItem('hide_support', JSON.stringify(hideSupport.value));
+  window.location.reload();
 };
 
 const all_experimentals = ref(false);

diff --git a/src/pages/ErrorNotFound.vue b/src/pages/ErrorNotFound.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useHead } from '@unhead/vue';
 
 useHead({
@@ -11,12 +10,6 @@ useHead({
     }
   ]
 });
-
-const supportButton = ref(
-  document.querySelectorAll('[id^=kofi-widget-overlay-]').item(0) as HTMLElement
-);
-
-supportButton.value.style.display = 'none';
 </script>
 
 <template>