First Committ

src/components/BannerCookies/BannerCookies.scss

@@ -0,0 +1,34 @@
+// Animations
+// slideFromBottom
+.slideFromBottom-enter, .slideFromBottom-leave-to {
+  transform: translate(0px, 10em);
+}
+
+.slideFromBottom-enter-to, .slideFromBottom-leave {
+  transform: translate(0px, 0px);
+}
+
+.slideFromBottom-enter-active {
+  transition: transform .2s ease-out;
+}
+
+.slideFromBottom-leave-active {
+  transition: transform .2s ease-in;
+}
+
+.tothebottomfixed {
+  position: fixed;
+  left: 0;
+  right: 60px;
+  bottom: 0;
+  height: -100%;
+  z-index: 1000;
+}
+
+.margin_buttons_cook {
+  margin: -8px -8px;
+}
+
+.margin_buttons_cook > * {
+  margin: 8px 8px !important;
+}

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,
+    }
+  },
+})

src/components/BannerCookies/BannerCookies.vue

@@ -0,0 +1,27 @@
+<template>
+    <div v-if="isOpen" class="tothebottomfixed" role="dialog">
+        <div class="q-pa-md q-gutter-sm">
+            <transition appear name="slide-up" mode="out-in" :duration="2000">
+                <q-banner class="bg-primary text-white" transition-show="jump-down">
+                    {{t('cookies')}}
+                    <template v-slot:action>
+                        <div class="row justify-center margin_buttons_cook q-gutter-lg text-center" >
+                            <q-btn
+                              v-if="disableDecline === false" flat color="white" label="Declina"
+                                   @click="decline"></q-btn>
+                            <q-btn flat color="white" label="INFO" type="a" :href="urlInfo" @click="clickInfo"></q-btn>
+                            <q-btn flat color="white" label="OK" @click="accept"></q-btn>
+                        </div>
+                    </template>
+                </q-banner>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./BannerCookies.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './BannerCookies.scss';
+</style>

src/components/BannerCookies/index.ts

@@ -0,0 +1 @@
+export { default as BannerCookies } from './BannerCookies.vue'