Merge pull request #7 from bootscore/5.2.1.0-refactor-settings-modal

5.2.1.0 refactor settings modal
bootscore · Aug 24, 2022 · b3b4b03 · b3b4b03
2 parents 5e221ca + f5c8768
commit b3b4b03
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 102 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ WordPress plugin to add a GDPR-ready cookie consent to bootScore theme. Based on
 
 ## Installation
 
-1. Download the zip file right here by pressing the green code button above.
+1. Download latest release [bs-cookie-settings-main.zip](https://github.com/bootscore/bs-cookie-settings/releases)
 2. In your admin panel, go to Plugins > and click the Add New button.
 3. Click Upload Plugin and Choose File, then select the Plugin's .zip file. Click Install Now.
 4. Click Activate to use your new Plugin right away.
@@ -36,7 +36,7 @@ Initialize plugin with inline script in **HTML widget in Footer 4** position and
         'en': {
           consent_modal: {
             title: 'We use cookies!',
-            description: 'We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept all”, you consent to the use of all the cookies. However, you may visit "Cookie settings" to provide a controlled consent. <a href="javascript:void(0)" data-cc="c-settings" class="cc-link btn-link">Cookie settings</a>',
+            description: 'We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept all”, you consent to the use of all the cookies. However, you may visit "Cookie Settings" to provide a controlled consent. <a data-bs-toggle="modal" href="#bs-cookie-modal">Cookie Settings</a>',
             primary_btn: {
               text: 'Accept all',
               role: 'accept_all'
@@ -62,7 +62,7 @@ Initialize plugin with inline script in **HTML widget in Footer 4** position and
             blocks: [
               {
                 title: 'Cookie usage',
-                description: 'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#yourprivacypolicy" class="cc-link">privacy policy</a>.'
+                description: 'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#yourprivacypolicy" class="cc-link">Privacy Policy</a>.'
               }, {
                 title: 'Necessary',
                 description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
@@ -159,8 +159,16 @@ Set `type="text/plain"` and `data-cookiecategory="<category>"` to any script tag
 
 By clicking one of the "Accept all", "Reject all" or "Save settings" button, the cookie `bs_cookie_settings` is set with your preferences and hides banner and modal for 182 days. To open settings modal again, add following link to your privacy policy and to a **HTML widget** in **Footer 1** position.
 
+#### Link
+
+```html
+<a data-bs-toggle="modal" href="#bs-cookie-modal">Cookie Settings</a>
+```
+
+#### Button
+
 ```html
-<a href="javascript:void(0)" data-cc="c-settings" aria-haspopup="dialog">Cookie settings</a>
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bs-cookie-modal">Cookie Settings</button>
 ```
 
 Make sure that the links to your legal note and privacy policy are not covered by the banner. Use a menu in **Footer 1** widget position for them.

diff --git a/css/cookie-settings.min.css b/css/cookie-settings.min.css
diff --git a/js/cookie-settings.min.js b/js/cookie-settings.min.js
diff --git a/main.php b/main.php
@@ -2,7 +2,7 @@
 /*Plugin Name: bS Cookie Settings
 Plugin URI: https://bootscore.me/plugins/bs-cookie-settings/
 Description: This plugin adds a cookie modal to bootScore
-Version: 5.2.0.0
+Version: 5.2.1.0
 Author: bootScore
 Author URI: https://bootscore.me
 License: MIT License

diff --git a/readme.txt b/readme.txt
@@ -4,9 +4,9 @@
 Contributors: Bastian Kreiter
 
 Requires at least: 4.5
-Tested up to: 6.0
+Tested up to: 6.0.1
 Requires PHP: 5.6
-Stable tag: 5.2.0.0
+Stable tag: 5.2.1.0
 License: MIT License
 License URI: https://github.com/bootscore/bs-cookie-settings/blob/main/LICENSE
 
@@ -27,10 +27,20 @@ This plugin adds a GDPR-ready cookie consent to bootScore theme, Copyright 2022
 
 == Usage ==
 
-Read documentation https://github.com/bootscore/bs-cookie-settings/blob/main/README.md
+Read documentation https://bootscore.me/documentation/plugin/bs-cookie-settings/
 
 == Changelog ==
 
+  = 5.2.1.0 - August 24 2022 =
+
+    * Refactored modal
+    * Removed plugin's backdrop and uses Bootstrap modal backdrop instead
+    * Settings link triggers now modal instead modal-dialog
+    * Changed settings link to data-bs-toggle="modal" [Breaking]
+    * Hide banner if modal is open
+    * Changed id's
+    * Updated to FA6 Chevron
+
   = 5.2.0.0 - August 20 2022 =
 
     * Added missing modal class

diff --git a/src/css/cookie-settings.css b/src/css/cookie-settings.css
@@ -14,87 +14,38 @@
   visibility: unset;
 }
 
-/* Lock body scroll when settings are open */
-.show--settings body {
-  overflow: hidden;
-}
-
-/* Backdrop */
-#cs-ov {
-  z-index: 2;
-  visibility: hidden;
-  opacity: 0;
-  background-color: rgba(0,0,0,.5);
-  transition: visibility .3s linear, opacity .3s ease-out, transform .3s ease-out !important;
-}
-
-.show--settings #cs-ov {
-  visibility: visible !important;
-  opacity: 1 !important;
-}
-/* Backdrop End */
-
 /* Banner */
-#cm {
-  z-index: 1;
+#bs-cookie-bar {
+  z-index: 1050;
   transform: translateY(100%);
   transition: transform 0.4s ease-in-out;
 }
 
-.show--consent #cm {
+.show--consent #bs-cookie-bar {
   transform: none;
   transition-delay: 1.5s;
 }
 
 
 /* Hide Banner if modal is open */
-/*
-.show--consent.show--settings #cm {
+
+.show--consent.show--settings #bs-cookie-bar {
   transform: translateY(100%);
+  transition: transform .15s ease-in-out;
   transition-delay: 0s;
 }
-*/
-/* Banner End */ 
-
-
-/* Cookie settings modal */
-#s-cnt {
-  z-index: 101;
-  opacity: 0;
-  visibility: hidden;
-  transition: visibility .3s linear, opacity .3s ease-out, transform .3s ease-out !important;
-}
 
-.show--settings #s-cnt {
-  opacity: 1;
-  visibility: visible !important;
-
-}
-/* Cookie settings modal End */
-
-
-/* Cookie settings modal-dialog */
-#c-s-in {
-  transition: transform .3s ease-out;
-    transform: translate(0,-50px);  
-}
-
-.show--settings #c-s-in {
-  transform: none;
-}
-/* Cookie settings modal-dialog End */
 
 
+/* Cookie settings modal */
 
