From bf54f44ec84ac06de76175e4f117d5dac2add4a1 Mon Sep 17 00:00:00 2001 From: Amauri CHAMPEAUX Date: Tue, 2 Dec 2014 17:09:32 +0100 Subject: [PATCH] Privacy enhancement - Accept or reject all services with one-click - Viewing the number of services activated / deactivated - High privacy feature for disabling auto consent --- css/tarteaucitron.css | 62 ++++++++++++++++++----- lang/tarteaucitron.en.js | 3 ++ lang/tarteaucitron.fr.js | 3 ++ tarteaucitron.js | 104 +++++++++++++++++++++++++++++++-------- 4 files changed, 140 insertions(+), 32 deletions(-) diff --git a/css/tarteaucitron.css b/css/tarteaucitron.css index 904d145..8b55908 100644 --- a/css/tarteaucitron.css +++ b/css/tarteaucitron.css @@ -112,7 +112,7 @@ left: 0; margin: 0 auto; max-height: 80%; - max-width: 800px; + max-width: 860px; overflow: auto; padding: 0; position: fixed; @@ -161,7 +161,7 @@ } #tarteaucitron #tarteaucitronServices .tarteaucitronTitle { - background: #f2f2f2; + background: #e4e4e4; color: #333; font-size: 20px; padding: 18px 22px; @@ -169,7 +169,7 @@ #tarteaucitron #tarteaucitronServices .tarteaucitronTitle .tarteaucitronDetails { color: #777; - font-size: 13px; + font-size: 15px; } #tarteaucitron #tarteaucitronServices .tarteaucitronLine:hover { @@ -186,6 +186,24 @@ padding: 15px 5px; } +#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine { + background: #444 !important; + border: 0; + margin-bottom: 5px; +} + +#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName { + margin-top: 2px; +} + +#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName b { + color: #fff; +} + +#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronAsk { + margin-top: 0px !important; +} + #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronName { display: inline-block; float: left; @@ -280,27 +298,47 @@ cursor: pointer; display: none; font-size: 11px !important; - padding: 3px; - padding-right: 5px; + padding: 5px; position: fixed; right: 0; + text-align: center; z-index: 2147483645; } #tarteaucitronAlertSmall #tarteaucitronDot { - background-color: #E63737; - border-radius: 10px; + background-color: gray; + border-radius: 5px; display: inline-block; - height: 10px; - margin: 0px 5px 2px 5px; - vertical-align: middle; - width: 10px; + height: 8px; + margin-top: 5px; + overflow: hidden; + width: 100%; +} + +#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotGreen, +#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotYellow, +#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotRed { + display: block; + float: left; + height: 100%; + width: 0%; +} + +#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotGreen { + background-color: #1B870B; +} + +#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotYellow { + background-color: #FBDA26; +} + +#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotRed { + background-color: #9C1A1A; } /*** * Fallback activate link */ - .tac_activate { background: #333; display: block; diff --git a/lang/tarteaucitron.en.js b/lang/tarteaucitron.en.js index e7481c7..d51eca1 100644 --- a/lang/tarteaucitron.en.js +++ b/lang/tarteaucitron.en.js @@ -1,10 +1,13 @@ /*global tarteaucitron */ tarteaucitron.lang = { "alertBig": "If you continue to browse this website, you are allowing all third-party services", + "alertBigPrivacy": "This site uses cookies and gives you control over what you want to activate", "alertSmall": "Manage Cookies", "personalize": "Personalize", "acceptAll": "OK, accept all", "close": "Close", + + "all": "Preference for all services", "info": "Transparency about cookies", "disclaimer": "By allowing these third party services, you accept theirs cookies and the use of tracking technologies necessary for their proper functioning.", diff --git a/lang/tarteaucitron.fr.js b/lang/tarteaucitron.fr.js index 67889fa..7d0ecc5 100644 --- a/lang/tarteaucitron.fr.js +++ b/lang/tarteaucitron.fr.js @@ -1,11 +1,14 @@ /*global tarteaucitron */ tarteaucitron.lang = { "alertBig": "En poursuivant votre navigation, vous acceptez l'utilisation de services tiers pouvant installer des cookies", + "alertBigPrivacy": "Ce site utilise des cookies et vous donne le contrôle sur ce que vous souhaitez activer", "alertSmall": "Gestion des cookies", "acceptAll": "OK, tout accepter", "personalize": "Personnaliser", "close": "Fermer", + "all": "Préférence pour tous les services", + "info": "Transparence sur les cookies", "disclaimer": "En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement.", "allow": "Autoriser", diff --git a/tarteaucitron.js b/tarteaucitron.js index 868343f..fb1a50f 100644 --- a/tarteaucitron.js +++ b/tarteaucitron.js @@ -6,6 +6,7 @@ var scripts = document.getElementsByTagName('script'), cdn = path.split('/').slice(0, -1).join('/') + '/'; var tarteaucitron = { + "highPrivacy": false, "showAlertSmall": true, // show the small banner on bottom right? "autoOpen": false, // auto open the panel with #tarteaucitron hash? "grayArea": false, // activate the features of the gray area? @@ -98,6 +99,21 @@ var tarteaucitron = { html += ' '; html += ' '; html += '
'; + + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.all + ''; + html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.allow; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.deny; + html += '
'; + html += '
'; + html += '
'; + html += '
'; for (index = 0; index < tarteaucitron.job.length; index += 1) { service = s[tarteaucitron.job[index]]; @@ -137,22 +153,38 @@ var tarteaucitron = { html += ' ' + tarteaucitron.lang.credit + ''; html += '
'; html += ''; - html += '
'; - html += ' '; - html += ' ' + tarteaucitron.lang.alertBig; - html += ' '; - html += ' '; - html += ' ' + tarteaucitron.lang.acceptAll; - html += ' '; - html += ' '; - html += ' ' + tarteaucitron.lang.personalize; - html += ' '; - html += '
'; + + if (tarteaucitron.highPrivacy) { + html += '
'; + html += ' '; + html += ' ' + tarteaucitron.lang.alertBigPrivacy; + html += ' '; + html += ' '; + html += ' ' + tarteaucitron.lang.personalize; + html += ' '; + html += '
'; + } else { + html += '
'; + html += ' '; + html += ' ' + tarteaucitron.lang.alertBig; + html += ' '; + html += ' '; + html += ' ' + tarteaucitron.lang.acceptAll; + html += ' '; + html += ' '; + html += ' ' + tarteaucitron.lang.personalize; + html += ' '; + html += '
'; + } if (tarteaucitron.showAlertSmall === true) { html += '
'; - html += ' '; html += ' ' + tarteaucitron.lang.alertSmall; + html += '
'; + html += ' '; + html += ' '; + html += ' '; + html += '
'; html += '
'; } @@ -168,7 +200,7 @@ var tarteaucitron = { isAllowed = (cookie.indexOf(service.key + '=true') >= 0) ? true : false; isResponded = (cookie.indexOf(service.key) >= 0) ? true : false; - if ((!isResponded && (isAutostart || isNavigating)) || isAllowed) { + if ((!isResponded && (isAutostart || isNavigating) && !tarteaucitron.highPrivacy) || isAllowed) { if (!isAllowed) { tarteaucitron.cookie.create(service.key, true); } @@ -235,6 +267,22 @@ var tarteaucitron = { tarteaucitron.userInterface.closeAlert(); } }, + "rejectAll": function () { + "use strict"; + var s = tarteaucitron.services, + service, + key, + index = 0; + + for (index = 0; index < tarteaucitron.job.length; index += 1) { + service = s[tarteaucitron.job[index]]; + key = service.key; + + tarteaucitron.state[key] = false; + tarteaucitron.cookie.create(key, false); + tarteaucitron.userInterface.color(key, false); + } + }, "respond": function (el, status) { "use strict"; var key = el.id.replace(new RegExp("(Eng[0-9]+|Allow|Deni)ed", "g"), ''); @@ -262,8 +310,12 @@ var tarteaucitron = { greenLight = '#E6FFE2', redDark = '#9C1A1A', redLight = '#FFE2E2', + yellowDark = '#FBDA26', c = 'tarteaucitron', - allAllowed = true, + nbDenied = 0, + nbPending = 0, + nbAllowed = 0, + sum = tarteaucitron.job.length, index; if (status === true) { @@ -277,17 +329,29 @@ var tarteaucitron = { } // check if all services are allowed - for (index = 0; index < tarteaucitron.job.length; index += 1) { + for (index = 0; index < sum; index += 1) { if (tarteaucitron.state[tarteaucitron.job[index]] === false) { - allAllowed = false; - break; + nbDenied += 1; + } else if (tarteaucitron.state[tarteaucitron.job[index]] === undefined) { + nbPending += 1; + } else if (tarteaucitron.state[tarteaucitron.job[index]] === true) { + nbAllowed += 1; } } - if (allAllowed) { - tarteaucitron.userInterface.css(c + 'Dot', 'backgroundColor', greenDark); + tarteaucitron.userInterface.css(c + 'DotGreen', 'width', ((100 / sum) * nbAllowed) + '%'); + tarteaucitron.userInterface.css(c + 'DotYellow', 'width', ((100 / sum) * nbPending) + '%'); + tarteaucitron.userInterface.css(c + 'DotRed', 'width', ((100 / sum) * nbDenied) + '%'); + + if (nbDenied === 0 && nbPending === 0) { + tarteaucitron.userInterface.css(c + 'AllAllowed', 'backgroundColor', greenDark); + tarteaucitron.userInterface.css(c + 'AllDenied', 'backgroundColor', gray); + } else if (nbAllowed === 0 && nbPending === 0) { + tarteaucitron.userInterface.css(c + 'AllAllowed', 'backgroundColor', gray); + tarteaucitron.userInterface.css(c + 'AllDenied', 'backgroundColor', redDark); } else { - tarteaucitron.userInterface.css(c + 'Dot', 'backgroundColor', redDark); + tarteaucitron.userInterface.css(c + 'AllAllowed', 'backgroundColor', gray); + tarteaucitron.userInterface.css(c + 'AllDenied', 'backgroundColor', gray); } }, "openPanel": function () {