Skip to content

Commit

Permalink
Added if-loop in ConsentController.js for the evaluation of Google Ta…
Browse files Browse the repository at this point in the history 
…g Manager Services. Added !default to scss variables to override them. Thank's to RazielleS and dmitryd. Issue: #36 and #40.
  • Loading branch information
Achim Strohm committed Apr 24, 2024
1 parent 91dd683 commit a2f2346
Show file tree
Hide file tree
Showing 7 changed files with 107 additions and 1,533 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# Editor spezifische Dateien
/.idea/*
prepros.config
2 changes: 1 addition & 1 deletion Classes/Resource/Rendering/VimeoRenderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ public function render(FileInterface $file, $width, $height, array $options = []

if(!$testing) {
$options = $this->collectOptions($options, $file);
$iframe = str_replace(' src="', ' data-name="youtube" data-src="', parent::render($file, $width, $height, $options, $usedPathsRelativeToCurrentScript));
$iframe = str_replace(' src="', ' data-name="vimeo" data-src="', parent::render($file, $width, $height, $options, $usedPathsRelativeToCurrentScript));
} else {
$iframe = parent::render($file, $width, $height, $options, $usedPathsRelativeToCurrentScript);
}
Expand Down
46 changes: 23 additions & 23 deletions Resources/Public/JavaScript/Controller/ConsentController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,33 +77,33 @@ let ConsentApp = new function ConsentController() {
* @param object service
*/
this.consentChanged = function (state, service) {
if (allServiceSettings.length > 0) {
let tempSettings = JSON.parse(JSON.stringify(allServiceSettings)); // Erstelle eine tiefe Kopie der Service-Einstellungen.
if (service.name.indexOf('google-tagmanager-service') !== -1) {
if (allServiceSettings.length > 0) {
let tempSettings = JSON.parse(JSON.stringify(allServiceSettings)); // Erstelle eine tiefe Kopie der Service-Einstellungen.

// Bearbeite die tempSettings basierend auf dem Zustand und den Service-Einstellungen.
tempSettings.forEach(tempSetting => {
// Wenn der aktuelle Service (basierend auf der serviceId) zustimmt, behalte seine Werte.
// Für alle anderen Services, die serviceConsent = true haben, aber nicht die aktuelle serviceId, setze ihre Werte temporär auf 'denied', wenn state = false.
if (tempSetting.serviceId !== service.serviceId && tempSetting.serviceConsent === true) {
if (!state) { // Wenn dem aktuellen Service nicht zugestimmt wurde.
Object.keys(tempSetting).forEach(key => {
if (key !== 'serviceId' && key !== 'serviceConsent' && tempSetting[key] !== 'not set') {
tempSetting[key] = 'denied';
}
});
// Bearbeite die tempSettings basierend auf dem Zustand und den Service-Einstellungen.
tempSettings.forEach(tempSetting => {
// Wenn der aktuelle Service (basierend auf der serviceId) zustimmt, behalte seine Werte.
// Für alle anderen Services, die serviceConsent = true haben, aber nicht die aktuelle serviceId, setze ihre Werte temporär auf 'denied', wenn state = false.
if (tempSetting.serviceId !== service.serviceId && tempSetting.serviceConsent === true) {
if (!state) { // Wenn dem aktuellen Service nicht zugestimmt wurde.
Object.keys(tempSetting).forEach(key => {
if (key !== 'serviceId' && key !== 'serviceConsent' && tempSetting[key] !== 'not set') {
tempSetting[key] = 'denied';
}
});
}
}
});

// Filtere die tempSettings, um nur die Services mit serviceConsent = true zu erhalten.
let relevantSettings = tempSettings.filter(setting => setting.serviceConsent === true);
// Verwende evaluateFinalValue und updateCookieWithFinalConsent mit den relevanten Einstellungen.
if (relevantSettings.length > 0) {
updateCookieWithFinalConsent(storageName, cookieExpiresAfterDays, relevantSettings);
}
});

// Filtere die tempSettings, um nur die Services mit serviceConsent = true zu erhalten.
let relevantSettings = tempSettings.filter(setting => setting.serviceConsent === true);
// Verwende evaluateFinalValue und updateCookieWithFinalConsent mit den relevanten Einstellungen.
if (relevantSettings.length > 0) {
updateCookieWithFinalConsent(storageName, cookieExpiresAfterDays, relevantSettings);
}
}
// Aktualisiere window.dataLayer basierend auf dem Zustand
if (service.name.indexOf('google-tagmanager-service') !== -1) {
// Aktualisiere window.dataLayer basierend auf dem Zustand
let tempObj = {
event: service.gtm.trigger,
[service.gtm.variable]: state
Expand Down
163 changes: 74 additions & 89 deletions Resources/Public/Stylesheet/Sass/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,124 +2,109 @@
// Variables:

// Relative path to original EXT:we_cookie_consent - Ver 2.1.0 -gf20211124
$path-to-wcc : "../../../../";
$path-to-ext : "../";
$path-to-wcc-images : $path-to-wcc + "we_cookie_consent/Resources/Public/Images/";
$path-to-wcc-icons : $path-to-wcc + "we_cookie_consent/Resources/Public/Icons/";
$path-to-wcc : "../../../../" !default;
$path-to-ext : "../" !default;
$path-to-wcc-images : $path-to-wcc + "we_cookie_consent/Resources/Public/Images/" !default;
$path-to-wcc-icons : $path-to-wcc + "we_cookie_consent/Resources/Public/Icons/" !default;
// Relative path to current EXT
$path-to-ext-images : $path-to-ext + "Images/";
$path-to-ext-icons : $path-to-ext + "Icons/";
$path-to-ext-images : $path-to-ext + "Images/" !default;
$path-to-ext-icons : $path-to-ext + "Icons/" !default;

$base-font-size:14px;
$base-font-size:14px !default;

$color-default : #161f57;
$color-black : #000;
$color-white : #FFF;
$color-none : transparent;
$color-grey : #EFEFEF;
$color-white-90-percent : #FFFFFFE0;
$color-default : #161f57 !default;
$color-black : #000 !default;
$color-white : #FFF !default;
$color-none : transparent !default;
$color-grey : #EFEFEF !default;
$color-white-90-percent : #FFFFFFE0 !default;

$opacity-hover : .7; // Ver 2.1.0 -gf20211125
$opacity-hover : .7 !default;

// Icons Buttons
$icon-edit: url( $path-to-ext-icons + "icon-pen.svg");
$icon-accept: url( $path-to-ext-icons + "icon-check-dark.svg");
$icon-success: url( $path-to-ext-icons + "icon-check-dark.svg");
$icon-decline: url( $path-to-ext-icons + "icon-close.svg");
$icon-edit: url( $path-to-ext-icons + "icon-pen.svg") !default;
$icon-accept: url( $path-to-ext-icons + "icon-check-dark.svg") !default;
$icon-success: url( $path-to-ext-icons + "icon-check-dark.svg") !default;
$icon-decline: url( $path-to-ext-icons + "icon-close.svg") !default;
// Icons Buttons bei Hover:
$icon-hover-edit: url( $path-to-ext-icons + "icon-pen.svg");
$icon-hover-accept: url( $path-to-ext-icons + "icon-check-dark.svg");
$icon-hover-success: url( $path-to-ext-icons + "icon-check-dark.svg");
$icon-hover-decline: url( $path-to-ext-icons + "icon-close.svg");
$icon-hover-edit: url( $path-to-ext-icons + "icon-pen.svg") !default;
$icon-hover-accept: url( $path-to-ext-icons + "icon-check-dark.svg") !default;
$icon-hover-success: url( $path-to-ext-icons + "icon-check-dark.svg") !default;
$icon-hover-decline: url( $path-to-ext-icons + "icon-close.svg") !default;

// Icons Settings
$icon-slider-yes: url( $path-to-ext-icons + "icon-yes.svg");
$icon-slider-no: url( $path-to-ext-icons + "icon-no.svg");
$icon-slider-locked: url( $path-to-ext-icons + "icon-locked.svg");
$icon-settings-close: '\00d7';
$icon-settings-close-size: 4em;
$icon-settings-close-color: #FFF;
$icon-slider-yes: url( $path-to-ext-icons + "icon-yes.svg") !default;
$icon-slider-no: url( $path-to-ext-icons + "icon-no.svg") !default;
$icon-slider-locked: url( $path-to-ext-icons + "icon-locked.svg") !default;
$icon-settings-close: '\00d7' !default;
$icon-settings-close-size: 4em !default;
$icon-settings-close-color: #FFF !default;

// Backgroud colors:
// Background Popup:
$color-bg: #FFF;
$color-bg: #FFF !default;
// Background colours Buttons
$color-bg-edit: #FFF;
$color-bg-accept: #FFF;
$color-bg-accept-all: transparent;
$color-bg-success: #FFF;
$color-bg-decline: #FFF;
$color-bg-link: transparent;
$color-bg-primary: #F7A925;
$color-bg-edit: #FFF !default;
$color-bg-accept: #FFF !default;
$color-bg-accept-all: transparent !default;
$color-bg-success: #FFF !default;
$color-bg-decline: #FFF !default;
$color-bg-link: transparent !default;
$color-bg-primary: #F7A925 !default;
// Font colours buttons
$color-font-edit: #00AFCB;
$color-font-accept: #161f57;
$color-font-success: #161f57;
$color-font-decline: #161f57;
$color-font-primary: #FFF;
$color-font-edit: #00AFCB !default;
$color-font-accept: #161f57 !default;
$color-font-success: #161f57 !default;
$color-font-decline: #161f57 !default;
$color-font-primary: #FFF !default;

// Border Colors
$color-border: #00AFCB;
$color-hover-border: #00AFCB;
$color-border: #00AFCB !default;
$color-hover-border: #00AFCB !default;

// Border properties:
$border-width: 2px;
$border-radius: 4px;
$border-style: $border-width solid $color-border;
$border-hover-style: $border-width solid rgba(0,0,0,.1);
$border-width: 2px !default;
$border-radius: 4px !default;
$border-style: $border-width solid $color-border !default;
$border-hover-style: $border-width solid rgba(0,0,0,.1) !default;

// Sliders and Locker icon
$color-slider:#EFEFEF;
$color-slider-half-active:#DADADA;
$color-slider-active:#C9C9C9;
$color-slider-knop:#B1D6E8; // rgb(177,214,232)
$color-slider-knop-half-active: #63ADD1; // rgb(99,173,209)
$color-slider-knop-active: #008000; // rgb(0,128,0); [#63ADD1; // rgb(99,173,209)]
$color-slider:#EFEFEF !default;
$color-slider-half-active:#DADADA !default;
$color-slider-active:#C9C9C9 !default;
$color-slider-knop:#B1D6E8 !default; // rgb(177,214,232)
$color-slider-knop-half-active: #63ADD1 !default; // rgb(99,173,209)
$color-slider-knop-active: #008000 !default; // rgb(0,128,0); [#63ADD1; // rgb(99,173,209)]


// Assignment colours/properties to buttons:
$cm-btn-color: $color-default;
$cm-btn-color-bg: $color-grey;
$cm-btn-color-border: $color-border;
$cm-btn-border: $border-style;
$cm-btn-color: $color-default !default;
$cm-btn-color-bg: $color-grey !default;
$cm-btn-color-border: $color-border !default;
$cm-btn-border: $border-style !default;

$cm-link-bg : $color-bg-link;
$cm-link-border : none;
$cm-link-bg : $color-bg-link !default;
$cm-link-border : none !default;

$cm-btn-color-success: $color-font-success;
$cm-btn-color-bg-success: $color-bg-success;
$cm-btn-color-bg-decline: $color-bg-decline;
$cm-btn-color-bg-primary: $color-bg-primary;
$cm-btn-color-success: $color-font-success !default;
$cm-btn-color-bg-success: $color-bg-success !default;
$cm-btn-color-bg-decline: $color-bg-decline !default;
$cm-btn-color-bg-primary: $color-bg-primary !default;

$border-top-purpose: $border-hover-style;
$border-top-purpose: $border-hover-style !default;

$video-overlay-bg : $color-white-90-percent;
$video-overlay-bg : $color-white-90-percent !default;

// Table colours (privacy page)
$table-headline-color : $color-default;
$table-bg-color : $color-none;
$table-row-bg-color : $color-slider;
$table-border-color : #ABABAB;
$table-headline-color : $color-default !default;
$table-bg-color : $color-none !default;
$table-row-bg-color : $color-slider !default;
$table-border-color : #ABABAB !default;

// Paddings und Margins
$spacing-top-bottom : 20px;
$spacing-left-right : 30px;
$spacing-top-bottom : 20px !default;
$spacing-left-right : 30px !default;

/*
To do:
- Alle success-Buttons blau (d.h. bei video BEIDE gelb!)
- Ablehnen-Button hellgrau ohne Rahmen!
- Hintergrund bei video WEISS
- Anordnung der Buttons bei center-floated wie bisher! D.h. Center 2 bleibt bestehen!!
*/

/* Basics: */

Expand Down Expand Up @@ -151,10 +136,10 @@ To do:
.klaro.we_cookie_consent .cookie-modal {
h1,
h2,
li,
li,
p,
a,
strong,
a,
strong,
ul {
color: $color-default;
font-size: 1em;
Expand Down
Loading

0 comments on commit a2f2346

Please sign in to comment.