-.c-bn.btn-close:focus {
-  opacity: .5;
+/* Remove focus from close-btn */
+/*
+#bs-cookie-modal .btn-close:focus {
   box-shadow: none;
+  -webkit-box-shadow: none;
 }
-
-/**
-CookieConsent settings modal
-**/
-
+*/
 
 #s-bl .title:first-child {
   margin-top: 0;
@@ -114,13 +65,12 @@ CookieConsent settings modal
 }
 
 button.b-tl.exp::before {
-  content: "\f054";
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  display: inline-block;
-  margin-right: .5rem;
-  transition: transform .35s ease
-}
+   font: var(--fa-font-solid);
+   content: "\f054";
+   display: inline-block;
+   margin-right: .5rem;
+   transition: transform 0.35s ease;
+ }
 
 button.b-tl.exp[aria-expanded="true"]::before {
   transform: rotate(90deg);
@@ -191,8 +141,7 @@ button.b-tl.exp[aria-expanded="true"]::before {
 #s-bl tbody,
 #s-bl th,
 #s-bl td,
-#s-bl tr,
-#s-cnt {
+#s-bl tr {
   display: block;
 }
 

diff --git a/src/js/cookie-settings.js b/src/js/cookie-settings.js
@@ -186,8 +186,9 @@
          * Search for all occurrences in the current page and add an onClick listener :
          * when clicked => open settings modal
          */
+
         var _addCookieSettingsButtonListener = function(){
-            var all_links = document.querySelectorAll('a[data-cc="c-settings"], button[data-cc="c-settings"]');
+            var all_links = document.querySelectorAll('a[href="#bs-cookie-modal"], button[data-bs-target="#bs-cookie-modal"]');
             for(var x=0; x<all_links.length; x++){
                 all_links[x].setAttribute('aria-haspopup', 'dialog');
                 _addEvent(all_links[x], 'click', function(event){
@@ -196,6 +197,7 @@
                 });
             }
         }
+
 
         /**
          * Get a valid language (at least 1 must be defined)
@@ -290,13 +292,13 @@
 
             // Create main container which holds both consent modal & settings modal
             main_container = _createNode('div');
-            main_container.id = 'cc--main';
+            main_container.id = 'bs-cookie-settings';
 
             // Fix layout flash
-            main_container.style.position = "fixed";
+            //main_container.style.position = "fixed";
             //main_container.style.zIndex = "1000000";
-            main_container.style.zIndex = "1060";
-            main_container.innerHTML = '<!--[if lt IE 9 ]><div id="cc_div" class="cc_div ie"></div><![endif]--><!--[if (gt IE 8)|!(IE)]><!--><div id="cc_div" class="cc_div"></div><!--<![endif]-->'
+            //main_container.style.zIndex = "1060";
+            main_container.innerHTML = '<div id="bs-cookie-wrapper" class="cc_div"></div>'
             var all_modals_container = main_container.children[0];
 
             // Get current language
@@ -334,9 +336,9 @@
 
                 consent_text = _createNode('div');
                 var consent_buttons = _createNode('div');
-                var overlay = _createNode('div');
+                //var overlay = _createNode('div');
 
-                consent_modal.id = 'cm';
+                consent_modal.id = 'bs-cookie-bar';
                 consent_modal.className =  "py-4 py-md-5 bg-light fixed-bottom d-block";
                 consent_modal_container.className =  "container";
                 consent_modal_inner.id = 'c-inr';
@@ -442,7 +444,7 @@
 
                 // Append consent modal to main container
                 all_modals_container.appendChild(consent_modal);
-                all_modals_container.appendChild(overlay);
+                //all_modals_container.appendChild(overlay);
 
                 consent_modal_exists = true;
             }
@@ -462,12 +464,12 @@
             var settings_header = _createNode('div');
             var settings_close_btn = _createNode('button');
             var settings_blocks = _createNode('div');
-            var overlay = _createNode('div');
+            //var overlay = _createNode('div');
 
             /**
              * Set ids
              */
-            settings_container.id = 's-cnt';
+            settings_container.id = 'bs-cookie-modal';
             //settings_container_valign.id = "c-vln";
             settings_container_inner.id = "c-s-in";
             settings.id = "cs";
@@ -476,7 +478,7 @@
             settings_header.id = "s-hdr";
             settings_blocks.id = 's-bl';
             settings_close_btn.id = 's-c-bn';
-            overlay.id = 'cs-ov';
+            //overlay.id = 'cs-ov';
 
             /**
              * Set classes
@@ -489,20 +491,22 @@
             settings_title.className = 'h5 modal-title';
             settings_close_btn.className = 'c-bn btn-close';
             settings_blocks.className = 'modal-body';
-            overlay.className = 'position-fixed top-0 end-0 bottom-0 start-0';
+            //overlay.className = 'position-fixed top-0 end-0 bottom-0 start-0';
 
 
             /**
              * Set attributes
              */          
             settings_close_btn.setAttribute('aria-label', conf_params.languages[lang]['settings_modal']['close_btn_label'] || 'Close');
-            settings_container.setAttribute('role', 'dialog');
-            settings_container.setAttribute('aria-modal', 'true');
+            settings_close_btn.setAttribute('data-bs-dismiss', 'modal'); 
+            settings_container.setAttribute('tabindex', '-1'); 
+            //settings_container.setAttribute('role', 'dialog');
+            //settings_container.setAttribute('aria-modal', 'true');
             settings_container.setAttribute('aria-hidden', 'true');
             settings_container.setAttribute('aria-labelledby', 's-ttl');
             settings_title.setAttribute('role', 'heading');
-            settings_container.style.visibility = overlay.style.visibility = "hidden";
-            overlay.style.opacity = 0;
+            //settings_container.style.visibility = overlay.style.visibility = "hidden";
+            //overlay.style.opacity = 0;
 
             // If 'esc' key is pressed inside settings_container div => hide settings
             _addEvent(settings_container_inner, 'keydown', function(evt){
@@ -774,6 +778,11 @@
             settings_save_btn.insertAdjacentHTML('beforeend', conf_params.languages[_config.current_lang]['settings_modal']['save_settings_btn']);
             settings_accept_all_btn.insertAdjacentHTML('beforeend', conf_params.languages[_config.current_lang]['settings_modal']['accept_all_btn']);
 
+            // Button Attributes
+            settings_accept_all_btn.setAttribute('data-bs-dismiss', 'modal');
+            //settings_reject_all_btn.setAttribute('data-bs-dismiss', 'modal');
+            settings_save_btn.setAttribute('data-bs-dismiss', 'modal');
+
             settings_buttons.appendChild(settings_accept_all_btn);
 
             var reject_all_btn_text = conf_params.languages[_config.current_lang]['settings_modal']['reject_all_btn'];
@@ -785,9 +794,10 @@
                 reject_all_btn.id = 's-rall-bn';
                 reject_all_btn.className = 'c-bn btn btn-outline-secondary';
                 reject_all_btn.insertAdjacentHTML('beforeend', reject_all_btn_text);
+                reject_all_btn.setAttribute('data-bs-dismiss', 'modal');
 
                 _addEvent(reject_all_btn, 'click', function(){
-                    _cookieconsent.hideSettings();
+                    //_cookieconsent.hideSettings();
                     _cookieconsent.hide();
                     _cookieconsent.accept([]);
                 });
@@ -801,13 +811,13 @@
             // Add save preferences button onClick event
             // Hide both settings modal and consent modal
             _addEvent(settings_save_btn, 'click', function(){
-                _cookieconsent.hideSettings();
+                //_cookieconsent.hideSettings();
                 _cookieconsent.hide();
                 _cookieconsent.accept();
             });
 
             _addEvent(settings_accept_all_btn, 'click', function(){
-                _cookieconsent.hideSettings();
+                //_cookieconsent.hideSettings();
                 _cookieconsent.hide();
                 _cookieconsent.accept('all');
             });
@@ -825,7 +835,7 @@
             settings_container.appendChild(settings_container_inner);
 
             all_modals_container.appendChild(settings_container);
-            all_modals_container.appendChild(overlay);
+            //all_modals_container.appendChild(overlay);
 
             // Finally append everything to body (main_container holds both modals)
             (root || document.body).appendChild(main_container);
@@ -1195,6 +1205,7 @@
                 }, true);
             }
         }
+
 
         /**
          * Manage each modal's layout
@@ -1318,7 +1329,7 @@
                     }
 
                     // Add class to enable animations/transitions
-                    setTimeout(function(){_addClass(main_container, 'c--anim');}, 30);
+                    //setTimeout(function(){_addClass(main_container, 'c--anim');}, 30);
 
                     // Accessibility :=> if tab pressed => trap focus inside modal
                     setTimeout(function(){_handleFocusTrap();}, 100);