From b8649717fa35ff5452c611e399a9c7b862ed3f16 Mon Sep 17 00:00:00 2001
From: Amauri CHAMPEAUX <amauri@champeaux.fr>
Date: Fri, 6 Mar 2015 23:34:50 +0100
Subject: [PATCH] New template for the cookies listing

---
 css/tarteaucitron.css | 55 ++++++++++++++++++++++++++++++-------------
 tarteaucitron.js      | 41 +++++++++++++++++++++++++++-----
 2 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/css/tarteaucitron.css b/css/tarteaucitron.css
index 1ea9b15..cd827d2 100644
--- a/css/tarteaucitron.css
+++ b/css/tarteaucitron.css
@@ -324,7 +324,6 @@
 #tarteaucitronAlertSmall {
     background: #333;
     bottom: 0;
-    cursor: pointer;
     display: none;
     padding: 0;
     position: fixed;
@@ -336,6 +335,7 @@
 
 #tarteaucitronAlertSmall #tarteaucitronManager {
     color: #fff;
+    cursor: pointer;
     display: inline-block;
     font-size: 11px !important;
     padding: 10px 10px 5px 10px;
@@ -379,6 +379,7 @@
 #tarteaucitronAlertSmall #tarteaucitronCookiesNumber {
     background: rgba(255, 255, 255, 0.2);
     color: #fff;
+    cursor: pointer;
     display: inline-block;
     font-size: 34px;
     padding: 5px 10px 0;
@@ -389,46 +390,66 @@
 }
 
 #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer {
-    background: #333;
+    background: #fff;
+    box-shadow: 0 0 15px #4a4a4a;
     display: none;
+    max-height: 80%;
     max-width: 500px;
+    overflow: auto;
     position: fixed;
     right: 0;
     width: 100%;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesList {
-    background: rgba(255, 255, 255, 0.2);
-    color: #fff;
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList {
+    background: rgba(51, 51, 51, 0.1);
+    color: #333;
     font-size: 11px;
     padding: 12px;
     text-align: left;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesList b {
-    color: #fff;
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList b {
+    color: #333;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesList .tarteaucitronCookiesListMain {
-    padding: 4px;
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList #tarteaucitronCookiesTitle {
+    background: #333;
+    padding: 8px;
+}
+
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList #tarteaucitronCookiesTitle b {
+    color: #fff;
+    font-size: 16px;
+}
+
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain {
+    border-bottom: 4px solid #fff;
+    padding: 7px 5px 10px;
     word-wrap: break-word;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesList .tarteaucitronCookiesListMain:hover {
-    background: rgba(255, 255, 255, 0.1);
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain:hover {
+    background: rgba(51, 51, 51, 0.2);
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesList .tarteaucitronCookiesListLeft {
-    display: inline-block;
-    width: 40%;
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain a {
+    color: #333;
+    text-decoration: none;
 }
 
-#tarteaucitronAlertSmall #tarteaucitronCookiesList .tarteaucitronCookiesListRight {
-    color: #fff;
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListLeft {
     display: inline-block;
+    width: 50%;
+}
+
+#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListRight {
+    color: #333;
+    display: inline-block;
+    font-size: 11px;
     margin-left: 10%;
     vertical-align: top;
-    width: 40%;
+    width: 30%;
 }
 
 /***
diff --git a/tarteaucitron.js b/tarteaucitron.js
index f9d903b..5caee2e 100644
--- a/tarteaucitron.js
+++ b/tarteaucitron.js
@@ -10,7 +10,7 @@ var scripts = document.getElementsByTagName('script'),
     tarteaucitronNoAdBlocker = false;
 
 var tarteaucitron = {
-    "version": 152,
+    "version": 155,
     "cdn": cdn,
     "user": {},
     "lang": {},
@@ -561,7 +561,7 @@ var tarteaucitron = {
                 return;
             }
             
-            tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'bottom', (parseInt(document.getElementById('tarteaucitronAlertSmall').offsetHeight, 10) + 3) + 'px');
+            tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'bottom', (parseInt(document.getElementById('tarteaucitronAlertSmall').offsetHeight, 10) + 10) + 'px');
             if (div.style.display !== 'block') {
                 div.style.display = 'block';
             } else {
@@ -591,6 +591,7 @@ var tarteaucitron = {
         }
     },
     "cookie": {
+        "owner": {},
         "create": function (key, status) {
             "use strict";
             var d = new Date(),
@@ -650,6 +651,12 @@ var tarteaucitron = {
                 for (i = 0; i < nb; i += 1) {
                     if (document.cookie.indexOf(arr[i] + '=') !== -1) {
                         nbCurrent += 1;
+                        if (tarteaucitron.cookie.owner[arr[i]] === undefined) {
+                            tarteaucitron.cookie.owner[arr[i]] = [];
+                        }
+                        if (tarteaucitron.cookie.crossIndexOf(tarteaucitron.cookie.owner[arr[i]], tarteaucitron.services[key].name) === false) {
+                            tarteaucitron.cookie.owner[arr[i]].push(tarteaucitron.services[key].name);
+                        }
                     }
                 }
                 
@@ -678,21 +685,43 @@ var tarteaucitron = {
             
             tarteaucitron.cookie.number();
         },
+        "crossIndexOf": function (arr, match) {
+            "use strict";
+            var i;
+            for (i = 0; i < arr.length; i += 1) {
+                if (arr[i] === match) {
+                    return true;
+                }
+            }
+            return false;
+        },
         "number": function () {
             "use strict";
             var cookies = document.cookie.split(';'),
                 nb = (document.cookie !== '') ? cookies.length : 0,
                 html = '',
                 i,
-                s = (nb > 1) ? 's' : '';
+                s = (nb > 1) ? 's' : '',
+                name;
+            
+            cookies = cookies.sort(function (a, b) {
+                if (a > b) { return 1; }
+                if (a < b) { return -1; }
+                return 0;
+            });
 
-            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 class="tarteaucitronCookiesListMain" id="tarteaucitronCookiesTitle">';
+            html += '    <b>' + nb + ' cookie' + s + '</b>';
             html += '</div>';
             if (document.cookie !== '') {
                 for (i = 0; i < nb; i += 1) {
+                    name = cookies[i].split('=', 1).toString().replace(/ /g, '');
                     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="tarteaucitronCookiesListLeft"><a href="#" onclick="tarteaucitron.cookie.purge([\'' + cookies[i].split('=', 1) + '\']);tarteaucitron.cookie.number();return false">[x]</a> <b>' + name + '</b>';
+                    if (tarteaucitron.cookie.owner[name] !== undefined) {
+                        html += '        <br/>' + tarteaucitron.cookie.owner[name].join('<br/>');
+                    }
+                    html += '    </div>';
                     html += '    <div class="tarteaucitronCookiesListRight">' + cookies[i].split('=').slice(1).join('=') + '</div>';
                     html += '</div>';
                 }