Feat: Add displayMode (default force) to choose between blocking po…

…p-up and banner #CCM-61
lmc-eu · Feb 10, 2022 · 6fdca25 · 6fdca25
1 parent 18adcf3
commit 6fdca25
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -251,14 +251,15 @@ initLmcCookieConsentManager( // when loaded as a module, these options are passe
 
 ## Configuration options
 
-| Option                   | Type     | Default value                | Description                                                                                                                                                                                              |
-|--------------------------|----------|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `autodetectLang`         | boolean  | `true`                       | Autodetect language based on the value of `<html lang="...">`. If autodetect fails or if unsupported language is detected, fallback to `defaultLang`.<br>When disabled, force language to `defaultLang`. |
-| `defaultLang`            | string   | `'cs'`                       | Default language. One of `cs`, `de`, `en`, `hu`, `pl`, `ru`, `sk`, `uk`. This language will be used when autodetect is disabled or when it fails.                                                        |
-| `companyNames`           | array    | `['LMC']`                    | Array of strings with company names. Adjust only when the consent needs to be given to multiple companies. [See example][examples-configuration].                                                        |
-| `consentCollectorApiUrl` | ?string  | `'https://ccm.lmc.cz/(...)'` | URL of the API where user consent information is sent. Null to disable sending data to the API.                                                                                                          |
-| `config`                 | Object   | `{}`                         | Override default config of the underlying library. For all parameters see [original library][cookie consent options].                                                                                    |
-| `on*` callbacks          | function | `(cookieConsent) => {}`      | See below for configurable callbacks.                                                                                                                                                                    |
+| Option                   | Type                 | Default value                 | Description                                                                                                                                                                                              |
+|--------------------------|----------------------|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `autodetectLang`         | boolean              | `true`                        | Autodetect language based on the value of `<html lang="...">`. If autodetect fails or if unsupported language is detected, fallback to `defaultLang`.<br>When disabled, force language to `defaultLang`. |
+| `defaultLang`            | string               | `'cs'`                        | Default language. One of `cs`, `de`, `en`, `hu`, `pl`, `ru`, `sk`, `uk`. This language will be used when autodetect is disabled or when it fails.                                                        |
+| `companyNames`           | array                | `['LMC']`                     | Array of strings with company names. Adjust only when the consent needs to be given to multiple companies. [See example][examples-configuration].                                                        |
+| `consentCollectorApiUrl` | ?string              | `'https://ccm.lmc.cz/(...)'`  | URL of the API where user consent information is sent. Null to disable sending data to the API.                                                                                                          |
+| `config`                 | Object               | `{}`                          | Override default config of the underlying library. For all parameters see [original library][cookie consent options].                                                                                    |
+| `displayMode`            | DisplayMode (string) | `DisplayMode.FORCE` (`force`) | `force` (default) to show consent in a centered modal box and to block page until user action. `soft` to show consent banner on the bottom of the page and do not block the page before user action.     |
+| `on*` callbacks          | function             | `(cookieConsent) => {}`       | See below for configurable callbacks.                                                                                                                                                                    |
 
 ### Supported languages
 

diff --git a/examples/callbacks.html b/examples/callbacks.html
@@ -120,6 +120,7 @@ <h2 class="mt-md-3 mb-3">onChange callback – dump of <code>categories</code> p
       'github.example',
       {
         consentCollectorApiUrl: 'https://ccm.lmc.cz/local-data-acceptation-data-entries?Spot=(public,demo)', // override default URL for demo purposes; do not set custom consentCollectorApiUrl unless you have been explicitly guided to do so!
+        displayMode: 'soft', // show consent in a bottom banner and do not force user action before page could be used
         onAccept: (cookieConsent) => { // any type of consent detected (including only necessary, custom selection or all categories)
           markCallbackCalled('onAccept');
           document.getElementById('reset').removeAttribute('hidden'); // reveal Reset cookie button

diff --git a/examples/configuration.html b/examples/configuration.html
@@ -85,6 +85,7 @@ <h2 class="mt-md-3 mb-3">What is shown here</h2>
                 <ul class="mb-4">
                     <li>Forcing specific language – Slovak (using <code>defaultLang</code>), ie. disabling auto-detection (<code>autodetectLang</code>)</li>
                     <li>Setting multiple company names in the consent text (<code>companyNames</code>)</li>
+                    <li>Using <code>force</code> as a <code>displayMode</code> instead of <code>soft</code> (which is used in other examples)</li>
                     <li>
                         Overwriting raw configuration of the underlying cookie-consent component (via <code>config</code> option),
                         to modify some advanced features.
@@ -133,6 +134,7 @@ <h2 class="mt-md-3 mb-3">Use cookieConsent instance</h2>
       {
         autodetectLang: false, // do not detect language from the `<html lang="...">` value
         defaultLang: 'sk', // force use of 'sk' language instead
+        displayMode: 'force', // show consent in a blocking modal window (this is also default)
         companyNames: ['LMC', 'Some Other Company', 'ACME'], // define custom company names to be shown in the consent text
         consentCollectorApiUrl: 'https://ccm.lmc.cz/local-data-acceptation-data-entries?Spot=(public,demo)', // override default URL for demo purposes; do not set custom consentCollectorApiUrl unless you have been explicitly guided to do so!
         config: { // override default config of the underlying library, see https://github.com/orestbida/cookieconsent#all-available-options

diff --git a/examples/index.html b/examples/index.html
@@ -144,6 +144,7 @@ <h2 class="mt-4 mt-md-5 mb-3">Content set using inline <code>&lt;script&gt;</cod
       'github.example',
       {
         consentCollectorApiUrl: 'https://ccm.lmc.cz/local-data-acceptation-data-entries?Spot=(public,demo)', // override default URL for demo purposes; do not set custom consentCollectorApiUrl unless you have been explicitly guided to do so!
+        displayMode: 'soft', // show consent in a bottom banner and do not force user action before page could be used
         onAccept: (cookieConsent) => { // any type of consent detected (including only necessary, custom selection or all categories)
           if (cookieConsent.allowedCategory('ad')) {
             document.getElementById('ad-content').innerHTML = 'Ad consent allowed';

diff --git a/examples/languages.html b/examples/languages.html
@@ -134,6 +134,7 @@ <h2 class="mt-md-3 mb-3">Select language</h2>
         {
           autodetectLang: false,
           defaultLang: 'cs',
+          displayMode: 'soft', // show consent in a bottom banner and do not force user action before page could be used
           companyNames: ['LMC', 'Some Other Company', 'ACME'],
           consentCollectorApiUrl: 'https://ccm.lmc.cz/local-data-acceptation-data-entries?Spot=(public,demo)',
           onAccept: () => document.getElementById('reset').removeAttribute('hidden'), // reveal Reset cookie button

diff --git a/examples/theming.html b/examples/theming.html
@@ -225,6 +225,7 @@ <h2 class="mt-4 mt-md-5 mb-3">Without Spirit Design System</h2>
       'github.example',
       {
         consentCollectorApiUrl: 'https://ccm.lmc.cz/local-data-acceptation-data-entries?Spot=(public,demo)', // override default URL for demo purposes; do not set custom consentCollectorApiUrl unless you have been explicitly guided to do so!
+        displayMode: 'soft', // show consent in a bottom banner and do not force user action before page could be used
         onAccept: () => document.getElementById('reset').removeAttribute('hidden'), // reveal Reset cookie button
       }
     );

diff --git a/src/LmcCookieConsentManager.ts b/src/LmcCookieConsentManager.ts
@@ -13,6 +13,7 @@ import {
   CookieConsentCategory,
   CookieConsentManager,
   CookieConsentManagerOptions,
+  DisplayMode,
   OnAcceptCallback,
   OnChangeCallback,
 } from './types';
@@ -31,6 +32,7 @@ const defaultOptions: CookieConsentManagerOptions = {
   onAccept: noopAcceptCallback,
   onChange: noopChangeCallback,
   companyNames: ['LMC'],
+  displayMode: DisplayMode.FORCE,
   config: {},
 };
 
@@ -47,6 +49,8 @@ const defaultOptions: CookieConsentManagerOptions = {
  * @param {OnChangeCallback} [args.onChange] - Callback to be executed right after user change his/her preferences
  * @param {Array} [args.companyNames] - Array of strings with company names. Adjust only when the consent needs
  *   to be given to multiple companies.
+ * @param {DisplayMode} [args.displayMode] - `force` to show consent in a centered modal box and to block page until
+ *   user action. `soft` to show consent in a banner on the bottom of the page.
  * @param {VanillaCookieConsent.Options} [args.config] - Override default config.
  *   See https://github.com/orestbida/cookieconsent/blob/master/Readme.md#all-available-options
  * @returns {VanillaCookieConsent.CookieConsent<CookieConsentCategory>} Instance of the underlying CookieConsent component.
@@ -66,6 +70,7 @@ const LmcCookieConsentManager: CookieConsentManager = (serviceName, args) => {
     onAccept,
     onChange,
     companyNames,
+    displayMode,
     config,
   } = options;
   const cookieName = 'lmc_ccm';
@@ -129,14 +134,20 @@ const LmcCookieConsentManager: CookieConsentManager = (serviceName, args) => {
     cookie_name: cookieName, // Predefined cookie name. Do not override.
     current_lang: defaultLang, // Default language used when auto_language is false (or when autodetect failed)
     delay: 0, // Show the modal immediately after init
-    force_consent: false, // Do not force the consent before page could be used
+    force_consent: displayMode == DisplayMode.FORCE,
     hide_from_bots: true, // To be hidden also from Selenium
     page_scripts: true, // Manage third-party scripts loaded using <script>
     use_rfc_cookie: true, // Store cookie content in RFC compatible format.
     gui_options: {
       consent_modal: {
-        layout: VanillaCookieConsent.GuiConsentLayout.BAR, // box/cloud/bar
-        position: VanillaCookieConsent.GuiConsentPosition.BOTTOM_CENTER, // bottom/middle/top + left/right/center
+        layout:
+          displayMode == DisplayMode.FORCE
+            ? VanillaCookieConsent.GuiConsentLayout.BOX
+            : VanillaCookieConsent.GuiConsentLayout.BAR,
+        position:
+          displayMode == DisplayMode.FORCE
+            ? VanillaCookieConsent.GuiConsentPosition.MIDDLE_CENTER
+            : VanillaCookieConsent.GuiConsentPosition.BOTTOM_CENTER,
         transition: VanillaCookieConsent.Transition.SLIDE, // zoom/slide
         swap_buttons: true,
       },

diff --git a/src/types/CookieConsentManager.ts b/src/types/CookieConsentManager.ts
@@ -14,6 +14,11 @@ export type OnChangeCallback = (
   categories: CategoriesChangeset,
 ) => void;
 
+export enum DisplayMode {
+  FORCE = 'force',
+  SOFT = 'soft',
+}
+
 export type CookieConsentManagerOptions = {
   defaultLang: string;
   autodetectLang: boolean;
@@ -22,6 +27,7 @@ export type CookieConsentManagerOptions = {
   onAccept: OnAcceptCallback;
   onChange: OnChangeCallback;
   companyNames: string[];
+  displayMode: DisplayMode;
   config: VanillaCookieConsent.Options;
 };