From 8c73f81bf552f06f7da0e0228f4a4d2eb86c547b Mon Sep 17 00:00:00 2001 From: Amauri CHAMPEAUX Date: Fri, 6 Mar 2015 16:53:24 +0100 Subject: [PATCH] New option: show the list and the number of installed cookies --- css/tarteaucitron.css | 92 +++++++++++++++++++++++++++++++----- tarteaucitron.js | 107 ++++++++++++++++++++++++++++++++++++------ 2 files changed, 172 insertions(+), 27 deletions(-) diff --git a/css/tarteaucitron.css b/css/tarteaucitron.css index b5a5be5..7cdd1a7 100644 --- a/css/tarteaucitron.css +++ b/css/tarteaucitron.css @@ -88,8 +88,9 @@ #tarteaucitronRoot * { box-sizing: initial; color: #333; - font-family: sans-serif; + font-family: sans-serif !important; font-size: 14px; + line-height: normal; vertical-align: initial; } @@ -288,11 +289,16 @@ z-index: 2147483645; } -#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { +#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert, +#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert b { font: 15px verdana; color: #fff; } +#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert b { + font-weight: 700; +} + #tarteaucitronAlertBig #tarteaucitronCloseAlert, #tarteaucitronAlertBig #tarteaucitronPersonalize { background: #008300; color: #fff; @@ -318,19 +324,28 @@ #tarteaucitronAlertSmall { background: #333; bottom: 0; - color: #fff; cursor: pointer; display: none; - font-size: 11px !important; - padding: 5px; + padding: 0; position: fixed; right: 0; text-align: center; - width: 120px; + width: auto; z-index: 2147483645; } -#tarteaucitronAlertSmall #tarteaucitronDot { +#tarteaucitronAlertSmall #tarteaucitronManager { + color: #fff; + display: inline-block; + font-size: 11px !important; + padding: 10px 10px 5px 10px; +} + +#tarteaucitronAlertSmall #tarteaucitronManager:hover { + background: rgba(255, 255, 255, 0.05); +} + +#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot { background-color: gray; border-radius: 5px; display: inline-block; @@ -340,27 +355,78 @@ width: 100%; } -#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotGreen, -#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotYellow, -#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotRed { +#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotGreen, +#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotYellow, +#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotRed { display: block; float: left; height: 100%; width: 0%; } -#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotGreen { +#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotGreen { background-color: #1B870B; } -#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotYellow { +#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotYellow { background-color: #FBDA26; } -#tarteaucitronAlertSmall #tarteaucitronDot #tarteaucitronDotRed { +#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotRed { background-color: #9C1A1A; } +#tarteaucitronAlertSmall #tarteaucitronCookiesNumber { + background: rgba(255, 255, 255, 0.2); + color: #fff; + display: inline-block; + font-size: 34px; + padding: 5px 10px 0; +} + +#tarteaucitronAlertSmall #tarteaucitronCookiesNumber:hover { + background: rgba(255, 255, 255, 0.3); +} + +#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer { + background: #333; + display: none; + max-width: 500px; + position: fixed; + right: 0; + width: 100%; +} + +#tarteaucitronAlertSmall #tarteaucitronCookiesList { + background: rgba(255, 255, 255, 0.2); + color: #fff; + font-size: 11px; + padding: 12px; + text-align: left; +} + +#tarteaucitronAlertSmall #tarteaucitronCookiesList .tarteaucitronCookiesListMain { + padding: 4px; + word-wrap: break-word; +} + +#tarteaucitronAlertSmall #tarteaucitronCookiesList .tarteaucitronCookiesListMain:hover { + background: rgba(255, 255, 255, 0.1); +} + +#tarteaucitronAlertSmall #tarteaucitronCookiesList .tarteaucitronCookiesListLeft { + display: inline-block; + width: 40%; +} + +#tarteaucitronAlertSmall #tarteaucitronCookiesList .tarteaucitronCookiesListRight { + color: #fff; + display: inline-block; + margin-left: 10%; + vertical-align: top; + width: 40%; +} + /*** * Fallback activate link */ diff --git a/tarteaucitron.js b/tarteaucitron.js index 63536a3..c067b5b 100644 --- a/tarteaucitron.js +++ b/tarteaucitron.js @@ -96,7 +96,8 @@ var tarteaucitron = { "highPrivacy": false, "orientation": "top", "removeCredit": false, - "showAlertSmall": true + "showAlertSmall": true, + "cookieslist": true }, params = tarteaucitron.parameters; @@ -208,13 +209,23 @@ var tarteaucitron = { } if (defaults.showAlertSmall === true) { - html += '
'; - html += ' ' + tarteaucitron.lang.alertSmall; - html += '
'; - html += ' '; - html += ' '; - html += ' '; - html += '
'; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.alertSmall; + html += '
'; + html += ' '; + html += ' '; + html += ' '; + html += '
'; + if (defaults.cookieslist === true) { + html += '
'; + html += ' 0'; + html += '
'; + html += '
'; + } else { + html += '
'; + } html += '
'; } @@ -323,8 +334,11 @@ var tarteaucitron = { html += ' '; html += ''; - document.getElementById('tarteaucitronServicesTitle_' + service.type).style.display = 'block'; - document.getElementById('tarteaucitronServices_' + service.type).innerHTML += html; + tarteaucitron.userInterface.css('tarteaucitronServicesTitle_' + service.type, 'display', 'block'); + + if (document.getElementById('tarteaucitronServices_' + service.type) !== null) { + document.getElementById('tarteaucitronServices_' + service.type).innerHTML += html; + } tarteaucitron.userInterface.order(service.type); } @@ -510,7 +524,8 @@ var tarteaucitron = { "use strict"; tarteaucitron.userInterface.css('tarteaucitron', 'display', 'block'); tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block'); - + tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'display', 'none'); + // setting hash tag if (tarteaucitron.hashtag !== '') { document.location.hash = tarteaucitron.hashtag; @@ -534,6 +549,21 @@ var tarteaucitron = { tarteaucitron.userInterface.css(c + 'AlertSmall', 'display', 'block'); tarteaucitron.userInterface.css(c + 'AlertBig', 'display', 'none'); }, + "toggleCookiesList": function () { + "use strict"; + var div = document.getElementById('tarteaucitronCookiesListContainer'); + + if (div === null) { + return; + } + + tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'bottom', (parseInt(document.getElementById('tarteaucitronAlertSmall').offsetHeight, 10) + 3) + 'px'); + if (div.style.display !== 'block') { + div.style.display = 'block'; + } else { + div.style.display = 'none'; + } + }, "order": function (id) { "use strict"; var main = document.getElementById('tarteaucitronServices_' + id), @@ -541,6 +571,10 @@ var tarteaucitron = { store = [], i; + if (main === null) { + return; + } + if (typeof Array.prototype.map === 'function') { Array.prototype.map.call(main.children, Object).sort(function (a, b) { if (tarteaucitron.services[a.id.replace(/Line/g, '')].name > tarteaucitron.services[b.id.replace(/Line/g, '')].name) { return 1; } @@ -637,6 +671,41 @@ var tarteaucitron = { if (document.getElementById('tacCL' + key) !== null) { document.getElementById('tacCL' + key).innerHTML = html; } + + tarteaucitron.cookie.number(); + }, + "number": function () { + "use strict"; + var cookies = document.cookie.split(';'), + nb = (document.cookie !== '') ? cookies.length : 0, + html = '', + i, + s = (nb > 1) ? 's' : ''; + + html += '
'; + html += ' ' + nb + ' cookie' + s + ''; + html += '
'; + if (document.cookie !== '') { + for (i = 0; i < nb; i += 1) { + html += '
'; + html += '
[x] ' + cookies[i].split('=', 1) + '
'; + html += '
' + cookies[i].split('=').slice(1).join('=') + '
'; + html += '
'; + } + } else { + html += '
'; + html += '
-
'; + html += '
'; + html += '
'; + } + + if (document.getElementById('tarteaucitronCookiesList') !== null) { + document.getElementById('tarteaucitronCookiesList').innerHTML = html; + } + + if (document.getElementById('tarteaucitronCookiesNumber') !== null) { + document.getElementById('tarteaucitronCookiesNumber').innerHTML = nb; + } } }, "getLanguage": function () { @@ -735,9 +804,11 @@ var tarteaucitron = { } tarteaucitron.makeAsync.antiGhost += 1; tarteaucitron.addScript(url, '', function () { - document.getElementById(id).innerHTML += " " + tarteaucitron.makeAsync.buffer; - tarteaucitron.makeAsync.buffer = ''; - tarteaucitron.makeAsync.execJS(id); + if (document.getElementById(id) !== null) { + document.getElementById(id).innerHTML += " " + tarteaucitron.makeAsync.buffer; + tarteaucitron.makeAsync.buffer = ''; + tarteaucitron.makeAsync.execJS(id); + } }); }, "execJS": function (id) { @@ -747,6 +818,10 @@ var tarteaucitron = { childId, type; + if (document.getElementById(id) === null) { + return; + } + scripts = document.getElementById(id).getElementsByTagName('script'); for (i = 0; i < scripts.length; i += 1) { type = (scripts[i].getAttribute('type') !== null) ? scripts[i].getAttribute('type') : ''; @@ -827,6 +902,10 @@ var tarteaucitron = { timestamp = new Date().getTime(), url = '//opt-out.ferank.eu/premium.php?'; + if (div === null) { + return; + } + url += 'domain=' + tarteaucitron.domain + '&'; url += 'uuid=' + tarteaucitron.uuid + '&'; url += 'c=' + encodeURIComponent(tarteaucitron.proTemp) + '&';