Skip to content

Commit da2fb49

Browse files
skerbisskerbis
authored
Framework first mode (#452)
* select ff * Update Frontend.php * cssdings * css fixes * Update box_uikit3.php * Update box_uikit3.php * close modal * Update box_uikit3.php * Update box_uikit3.php * accordion * Update box_uikit3.php * Update box_uikit3.php * a11y * Update box_uikit3.php * cookies * css * Update box_uikit3.php * better text and style * style and text * gleiches design * doofe checkbox * doofe checkbox * backdrop * tailwind box * ffeditor * fixed boxes * Update box_tailwind.php * style fixes * style fixes * style fixes * style fixes * erweitertes setup * webawesome * changelog, readme * shoelace * bulma * bulma fix und issues fix * bluma * bluma fix
1 parent 0d60060 commit da2fb49

26 files changed

+1520
-62
lines changed

‎CHANGELOG.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
# REDAXO consent_manager - Changelog
22

3-
## Version 5.3.0 - 26.01.2026
3+
## Version 5.3.0 - 28.01.2026
44

55
**🚀 Release-Highlights:**
6-
Setup-Wizard für Erstkonfiguration, Domain-spezifische Themes mit Live-Preview, moderne Theme-Vorschau mit 32 Varianten, Google Consent Mode v2 Optimierungen, vollständiges Security-Audit mit CSP-Nonce-Schutz, Multi-Language-Verbesserungen mit editierbaren Script-Feldern, automatische Frontend-Einbindung per Domain-Option mit Template-Positivliste, erweiterte Debug-Tools mit Cookie-Analyse, Performance-Optimierungen, und neue Editorial-Seite für Redakteure mit Snippet-Manager und Auto-Blocking-Assistent.
6+
Setup-Wizard für Erstkonfiguration, Domain-spezifische Themes mit Live-Preview, moderne Theme-Vorschau mit 32 Varianten, Google Consent Mode v2 Optimierungen, vollständiges Security-Audit mit CSP-Nonce-Schutz, Multi-Language-Verbesserungen mit editierbaren Script-Feldern, automatische Frontend-Einbindung per Domain-Option mit Template-Positivliste, erweiterte Debug-Tools mit Cookie-Analyse, Performance-Optimierungen, und neue Editorial-Seite für Redakteure mit Snippet-Manager und Auto-Blocking-Assistent, Framework mode: Wähle dein Framework und schon passt es zu Deinem Design.
77

88
---
99

10+
### 🚀 Framework-First Integration (NEU)
11+
12+
Vollständige Unterstützung für Frontend-Frameworks ohne Custom CSS:
13+
- **CSS Framework Modus**: Native Unterstützung für **UIkit 3**, **Bootstrap 5**, **Tailwind CSS** und **Bulma**.
14+
- **Pure Utility Strategy**: Fragmente nutzen native Framework-Klassen (z.B. `.rounded-4`, `.uk-modal`, `.flex`) anstatt eigene Stile zu injizieren.
15+
- **Framework-Einstellungen**: Schatten (none, small, large) und Rundungen (eckig, abgerundet) werden direkt auf Framework-Klassen gemappt.
16+
- **Dynamische Sidebar**: In der Domain-Verwaltung wird die Theme-Auswahl automatisch maskiert, wenn ein Framework-Modus aktiv ist.
17+
- **Setup-Wizard Integration**: Auswahl des Frameworks bereits bei der Ersteinrichtung möglich.
18+
- **Backdrop-Steuerung**: Native Modal-Overlays der Frameworks werden genutzt und können in den Einstellungen konfiguriert werden.
19+
1020
### 📝 Editorial-Seite für Redakteure (NEU)
1121

1222
Neue dedizierte Seite für Redakteure ohne Admin-Rechte:
@@ -64,7 +74,7 @@ Komplett neu gestaltete Preview-Seite ohne Hintergrundbilder:
6474
- Cookie-Box öffnet automatisch beim Laden der Preview
6575
- Dynamisches iframe-Management im Modal für stabiles Schließverhalten
6676

67-
### �️ Security & XSS-Schutz
77+
### ️ Security & XSS-Schutz
6878

6979
Vollständiges Security Audit durchgeführt und alle Inline-Scripts abgesichert:
7080
- **CSP-Nonce-Schutz** für alle Inline-`<script>`-Tags im Backend (config.php, theme.php, theme_preview.php, domain.php, log.php)

‎README.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,13 @@ Das AddOn stellt eine **DSGVO-konforme Lösung** für die Einholung von Einverst
1919
- ✅ Auto-Blocking für manuell eingefügtes HTML (Scripts, iFrames, Embeds)
2020
- ✅ **Editorial-Seite** für Redakteure mit Code-Assistent und Snippet-Manager und Editor-Recht.
2121
- ✅ **Custom Platzhalter-Texte** pro Element mit `data-consent-text` Attribut
22+
- ✅ **Framework-First Support**: Native Integration von UIkit 3, Bootstrap 5, Tailwind und Webawesome (Shoelace).
2223

2324
![Screenshot](https://github.com/FriendsOfREDAXO/consent_manager/blob/assets/consent_manager.png?raw=true)
2425

2526
### Rechtlicher Hinweis
2627

27-
**Haftungsausschluss:** Mitgelieferte Texte und Cookie-Definitionen sind Beispiele ohne Gewähr. Website-Betreiber sind eigenverantwortlich für rechtskonforme Integration und müssen alle Inhalte durch Datenschutzbeauftragte prüfen lassen.
28+
🚨**Haftungsausschluss:** Mitgelieferte Texte und Cookie-Definitionen sind Beispiele ohne Gewähr. Website-Betreiber sind eigenverantwortlich für rechtskonforme Integration und müssen alle Inhalte durch Datenschutzbeauftragte prüfen lassen.
2829

2930
---
3031

@@ -40,6 +41,22 @@ Das AddOn stellt eine **DSGVO-konforme Lösung** für die Einholung von Einverst
4041
- **Minimal**: Nur technisch notwendige Cookies
4142
- **Standard**: Vollständige Service-Sammlung (Google Analytics, Facebook, YouTube, etc.)
4243

44+
---
45+
46+
## Framework-Integration
47+
48+
Der Consent Manager unterstützt einen **Framework-First** Ansatz. Anstatt eigene CSS-Stile zu laden, die oft mit dem Website-Design kollidieren, nutzt das Addon native Klassen Ihres Frameworks.
49+
50+
### Unterstützte Frameworks:
51+
- **UIkit 3**: Nutzt `uk-modal`, `uk-button` und Tailwind-ähnliche Abstände.
52+
- **Bootstrap 5**: Verwendet native Bootstrap Modals und Utility-Classes.
53+
- **Tailwind CSS**: Nutzt ausschließlich Standard Tailwind Utilities.
54+
- **Bulma**: Basiert auf nativen Bulma Modals und Boxes.
55+
56+
**Vorteil:** Die Consent-Box sieht sofort aus wie der Rest Ihrer Website, ohne dass Sie CSS anpassen müssen. Schatten und Abrundungen werden automatisch auf die entsprechenden Framework-Klassen gemappt.
57+
58+
---
59+
4360
### Grundeinrichtung
4461

4562
#### 1. Domain konfigurieren

‎api.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,48 @@ Verwenden Sie Video-Thumbnails für YouTube/Vimeo Platzhalter zur besseren User
359359

360360
---
361361

362+
## Framework-Integration (Entwickler)
363+
364+
In Version 5.3.0 wurde das System auf einen **Framework-First** Ansatz umgestellt. Dies ermöglicht es, die Consent-Box nativ in Ihrem Framework (Bootstrap, UIkit, Tailwind, etc.) zu rendern, ohne dass das Addon eigenes CSS mitbringen muss.
365+
366+
### Ein neues Framework hinzufügen
367+
368+
Um ein eigenes Framework zu unterstützen, sind folgende Schritte notwendig:
369+
370+
#### 1. Registrierung im Backend
371+
Fügen Sie in der Datei `pages/config.php` den neuen Framework-Identifier (z.B. `my-framework`) zum Select-Feld `css_framework_mode` hinzu.
372+
373+
#### 2. Fragment erstellen
374+
Erstellen Sie ein neues Fragment unter:
375+
`fragments/ConsentManager/box_my-framework.php`
376+
377+
Dieses Fragment wird automatisch von `fragments/ConsentManager/box.php` geladen, wenn der Modus auf `my-framework` steht. Nutzen Sie hier die nativen Klassen Ihres Frameworks. Die Standardvariablen (Textinhalte, Services) stehen im Fragment zur Verfügung.
378+
379+
**Beispiel Struktur eines Sub-Fragments:**
380+
```php
381+
<?php
382+
/** @var rex_fragment $this */
383+
$is_modern = true; // Empfohlen für neue Integrationen
384+
?>
385+
<!-- HTML Struktur Ihres Frameworks -->
386+
<div class="my-modal">
387+
<h3><?= $this->getVar('headline') ?></h3>
388+
<p><?= $this->getVar('description') ?></p>
389+
<!-- Buttons etc -->
390+
</div>
391+
```
392+
393+
#### 3. Setup-Wizard erweitern (Optional)
394+
Damit User Ihr Framework direkt beim Onboarding wählen können, erweitern Sie:
395+
- `fragments/ConsentManager/setup_wizard.php` (UI Karte hinzufügen)
396+
- `lib/Api/consent_manager_setup_wizard.php` (Validierung anpassen)
397+
398+
#### 4. Sprachvariablen
399+
Fügen Sie die entsprechenden Übersetzungen für den Namen des Frameworks in den `.lang` Dateien hinzu:
400+
`consent_manager_config_css_framework_mode_my-framework = My Framework`
401+
402+
---
403+
362404
## Troubleshooting
363405

364406
### Problem: Consent wird nicht gespeichert

‎assets/consent_manager_frontend.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// Issue #317: Remove domain parameter to prevent wildcard cookies (.example.com)
22
// Cookies must be domain-specific for GDPR compliance
33
// Cookie settings are now configurable via backend
4-
const cmCookieSameSite = consent_manager_parameters.cookieSameSite || 'Lax';
5-
const cmCookieSecure = consent_manager_parameters.cookieSecure || false;
6-
const cmCookieName = consent_manager_parameters.cookieName || 'consentmanager';
7-
const cmCookieAPI = Cookies.withAttributes({ expires: cmCookieExpires, path: '/', sameSite: cmCookieSameSite, secure: cmCookieSecure });
4+
var cmCookieSameSite = consent_manager_parameters.cookieSameSite || 'Lax';
5+
var cmCookieSecure = consent_manager_parameters.cookieSecure || false;
6+
var cmCookieName = consent_manager_parameters.cookieName || 'consentmanager';
7+
var cmCookieAPI = Cookies.withAttributes({ expires: cmCookieExpires, path: '/', sameSite: cmCookieSameSite, secure: cmCookieSecure });
88

99
if (window.consentManagerDebugConfig && window.consentManagerDebugConfig.debug_enabled) {
1010
console.log('Consent Manager: Script loaded');

0 commit comments

Comments
 (0)