BODY MIND SOUL BALANCING – COOKIE BANNER
/* ==========================================================
BODY MIND SOUL BALANCING
Cookie Consent JavaScript
========================================================== */
document.addEventListener(„DOMContentLoaded“, function () {
const STORAGE_KEY = „bms_cookie_consent_v1“;
const banner = document.getElementById(„bms-cookie-banner“);
const settings = document.getElementById(„bms-cookie-settings“);
const acceptAllButton = document.getElementById(„bms-accept-all“);
const rejectAllButton = document.getElementById(„bms-reject-all“);
const settingsButton = document.getElementById(„bms-open-settings“);
const saveButton = document.getElementById(„bms-save-settings“);
if (!banner) {
return;
}
/* ——————————————————
Grundeinstellungen
—————————————————— */
const defaultConsent = {
necessary: true,
maps: false,
youtube: false,
fonts: false,
timestamp: null
};
/* ——————————————————
Schalter automatisch in Einstellungen einfügen
—————————————————— */
function createSwitch(categoryElement, categoryName) {
if (!categoryElement) {
return;
}
const title = categoryElement.querySelector(
„.bms-cookie-category-title“
);
if (!title) {
return;
}
/* notwendige Cookies bekommen keinen Schalter */
if (categoryName === „necessary“) {
return;
}
const wrapper = document.createElement(„label“);
wrapper.style.display = „flex“;
wrapper.style.alignItems = „center“;
wrapper.style.gap = „10px“;
wrapper.style.marginTop = „12px“;
wrapper.style.cursor = „pointer“;
const checkbox = document.createElement(„input“);
checkbox.type = „checkbox“;
checkbox.id = „bms-consent-“ + categoryName;
checkbox.dataset.category = categoryName;
checkbox.style.width = „18px“;
checkbox.style.height = „18px“;
checkbox.style.cursor = „pointer“;
const text = document.createElement(„span“);
text.textContent = „Zulassen“;
text.style.fontSize = „13px“;
wrapper.appendChild(checkbox);
wrapper.appendChild(text);
categoryElement.appendChild(wrapper);
}
/* Kategorien des bestehenden HTML-Banners erkennen */
const categories = document.querySelectorAll(
„.bms-cookie-category“
);
categories.forEach(function (category) {
const title = category
.querySelector(„.bms-cookie-category-title“);
if (!title) {
return;
}
const name = title.textContent.toLowerCase();
if (name.includes(„google maps“)) {
createSwitch(category, „maps“);
}
if (name.includes(„youtube“)) {
createSwitch(category, „youtube“);
}
if (name.includes(„google fonts“)) {
createSwitch(category, „fonts“);
}
});
/* ——————————————————
Zustimmung laden
—————————————————— */
function getConsent() {
try {
const saved =
localStorage.getItem(STORAGE_KEY);
if (!saved) {
return null;
}
return JSON.parse(saved);
} catch (error) {
console.warn(
„Cookie-Einstellungen konnten nicht gelesen werden.“,
error
);
return null;
}
}
/* ——————————————————
Zustimmung speichern
—————————————————— */
function saveConsent(consent) {
consent.necessary = true;
consent.timestamp =
new Date().toISOString();
try {
localStorage.setItem(
STORAGE_KEY,
JSON.stringify(consent)
);
} catch (error) {
console.warn(
„Cookie-Einstellungen konnten nicht gespeichert werden.“,
error
);
}
applyConsent(consent);
banner.style.display = „none“;
/*
Eigenes Event.
Andere Skripte können darauf reagieren.
*/
document.dispatchEvent(
new CustomEvent(
„bmsConsentChanged“,
{
detail: consent
}
)
);
}
/* ——————————————————
Alle akzeptieren
—————————————————— */
function acceptAll() {
saveConsent({
necessary: true,
maps: true,
youtube: true,
fonts: true
});
}
/* ——————————————————
Alle ablehnen
—————————————————— */
function rejectAll() {
saveConsent({
necessary: true,
maps: false,
youtube: false,
fonts: false
});
}
/* ——————————————————
Individuelle Auswahl speichern
—————————————————— */
function saveSelection() {
const maps =
document.getElementById(
„bms-consent-maps“
);
const youtube =
document.getElementById(
„bms-consent-youtube“
);
const fonts =
document.getElementById(
„bms-consent-fonts“
);
saveConsent({
necessary: true,
maps:
maps ?
maps.checked :
false,
youtube:
youtube ?
youtube.checked :
false,
fonts:
fonts ?
fonts.checked :
false
});
}
/* ——————————————————
Schalter mit gespeicherten Werten befüllen
—————————————————— */
function updateSwitches(consent) {
const maps =
document.getElementById(
„bms-consent-maps“
);
const youtube =
document.getElementById(
„bms-consent-youtube“
);
const fonts =
document.getElementById(
„bms-consent-fonts“
);
if (maps) {
maps.checked =
!!consent.maps;
}
if (youtube) {
youtube.checked =
!!consent.youtube;
}
if (fonts) {
fonts.checked =
!!consent.fonts;
}
}
/* ——————————————————
Zustimmung anwenden
—————————————————— */
function applyConsent(consent) {
if (!consent) {
return;
}
updateSwitches(consent);
/*
Google Maps aktivieren
*/
if (consent.maps) {
activateDeferredElements(„maps“);
}
/*
YouTube aktivieren
*/
if (consent.youtube) {
activateDeferredElements(„youtube“);
}
/*
Google Fonts aktivieren
*/
if (consent.fonts) {
activateDeferredElements(„fonts“);
}
}
/* ——————————————————
Blockierte Inhalte aktivieren
Erwartet Elemente wie:
data-bms-category=“youtube“
data-src=“…“
—————————————————— */
function activateDeferredElements(category) {
/*
IFAMES:
YouTube / Google Maps
*/
const frames =
document.querySelectorAll(
‚iframe[data-bms-category=“‚ +
category +
‚“][data-src]‘
);
frames.forEach(function (frame) {
if (!frame.src) {
frame.src =
frame.dataset.src;
}
});
/*
Google Fonts Stylesheets
*/
const links =
document.querySelectorAll(
‚link[data-bms-category=“‚ +
category +
‚“][data-href]‘
);
links.forEach(function (link) {
if (!link.href) {
link.href =
link.dataset.href;
}
});
/*
Blockierte externe Skripte
*/
const scripts =
document.querySelectorAll(
’script[type=“text/plain“]‘ +
‚[data-bms-category=“‚ +
category +
‚“]‘
);
scripts.forEach(function (oldScript) {
if (
oldScript.dataset.bmsActivated ===
„true“
) {
return;
}
const newScript =
document.createElement(„script“);
if (oldScript.dataset.src) {
newScript.src =
oldScript.dataset.src;
} else {
newScript.textContent =
oldScript.textContent;
}
oldScript.dataset.bmsActivated =
„true“;
document.head.appendChild(
newScript
);
});
}
/* ——————————————————
Einstellungen öffnen
—————————————————— */
function openSettings() {
banner.style.display = „block“;
if (settings) {
settings.style.display = „block“;
}
const saved = getConsent();
if (saved) {
updateSwitches(saved);
}
}
/* ——————————————————
Beim ersten Seitenaufruf
—————————————————— */
const savedConsent = getConsent();
if (savedConsent) {
banner.style.display = „none“;
applyConsent(savedConsent);
} else {
banner.style.display = „block“;
/*
Einstellungen am Anfang einklappen
*/
if (settings) {
settings.style.display = „none“;
}
}
/* ——————————————————
Buttons
—————————————————— */
if (acceptAllButton) {
acceptAllButton.addEventListener(
„click“,
acceptAll
);
}
if (rejectAllButton) {
rejectAllButton.addEventListener(
„click“,
rejectAll
);
}
if (settingsButton) {
settingsButton.addEventListener(
„click“,
function () {
if (!settings) {
return;
}
if (
settings.style.display ===
„block“
) {
settings.style.display =
„none“;
} else {
settings.style.display =
„block“;
}
}
);
}
if (saveButton) {
saveButton.addEventListener(
„click“,
saveSelection
);
}
/* ——————————————————
Öffentliche Funktionen
Damit kannst du später z.B. im Footer einen
Link „Cookie-Einstellungen“ einbauen.
—————————————————— */
window.BMSCookieConsent = {
open: openSettings,
acceptAll: acceptAll,
rejectAll: rejectAll,
getConsent: getConsent,
reset: function () {
localStorage.removeItem(
STORAGE_KEY
);
location.reload();
}
};
});