New option: show the list and the number of installed cookies

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
  */

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 += '<div id="tarteaucitronAlertSmall" onclick="tarteaucitron.userInterface.openPanel();">';
-                    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 id="tarteaucitronAlertSmall">';
+                    html += '   <div id="tarteaucitronManager" onclick="tarteaucitron.userInterface.openPanel();">';
+                    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>';
+                    if (defaults.cookieslist === true) {
+                        html += '   </div><!-- @whitespace';
+                        html += '   --><div id="tarteaucitronCookiesNumber" onclick="tarteaucitron.userInterface.toggleCookiesList();">';
+                        html += '       0';
+                        html += '   </div>';
+                        html += '   <div id="tarteaucitronCookiesListContainer"><div id="tarteaucitronCookiesList"></div></div>';
+                    } else {
+                        html += '   </div>';
+                    }
                     html += '</div>';
                 }
                 
@@ -323,8 +334,11 @@ var tarteaucitron = {
             html += '   </div>';
             html += '</div>';
            
-            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 += '<div class="tarteaucitronCookiesListMain" style="background: none !important;cursor: text;margin-bottom:8px">';
+            html += '    <b style="font-size:15px;">' + nb + ' cookie' + s + '</b>';
+            html += '</div>';
+            if (document.cookie !== '') {
+                for (i = 0; i < nb; i += 1) {
+                    html += '<div class="tarteaucitronCookiesListMain">';
+                    html += '    <div class="tarteaucitronCookiesListLeft"><a href="#" style="text-decoration:none" onclick="tarteaucitron.cookie.purge([\'' + cookies[i].split('=', 1) + '\']);tarteaucitron.cookie.number();return false">[x]</a> <b>' + cookies[i].split('=', 1) + '</b></div>';
+                    html += '    <div class="tarteaucitronCookiesListRight">' + cookies[i].split('=').slice(1).join('=') + '</div>';
+                    html += '</div>';
+                }
+            } else {
+                html += '<div class="tarteaucitronCookiesListMain">';
+                html += '    <div class="tarteaucitronCookiesListLeft"><b>-</b></div>';
+                html += '    <div class="tarteaucitronCookiesListRight"></div>';
+                html += '</div>';
+            }
+            
+            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 += "<span style='display:none'>&nbsp;</span>" + tarteaucitron.makeAsync.buffer;
-                tarteaucitron.makeAsync.buffer = '';
-                tarteaucitron.makeAsync.execJS(id);
+                if (document.getElementById(id) !== null) {
+                    document.getElementById(id).innerHTML += "<span style='display:none'>&nbsp;</span>" + 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) + '&';