First Committ

src/components/BannerCookies/BannerCookies.ts

@@ -0,0 +1,141 @@
+import { useQuasar } from 'quasar'
+import {
+  defineComponent, onBeforeMount, onBeforeUnmount, onMounted,  ref, toRefs, watch,
+} from 'vue'
+import { useI18n } from '@src/boot/i18n'
+
+// PropType,
+
+export default defineComponent({
+  name: 'BannerCookies',
+  components: {},
+  props: {
+    urlInfo: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props, context) {
+    const $q = useQuasar()
+    const { t } = useI18n();
+
+    const elementId = ref<string>('id');
+    const disableDecline = ref<boolean>(true);
+    const debug = ref<boolean>(false);
+    const status = ref<string | null>(null);
+    const supportsLocalStorage = ref<boolean>(true);
+    const isOpen = ref<boolean>(false);
+
+    const getCookieStatus = (): string | null => {
+      if (supportsLocalStorage.value) {
+        return localStorage.getItem(`cookie-${elementId.value}`)
+      }
+      return null
+      // return tinyCookie.get(`cookie-${this.elementId}`)
+    }
+
+    const init = (): void => {
+      const visitedType = getCookieStatus()
+      if (visitedType && (visitedType === 'accept' || visitedType === 'decline' || visitedType === 'postpone')) {
+        isOpen.value = false
+      }
+
+      if (!visitedType) {
+        isOpen.value = true
+      }
+      if (!supportsLocalStorage.value) isOpen.value = false
+
+      status.value = visitedType
+      context.emit('status', visitedType)
+    }
+
+    const checkLocalStorageFunctionality = (): void => {
+      // Check for availability of localStorage
+      try {
+        const test = '__cookie-check-localStorage'
+        window.localStorage.setItem(test, test)
+        window.localStorage.removeItem(test)
+      } catch (e) {
+        console.error('Local storage is not supported, falling back to cookie use')
+        supportsLocalStorage.value = false
+      }
+    }
+
+    const setCookieStatus = (type: string): void => {
+      if (supportsLocalStorage.value) {
+        if (type === 'accept') {
+          localStorage.setItem(`cookie-${elementId.value}`, 'accept')
+        }
+        if (type === 'decline') {
+          localStorage.setItem(`cookie-${elementId.value}`, 'decline')
+        }
+        if (type === 'postpone') {
+          localStorage.setItem(`cookie-${elementId.value}`, 'postpone')
+        }
+      } else {
+        /* if (type === 'accept') {
+          tinyCookie.set(`cookie-${elementId}`, 'accept')
+        }
+        if (type === 'decline') {
+          tinyCookie.set(`cookie-${elementId}`, 'decline')
+        }
+        if (type === 'postpone') {
+          tinyCookie.set(`cookie-${elementId}`, 'postpone')
+        } */
+      }
+    }
+
+    const accept = (): void => {
+      if (!debug.value) {
+        setCookieStatus('accept')
+      }
+
+      status.value = 'accept'
+      isOpen.value = false
+      context.emit('clicked-accept')
+    }
+
+    const decline = (): void => {
+      if (!debug.value) {
+        setCookieStatus('decline')
+      }
+
+      status.value = 'decline'
+      isOpen.value = false
+      context.emit('clicked-decline')
+    }
+
+    const clickInfo = (): void => {
+      isOpen.value = false
+    }
+    const postpone = (): void => {
+      if (!debug.value) {
+        setCookieStatus('postpone')
+      }
+
+      status.value = 'postpone'
+      isOpen.value = false
+      context.emit('clicked-postpone')
+    }
+    const removeCookie = (): void => {
+      localStorage.removeItem(`cookie-${elementId.value}`)
+      status.value = null
+      context.emit('removed-cookie')
+    }
+
+    onMounted(init)
+
+    return {
+      disableDecline,
+      decline,
+      accept,
+      postpone,
+      checkLocalStorageFunctionality,
+      clickInfo,
+      removeCookie,
+      isOpen,
+      t,
+    }
+  },
+})