From 6773f5bdd0e7ecfb1678dea42b78f424844ba603 Mon Sep 17 00:00:00 2001 From: Gustavo Luigi <=> Date: Thu, 11 Jan 2024 15:15:48 -0300 Subject: [PATCH] change cookie consent ux --- assets/js/components/cookies-consent.js | 87 ++++++++++++++++++------ content/includes/cookie-banner.blade.php | 10 +-- 2 files changed, 72 insertions(+), 25 deletions(-) diff --git a/assets/js/components/cookies-consent.js b/assets/js/components/cookies-consent.js index 93b223f..564517a 100644 --- a/assets/js/components/cookies-consent.js +++ b/assets/js/components/cookies-consent.js @@ -1,30 +1,77 @@ -window.addEventListener("load", function () { - if (document.cookie.indexOf('cookies-consent') === -1) { - let cookieSettings = document.getElementById("cookie-settings"); +document.addEventListener('DOMContentLoaded', function () { + const modalCookieSettingsElement = document.querySelector('#modal-cookie-settings'); + let cookieSettings = document.getElementById("cookie-settings"); + + if (document.cookie.indexOf('cookies-consent') === -1) { cookieSettings.style.bottom = '0%'; setTimeout(() => { cookieSettings.style.bottom = '0%'; }, 0); + } - document.querySelectorAll('.btn-cookies-consent').forEach(button => { - button.addEventListener('click', function (event) { - event.preventDefault(); - let cookiesConsent = this.getAttribute('data-cookies'); - if (cookiesConsent !== null) { - document.cookie = `cookies-consent=${cookiesConsent};max-age=${365 * 24 * 60 * 60}`; - } else { - if (document.getElementById('functional-cookies').checked && document.getElementById('analytics-cookies').checked && document.getElementById('profile-cookies').checked) { - document.cookie = 'cookies-consent=1;max-age=' + 365 * 24 * 60 * 60; - } else { - document.cookie = 'cookies-consent=0;max-age=' + 365 * 24 * 60 * 60; - } - } + document.querySelectorAll('.btn-cookies-consent').forEach(button => { + button.addEventListener('click', function (event) { + event.preventDefault(); + let cookiesLevel = this.getAttribute('data-cookies'); + if (cookiesLevel !== null) { + document.cookie = `cookies-consent=${cookiesLevel};max-age=${365 * 24 * 60 * 60}`; + } else { + cookiesLevel = ""; - let modal = new bootstrap.Modal(document.getElementById('modal-cookie-settings')); - modal.hide(); + const checkFunctionalCookies = document.getElementById('functional-cookies'); + const checkAnalyticsCookies = document.getElementById('analytics-cookies'); + const checkProfileCookies = document.getElementById('profile-cookies'); + if (checkFunctionalCookies.checked) cookiesLevel += "1"; + else cookiesLevel += "0"; + + if (checkAnalyticsCookies.checked) cookiesLevel += "1"; + else cookiesLevel += "0"; + + if (checkProfileCookies.checked) cookiesLevel += "1"; + else cookiesLevel += "0"; + + document.cookie = `cookies-consent=${cookiesLevel};max-age=${365 * 24 * 60 * 60}`; + } + + const modal = bootstrap.Modal.getInstance(modalCookieSettingsElement); + if (modal) modal.hide(); + + if (cookieSettings) setTimeout(() => { cookieSettings.style.transition = "bottom 1s"; cookieSettings.style.bottom = '-100%'; - }); + }, 1000); }); + }); + + modalCookieSettingsElement.addEventListener('shown.bs.modal', event => { + const checkFunctionalCookies = document.getElementById('functional-cookies'); + const checkAnalyticsCookies = document.getElementById('analytics-cookies'); + const checkProfileCookies = document.getElementById('profile-cookies'); + + let cookiesConsent = getCookie('cookies-consent'); + + if (cookiesConsent[0] == 1) checkFunctionalCookies.checked = true; + else checkFunctionalCookies.checked = false; + + if (cookiesConsent[1] == 1) checkAnalyticsCookies.checked = true; + else checkAnalyticsCookies.checked = false; + + if (cookiesConsent[2] == 1) checkProfileCookies.checked = true; + else checkProfileCookies.checked = false; + }); +}); + +function getCookie(cookieName) { + const cookies = document.cookie; + + const cookiesArray = cookies.split('; '); + + for (let i = 0; i < cookiesArray.length; i++) { + const cookie = cookiesArray[i]; + const [cookieKey, cookieValue] = cookie.split('='); + + if (cookieKey.trim() === cookieName) return decodeURIComponent(cookieValue); } -}); \ No newline at end of file + + return null; +} \ No newline at end of file diff --git a/content/includes/cookie-banner.blade.php b/content/includes/cookie-banner.blade.php index 7e68706..e5e13b0 100644 --- a/content/includes/cookie-banner.blade.php +++ b/content/includes/cookie-banner.blade.php @@ -198,10 +198,10 @@ Website personalisieren?

- Diese Seite speichert Daten wie Cookies und verwendet ähnliche Technologien, um die wichtigen Funktionen unserer Website zu aktivieren, damit alles funktioniert, wenn du diese besuchst. Außerdem setzen wir optionale Cookies und verwenden ähnliche Technologien, um dich zu erkennen und deine Nutzung unsere Website zu analysieren, damit wir unsere Leistung verbessern und dich anhand deiner Online-Aktivitäten besser ansprechen können. Ohne deine Einwilligung setzen wir aber keine optionalen Cookies. In diesem Rahmen werden deine Daten auch in Ländern außerhalb des EWR verarbeitet, in denen Daten nicht in der gleichen Weise geschützt sind wie im EWR. Du kannst deine Zustimmung für die Zukunft widerrufen. Deine Cookie-Präferenzen kannst du über die Schaltfläche „Cookie-Einstellungen“ verwalten. Cookies zur Datenverarbeitung: Speicherung von und/oder Zugang zu Informationen, die auf einem Gerät gesichert sind, Optimierung und Personalisierung von Website-Funktionen sowie Messungen, Analyse und Verbesserung der Website, Einrichtung von Benutzerprofilen und Personalisierung von Werbung und Inhalten. Mehr Informationen finden Sie in unserer Datenschutzerklärung . Sie können auch alle nicht erforderlichen Cookies ablehnen, wenn Sie mit den beschriebenen Datenverarbeitungen nicht einverstanden sind. Sie können auch alle nicht essenziellen Cookies wiederrufen , wenn Sie mit den beschriebenen Datenverarbeitungen nicht einverstanden sind. + Diese Seite speichert Daten wie Cookies und verwendet ähnliche Technologien, um die wichtigen Funktionen unserer Website zu aktivieren, damit alles funktioniert, wenn du diese besuchst. Außerdem setzen wir optionale Cookies und verwenden ähnliche Technologien, um dich zu erkennen und deine Nutzung unsere Website zu analysieren, damit wir unsere Leistung verbessern und dich anhand deiner Online-Aktivitäten besser ansprechen können. Ohne deine Einwilligung setzen wir aber keine optionalen Cookies. In diesem Rahmen werden deine Daten auch in Ländern außerhalb des EWR verarbeitet, in denen Daten nicht in der gleichen Weise geschützt sind wie im EWR. Du kannst deine Zustimmung für die Zukunft widerrufen. Deine Cookie-Präferenzen kannst du über die Schaltfläche „Cookie-Einstellungen“ verwalten. Cookies zur Datenverarbeitung: Speicherung von und/oder Zugang zu Informationen, die auf einem Gerät gesichert sind, Optimierung und Personalisierung von Website-Funktionen sowie Messungen, Analyse und Verbesserung der Website, Einrichtung von Benutzerprofilen und Personalisierung von Werbung und Inhalten. Mehr Informationen finden Sie in unserer Datenschutzerklärung . Sie können auch alle nicht erforderlichen Cookies ablehnen, wenn Sie mit den beschriebenen Datenverarbeitungen nicht einverstanden sind. Sie können auch alle nicht essenziellen Cookies wiederrufen , wenn Sie mit den beschriebenen Datenverarbeitungen nicht einverstanden sind.

-
-