diff --git a/assets/scripts/src/banner.js b/assets/scripts/src/banner.js index 609db0a..7851b82 100644 --- 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 = "

" + ilcc.cookieConsentTitle + "" + ilcc.cookieConsentText + "

" + renderSettings(); + + consentBlock.innerHTML = ` +
+

${ilcc.cookieConsentTitle}${ilcc.cookieConsentText}

+
+ ${isConfigurable() ? `` : ""} + + ${isConfigurable() ? `` : ""} +
+
+ ${renderSettings()} + `; document.body.appendChild( consentBlock ); @@ -53,12 +66,16 @@ export function toggleSettings() { } function renderSettings() { - return ` -
+ + if ( ! isConfigurable() ) { + return ""; + } + + let html = `

${ilcc.settingsTitle}

${ilcc.settingsDescription}

- + ${ilcc.necessaryHeading}

${ilcc.necessaryDescription}

@@ -66,7 +83,10 @@ function renderSettings() { ${renderToggle()} - + `; + + if ( isAnalyticsShown() ) { + html += ` ${ilcc.analyticsHeading} @@ -76,6 +96,11 @@ function renderSettings() { ${renderToggle()} + `; + } + + if ( isMarketingShown() ) { + html += ` ${ilcc.marketingHeading} @@ -85,12 +110,16 @@ function renderSettings() { ${renderToggle()} -
+ `; + } + + html += `
-
- `; +`; + + return html; } function renderActiveSelector( category ) { diff --git a/assets/scripts/src/index.js b/assets/scripts/src/index.js index a440fd7..91f1198 100644 --- 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 index 39bb067..a713ec7 100644 --- 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 index d3e3e2b..d678427 100644 --- a/assets/styles/src/cookie-banner.scss +++ b/assets/styles/src/cookie-banner.scss @@ -52,6 +52,7 @@ body { justify-content: space-between; max-width: 68.5rem; margin: 0 auto; + gap: 1rem; @media screen and (min-width: 1024px) { flex-flow: row; @@ -59,7 +60,7 @@ body { p { font-size: 0.85rem; - flex: 1 1 0px; + flex: 1 1 auto; margin: 0; color: var(--ilcc-text-color); @@ -75,18 +76,13 @@ 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 { @@ -94,7 +90,6 @@ body { 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; } } diff --git a/classes/class-settings.php b/classes/class-settings.php index b6a24b1..98c6d50 100644 --- a/classes/class-settings.php +++ b/classes/class-settings.php @@ -47,8 +47,7 @@ public static function get_consent_text() { $policy_url = self::get_policy_url(); /* translators: 1. Policy URL */ - $default_text = sprintf( __( 'We use cookies to analyze our traffic, personalize marketing and to provide social media features. Privacy and cookies policy ›.', - 'ilmenite-cookie-consent' ), $policy_url ); + $default_text = sprintf( __( 'We use cookies to analyze our traffic, personalize marketing and to provide social media features. Privacy and cookies policy ›.', 'ilmenite-cookie-consent' ), $policy_url ); $text = get_option( 'ilcc_text', $default_text ); @@ -136,8 +135,7 @@ public static function get_settings_necessary_heading() { * @return string */ public static function get_settings_necessary_description() { - $text = get_option( 'ilcc_settings_necessary_description', - __( 'These cookies cannot be disabled. They are requires for the website to work.', 'ilmenite-cookie-consent' ) ); + $text = get_option( 'ilcc_settings_necessary_description', __( 'These cookies cannot be disabled. They are requires for the website to work.', 'ilmenite-cookie-consent' ) ); return apply_filters( 'ilcc_settings_necessary_description', $text ); } @@ -159,8 +157,7 @@ public static function get_settings_marketing_heading() { * @return string */ public static function get_settings_marketing_description() { - $text = get_option( 'ilcc_settings_marketing_description', - __( 'By sharing your browsing behavior on our website we are able to serve you with personalized content and offers.', 'ilmenite-cookie-consent' ) ); + $text = get_option( 'ilcc_settings_marketing_description', __( 'By sharing your browsing behavior on our website we are able to serve you with personalized content and offers.', 'ilmenite-cookie-consent' ) ); return apply_filters( 'ilcc_settings_marketing_description', $text ); } @@ -182,8 +179,7 @@ public static function get_settings_analytics_heading() { * @return string */ public static function get_settings_analytics_description() { - $default = __( 'To be able to improve the website including information and functionality we want to gather analytics. We are not able to identify you personally using this data.', - 'ilmenite-cookie-consent' ); + $default = __( 'To be able to improve the website including information and functionality we want to gather analytics. We are not able to identify you personally using this data.', 'ilmenite-cookie-consent' ); $text = get_option( 'ilcc_settings_analytics_description', $default ); @@ -224,10 +220,32 @@ public static function get_settings_description() { return apply_filters( 'ilcc_settings_description', $text ); } + /** + * Check whether the analytics section should be shown or not. + * + * @return bool + */ + public static function is_analytics_shown() { + $shown = '1' === get_option( 'ilcc_settings_analytics_is_shown' ); + + return apply_filters( 'ilcc_settings_analytics_is_shown', $shown ); + } + + /** + * Check whether the marketing section should be shown or not. + * + * @return bool + */ + public static function is_marketing_shown() { + $shown = '1' === get_option( 'ilcc_settings_marketing_is_shown' ); + + return apply_filters( 'ilcc_settings_marketing_is_shown', $shown ); + } + /** * Add settings in the customer. * - * @param WP_Customize_Manager $wp_customize + * @param WP_Customize_Manager $wp_customize * * @return void */ @@ -241,6 +259,38 @@ public static function customizer( $wp_customize ) { return; } + $wp_customize->add_panel( 'ilmenite_cookie_banner', [ + 'priority' => 120, + 'capability' => apply_filters( 'ilcc_edit_style_capability', 'edit_theme_options' ), + 'title' => __( 'Cookie Banner', 'ilmenite-cookie-consent' ), + 'description' => __( 'Customize the appearance and texts in the cookie banner, used for EU cookie compliance.', 'ilmenite-cookie-consent' ), + ] ); + + $wp_customize->add_section( 'ilmenite_cookie_banner_style', [ + 'title' => __( 'Style', 'ilmenite-cookie-consent' ), + 'panel' => 'ilmenite_cookie_banner', + ] ); + + $wp_customize->add_section( 'ilmenite_cookie_banner_general', [ + 'title' => __( 'General', 'ilmenite-cookie-consent' ), + 'panel' => 'ilmenite_cookie_banner', + ] ); + + $wp_customize->add_section( 'ilmenite_cookie_banner_necessary', [ + 'title' => __( 'Section: Necessary', 'ilmenite-cookie-consent' ), + 'panel' => 'ilmenite_cookie_banner', + ] ); + + $wp_customize->add_section( 'ilmenite_cookie_banner_analytics', [ + 'title' => __( 'Section: Analytics', 'ilmenite-cookie-consent' ), + 'panel' => 'ilmenite_cookie_banner', + ] ); + + $wp_customize->add_section( 'ilmenite_cookie_banner_marketing', [ + 'title' => __( 'Section: Marketing', 'ilmenite-cookie-consent' ), + 'panel' => 'ilmenite_cookie_banner', + ] ); + /** * Style */ @@ -254,7 +304,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Style', 'ilmenite-cookie-consent' ), 'description' => __( 'The banner can appear both at the top, or overlaid at the bottom of the page.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_style', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_style', 'priority' => 80, 'type' => 'radio', 'choices' => [ @@ -264,12 +314,6 @@ public static function customizer( $wp_customize ) { ], ] ) ); - $wp_customize->add_section( 'ilmenite_cookie_banner', [ - 'title' => __( 'Cookie Banner', 'ilmenite-cookie-consent' ), - 'description' => __( 'Customize the appearance and texts in the cookie banner, used for EU cookie compliance.', 'ilmenite-cookie-consent' ), - 'priority' => 120, - ] ); - /** * Title */ @@ -283,7 +327,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Title', 'ilmenite-cookie-consent' ), 'description' => __( 'Keep the title short. It is styled prominently.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_title', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_general', 'priority' => 80, ] ) ); @@ -298,10 +342,9 @@ public static function customizer( $wp_customize ) { $wp_customize->add_control( new \WP_Customize_Control( $wp_customize, 'ilcc_text', [ 'label' => __( 'Description', 'ilmenite-cookie-consent' ), - 'description' => __( 'A secondary line of info about your cookie usage. Remember to link to the policy by using the %linkstart% and %linkend% placeholders.', - 'ilmenite-cookie-consent' ), + 'description' => __( 'A secondary line of info about your cookie usage. Remember to link to the policy by using the %linkstart% and %linkend% placeholders.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_text', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_general', 'priority' => 80, 'type' => 'textarea', ] ) ); @@ -317,10 +360,9 @@ public static function customizer( $wp_customize ) { $wp_customize->add_control( new \WP_Customize_Control( $wp_customize, 'ilcc_policy_url', [ 'label' => __( 'Cookie Policy Link', 'ilmenite-cookie-consent' ), - 'description' => __( 'Enter a link to your privacy and cookie policy where you outline the use of cookies. If left blank, the privacy policy page from Settings > Privacy will be used.', - 'ilmenite-cookie-consent' ), + 'description' => __( 'Enter a link to your privacy and cookie policy where you outline the use of cookies. If left blank, the privacy policy page from Settings > Privacy will be used.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_policy_url', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_general', 'priority' => 80, ] ) ); @@ -337,7 +379,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Accept All Button Text', 'ilmenite-cookie-consent' ), 'description' => __( 'Displays the message on the call to action button that adds consent for everything.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_button', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_general', 'priority' => 80, ] ) ); @@ -352,10 +394,9 @@ public static function customizer( $wp_customize ) { $wp_customize->add_control( new \WP_Customize_Control( $wp_customize, 'ilcc_only_necessary_text', [ 'label' => __( 'Only Necessary Cookies Button Text', 'ilmenite-cookie-consent' ), - 'description' => __( 'A secondary button that displays a call to action where the user can accept only the necessary cookies on the page. This essentially just closes the banner.', - 'ilmenite-cookie-consent' ), + 'description' => __( 'A secondary button that displays a call to action where the user can accept only the necessary cookies on the page. This essentially just closes the banner.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_only_necessary_text', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_general', 'priority' => 80, ] ) ); @@ -389,7 +430,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Settings Title', 'ilmenite-cookie-consent' ), 'description' => __( 'The title for the settings selection area.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_settings_title', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_general', 'priority' => 80, ] ) ); @@ -406,7 +447,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Settings Description', 'ilmenite-cookie-consent' ), 'description' => __( 'A description to further let people know what cookies are for and why they can select different options.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_settings_description', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_general', 'priority' => 80, ] ) ); @@ -423,7 +464,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Necessary Heading', 'ilmenite-cookie-consent' ), 'description' => __( 'A title for the necessary cookie group.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_settings_necessary_heading', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_necessary', 'priority' => 80, ] ) ); @@ -440,11 +481,28 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Necessary Description', 'ilmenite-cookie-consent' ), 'description' => __( 'Describes what the necessary cookies are used for.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_settings_necessary_description', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_necessary', 'priority' => 80, 'type' => 'textarea', ] ) ); + /** + * Show Analytics Section + */ + $wp_customize->add_setting( 'ilcc_settings_analytics_is_shown', [ + 'type' => 'option', + 'capability' => apply_filters( 'ilcc_edit_button_capability', 'edit_theme_options' ), + ] ); + + $wp_customize->add_control( new \WP_Customize_Control( $wp_customize, 'ilcc_settings_analytics_is_shown', [ + 'type' => 'checkbox', + 'label' => __( 'Show Analytics Section', 'ilmenite-cookie-consent' ), + 'description' => __( 'When checked the analytics configuration section is shown. If you have no analytics trackers you can disable this section.', 'ilmenite-cookie-consent' ), + 'settings' => 'ilcc_settings_analytics_is_shown', + 'section' => 'ilmenite_cookie_banner_analytics', + 'priority' => 80, + ] ) ); + /** * Analytics Heading */ @@ -458,7 +516,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Analytics Heading', 'ilmenite-cookie-consent' ), 'description' => __( 'A title for the analytics cookie group.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_settings_analytics_heading', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_analytics', 'priority' => 80, ] ) ); @@ -466,8 +524,7 @@ public static function customizer( $wp_customize ) { * Analytics Text */ $wp_customize->add_setting( 'ilcc_settings_analytics_description', [ - 'default' => __( 'To be able to improve the website including information and functionality we want to gather analytics. We are not able to identify you personally using this data.', - 'ilmenite-cookie-consent' ), + 'default' => __( 'To be able to improve the website including information and functionality we want to gather analytics. We are not able to identify you personally using this data.', 'ilmenite-cookie-consent' ), 'type' => 'option', 'capability' => apply_filters( 'ilcc_edit_button_capability', 'edit_theme_options' ), ] ); @@ -476,11 +533,28 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Analytics Description', 'ilmenite-cookie-consent' ), 'description' => __( 'Describes what the analytics cookies are used for.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_settings_analytics_description', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_analytics', 'priority' => 80, 'type' => 'textarea', ] ) ); + /** + * Show Marketing Section + */ + $wp_customize->add_setting( 'ilcc_settings_marketing_is_shown', [ + 'type' => 'option', + 'capability' => apply_filters( 'ilcc_edit_button_capability', 'edit_theme_options' ), + ] ); + + $wp_customize->add_control( new \WP_Customize_Control( $wp_customize, 'ilcc_settings_marketing_is_shown', [ + 'type' => 'checkbox', + 'label' => __( 'Show Marketing Section', 'ilmenite-cookie-consent' ), + 'description' => __( 'When checked the marketing configuration section is shown. If you have no marketing trackers you can disable this section.', 'ilmenite-cookie-consent' ), + 'settings' => 'ilcc_settings_marketing_is_shown', + 'section' => 'ilmenite_cookie_banner_marketing', + 'priority' => 80, + ] ) ); + /** * Marketing Heading */ @@ -494,7 +568,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Marketing Heading', 'ilmenite-cookie-consent' ), 'description' => __( 'A title for the marketing cookie group.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_settings_marketing_heading', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_marketing', 'priority' => 80, ] ) ); @@ -511,7 +585,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Marketing Description', 'ilmenite-cookie-consent' ), 'description' => __( 'Describes what the marketing cookies are used for.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_settings_marketing_description', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_marketing', 'priority' => 80, 'type' => 'textarea', ] ) ); @@ -529,7 +603,7 @@ public static function customizer( $wp_customize ) { 'label' => __( 'Save Settings Button Text', 'ilmenite-cookie-consent' ), 'description' => __( 'The label of the button that lets users save their settings.', 'ilmenite-cookie-consent' ), 'settings' => 'ilcc_save_settings_text', - 'section' => 'ilmenite_cookie_banner', + 'section' => 'ilmenite_cookie_banner_general', 'priority' => 80, ] ) ); @@ -539,45 +613,39 @@ public static function integrity_settings() { add_settings_section( 'ilcc_trackers_necessary', __( 'Necessary', 'ilmenite-cookie-consent' ), function () { ?> -

+

- +

-

+

- +

-

+

- +

Enter one domain per line.

-

-

+

+

self::get_categories_cookie_name(), 'necessaryHeading' => ILCC_Settings::get_settings_necessary_heading(), 'necessaryDescription' => ILCC_Settings::get_settings_necessary_description(), + 'isAnalyticsShown' => ILCC_Settings::is_analytics_shown() ? '1' : '0', 'analyticsHeading' => ILCC_Settings::get_settings_analytics_heading(), 'analyticsDescription' => ILCC_Settings::get_settings_analytics_description(), + 'isMarketingShown' => ILCC_Settings::is_marketing_shown() ? '1' : '0', 'marketingHeading' => ILCC_Settings::get_settings_marketing_heading(), 'marketingDescription' => ILCC_Settings::get_settings_marketing_description(), 'saveSettingsText' => ILCC_Settings::get_save_settings_button_title(),