diff --git a/css/tarteaucitron.css b/css/tarteaucitron.css index f5e6156..1609c82 100644 --- a/css/tarteaucitron.css +++ b/css/tarteaucitron.css @@ -2,13 +2,6 @@ * Responsive layout for the control panel */ @media screen and (max-width:479px) { - #tarteaucitron #tarteaucitronInfo { - background-image: none; - font-size: 16px !important; - padding-right: 0; - text-align: center; - } - #tarteaucitron .tarteaucitronLine .tarteaucitronName { width: 90% !important; } @@ -33,6 +26,14 @@ width: 100% !important; } + #tarteaucitron .tarteaucitronBorder { + border: 0 !important; + } + + #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList { + border: 0 !important; + } + #tarteaucitron #tarteaucitronServices .tarteaucitronTitle { text-align: left !important; } @@ -111,20 +112,25 @@ } #tarteaucitron { - background: #fff; - box-shadow: 0 0 15px #4a4a4a; display: none; + max-height: 80%; left: 50%; margin: 0 auto 0 -430px; - max-height: 80%; - overflow: auto; padding: 0; position: fixed; - top: 10%; + top: 6%; width: 860px; z-index: 2147483647; } +#tarteaucitron .tarteaucitronBorder { + background: #fff; + border: 4px solid #333; + border-top: 0; + height: auto; + overflow: auto; +} + #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronClosePanelCookie, #tarteaucitron #tarteaucitronClosePanel { background: #333333; @@ -140,16 +146,6 @@ width: 70px; } -#tarteaucitron #tarteaucitronInfo { - background: rgba(51, 51, 51, 0.1); - border-bottom: 4px solid #fff; - clear: both; - color: #333; - font-size: 24px; - padding: 20px 20px 18px 20px; - text-align: center; -} - #tarteaucitron #tarteaucitronDisclaimer { color: #555; font-size: 12px; @@ -157,52 +153,100 @@ width: 80%; } -#tarteaucitron #tarteaucitronServices { - background: #fff; - border-bottom: 4px solid #fff; - min-height: 250px; +#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronHidden, +#tarteaucitron #tarteaucitronServices .tarteaucitronHidden { + background: rgba(51, 51, 51, 0.07); } #tarteaucitron #tarteaucitronServices .tarteaucitronHidden { display: none; + position: relative; } -#tarteaucitron #tarteaucitronServices .tarteaucitronTitle { - background: rgba(51, 51, 51, 0.2); - color: #333; - font-size: 20px; - padding: 18px 22px; - text-align: center; +#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle, +#tarteaucitron #tarteaucitronServices .tarteaucitronTitle, +#tarteaucitron #tarteaucitronInfo, +#tarteaucitron #tarteaucitronServices .tarteaucitronDetails { + background: #333; + color: #fff; + display: inline-block; + font-size: 14px; + font-weight: 700; + margin: 20px 0px 0px; + padding: 5px 20px; + text-align: left; + width: auto; } -#tarteaucitron #tarteaucitronServices .tarteaucitronTitle .tarteaucitronDetails { - color: #555; +#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName a, +#tarteaucitron #tarteaucitronServices .tarteaucitronTitle a { + color: #fff; + font-weight: 500; +} + +#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName a:hover, +#tarteaucitron #tarteaucitronServices .tarteaucitronTitle a:hover { + text-decoration: none !important; +} + +#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName a { + font-size: 22px; +} + +#tarteaucitron #tarteaucitronServices .tarteaucitronTitle a { + font-size: 14px; +} + +#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle { + padding: 5px 10px; +} + +#tarteaucitron #tarteaucitronInfo, +#tarteaucitron #tarteaucitronServices .tarteaucitronDetails { + color: #fff; + display: none; font-size: 12px; + font-weight: 500; + margin-top: 0; + max-width: 270px; + padding: 20px; + position: absolute; + z-index: 2147483647; +} + +#tarteaucitron #tarteaucitronInfo a { + color: #fff; + text-decoration: underline; } #tarteaucitron #tarteaucitronServices .tarteaucitronLine:hover { - background: #f5f5f5; + background: rgba(51, 51, 51, 0.2); } #tarteaucitron #tarteaucitronServices .tarteaucitronLine { - background: #fafafa; - border-left: 5px solid #f5f5f5; - margin: 1px 0; + background: rgba(51, 51, 51, 0.1); + border-left: 5px solid transparent; + margin: 0; overflow: hidden; padding: 15px 5px; } #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine { - background: #444; - border: 0; - margin-bottom: 5px; + background: #333; + border: 3px solid #333; + border-left: 9px solid #333; + border-top: 5px solid #333; + margin-bottom: 0; + margin-top: 21px; + position: relative; } #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine:hover { - background: #444; + background: #333; } #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName { + margin-left: 15px; margin-top: 2px; } @@ -217,7 +261,7 @@ #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronName { display: inline-block; float: left; - margin-left: 15px; + margin-left: 10px; text-align: left; width: 50%; } @@ -252,20 +296,6 @@ font-size: 12px; } -#tarteaucitron #tarteaucitronFooter { - background: rgba(51, 51, 51, 0.1); - border-top: 1px solid #eee; - margin: 20px auto 0px; - padding: 15px 0 15px; - text-align: center; -} - -#tarteaucitron #tarteaucitronFooter a { - color: #666; - font-style: normal; - text-decoration: underline; -} - /*** * Big alert */ @@ -394,9 +424,8 @@ #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer { display: none; - max-height: 80%; + max-height: 70%; max-width: 500px; - overflow: auto; position: fixed; right: 0; width: 100%; @@ -404,8 +433,11 @@ #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList { background: #fff; + border: 4px solid #333; color: #333; font-size: 11px; + height: auto; + overflow: auto; text-align: left; } @@ -413,20 +445,20 @@ color: #333; } -#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList #tarteaucitronCookiesTitle { +#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesTitle { background: #333; - margin-top: 20px; - padding: 8px; + margin-top: 21px; + padding: 13px 0 7px 13px; + text-align: left; } -#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList #tarteaucitronCookiesTitle b { +#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesTitle b { color: #fff; font-size: 16px; } #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain { background: rgba(51, 51, 51, 0.1); - border-bottom: 4px solid #fff; padding: 7px 5px 10px; word-wrap: break-word; } @@ -445,6 +477,10 @@ width: 50%; } +#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListLeft a b { + color: darkred; +} + #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListRight { color: #333; display: inline-block; diff --git a/tarteaucitron.js b/tarteaucitron.js index 7b676a6..531589e 100644 --- a/tarteaucitron.js +++ b/tarteaucitron.js @@ -10,7 +10,7 @@ var scripts = document.getElementsByTagName('script'), tarteaucitronNoAdBlocker = false; var tarteaucitron = { - "version": 156.2, + "version": 201, "cdn": cdn, "user": {}, "lang": {}, @@ -42,6 +42,13 @@ var tarteaucitron = { tarteaucitron.userInterface.openPanel(); } }, false); + window.addEventListener("resize", function () { + if (document.getElementById('tarteaucitron').style.display === 'block') { + tarteaucitron.userInterface.jsSizing('main'); + } else if (document.getElementById('tarteaucitronCookiesListContainer').style.display === 'block') { + tarteaucitron.userInterface.jsSizing('cookie'); + } + }, false); } else { window.attachEvent("onload", function () { tarteaucitron.load(); @@ -56,6 +63,13 @@ var tarteaucitron = { tarteaucitron.userInterface.openPanel(); } }); + window.attachEvent("onresize", function () { + if (document.getElementById('tarteaucitron').style.display === 'block') { + tarteaucitron.userInterface.jsSizing('main'); + } else if (document.getElementById('tarteaucitronCookiesListContainer').style.display === 'block') { + tarteaucitron.userInterface.jsSizing('cookie'); + } + }); } if (typeof XMLHttpRequest !== 'undefined') { @@ -145,44 +159,43 @@ var tarteaucitron = { html += '
'; html += ' ' + tarteaucitron.lang.close; html += '
'; - html += '
'; - html += ' ' + tarteaucitron.lang.info; - html += '
'; - html += ' ' + tarteaucitron.lang.disclaimer; - html += '
'; - html += '
'; html += '
'; - html += '
'; + html += '
'; html += '
'; - html += ' ' + tarteaucitron.lang.all + ''; + html += ' ' + tarteaucitron.lang.all + ''; html += '
'; - html += '
'; + html += '
'; html += '
'; - html += ' ' + tarteaucitron.lang.allow; + html += ' ✔ ' + tarteaucitron.lang.allow; html += '
'; html += '
'; - html += ' ' + tarteaucitron.lang.deny; + html += ' ✗ ' + tarteaucitron.lang.deny; html += '
'; html += '
'; html += '
'; - html += '
'; - for (i = 0; i < cat.length; i += 1) { - html += '
'; - html += '
'; - html += ' ' + tarteaucitron.lang[cat[i]].title; - html += '
'; - html += ' ' + tarteaucitron.lang[cat[i]].details; - html += '
'; - html += '
'; - html += '
'; - html += '
'; - } - html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang.disclaimer; if (defaults.removeCredit === false) { - html += '
'; - html += ' ' + tarteaucitron.lang.credit + ''; - html += '
'; + html += '

'; + html += ' ' + tarteaucitron.lang.credit + ''; } + html += '
'; + html += '
'; + html += '
'; + for (i = 0; i < cat.length; i += 1) { + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang[cat[i]].title; + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.lang[cat[i]].details; + html += '
'; + html += '
'; + html += '
'; + } + html += '
'; + html += '
'; + html += '
'; html += '
'; if (defaults.orientation === 'bottom') { @@ -204,7 +217,7 @@ var tarteaucitron = { html += ' ' + tarteaucitron.lang.alertBig; html += ' '; html += ' '; - html += ' ' + tarteaucitron.lang.acceptAll; + html += ' ✔ ' + tarteaucitron.lang.acceptAll; html += ' '; html += ' '; html += ' ' + tarteaucitron.lang.personalize; @@ -230,6 +243,9 @@ var tarteaucitron = { html += '
'; html += ' ' + tarteaucitron.lang.close; html += '
'; + html += '
'; + html += ' 0 cookie'; + html += '
'; html += '
'; html += ' '; } else { @@ -339,10 +355,10 @@ var tarteaucitron = { html += ' '; html += '
'; html += '
'; - html += ' ' + tarteaucitron.lang.allow; + html += ' ✔ ' + tarteaucitron.lang.allow; html += '
'; html += '
'; - html += ' ' + tarteaucitron.lang.deny; + html += ' ✗ ' + tarteaucitron.lang.deny; html += '
'; html += '
'; html += ''; @@ -538,6 +554,7 @@ var tarteaucitron = { tarteaucitron.userInterface.css('tarteaucitron', 'display', 'block'); tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block'); tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'display', 'none'); + tarteaucitron.userInterface.jsSizing('main'); }, "closePanel": function () { "use strict"; @@ -569,10 +586,10 @@ var tarteaucitron = { return; } - tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'bottom', (parseInt(document.getElementById('tarteaucitronAlertSmall').offsetHeight, 10) + 10) + 'px'); if (div.style.display !== 'block') { tarteaucitron.cookie.number(); div.style.display = 'block'; + tarteaucitron.userInterface.jsSizing('cookie'); tarteaucitron.userInterface.css('tarteaucitron', 'display', 'none'); tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block'); } else { @@ -581,6 +598,20 @@ var tarteaucitron = { tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'none'); } }, + "toggle": function (id) { + "use strict"; + var div = document.getElementById(id); + + if (div === null) { + return; + } + + 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), @@ -601,6 +632,45 @@ var tarteaucitron = { main.appendChild(element); }); } + }, + "jsSizing": function (type) { + "use strict"; + var start = 8, + parent, + child, + e = window, + a = 'inner'; + + if (type === 'main') { + // height services list container + tarteaucitron.userInterface.css('tarteaucitronScrollbarParent', 'height', 'auto'); + tarteaucitron.userInterface.css('tarteaucitronScrollbarParent', 'height', (document.getElementById('tarteaucitron').offsetHeight - document.getElementById('tarteaucitronClosePanel').offsetHeight - document.getElementById('tarteaucitronMainLineOffset').offsetHeight - 2) + 'px'); + + if (window.innerWidth === undefined) { + a = 'client'; + e = document.documentElement || document.body; + } + + if (e[a + 'Width'] <= 767) { + start = 12; + } + + // indent the global allow/deny buttons + parent = document.getElementById('tarteaucitronScrollbarParent').offsetWidth; + child = document.getElementById('tarteaucitronScrollbarChild').offsetWidth; + tarteaucitron.userInterface.css('tarteaucitronScrollbarAdjust', 'marginRight', ((parent - child) + start) + 'px'); + + if (e[a + 'Width'] <= 479) { + tarteaucitron.userInterface.css('tarteaucitronScrollbarAdjust', 'marginLeft', '11px'); + } + + } else if (type === 'cookie') { + // height cookies list container + tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'bottom', (parseInt(document.getElementById('tarteaucitronAlertSmall').offsetHeight, 10) + 10) + 'px'); + + tarteaucitron.userInterface.css('tarteaucitronCookiesList', 'height', 'auto'); + tarteaucitron.userInterface.css('tarteaucitronCookiesList', 'height', (document.getElementById('tarteaucitronCookiesListContainer').offsetHeight - document.getElementById('tarteaucitronClosePanelCookie').offsetHeight - document.getElementById('tarteaucitronCookiesTitle').offsetHeight - 6) + 'px'); + } } }, "cookie": { @@ -695,8 +765,6 @@ var tarteaucitron = { if (document.getElementById('tacCL' + key) !== null) { document.getElementById('tacCL' + key).innerHTML = html; } - - tarteaucitron.cookie.number(); }, "crossIndexOf": function (arr, match) { "use strict"; @@ -714,26 +782,45 @@ var tarteaucitron = { nb = (document.cookie !== '') ? cookies.length : 0, html = '', i, + name, + namea, + nameb, + c, + d, s = (nb > 1) ? 's' : '', - name; + savedname, + host = (tarteaucitron.domain !== undefined) ? tarteaucitron.domain : tarteaucitron.cdn; cookies = cookies.sort(function (a, b) { - if (a > b) { return 1; } - if (a < b) { return -1; } + namea = a.split('=', 1).toString().replace(/ /g, ''); + nameb = b.split('=', 1).toString().replace(/ /g, ''); + c = (tarteaucitron.cookie.owner[namea] !== undefined) ? tarteaucitron.cookie.owner[namea] : '0'; + d = (tarteaucitron.cookie.owner[nameb] !== undefined) ? tarteaucitron.cookie.owner[nameb] : '0'; + if (c + a > d + b) { return 1; } + if (c + a < d + b) { return -1; } return 0; }); - - html += '
'; - html += ' ' + nb + ' cookie' + s + ''; - html += '
'; + if (document.cookie !== '') { for (i = 0; i < nb; i += 1) { name = cookies[i].split('=', 1).toString().replace(/ /g, ''); - html += '
'; - html += '
[x] ' + name + ''; - if (tarteaucitron.cookie.owner[name] !== undefined) { - html += '
' + tarteaucitron.cookie.owner[name].join('
'); + if (tarteaucitron.cookie.owner[name] !== undefined && tarteaucitron.cookie.owner[name].join(' // ') !== savedname) { + savedname = tarteaucitron.cookie.owner[name].join(' // '); + html += '
'; + html += '
'; + html += ' ' + tarteaucitron.cookie.owner[name].join(' // '); + html += '
'; + html += '
'; + } else if (tarteaucitron.cookie.owner[name] === undefined && host !== savedname) { + savedname = host; + html += '
'; + html += '
'; + html += ' ' + host; + html += '
'; + html += '
'; } + html += '
'; + html += '
× ' + name + ''; html += '
'; html += '
' + cookies[i].split('=').slice(1).join('=') + '
'; html += '
'; @@ -745,6 +832,8 @@ var tarteaucitron = { html += '
'; } + html += '
'; + if (document.getElementById('tarteaucitronCookiesList') !== null) { document.getElementById('tarteaucitronCookiesList').innerHTML = html; } @@ -752,6 +841,10 @@ var tarteaucitron = { if (document.getElementById('tarteaucitronCookiesNumber') !== null) { document.getElementById('tarteaucitronCookiesNumber').innerHTML = nb; } + + if (document.getElementById('tarteaucitronCookiesNumberBis') !== null) { + document.getElementById('tarteaucitronCookiesNumberBis').innerHTML = nb + ' cookie' + s; + } } }, "getLanguage": function () { @@ -922,7 +1015,7 @@ var tarteaucitron = { html += '
'; html += ' ' + tarteaucitron.services[id].name + ' ' + tarteaucitron.lang.fallback; html += '
'; - html += ' ' + tarteaucitron.lang.allow; + html += ' ✔ ' + tarteaucitron.lang.allow; html += '
'; html += '
'; html += '
'; @@ -969,5 +1062,7 @@ var tarteaucitron = { tarteaucitron.proTemp = ''; } + + tarteaucitron.cookie.number(); } }; \ No newline at end of file