diff --git a/src/components/popupManager.js b/src/components/popupManager.js index caec19c..650df30 100644 --- a/src/components/popupManager.js +++ b/src/components/popupManager.js @@ -1,4 +1,4 @@ -export function createPopup({ title, body, footer = '', closeCallback = null, customClass = '' }) { +export function createPopup({ title, body, footer = '', customClass = '' }) { // Popup-Container erstellen const popup = document.createElement('div'); popup.classList.add('popup'); @@ -17,32 +17,41 @@ export function createPopup({ title, body, footer = '', closeCallback = null, cu `; + // Popup dem Body hinzufügen document.body.appendChild(popup); + // Scrollen deaktivieren + document.body.classList.add('body-no-scroll'); + // Event-Listener für Schließen-Button const closeButton = popup.querySelector('.close-popup'); - closeButton.addEventListener('click', () => closePopup(popup, closeCallback)); + closeButton.addEventListener('click', () => closePopup(popup)); // Event-Listener für ESC-Taste document.addEventListener('keydown', (event) => { - if (event.key === 'Escape') closePopup(popup, closeCallback); + if (event.key === 'Escape') closePopup(popup); }); // Event-Listener für Klick außerhalb des Popups popup.addEventListener('click', (event) => { - if (event.target === popup) closePopup(popup, closeCallback); + if (event.target === popup) closePopup(popup); }); return popup; } -function closePopup(popup, closeCallback) { +export function closePopup(popup) { + // Popup entfernen popup.remove(); - if (typeof closeCallback === 'function') { - closeCallback(); - } + + // Scrollen wieder aktivieren + document.body.classList.remove('body-no-scroll'); } export function destroyAllPopups() { + // Alle Popups entfernen document.querySelectorAll('.popup').forEach(popup => popup.remove()); + + // Scrollen wieder aktivieren + document.body.classList.remove('body-no-scroll'); } diff --git a/src/main.js b/src/main.js index f82d08c..2318dbf 100644 --- a/src/main.js +++ b/src/main.js @@ -2,21 +2,28 @@ import { createStarterKitElement, enhanceStarterKits } from './utils/starterkit- import { seededShuffleChildren } from './utils/shuffle-utils.js'; import { initializeCreateStarterKitPopup } from './utils/create-starterkit.js'; import { loadPostwall } from './components/postwall.js'; - - -let userConsent = null; -export { userConsent }; - -async function loadTemplates() { - const response = await fetch('src/template/template.html'); - const templateHTML = await response.text(); - - const templateContainer = document.createElement('div'); - templateContainer.innerHTML = templateHTML; - document.body.appendChild(templateContainer); -} +import { checkConsent, setUserConsent, showConsentPopup } from './utils/consent-utils.js'; document.addEventListener('DOMContentLoaded', async function () { + // Überprüfe Consent, bevor Inhalte geladen werden + const consent = checkConsent(); + if (!consent) { + showConsentPopup( + () => { + setUserConsent(true); + initializeApp(); + }, + () => { + setUserConsent(false); + initializeApp(); + } + ); + } else { + initializeApp(); + } +}); + +async function initializeApp() { await loadTemplates(); initializeCreateStarterKitPopup(); @@ -50,4 +57,13 @@ document.addEventListener('DOMContentLoaded', async function () { enhanceStarterKits(); }) .catch(error => console.error('Fehler beim Laden der StarterKits:', error)); -}); +} + +async function loadTemplates() { + const response = await fetch('src/template/template.html'); + const templateHTML = await response.text(); + + const templateContainer = document.createElement('div'); + templateContainer.innerHTML = templateHTML; + document.body.appendChild(templateContainer); +} diff --git a/src/utils/consent-utils.js b/src/utils/consent-utils.js index b7bd3ca..f1ae8ce 100644 --- a/src/utils/consent-utils.js +++ b/src/utils/consent-utils.js @@ -1,16 +1,24 @@ -import { createPopup } from '../components/popupManager.js'; +import { createPopup, closePopup } from '../components/popupManager.js'; +// Speichert die Benutzerzustimmung export function setUserConsent(consent) { localStorage.setItem('userConsent', JSON.stringify(consent)); } +// Ruft die Benutzerzustimmung ab export function getUserConsent() { const consent = localStorage.getItem('userConsent'); return consent !== null ? JSON.parse(consent) : null; } +// Überprüft, ob bereits eine Zustimmung vorliegt +export function checkConsent() { + return getUserConsent() !== null; +} + +// Zeigt das Consent-Banner an export function showConsentPopup(onAccept, onDecline) { - const title = 'Zustimmung zur Datenabfrage'; + const title = 'Datenschutzeinstellungen'; const body = `

Mit dem Klicken auf "Bestätigen" erlaubst du, dass Profilinformationen von unterschiedlichen Mastodon-Instanzen @@ -26,38 +34,22 @@ export function showConsentPopup(onAccept, onDecline) { `; + // Erstelle das Popup const popup = createPopup({ title, body, - customClass: 'consent-popup', - closeCallback: () => { - document.body.classList.remove('body-no-scroll'); - window.removeEventListener('popstate', onPopState); - } + customClass: 'consent-popup' }); - // Klasse hinzufügen, um das Scrollen des Hintergrunds zu verhindern - document.body.classList.add('body-no-scroll'); - - // Füge einen neuen Eintrag zur Browser-Historie hinzu - history.pushState({ popupOpen: true }, null, ''); - - const onPopState = () => { - popup.remove(); - document.body.classList.remove('body-no-scroll'); - window.removeEventListener('popstate', onPopState); - history.back(); - }; - window.addEventListener('popstate', onPopState); - // Event-Listener für die Buttons popup.querySelector('#consent-accept').addEventListener('click', () => { - popup.remove(); - onAccept(); // Zustimmung + closePopup(popup); // Popup korrekt schließen + onAccept(); // Zustimmung speichern }); - + popup.querySelector('#consent-decline').addEventListener('click', () => { - popup.remove(); - onDecline(); // Ablehnung + closePopup(popup); // Popup korrekt schließen + onDecline(); // Ablehnung speichern }); + }