Privacy enhancement

- Accept or reject all services with one-click
- Viewing the number of services activated / deactivated
- High privacy feature for disabling auto consent
This commit is contained in:
Amauri CHAMPEAUX 2014-12-02 17:09:32 +01:00
parent 93e3afa29f
commit bf54f44ec8
4 changed files with 140 additions and 32 deletions

View File

@ -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;

View File

@ -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.",

View File

@ -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",

View File

@ -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 += ' </div>';
html += ' </div>';
html += ' <div id="tarteaucitronServices">';
html += '<div class="tarteaucitronLine tarteaucitronMainLine">';
html += ' <div class="tarteaucitronName">';
html += ' <b>' + tarteaucitron.lang.all + '</b>';
html += ' </div>';
html += ' <div class="tarteaucitronAsk">';
html += ' <div id="tarteaucitronAllAllowed" class="tarteaucitronAllow" onclick="tarteaucitron.userInterface.acceptAll();">';
html += ' ' + tarteaucitron.lang.allow;
html += ' </div> ';
html += ' <div id="tarteaucitronAllDenied" class="tarteaucitronDeny" onclick="tarteaucitron.userInterface.rejectAll();">';
html += ' ' + tarteaucitron.lang.deny;
html += ' </div>';
html += ' </div>';
html += '</div>';
html += '<div class="clear"></div>';
for (index = 0; index < tarteaucitron.job.length; index += 1) {
service = s[tarteaucitron.job[index]];
@ -137,22 +153,38 @@ var tarteaucitron = {
html += ' <a href="https://opt-out.ferank.eu/" rel="nofollow" target="_blank">' + tarteaucitron.lang.credit + '</a>';
html += ' </div>';
html += '</div>';
html += '<div id="tarteaucitronAlertBig">';
html += ' <span id="tarteaucitronDisclaimerAlert">';
html += ' ' + tarteaucitron.lang.alertBig;
html += ' </span>';
html += ' <span id="tarteaucitronPersonalize" onclick="tarteaucitron.userInterface.acceptAll();">';
html += ' ' + tarteaucitron.lang.acceptAll;
html += ' </span>';
html += ' <span id="tarteaucitronCloseAlert" onclick="tarteaucitron.userInterface.openPanel();">';
html += ' ' + tarteaucitron.lang.personalize;
html += ' </span>';
html += '</div>';
if (tarteaucitron.highPrivacy) {
html += '<div id="tarteaucitronAlertBig">';
html += ' <span id="tarteaucitronDisclaimerAlert">';
html += ' ' + tarteaucitron.lang.alertBigPrivacy;
html += ' </span>';
html += ' <span id="tarteaucitronPersonalize" onclick="tarteaucitron.userInterface.openPanel();">';
html += ' ' + tarteaucitron.lang.personalize;
html += ' </span>';
html += '</div>';
} else {
html += '<div id="tarteaucitronAlertBig">';
html += ' <span id="tarteaucitronDisclaimerAlert">';
html += ' ' + tarteaucitron.lang.alertBig;
html += ' </span>';
html += ' <span id="tarteaucitronPersonalize" onclick="tarteaucitron.userInterface.acceptAll();">';
html += ' ' + tarteaucitron.lang.acceptAll;
html += ' </span>';
html += ' <span id="tarteaucitronCloseAlert" onclick="tarteaucitron.userInterface.openPanel();">';
html += ' ' + tarteaucitron.lang.personalize;
html += ' </span>';
html += '</div>';
}
if (tarteaucitron.showAlertSmall === true) {
html += '<div id="tarteaucitronAlertSmall" onclick="tarteaucitron.userInterface.openPanel();">';
html += ' <span id="tarteaucitronDot"></span>';
html += ' ' + tarteaucitron.lang.alertSmall;
html += ' <div id="tarteaucitronDot">';
html += ' <span id="tarteaucitronDotGreen"></span>';
html += ' <span id="tarteaucitronDotYellow"></span>';
html += ' <span id="tarteaucitronDotRed"></span>';
html += ' </div>';
html += '</div>';
}
@ -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 () {