From eaec26ae60ca4917cc85b774ad2e77230e86937a Mon Sep 17 00:00:00 2001
From: Davide Candita <davide.candita@reddoak.com>
Date: Wed, 14 Jul 2021 15:29:19 +0200
Subject: [PATCH] added optional close button

---
 src/lib/Configuration.js |  1 +
 src/lib/Interface.js     | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/lib/Configuration.js b/src/lib/Configuration.js
index 5c4123e..a0caead 100644
--- a/src/lib/Configuration.js
+++ b/src/lib/Configuration.js
@@ -20,6 +20,7 @@ export default class Configuration {
       cookieExists: false,
       cookieVersion: 1,
       modalMainTextMoreLink: null,
+      showCloseButton: true,
       barTimeout: 1000,
       theme: {
         barColor: '#2C7CBF',
diff --git a/src/lib/Interface.js b/src/lib/Interface.js
index cd2e991..70a2366 100644
--- a/src/lib/Interface.js
+++ b/src/lib/Interface.js
@@ -12,9 +12,9 @@ export default class Interface {
   buildStyle() {
     return el('style',
       '#cconsent-bar, #cconsent-bar * { box-sizing:border-box }', 
-      '#cconsent-bar { background-color:' + window.CookieConsent.config.theme.barColor + '; color:' + window.CookieConsent.config.theme.barTextColor + '; padding:15px; text-align:right; font-family:sans-serif; font-size:14px; line-height:18px; position:fixed; bottom:0; left:0; width:100%; z-index:9998; transform: translateY(0); transition: transform .6s ease-in-out; transition-delay: .3s;}', 
-      '#cconsent-bar.ccb--hidden {transform: translateY(100%); display:block;}', 
-      '#cconsent-bar .ccb__wrapper { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1800px; margin:0 auto;}',
+      '#cconsent-bar { background-color:' + window.CookieConsent.config.theme.barColor + '; color:' + window.CookieConsent.config.theme.barTextColor + '; padding:15px; text-align:right; font-family:sans-serif; font-size:14px; line-height:18px; position:fixed; bottom:0; left:0; width:100%; z-index:9998; transform: translateY(0); transition: transform .6s ease-in-out; transition-delay: .3s; display: flex;}', 
+      '#cconsent-bar.ccb--hidden {transform: translateY(100%);}', 
+      '#cconsent-bar .ccb__wrapper { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1800px; margin:0 auto; width: 100%;}',
       '#cconsent-bar .ccb__left { align-self:center; text-align:left; margin: 15px 0;}',
       '#cconsent-bar .ccb__right { align-self:center; white-space: nowrap;}',
       '#cconsent-bar .ccb__right > div {display:inline-block; color:#FFF;}',
@@ -22,6 +22,7 @@ export default class Interface {
       '#cconsent-bar button { line-height:normal; font-size:14px; border:none; padding:10px 10px; color:' + window.CookieConsent.config.theme.barMainButtonTextColor + '; background-color:' + window.CookieConsent.config.theme.barMainButtonColor + ';}',
       '#cconsent-bar a.ccb__edit { margin-right:15px }',
       '#cconsent-bar a:hover, #cconsent-bar button:hover { cursor:pointer; }',
+      '#cconsent-bar .ccb__close {font-weight:600; cursor:pointer; font-size:26px; margin: auto 0 auto 15px;}',
       '#cconsent-modal { display:none; font-size:14px; line-height:18px; color:#666; width: 100vw; height: 100vh; position:fixed; left:0; top:0; right:0; bottom:0; font-family:sans-serif; font-size:14px; background-color:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center;}',
       '@media (max-width: 600px) { #cconsent-modal { height: 100% } }',
       '#cconsent-modal h2, #cconsent-modal h3 {color:#333}',
@@ -84,6 +85,7 @@ export default class Interface {
             )
           )
         ),
+        window.CookieConsent.config.showCloseButton && el('div.ccb__close', '×')
       );
   }
 
@@ -235,6 +237,16 @@ export default class Interface {
 
   addEventListeners(elements) {
 
+    // If you click x
+    var buttonCloseBar = document.querySelectorAll('.ccb__close');
+
+    for(let button of buttonCloseBar) {
+      button.addEventListener('click', () => {
+        this.elements['bar'].classList.add('ccb--hidden');
+        this.elements['modal'].classList.remove('ccm--visible');
+      });
+    }
+
     // If you click Accept all cookies
     var buttonConsentGive = document.querySelectorAll('.consent-give');