polynux
/
tarteauxmyrtilles
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add a wrapper with aria-hidden when dialog is open + update CSS

This commit is contained in:
Lena 2018-08-14 13:42:49 +02:00
parent b79fbec9f7
commit 49c6cc77cd
2 changed files with 78 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/tarteaucitron.css
View File

@ -3,7 +3,6 @@
height: 100%; height: 100%;
} }
a:focus, button:focus { a:focus, button:focus {
outline: 2px solid #cb3333; outline: 2px solid #cb3333;
} }
@ -47,6 +46,18 @@ a:focus, button:focus {
#tarteaucitron #tarteaucitronServices .tarteaucitronTitle { #tarteaucitron #tarteaucitronServices .tarteaucitronTitle {
text-align: left !important; text-align: left !important;
} }
.tarteaucitronName h2 {
max-width: 80%;
}
#tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk {
text-align: center !important;
}
#tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk button {
margin-bottom: 5px;
}
} }
@media screen and (min-width:768px) and (max-width:991px) { @media screen and (min-width:768px) and (max-width:991px) {
@ -77,6 +88,12 @@ a:focus, button:focus {
text-decoration: none; text-decoration: none;
} }
#tarteaucitronRoot button {
background: transparent;
border: 0;
}
#tarteaucitronAlertBig strong, #tarteaucitronAlertSmall strong,
#tarteaucitronAlertBig a, #tarteaucitronAlertSmall a { #tarteaucitronAlertBig a, #tarteaucitronAlertSmall a {
color: #fff; color: #fff;
} }
@ -89,6 +106,12 @@ a:focus, button:focus {
#tarteaucitron ul { #tarteaucitron ul {
padding: 0; padding: 0;
} }
.cookie-list {
list-style: none;
padding: 0;
margin: 0;
}
/*** /***
* Root div added just before </body> * Root div added just before </body>
*/ */
@ -188,8 +211,8 @@ a:focus, button:focus {
position: relative; position: relative;
} }
#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle, #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle button,
#tarteaucitron #tarteaucitronServices .tarteaucitronTitle, #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button,
#tarteaucitron #tarteaucitronInfo, #tarteaucitron #tarteaucitronInfo,
#tarteaucitron #tarteaucitronServices .tarteaucitronDetails { #tarteaucitron #tarteaucitronServices .tarteaucitronDetails {
background: #333; background: #333;
@ -224,6 +247,7 @@ a:focus, button:focus {
#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle { #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronTitle {
padding: 5px 10px; padding: 5px 10px;
margin: 0;
} }
#tarteaucitron #tarteaucitronInfo, #tarteaucitron #tarteaucitronInfo,
@ -275,7 +299,7 @@ a:focus, button:focus {
margin-top: 2px; margin-top: 2px;
} }
#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName b { #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName button {
color: #fff; color: #fff;
} }
@ -348,12 +372,12 @@ a:focus, button:focus {
} }
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert, #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert,
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert b { #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
font: 15px verdana; font: 15px verdana;
color: #fff; color: #fff;
} }
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert b { #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
font-weight: 700; font-weight: 700;
} }
@ -487,7 +511,7 @@ a:focus, button:focus {
text-align: left; text-align: left;
} }
#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList b { #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList strong {
color: #333; color: #333;
} }
@ -498,7 +522,7 @@ a:focus, button:focus {
text-align: left; text-align: left;
} }
#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesTitle b { #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesTitle strong {
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
} }
@ -523,7 +547,7 @@ a:focus, button:focus {
width: 50%; width: 50%;
} }
#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListLeft a b { #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain .tarteaucitronCookiesListLeft a strong {
color: darkred; color: darkred;
} }
@ -557,7 +581,7 @@ a:focus, button:focus {
vertical-align: middle; vertical-align: middle;
} }
.tac_activate .tac_float b { .tac_activate .tac_float strong {
color: #fff; color: #fff;
} }

56
tarteaucitron.js
View File

