From cbe93c46ccd5ced135106938232e01661c8b4f0c Mon Sep 17 00:00:00 2001 From: Dilson's Pickles Date: Mon, 25 Sep 2023 16:02:52 +1000 Subject: [PATCH] Add custom cookie popup --- src/assets/js/cookieConsent.js | 40 +++++++++++++++++++++++++ src/components/banner/CookieConsent.jsx | 18 +++++++++++ src/layouts/BaseLayout.astro | 15 +++++----- src/pages/index.astro | 7 +---- src/styles/input.css | 15 ++++++++++ 5 files changed, 82 insertions(+), 13 deletions(-) create mode 100644 src/assets/js/cookieConsent.js create mode 100644 src/components/banner/CookieConsent.jsx diff --git a/src/assets/js/cookieConsent.js b/src/assets/js/cookieConsent.js new file mode 100644 index 0000000..a11ac9a --- /dev/null +++ b/src/assets/js/cookieConsent.js @@ -0,0 +1,40 @@ +const cookieStorage = { + getItem: (key) => { + const cookies = document.cookie + .split(";") + .map((cookie) => cookie.split("=")) + .reduce( + (acc, [key, value]) => ({ ...acc, [key.trim()]: value }), {} + ); + return cookies[key]; + }, + setItem: (key, value) => { + document.cookie = `${key}=${value}`; + }, + }; + + const storageType = cookieStorage; + const consentPropertyName = "Audacity_consent"; + + const showShowPopup = () => !storageType.getItem(consentPropertyName); + const saveToStorage = () => + storageType.setItem(consentPropertyName, true); + + window.onload = () => { + const consentPopup = document.getElementById('consent-popup'); + const acceptBtn = document.getElementById('accept'); + + const acceptFn = event => { + saveToStorage(storageType); + consentPopup.classList.add('hide'); + } + + acceptBtn.addEventListener('click', acceptFn); + + if (showShowPopup(storageType)) { + setTimeout(() => { + consentPopup.classList.remove('hide') + }, 2000); + + } + }; \ No newline at end of file diff --git a/src/components/banner/CookieConsent.jsx b/src/components/banner/CookieConsent.jsx new file mode 100644 index 0000000..10c02f4 --- /dev/null +++ b/src/components/banner/CookieConsent.jsx @@ -0,0 +1,18 @@ +import React from 'react' + +function CookieConsent() { + return ( + + + ) +} + +export default CookieConsent + diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 266e647..2395b51 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,8 +1,9 @@ --- import Footer from "../components/footer/Footer.astro"; import NavigationReact from "../components/navigation/NavigationReact"; +import CookieConsent from '../components/banner/CookieConsent' import { MatomoProvider, createInstance } from "@datapunt/matomo-tracker-react"; -import '../styles/input.css' +import "../styles/input.css"; import { ViewTransitions } from "astro:transitions"; export interface Props { @@ -14,16 +15,15 @@ const instance = createInstance({ urlBase: "test", siteId: 1, }); - --- - + - + {title} @@ -32,9 +32,10 @@ const instance = createInstance({
-