Allow customizing consent sections (#38)

* Allow configuration of sections * Split into panel and sections * WIP
bernskioldmedia · Jan 15, 2022 · 89f07f2 · 89f07f2
1 parent adeb4fe
commit 89f07f2
Show file tree

Hide file tree

Showing 6 changed files with 196 additions and 96 deletions.
diff --git a/assets/scripts/src/banner.js b/assets/scripts/src/banner.js
@@ -2,13 +2,26 @@
  * Internal dependencies
  */
 import { addConsentedCategory, hasConsentedTo, removeConsentedCategory } from "./consent";
+import { isAnalyticsShown, isConfigurable, isMarketingShown } from "./settings";
 
 export function showBanner() {
+
 	const consentBlock = document.createElement( "div" );
 	consentBlock.id    = "cookie-consent-block";
 	consentBlock.classList.add( "ilcc-cookie-consent-notice" );
 	consentBlock.classList.add( "js--ilcc-cookie-consent-notice" );
-	consentBlock.innerHTML = "<div class=\"ilcc-cookie-consent-notice-content\"><p><span>" + ilcc.cookieConsentTitle + "</span>" + ilcc.cookieConsentText + "</p><div class=\"ilcc-cookie-consent-actions\"><button class=\"ilcc-cookie-consent-necessary js--ilcc-cookie-consent-necessary ilcc-cookie-consent-button\">" + ilcc.necessaryText + "</button><button class=\"ilcc-cookie-consent-close js--ilcc-cookie-consent-close close-cookie-block ilcc-cookie-consent-button\">" + ilcc.acceptText + "</button><button class=\"ilcc-cookie-consent-settings-toggle js--ilcc-cookie-consent-settings-toggle\">" + ilcc.configureSettingsText + "</button></div></div>" + renderSettings();
+
+	consentBlock.innerHTML = `
+		<div class="ilcc-cookie-consent-notice-content">
+			<p><span>${ilcc.cookieConsentTitle}</span>${ilcc.cookieConsentText}</p>
+			<div class="ilcc-cookie-consent-actions">
+				${isConfigurable() ? `<button class="ilcc-cookie-consent-necessary js--ilcc-cookie-consent-necessary ilcc-cookie-consent-button">${ilcc.necessaryText}</button>` : ""}
+				<button class="ilcc-cookie-consent-close js--ilcc-cookie-consent-close close-cookie-block ilcc-cookie-consent-button">${ilcc.acceptText}</button>
+				${isConfigurable() ? `<button class="ilcc-cookie-consent-settings-toggle js--ilcc-cookie-consent-settings-toggle">${ilcc.configureSettingsText}</button>` : ""}
+			</div>
+		</div>
+		${renderSettings()}
+	`;
 
 	document.body.appendChild( consentBlock );
 
@@ -53,20 +66,27 @@ export function toggleSettings() {
 }
 
 function renderSettings() {
-	return `
-		<div class="ilcc-cookie-consent-settings js--ilcc-cookie-consent-settings">
+
+	if ( ! isConfigurable() ) {
+		return "";
+	}
+
+	let html = `<div class="ilcc-cookie-consent-settings js--ilcc-cookie-consent-settings">
 		<p class="ilcc-cookie-consent-settings-title">${ilcc.settingsTitle}</p>
 		<p class="ilcc-cookie-consent-settings-intro">${ilcc.settingsDescription}</p>
 		<div class="ilcc-cookie-consent-categories">
-			<a href="#" class="ilcc-cookie-consent-category ilcc-toggle-disabled" data-category="necessary">
+<a href="#" class="ilcc-cookie-consent-category ilcc-toggle-disabled" data-category="necessary">
 				<span class="ilcc-cookie-consent-category-info">
 					<strong>${ilcc.necessaryHeading}</strong>
 					<p>${ilcc.necessaryDescription}</p>
 				</span>
 				<span class="ilcc-cookie-consent-category-toggle">
 				${renderToggle()}
 				</span>
-			</a>
+			</a>`;
+
+	if ( isAnalyticsShown() ) {
+		html += `
 			<a href="#" class="ilcc-cookie-consent-category js--ilcc-cookie-consent-toggle ${renderActiveSelector( "analytics" )}" data-category="analytics">
 				<span class="ilcc-cookie-consent-category-info">
 					<strong>${ilcc.analyticsHeading}</strong>
@@ -76,6 +96,11 @@ function renderSettings() {
 				${renderToggle()}
 				</span>
 			</a>
+		`;
+	}
+
+	if ( isMarketingShown() ) {
+		html += `
 			<a href="#" class="ilcc-cookie-consent-category js--ilcc-cookie-consent-toggle ${renderActiveSelector( "marketing" )}" data-category="marketing">
 				<span class="ilcc-cookie-consent-category-info">
 					<strong>${ilcc.marketingHeading}</strong>
@@ -85,12 +110,16 @@ function renderSettings() {
 				${renderToggle()}
 				</span>
 			</a>
-		</div>
+		`;
+	}
+
+	html += `</div>
 		<div class="ilcc-cookie-consent-settings-save">
 			<button class="ilcc-cookie-consent-button js--ilcc-cookie-consent-settings-save-button">${ilcc.saveSettingsText}</button>
 		</div>
-</div>
-	`;
+</div>`;
+
+	return html;
 }
 
 function renderActiveSelector( category ) {

diff --git a/assets/scripts/src/index.js b/assets/scripts/src/index.js
@@ -5,7 +5,7 @@ import { removeBanner, showBanner, toggleCategory, toggleSettings } from "./bann
 import { hasUserSetPreferences, setConsentedCategories, setHasSetPreferences } from "./consent";
 import { getJsonCookieValue } from "./cookies";
 import { log, logDebug, logInfo } from "./log";
-import { settings } from "./settings";
+import { isConfigurable, settings } from "./settings";
 
 log( "=========== COOKIE CONSENT DEBUGGING ===========" );
 
@@ -51,21 +51,23 @@ if ( document.querySelector( ".js--ilcc-cookie-consent-notice" ) ) {
 		] );
 	} );
 
-	document.querySelector( ".js--ilcc-cookie-consent-settings-toggle" ).addEventListener( "click", function( e ) {
-		e.preventDefault();
-		toggleSettings();
-	} );
-
-	document.querySelector( ".js--ilcc-cookie-consent-settings-save-button" ).addEventListener( "click", function( e ) {
-		e.preventDefault();
-		setHasSetPreferences();
-		removeBanner();
-	} );
+	if ( isConfigurable() ) {
+		document.querySelector( ".js--ilcc-cookie-consent-settings-toggle" ).addEventListener( "click", function( e ) {
+			e.preventDefault();
+			toggleSettings();
+		} );
 
-	document.querySelectorAll( ".js--ilcc-cookie-consent-toggle" ).forEach( ( toggle ) => {
-		toggle.addEventListener( "click", function( e ) {
+		document.querySelector( ".js--ilcc-cookie-consent-settings-save-button" ).addEventListener( "click", function( e ) {
 			e.preventDefault();
-			toggleCategory( this );
+			setHasSetPreferences();
+			removeBanner();
 		} );
-	} );
+
+		document.querySelectorAll( ".js--ilcc-cookie-consent-toggle" ).forEach( ( toggle ) => {
+			toggle.addEventListener( "click", function( e ) {
+				e.preventDefault();
+				toggleCategory( this );
+			} );
+		} );
+	}
 }
diff --git a/assets/scripts/src/settings.js b/assets/scripts/src/settings.js
@@ -1,6 +1,18 @@
 export const settings = {
-	debug: document.body.classList.contains( 'ilcc-is-debugging' ),
+	debug: document.body.classList.contains( "ilcc-is-debugging" ),
 	consentRememberDuration: ilcc.rememberDuration,
 	setPreferencesCookieName: ilcc.preferencesCookieName,
-	consentedCategories: ilcc.consentedCategoriesCookieName,
+	consentedCategories: ilcc.consentedCategoriesCookieName
 };
+
+export function isConfigurable() {
+	return isMarketingShown() || isAnalyticsShown();
+}
+
+export function isAnalyticsShown() {
+	return 1 == ilcc.isAnalyticsShown;
+}
+
+export function isMarketingShown() {
+	return 1 == ilcc.isMarketingShown;
+}
diff --git a/assets/styles/src/cookie-banner.scss b/assets/styles/src/cookie-banner.scss
@@ -52,14 +52,15 @@ body {
 	justify-content: space-between;
 	max-width: 68.5rem;
 	margin: 0 auto;
+	gap: 1rem;
 
 	@media screen and (min-width: 1024px) {
 		flex-flow: row;
 	}
 
 	p {
 		font-size: 0.85rem;
-		flex: 1 1 0px;
+		flex: 1 1 auto;
 		margin: 0;
 		color: var(--ilcc-text-color);
 
@@ -75,26 +76,20 @@ body {
 .ilcc-cookie-consent-actions {
 	display: flex;
 	align-items: flex-start;
+	justify-content: center;
 	flex: 0 1 auto;
 	flex-flow: column;
-	margin-top: 1rem;
 
 	@media screen and (min-width: 768px) {
 		flex-flow: row wrap;
 	}
-
-	@media screen and (min-width: 1024px) {
-		margin-top: 0;
-		margin-left: 1rem;
-	}
 }
 
 .ilcc-cookie-consent-button {
 	font-size: 0.85rem;
 	font-weight: bold;
 	line-height: 1;
 	display: inline-block;
-	flex: 0 1 calc(100% - 0.5rem);
 	width: 100%;
 	margin: 0.25rem !important;
 	padding: 1.25em 2.5em;
@@ -108,16 +103,10 @@ body {
 	background-color: var(--ilcc-close-button);
 
 	@media screen and (min-width: 768px) {
-		flex: 0 1 auto;
 		width: auto;
 		max-width: none;
 	}
 
-	@media screen and (min-width: 1024px) {
-		flex: 0 1 calc(50% - 0.5rem);
-		max-width: calc(50% - 0.5rem);
-	}
-
 	&:hover,
 	&:focus {
 		cursor: pointer;
@@ -137,8 +126,6 @@ body {
 	font-size: 0.75rem;
 	font-weight: bold;
 	display: block;
-	flex: 0 1 100%;
-	width: 100%;
 	margin-top: 0.5rem;
 	transition: 0.25s opacity ease-in-out;
 	opacity: 0.75;
@@ -283,13 +270,15 @@ body {
 	background-color: var(--ilcc-toggle-handle-background-color);
 	backface-visibility: hidden;
 
-	.ilcc-toggle-active & {
+	.ilcc-toggle-active &, {
 		right: 0.1rem;
 		left: auto;
 		background-color: #6ab785;
 	}
 
 	.ilcc-toggle-disabled & {
+		right: 0.1rem;
+		left: auto;
 		background-color: #d9534f;
 	}
 }