Merge pull request #262 from aeberhard/master

Themes für die Consent-Box

CHANGELOG.md

@@ -1,6 +1,6 @@
 # REDAXO consent_manager - Changelog
 
-## Version 4.0.0beta4 – 01.01.2023
+## Version 4.0.0beta5 – 13.01.2023
 
 ### Breaking Changes
 
@@ -9,11 +9,18 @@
   * Buttons statt Links für die Buttons und den Close-Button
   * Neuer Button "Alles ablehnen" (@thorol)
   * Tabindex(e) hinzugefügt
-  * CSS angepasst (scss/consent_manager_frontend.scss)
-  * Browser-Default-Checkboxen ohne SchnickSchnack (nur greyscale, und mit scale vergrössert), dadurch sind die Checkboxen auch per Tastatur erreichbar
+  * SCSS angepasst, Variablen hinzugefügt und Style vereinfacht (scss/consent_manager_frontend.scss)
+  * Browser-Default-Checkboxen ohne SchnickSchnack (nur greyscale/hue-rotate, und mit scale vergrössert), dadurch sind die Checkboxen auch per Tastatur erreichbar
 
 ### Features
 
+* Themes sind jetzt möglich, SCSS mit Variablen, 5 Standard-Themes sind beim Addon dabei, Theme-Vorschau im Backend
+  * Standard Theme Light
+  * Standard Theme Light Bottom-Bar
+  * Standard Theme Light Bottom-Right
+  * Standard Theme Dark
+  * Olien's Dark Theme von @olien
+* Eigene Themes können im project-Addon im Ordner **consent_manager_themes** gespeichert werden
 * CHANGELOG.md hinzugefügt, Anzeige im Backend (package.yml)
 * Host-Validation angepasst (consent_manager_rex_form::validateHostname)
 * JavaScript-Funktion **consent_manager_showBox** zum anzeigen der Consent-Box (assets/consent_manager_frontend.js) #230
@@ -29,7 +36,8 @@
 * Update js.cookie-3.0.1.min.js
 * Reload der Seite kann erzwungen werden **REX_CONSENT_MANAGER[forceReload=1]**
 * In der Übersicht der Gruppen eine Warning ausgeben wenn noch keine Domain zugeordnet wurde #257
-* Code-Quality (rexstan) Extensions: REDAXO SuperGlobals, Bleeding-Edge, Strict-Mode, Deprecation Warnings, PHPUnit, phpstan-dba, report-mixed, dead code
+* Code-Quality (rexstan) Level 9, Extensions: REDAXO SuperGlobals, Bleeding-Edge, Strict-Mode, Deprecation Warnings, PHPUnit, phpstan-dba, report-mixed, dead code
+* added .php-cs-fixer.dist.php, Code überarbeitet mit Coding Standards
 
 ### Bugfixes
 

README.md

