change cookie consent ux
Gustavo Luigi
parent
bdc79a4cb3
commit
6773f5bdd0
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -198,10 +198,10 @@
|
|||
<g id="レイヤー_2"/>
|
||||
</svg> Website personalisieren?</h4>
|
||||
<p style="font-size: 13px;">
|
||||
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 <a href="{{url('/datenschutz')}}" class="text-light">Datenschutzerklärung</a> . Sie können auch alle nicht erforderlichen Cookies ablehnen, wenn Sie mit den beschriebenen Datenverarbeitungen nicht einverstanden sind. Sie können auch <a href="#" class="text-light btn-cookies-consent" data-cookies="0">alle nicht essenziellen Cookies wiederrufen</a> , 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 <a href="{{url('/datenschutz')}}" class="text-light">Datenschutzerklärung</a> . Sie können auch alle nicht erforderlichen Cookies ablehnen, wenn Sie mit den beschriebenen Datenverarbeitungen nicht einverstanden sind. Sie können auch <a href="#" class="text-light btn-cookies-consent" data-cookies="000">alle nicht essenziellen Cookies wiederrufen</a> , wenn Sie mit den beschriebenen Datenverarbeitungen nicht einverstanden sind.
|
||||
</div>
|
||||
<div class="col mt-1">
|
||||
<button type="button" class="btn btn-light btn-cookies-consent" data-cookies="1">
|
||||
<button type="button" class="btn btn-light btn-cookies-consent" data-cookies="111">
|
||||
<svg style="fill: currentColor; width: 16px; margin-right: 2px; margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM363.3 203.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L224 297.4l-52.7-52.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l64 64c6.2 6.2 16.4 6.2 22.6 0l128-128z"/></svg>
|
||||
|
||||
Alle Zulassen
|
||||
|
|
@ -214,11 +214,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="modal-cookie-settings" tabindex="-1" aria-labelledby="cookie-settings" aria-hidden="true">
|
||||
<div class="modal fade" id="modal-cookie-settings" tabindex="-1" aria-labelledby="cookie-settings-label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-4" id="exampleModalLabel">
|
||||
<h1 class="modal-title fs-4" id="cookie-settings-label">
|
||||
<svg style="margin-right: 3px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" viewBox="0, 0, 202, 194">
|
||||
<defs>
|
||||
<clipPath id="Clip_1">
|
||||
|
|
@ -410,7 +410,7 @@
|
|||
<div class="text-center">
|
||||
<br>
|
||||
<br>
|
||||
<a href="" class="btn btn-primary btn-cookies-consent btn-lg" data-cookies="1">
|
||||
<a href="" class="btn btn-primary btn-cookies-consent btn-lg" data-cookies="111">
|
||||
<svg style="fill: currentColor; width: 20px; margin-right: 4px; margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM363.3 203.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L224 297.4l-52.7-52.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l64 64c6.2 6.2 16.4 6.2 22.6 0l128-128z"/></svg>
|
||||
Alle Cookies zulassen
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue