Merge pull request #9 from orestbida/v2.1

V2.1
orestbida · Mar 2, 2021 · 83a19a8 · 83a19a8
2 parents 30a6448 + 478671b
commit 83a19a8
Show file tree

Hide file tree

Showing 10 changed files with 1,432 additions and 256 deletions.
diff --git a/Readme.md b/Readme.md
@@ -3,6 +3,7 @@
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
 ![Size](https://img.shields.io/github/size/orestbida/cookieconsent/dist/cookieconsent.js)
+[![Stable version](https://img.shields.io/github/v/release/orestbida/cookieconsent)](https://github.com/orestbida/cookieconsent/releases)
 </div>
 <div align="center" style="text-align: center; max-width: 770px; margin: 0 auto;">
 
@@ -47,8 +48,11 @@ Addressed to those who alredy use this plugin: if you plan on using this version
 2. load the css style:
     ```html
     <link rel="stylesheet" href="cookieconsent.css">
+
+    // or asynchronous loading (recommended)
+    <link rel="stylesheet" href="cookieconsent.css" media="print" onload="this.media='all'; this.onload=null;">
     ```
-    or alternatively you can configure the plugin to automatically load the .css file.
+    or alternatively you can configure the plugin to <a href="#autoload-css">automatically load the .css file.</a>
 
 3. run the plugin with your configuration parameters. **IMPORTANT**: you must provide at least the following parameters: `current_lang` and `languages`.
     <br>
@@ -118,7 +122,7 @@ Addressed to those who alredy use this plugin: if you plan on using this version
 ## Download & CDN
 You can download the [latest version](https://github.com/orestbida/cookieconsent/releases/tag/v2.0) or use it via cdn:
 ```html
-https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.0/dist/cookieconsent.js
+https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.1/dist/cookieconsent.js
 ```
 ## APIs & configuration parameters
 After getting the plugin like so:
@@ -372,7 +376,7 @@ You can create tables with a custom number of columns to explain what each cooki
 
 **NOTE**: If you want to also use `autoclear_cookie`, make sure the first column of the cookie table contains the name of the cookie.
 
-[Check demo app.js](../demo/app.js) which has a full example with cookie table.
+[Check demo app.js](demo/app.js) which has a full example with cookie table.
 
 </p>
 </details>
@@ -503,7 +507,7 @@ cookieconsent.run({
     </p>
     </details>
 -   <details><summary>How to autoload the .css file</summary>
-    <p>
+    <p id="autoload-css">
 
     You need to enable `autoload_css` and set `theme_css` to a valid path.
 
@@ -517,6 +521,27 @@ cookieconsent.run({
 
     </p>
     </details>
+-   <details><summary>Make consent required (block page navigation until action)</summary>
+    <p>
+    This is a css only solution:
+
+    1. add the following class `force--consent` to the html tag:
+        ```html
+        <html class="force--consent">
+        ```
+    2. add the following style **inside the head tag** of your page (important as it avoids reflow & weird jumps when scrollbar is hidden/shown) :
+        ```html
+        <style>
+            html.force--consent,
+            html.force--consent body{
+                height: auto!important;
+                width: 100vw!important;
+            }
+        </style>
+        ```
+    For a full example check the <a href="demo/index2.html">second demo</a>.
+    </p>
+    </details>
 
 ## License
 Distributed under the MIT License. See [LICENSE](https://github.com/orestbida/cookieconsent/blob/master/LICENSE) for more information.
diff --git a/demo/app.js b/demo/app.js
@@ -7,17 +7,16 @@ var cc = initCookieConsent();
 
 // run plugin with config object
 cc.run({
-	autorun : true, 							// [OPTIONAL] show consent modal as soon as possible
-	delay : 0,									// [OPTIONAL] specify initial delay after website has loaded		
-	current_lang : 'en',						// [REQUIRED] specify one of the languages defined inside languages below (NOTE: can be dynamic value)
-	autoload_css : true, 						// [OPTIONAL] if true, load css via js (NOTE: theme_css must have valid path)
-	theme_css : "../dist/cookieconsent.css",		// [OPTIONAL*] (NOTE: autoload_css needs to be set to true)
-	auto_language : true,						// [OPTIONAL] if true, grab the language based on the client browser
-	autoclear_cookies : true,					// [OPTIONAL] if true, delete all cookies specified inside the cookie table, in a block after being deselected in the settings modal
-	cookie_expiration : 365,    				// [OPTIONAL] change default expiration number of days
+	autorun : true, 
+	delay : 0,
+	current_lang : 'en',
+	auto_language : true,
+	autoclear_cookies : true,
+	cookie_expiration : 365,
+	autoload_css: true,
+	theme_css: '../dist/cookieconsent.css',
 
-	onAccept: function(cookie){						// [OPTIONAL]
-		console.log(cookie);
+	onAccept: function(cookie){	
 		console.log("onAccept fired ...");
 		if(cc.allowedCategory('analytics_cookies')){
 			cc.loadScript('https://www.google-analytics.com/analytics.js', function(){		
@@ -27,28 +26,30 @@ cc.run({
 			});
 		}
 
-		document.getElementById('cookie').innerHTML = '<pre>'+JSON.stringify(cookie, null, 2)+'</pre>';
+		// Delete line below
+		document.getElementById("cookie_val").innerHTML = JSON.stringify(cookie, null, 2);
 	},
 
-	onChange: function(cookie){						// [OPTIONAL]
+	onChange: function(cookie){	
 		console.log("onChange fired ...");
 		// do something ...
-		console.log(cookie);
-		document.getElementById('cookie').innerHTML = '<pre>'+JSON.stringify(cookie, null, 2)+'</pre>';
+
+		// Delete line below
+		document.getElementById("cookie_val").innerHTML = JSON.stringify(cookie, null, 2);
 	},
 
 	languages : {
 		'en' : {	
 			consent_modal : {
 				title :  "I use cookies",
-				description :  'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only upon approval. <a aria-label="Cookie policy" class="cc-link" href="#">Read more</a>',
+				description :  'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only upon approval. <a aria-label="Cookie policy" data-cc="c-settings" class="cc-link" href="#">Change preferences</a>',
 				primary_btn: {
-					text: 'Accept',
+					text: 'Accept all',
 					role: 'accept_all'				//'accept_selected' or 'accept_all'
 				},
 				secondary_btn: {
-					text : 'Settings',
-					role : 'settings'				//'settings' or 'accept_necessary'
+					text : 'Deny all',
+					role : 'accept_necessary'				//'settings' or 'accept_necessary'
 				}
 			},
 			settings_modal : {
@@ -78,7 +79,7 @@ cc.run({
 						title : "Preferences cookies",
 						description: 'These cookies allow the website to remember the choices you have made in the past.',
 						toggle : {
-							value : 'preferences_cookies_3rweds',	//there are no default categories => you specify them
+							value : 'preferences_cookies',	//there are no default categories => you specify them
 							enabled : true,
 							readonly: false
 						}
@@ -95,21 +96,21 @@ cc.run({
 								col1: '_ga',
 								col2: 'google.com',
 								col3: '2 years',
-								col4: '<span><b>description</b> ...</span>' ,
+								col4: 'description ...' ,
 								col5: 'Permanent cookie'
 							},
 							{
 								col1: '_gat',
 								col2: 'google.com',
 								col3: '1 minute',
-								col4: '<b>description</b> ...' ,
+								col4: 'description ...' ,
 								col5: 'Permanent cookie'
 							},
 							{
 								col1: '_gid',
 								col2: 'google.com',
 								col3: '1 day',
-								col4: '<b>description</b> ...' ,
+								col4: 'description ...' ,
 								col5: 'Permanent cookie'
 							}
 						]
@@ -121,4 +122,68 @@ cc.run({
 			}
 		}
 	}
-});
+});
+
+// DELETE ALL CONTENT BELOW THIS COMMENT!!!
+if(cc.validCookie('cc_cookie')){
+    //if cookie is set => disable buttons
+    disableBtn('btn2');
+    disableBtn('btn3');
+}
+
+function disableBtn(id){
+    document.getElementById(id).disabled = true;
+    document.getElementById(id).className = "styled_btn disabled";
+}
+
+var darkmode = false;
+
+function toggleDarkmode(){
+    if(!darkmode){
+        document.getElementById('theme').innerText = 'dark theme';
+		document.body.className='d_mode c_darkmode';
+        darkmode = true;
+    }else{
+        document.getElementById('theme').innerText = 'light theme';
+		document.body.className='d_mode';
+        darkmode = false;
+    }
+}
+
+/*
+* The following lines of code are for demo purposes (show api functions)
+*/ 
+if(document.addEventListener){
+
+    document.getElementById("btn2").addEventListener('click', function(){
+        cc.show(0);
+    });
+
+    document.getElementById("btn3").addEventListener('click', function(){
+        cc.hide();
+    });
+
+    document.getElementById("btn5").addEventListener('click', function(){
+        cc.showSettings(0);  
+    });
+
+    document.getElementById("btn6").addEventListener('click', function(){
+        toggleDarkmode();
+    });
+}else{
+    document.getElementById("btn2").attachEvent('onclick', function(){
+        cc.show(0);
+    });
+
+    document.getElementById("btn3").attachEvent('onclick', function(){
+        cc.hide();
+    });
+
+    document.getElementById("btn5").attachEvent('onclick', function(){
+        cc.showSettings(0);  
+    });
+
+    document.getElementById("btn6").attachEvent('onclick', function(){
+		toggleDarkmode();
+    });
+}
diff --git a/demo/assets/css/fonts.css b/demo/assets/css/fonts.css
@@ -0,0 +1,25 @@
+@font-face {  
+    font-family: 'BasierSquare';  
+    src: local('BasierSquare'),    
+    url('../fonts/basier-square-regular.woff2') format('woff2');
+    font-weight: 400;  
+    font-style: normal;  
+    font-display: swap; 
+    unicode-range: U+000-5FF;
+}
+
+@font-face {  
+    font-family: 'BasierSquare';  
+    src: local('BasierSquare'),       
+    url('../fonts/basier-square-semibold.woff2') format('woff2');
+    font-weight: bold;  
+    font-style: normal;  
+    unicode-range: U+000-5FF;
+    font-display: swap; 
+}
+
+
+body,
+body #cc_div{
+    font-family: 'BasierSquare', sans-serif!important;
+}
diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
@@ -1,39 +1,17 @@
-@font-face {  
-    font-family: 'BasierSquare';  
-    src: local('BasierSquare'),    
-    url('../fonts/basier-square-regular.woff2') format('woff2');
-    font-weight: 400;  
-    font-style: normal;  
-    font-display: swap; 
-    unicode-range: U+000-5FF;
-}
-
-@font-face {  
-    font-family: 'BasierSquare';  
-    src: local('BasierSquare'),       
-    url('../fonts/basier-square-semibold.woff2') format('woff2');
-    font-weight: bold;  
-    font-style: normal;  
-    unicode-range: U+000-5FF;
-    font-display: swap; 
-}
-
 *,:after,:before {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 
 body {
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
     line-height: 1.15;
-    font-family: 'BasierSquare', sans-serif;
+    font-family: sans-serif;
     margin: 0;
     overflow-x: hidden;
 }
 
-#cc_div{
+body.basier,
+body.basier #cc_div{
     font-family: 'BasierSquare', sans-serif!important;
 }
 
@@ -45,8 +23,7 @@ body, html{
     height: 100%;
 }
 
-header{
-    display: block;
+#header{
     position: relative;
 }