@@ -1,19 +1,19 @@
-# Consent-Manager 3.0 für REDAXO CMS
+# Consent-Manager 4.0 für das REDAXO CMS
 
 ![logo](https://github.com/FriendsOfREDAXO/consent_manager/blob/assets/consent_manager-logo.png?raw=true)
 
 Stellt ein Opt-In Cookie-Banner zur Verfügung. Cookies können in selbst definierte Gruppen zusammengefasst werden. Der Website Besucher bekommt eine Cookie-Box angezeigt in der er allen oder einzelnen Gruppen zustimmen kann. Es existiert eine Gruppe **Notwendig**, die nicht deaktiviert werden kann. Die Cookie-Box kann erneut (zum Beispiel über einen Link im Impressum) aufgerufen werden, um die Auswahl nachträglich zu ändern. Alle Texte sowie die Gestaltung der Cookie-Box sind anpassbar.
 
-![Screenshot](https://github.com/FriendsOfREDAXO/consent_manager/blob/assets/consent_manager.jpg?raw=true)
+![Screenshot](https://github.com/FriendsOfREDAXO/consent_manager/blob/assets/consent_manager.png?raw=true)
 
 ## Kurzanleitung
 
-1. AddOn consent_manager über den Installer herunterladen und installieren.
+1. AddOn `consent_manager` über den Installer herunterladen und installieren.
 2. [Domains hinterlegen](#domains-hinzufuegen)
 3. [Cookies anlegen](#cookies-anlegen)
 4. [Cookie-Gruppen anlegen](#cookie-gruppen-anlegen)
 5. Der jeweiligen Domain-Gruppe die gewünschten Domains und Cookies zuordnen und JS Scripte hinterlegen.
-6. `REX_CONSENT_MANAGER[]` in den `head`-Bereich in alle gewünschten [Templates einfügen](#in-template-einfuegen), bzw. `echo consent_manager_frontend::getFragment(false, 'consent_manager_box_cssjs.php');`, wenn via PHP.
+6. `REX_CONSENT_MANAGER[forceCache=0 forceReload=0]` in den `head`-Bereich in alle gewünschten [Templates einfügen](#in-template-einfuegen), bzw.<br>`echo consent_manager_frontend::getFragment(false, false, 'consent_manager_box_cssjs.php');`,<br> wenn via PHP.
 7. Alle weiteren Einstellungen sind optional.
 
 > **Hinweis:** Wird keine Cookie-Box angezeigt Punkte 2 bis 6 nochmal checken ... und/oder siehe [Fehlerbehebung](#fehlerbehebung)
@@ -131,7 +131,7 @@ REX_CONSENT_MANAGER[]
 ...
 <body>
 ...
-`echo consent_manager_frontend::getFragment(false, 'consent_manager_box_cssjs.php');`
+<?php echo consent_manager_frontend::getFragment(false, false, 'consent_manager_box_cssjs.php'); ?>
 ...
 </body>
 ...
@@ -259,6 +259,8 @@ Verfügt die Website über mehrere Sprachen oder wird eine neue Sprache angelegt
 Das Design der Cookie-Box kann nach Belieben angepasst werden. Der HTML-Code der Cookie Box liegt im Fragment `/redaxo/src/addons/consent_manager/fragments/consent_manager_box.php`. Änderungen in dieser Datei werden aber beim nächsten Update überschrieben. Deshalb ist es empfehlenswert, das Fragment zu kopieren und zum Beispiel im Project oder Theme AddOn abzulegen 'theme/private/fragments/consent_manager_box.php' und die Änderungen hier vorzunehmen.
 Anschließend die Datei `consent_manager_frontend.css` an einen beliebigen Ort kopieren, anpassen und im eigenen Template/CSS einbinden (Eigenes CSS verwenden in den Einstellungen aktivieren!).
 
+> **Hinweis:** Das Design kann auch über ein eigenes Theme angepasst werden. Siehe unter Tipps & Tricks Eigene Themes für die Consent-Box weiter unten.
+
 ### Ausgabe-Einstellungen
 
 Über den Menüpunkt **Einstellungen** kann die Ausgabe für CSS und JavaScript im Frontend gesteuert werden.
@@ -267,8 +269,8 @@ Standardmäßig wird auf jeder Seite das benötigte JavaScript und die CSS-Datei
 Der Platzhalter `REX_CONSENT_MANAGER[]` im Template wird durch folgenden Code ersetzt.
 
 ```html
-<style>.consent_manager-background{position:fixed ...;}</style>
-<script src="./index.php?consent_manager_outputjs=1&amp;lang=1&amp;a=1&amp;i=false&amp;h=false&amp;cid=54&amp;v=3&amp;t=16394249212" id="consent_manager_script" defer></script>
+<style><style>/*consent_manager_frontend.css*/ @keyframes fadeIn{0%{opacity:0}100%{opacity:1}}</style>
+<script src="./index.php?consent_manager_outputjs=1&amp;lang=1&amp;a=6&amp;i=false&amp;h=false&amp;cid=43&amp;v=4&amp;r=0&amp;t=16732118931" id="consent_manager_script" defer></script>
 ```
 
 Sind im eigenen Frontend-Theme Styles für die Consent-Box vorhanden kann hier die Ausgabe der CSS-Datei `consent_manager_frontend.css` durch aktivieren der Einstellung **Eigenes CSS verwenden** unterdrückt werden. Es wird dann nur die JavaScript-Zeile ausgegeben.
@@ -295,6 +297,45 @@ Die Cookie-Box kann auch durch einen JavaScript-Aufruf geöffnet werden `consent
 <button on_click="java_script:consent_manager_showBox();">Cookie-Einstellungen</button>
 ```
 
+### Consent mit JavaScript abfragen
+
+Um mit JavaScript einen Consent abzufragen die Funktion `consent_manager_hasconsent()` verwenden.
+
+```js
+<script>
+window.addEventListener('load', (event) => {
+    if (true === consent_manager_hasconsent('youtube')) {
+        alert('youtube Ok');
+    }
+});
+</script>
+```
+
+### Consent mit PHP abfragen
+
+Um mit PHP einen Consent abzufragen die Klassen-Funktion `consent_manager_util::has_consent()` verwenden.
+
+```php
+<?php
+if (true === consent_manager_util::has_consent('youtube')) {
+    echo('youtube Ok');
+}
+?>
+```
+
+### Eigene Themes für die Consent-Box
+
+Um eigene Themes zu erstellen am besten ein bereits bestehendes Theme kopieren (im AddOn-Verzeichnis `/consent_manager/scss/`)
+und im Project-AddOn im Verzeichnis `/project/consent_manager_themes/` ablegen.
+Hier dann die gewünschten Anpassungen vornehmen und dann unter **Themes** in der Theme-Vorschau das eigene Theme **anwenden**.
+
+### Seite ohne Consent-Box
+
+Um z.B. einen Link zu teilen bei dem keine Consent-Box erscheinen soll kann in den Einstellungen ein **TOKEN** hinterlegt werden.
+An die URL dann einfach `skip_consent=MEINTOKEN` anhängen.
+
+z.B.: `https://meinedomain.de/SeiteOhneToken.html?skip_consent=MEINTOKEN`
+
 ### Scripte mit PHP laden
 
 Neben der Einbindung der Scripte direkt über das Addon lassen sich Scripte auch per PHP einbinden. Somit kann man (am Beispiel GoogleMaps) eine Meldung ausgeben, dass bestimmte Cookies akzeptiert werden müssen um die Karte zu laden.
@@ -356,7 +397,6 @@ MIT Lizenz, siehe [LICENSE.md](https://github.com/FriendsOfREDAXO/consent_manage
 ### Autor
 
 **Friends Of REDAXO**
-[http://www.redaxo.org](http://www.redaxo.org)
 [https://github.com/FriendsOfREDAXO](https://github.com/FriendsOfREDAXO)
 
 **Projekt-Lead**
@@ -368,4 +408,4 @@ First Release: [Ingo Winter](https://github.com/IngoWinter).
 [Thomas Blum](https://github.com/tbaddade/) wird eine Menge Code aus seinem [Sprog Addon](https://github.com/tbaddade/redaxo_sprog) in Consent-Manager wiederfinden.
 [Thomas Skerbis](https://github.com/skerbis) hat unermüdlich getestet und für die Entwicklung gespendet,
 [Peter Bickel](https://github.com/polarpixel) hat für die Entwicklung gespendet,
-[Oliver Kreischer](https://github.com/olien) hat den Keks gebacken
+[Oliver Kreischer](https://github.com/olien) hat den Keks gebacken.

assets/consent_manager_backend.js

@@ -1,5 +1,28 @@
+// Show theme preview
+
+function consent_manager_show_preview(theme) {
+    $('.cm_modal-iframe').css('opacity', 0);
+    $('.cm_modal-iframe').attr('src', '?page=consent_manager/theme&preview=' + theme)
+    $('.cm_modal-iframe').on('load', function () {
+        $('.cm_modal-iframe').off('load');
+        $('.cm_modal-overlay').addClass('is-open');
+        $('.cm_modal-iframe').css('opacity', 1);
+    });
+}
+
+// Close theme preview
+
+function consent_manager_close_preview() {
+    $(document).off('keydown');
+    $('.cm_modal-overlay').removeClass('is-open');
+    $('.cm_modal-iframe').attr('src', 'about:blank');
+    $('.cm_modal-iframe').css('opacity', 0);
+}
+
 $(document).on('rex:ready', function () {
 
+    // Search on consent logfile
+
     function consent_manager_setsearch() {
         const urlParams = new URLSearchParams(window.location.search);
         entries = urlParams.entries();
@@ -43,4 +66,21 @@ $(document).on('rex:ready', function () {
     });
 
     rex_searchfield_init("#consent_manager_log_search");
+
+    // Theme preview
+
+    $('.cm_modal-button-close').on('click', function (e) {
+        consent_manager_close_preview();
+    });
+
+    $('div.thumbnail-container, a.consent_manager-button-preview').on('click', function (e) {
+        e.preventDefault();
+        consent_manager_show_preview($(this).data('theme'));
+        $(document).on('keydown', function (e) {
+            if (e.keyCode === 27) { // ESC
+                consent_manager_close_preview();
+            }
+        });
+    });
+
 });