From a56c1160e19e5283d466c8e34c6510bfceec1fb2 Mon Sep 17 00:00:00 2001 From: TheAsel Date: Tue, 8 Oct 2024 01:40:35 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Remove=20Ko-Fi=20widget=20from?= =?UTF-8?q?=20DOM=20when=20hidden?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 13 -------- src/components/HeaderBar.vue | 62 ++++++++++++++++++++++++------------ src/pages/ErrorNotFound.vue | 7 ---- 3 files changed, 42 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index aadc963..132a4bf 100644 --- a/index.html +++ b/index.html @@ -63,18 +63,5 @@ - - diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue index 3ef4efa..d2b4af4 100644 --- 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((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 index a1b8cd0..d7c3cbb 100644 --- a/src/pages/ErrorNotFound.vue +++ b/src/pages/ErrorNotFound.vue @@ -1,5 +1,4 @@