Components Gallery, Book, Card, CImgText .... continue...

src/components/BannerCookies/BannerCookies.scss

@@ -0,0 +1,17 @@
+// 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;
+}

src/components/BannerCookies/BannerCookies.ts

@@ -0,0 +1,128 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import Quasar, { Screen } from 'quasar'
+import { Prop } from 'vue-property-decorator'
+
+@Component({
+  name: 'BannerCookies'
+})
+
+export default class BannerCookies extends Vue {
+  public $t
+  @Prop({ required: true }) public urlInfo: string
+
+  public elementId = 'id'
+  public disableDecline = true
+  public debug = false
+  public status = null
+  public supportsLocalStorage = true
+  public isOpen = false
+
+  public init() {
+    const visitedType = this.getCookieStatus()
+    if (visitedType && (visitedType === 'accept' || visitedType === 'decline' || visitedType === 'postpone')) {
+      this.isOpen = false
+    }
+
+    if (!visitedType) {
+      this.isOpen = true
+    }
+    if (!this.supportsLocalStorage)
+      this.isOpen = false
+
+    this.status = visitedType
+    this.$emit('status', visitedType)
+  }
+
+  public mounted() {
+    this.init()
+  }
+
+  public checkLocalStorageFunctionality() {
+    // 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')
+      this.supportsLocalStorage = false
+    }
+  }
+
+  public setCookieStatus(type) {
+    if (this.supportsLocalStorage) {
+      if (type === 'accept') {
+        localStorage.setItem(`cookie-${this.elementId}`, 'accept')
+      }
+      if (type === 'decline') {
+        localStorage.setItem(`cookie-${this.elementId}`, 'decline')
+      }
+      if (type === 'postpone') {
+        localStorage.setItem(`cookie-${this.elementId}`, 'postpone')
+      }
+    } else {
+      /*if (type === 'accept') {
+        tinyCookie.set(`cookie-${this.elementId}`, 'accept')
+      }
+      if (type === 'decline') {
+        tinyCookie.set(`cookie-${this.elementId}`, 'decline')
+      }
+      if (type === 'postpone') {
+        tinyCookie.set(`cookie-${this.elementId}`, 'postpone')
+      }*/
+    }
+  }
+
+  public getCookieStatus() {
+    if (this.supportsLocalStorage) {
+      return localStorage.getItem(`cookie-${this.elementId}`)
+    } else {
+      // return tinyCookie.get(`cookie-${this.elementId}`)
+    }
+  }
+
+  public accept() {
+    if (!this.debug) {
+      this.setCookieStatus('accept')
+    }
+
+    this.status = 'accept'
+    this.isOpen = false
+    this.$emit('clicked-accept')
+  }
+
+  public decline() {
+    if (!this.debug) {
+      this.setCookieStatus('decline')
+    }
+
+    this.status = 'decline'
+    this.isOpen = false
+    this.$emit('clicked-decline')
+  }
+
+  public clickInfo() {
+    this.isOpen = false
+  }
+
+  public postpone() {
+    if (!this.debug) {
+      this.setCookieStatus('postpone')
+    }
+
+    this.status = 'postpone'
+    this.isOpen = false
+    this.$emit('clicked-postpone')
+  }
+
+  public removeCookie() {
+    localStorage.removeItem(`cookie-${this.elementId}`)
+    this.status = null
+    this.$emit('removed-cookie')
+  }
+}

src/components/BannerCookies/BannerCookies.vue

@@ -0,0 +1,25 @@
+<template>
+    <div v-if="isOpen">
+        <div class="q-pa-md q-gutter-sm tothebottomfixed">
+            <transition appear name="slide-up" mode="out-in" :duration="2000">
+                <q-banner class="bg-primary text-white" transition-show="jump-down">
+                    Usiamo i Cookie per una migliore prestazione web.
+                    <template v-slot:action>
+                        <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>
+                    </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'