@ -324,7 +324,7 @@ var tarteaucitron = {
html += ' ' + tarteaucitron.lang.close; html += ' ' + tarteaucitron.lang.close;
html += ' </button>'; html += ' </button>';
html += ' <div class="tarteaucitronCookiesListMain" id="tarteaucitronCookiesTitle">'; html += ' <div class="tarteaucitronCookiesListMain" id="tarteaucitronCookiesTitle">';
html += ' <strong id="tarteaucitronCookiesNumberBis">0 cookie</strong>'; html += ' <h2 id="tarteaucitronCookiesNumberBis">0 cookie</h2>';
html += ' </div>'; html += ' </div>';
html += ' <div id="tarteaucitronCookiesList"></div>'; html += ' <div id="tarteaucitronCookiesList"></div>';
html += ' </div>'; html += ' </div>';
@ -336,10 +336,27 @@ var tarteaucitron = {
tarteaucitron.addScript(tarteaucitron.cdn + 'advertising.js?v=' + tarteaucitron.version, '', function () { tarteaucitron.addScript(tarteaucitron.cdn + 'advertising.js?v=' + tarteaucitron.version, '', function () {
if (tarteaucitronNoAdBlocker === true || defaults.adblocker === false) { if (tarteaucitronNoAdBlocker === true || defaults.adblocker === false) {
// create wrapper container
var wrapper = document.createElement('div');
wrapper.id = "contentWrapper";
while (document.body.firstChild)
{
wrapper.appendChild(document.body.firstChild);
}
// Append the wrapper to the body
document.body.appendChild(wrapper);
div.id = 'tarteaucitronRoot'; div.id = 'tarteaucitronRoot';
body.appendChild(div, body); body.appendChild(div, body);
div.innerHTML = html; div.innerHTML = html;
// move el into wrapper
//wrapper.appendChild(el);
if (tarteaucitron.job !== undefined) { if (tarteaucitron.job !== undefined) {
tarteaucitron.job = tarteaucitron.cleanArray(tarteaucitron.job); tarteaucitron.job = tarteaucitron.cleanArray(tarteaucitron.job);
for (index = 0; index < tarteaucitron.job.length; index += 1) { for (index = 0; index < tarteaucitron.job.length; index += 1) {
@ -384,16 +401,28 @@ var tarteaucitron = {
if (defaults.adblocker === true) { if (defaults.adblocker === true) {
setTimeout(function () { setTimeout(function () {
if (tarteaucitronNoAdBlocker === false) { if (tarteaucitronNoAdBlocker === false) {
html = '<div id="tarteaucitronAlertBig" class="tarteaucitronAlertBig' + orientation + '" style="display:block">'; html = '<div id="tarteaucitronAlertBig" class="tarteaucitronAlertBig' + orientation + '" style="display:block" role="alert" aria-live="polite">';
html += ' <span id="tarteaucitronDisclaimerAlert">'; html += ' <p id="tarteaucitronDisclaimerAlert">';
html += ' ' + tarteaucitron.lang.adblock + '<br/>'; html += ' ' + tarteaucitron.lang.adblock + '<br/>';
html += ' <strong>' + tarteaucitron.lang.adblock_call + '</strong>'; html += ' <strong>' + tarteaucitron.lang.adblock_call + '</strong>';
html += ' </span>'; html += ' </p>';
html += ' <button id="tarteaucitronPersonalize" onclick="location.reload();">'; html += ' <button id="tarteaucitronPersonalize" onclick="location.reload();">';
html += ' ' + tarteaucitron.lang.reload; html += ' ' + tarteaucitron.lang.reload;
html += ' </button>'; html += ' </button>';
html += '</div>'; html += '</div>';
html += '<div id="tarteaucitronPremium"></div>'; html += '<div id="tarteaucitronPremium"></div>';
// create wrapper container
var wrapper = document.createElement('div');
wrapper.id = "contentWrapper";
while (document.body.firstChild)
{
wrapper.appendChild(document.body.firstChild);
}
// Append the wrapper to the body
document.body.appendChild(wrapper);
div.id = 'tarteaucitronRoot'; div.id = 'tarteaucitronRoot';
body.appendChild(div, body); body.appendChild(div, body);
div.innerHTML = html; div.innerHTML = html;
@ -653,6 +682,7 @@ var tarteaucitron = {
tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block'); tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'block');
tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'display', 'none'); tarteaucitron.userInterface.css('tarteaucitronCookiesListContainer', 'display', 'none');
document.getElementById('tarteaucitronClosePanel').focus(); document.getElementById('tarteaucitronClosePanel').focus();
document.getElementById('contentWrapper').setAttribute("aria-hidden", "true");
document.getElementsByTagName('body')[0].classList.add('modal-open'); document.getElementsByTagName('body')[0].classList.add('modal-open');
tarteaucitron.userInterface.jsSizing('main'); tarteaucitron.userInterface.jsSizing('main');
}, },
@ -675,6 +705,7 @@ var tarteaucitron = {
tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'none'); tarteaucitron.userInterface.css('tarteaucitronBack', 'display', 'none');
} }
document.getElementById('tarteaucitronCloseAlert').focus(); document.getElementById('tarteaucitronCloseAlert').focus();
document.getElementById('contentWrapper').setAttribute("aria-hidden", "false");
document.getElementsByTagName('body')[0].classList.remove('modal-open'); document.getElementsByTagName('body')[0].classList.remove('modal-open');
}, },
@ -1027,24 +1058,25 @@ var tarteaucitron = {
if (tarteaucitron.cookie.owner[name] !== undefined && tarteaucitron.cookie.owner[name].join(' // ') !== savedname) { if (tarteaucitron.cookie.owner[name] !== undefined && tarteaucitron.cookie.owner[name].join(' // ') !== savedname) {
savedname = tarteaucitron.cookie.owner[name].join(' // '); savedname = tarteaucitron.cookie.owner[name].join(' // ');
html += '<div class="tarteaucitronHidden">'; html += '<div class="tarteaucitronHidden">';
html += ' <div class="tarteaucitronTitle">'; html += ' <h3 class="tarteaucitronTitle">';
html += ' ' + tarteaucitron.cookie.owner[name].join(' // '); html += ' ' + tarteaucitron.cookie.owner[name].join(' // ');
html += ' </div>'; html += ' </h3>';
html += '</div>'; html += '</div><ul class="cookie-list">';
} else if (tarteaucitron.cookie.owner[name] === undefined && host !== savedname) { } else if (tarteaucitron.cookie.owner[name] === undefined && host !== savedname) {
savedname = host; savedname = host;
html += '<div class="tarteaucitronHidden">'; html += '<div class="tarteaucitronHidden">';
html += ' <div class="tarteaucitronTitle">'; html += ' <h3 class="tarteaucitronTitle">';
html += ' ' + host; html += ' ' + host;
html += ' </div>'; html += ' </h3>';
html += '</div>'; html += '</div><ul class="cookie-list">';
} }
html += '<div class="tarteaucitronCookiesListMain">'; html += '<li class="tarteaucitronCookiesListMain">';
html += ' <div class="tarteaucitronCookiesListLeft"><button onclick="tarteaucitron.cookie.purge([\'' + cookies[i].split('=', 1) + '\']);tarteaucitron.cookie.number();tarteaucitron.userInterface.jsSizing(\'cookie\');return false"><strong>&times;</strong></button> <strong>' + name + '</strong>'; html += ' <div class="tarteaucitronCookiesListLeft"><button onclick="tarteaucitron.cookie.purge([\'' + cookies[i].split('=', 1) + '\']);tarteaucitron.cookie.number();tarteaucitron.userInterface.jsSizing(\'cookie\');return false"><strong>&times;</strong></button> <strong>' + name + '</strong>';
html += ' </div>'; html += ' </div>';
html += ' <div class="tarteaucitronCookiesListRight">' + cookies[i].split('=').slice(1).join('=') + '</div>'; html += ' <div class="tarteaucitronCookiesListRight">' + cookies[i].split('=').slice(1).join('=') + '</div>';
html += '</div>'; html += '</li>';
} }
html += '</ul>';
} else { } else {
html += '<div class="tarteaucitronCookiesListMain">'; html += '<div class="tarteaucitronCookiesListMain">';
html += ' <div class="tarteaucitronCookiesListLeft"><strong>-</strong></div>'; html += ' <div class="tarteaucitronCookiesListLeft"><strong>-</strong></div>';