Verified Commit 434d98ce authored by Laurent Heirendt's avatar Laurent Heirendt
Browse files

WIP: fix js and css

parent d376262c
<style>
#edp-cookies-banner {
.btn {
display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
background-image: none;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
//border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn.active {
background-color: #D9EDF7;
border-color: #85c5e5;
}
.btn.disabled {
background-color: #D9EDF7;
border-color: #85c5e5;
}
.edp-cookies-accept, .edp-cookies-refuse, .edp-cookies-more {
padding: 10px 25px;
border: none;
font-weight: bold;
background-color: #198cdc;
color: #ffffff !important;
border-radius: 0;
transition: 0.3s ease all;
}
#edp-cookies-banner {
position: relative;
bottom: 0;
background-color: #fff;
......@@ -66,37 +105,104 @@
-webkit-box-sizing: border-box;
}
.btn {
display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
background-image: none;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.epd-cookies-accept.btn, .edp-cookies-refuse.btn, .edp-cookies-more.btn {
padding: 10px 25px;
border: none;
font-weight: bold;
background-color: #198cdc;
color: #ffffff !important;
border-radius: 0;
transition: 0.3s ease all;
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script>
/* Piwik global variable */
var _paq = _paq || [];
function loadPiwik() {
var u = settings.edp_cookies_popup.piwikURL;
_paq.push(['setSiteId', settings.edp_cookies_popup.siteID]);
_paq.push(['setTrackerUrl', u + 'piwik.php']);
_paq.push(['setDoNotTrack', 1]);
_paq.push(['trackPageView']);
_paq.push(['setIgnoreClasses', ['no-tracking', 'colorbox']]);
_paq.push(['enableLinkTracking']);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.type = 'text/javascript';
g.defer = true;
g.async = true;
g.src = u + 'piwik.js';
s.parentNode.insertBefore(g,s);
}
function showEdpCookieBanner() {
var popup = jQuery('#edp-cookies-banner');
popup.hide();
popup.slideDown('slow');
console.log('popped the banner');
}
function clearPiwik() {
var cookies = document.cookie.split('; ');
for (var i in cookies) {
var name = cookies[i].split('=')[0];
if (name.startsWith('_pk_')) {
Cookies.set(name, 0, { expires: -1, path: '/' });
}
}
}
</style>
$( document ).ready(function() {
/* accept */
$('.edp-cookies-accept').click(function (e) {
e.preventDefault(true);
console.log('clicked on accept');
Cookies.set('edp_cookie_agree', 1, { expires: parseInt(200), path: '/' });
jQuery('#edp-cookies-banner').slideUp('slow');
jQuery('.edp-cookies-accept').addClass('disabled');
jQuery('.edp-cookies-refuse').removeClass('disabled');
jQuery(this).blur();
//loadPiwik();
});
/* refuse */
$('.edp-cookies-refuse').click(function (e) {
e.preventDefault(true);
console.log('clicked on refuse');
clearPiwik();
Cookies.set('edp_cookie_agree', 0, { expires: parseInt(200), path: '/' });
jQuery('#edp-cookies-banner').slideUp('slow');
jQuery('.edp-cookies-refuse').addClass('disabled');
jQuery('.edp-cookies-accept').removeClass('disabled');
jQuery(this).blur();
});
/* default mechanism */
if (!jQuery('body').hasClass('edp-cookies-proceed')) {
jQuery('body').addClass('edp-cookies-proceed');
if (window.doNotTrack || navigator.doNotTrack || navigator.msDoNotTrack || ('external' in window && 'msTrackingProtectionEnabled' in window.external)) {
if (window.doNotTrack == "1" || navigator.doNotTrack == "yes" || navigator.doNotTrack == "1" || navigator.msDoNotTrack == "1" || ('external' in window && 'msTrackingPronectionEnabled' in window.external && window.external.msTrackingProtectionEnabled())) {
/* Do Not Track is enabled => stop */
jQuery('.edp-cookies-dnt-inactive').hide(); // Hide no DNT message.
jQuery('.edp-cookies-accept, .edp-cookies-refuse').addClass('disabled');
}
} else {
jQuery('.edp-cookies-dnt-active').hide(); // Hide DNT message.
var edpCookieAgree = Cookies.set('edp_cookie_agree', {path: '/'});
console.log(edpCookieAgree);
if (edpCookieAgree == '0') {
/* Visitor refused our cookies => remove piwik trace if present */
jQuery('.edp-cookies-refuse').addClass('disabled');
clearPiwik();
}
else if (edpCookieAgree == '1') {
/* Visitor accepted our cookies => load Piwik */
jQuery('.edp-cookies-accept').addClass('disabled');
loadPiwik();
}
else {
/* Visitor did not choose yet */
showEdpCookieBanner();
}
}
}
});
</script>
{% comment %}
Insert here CSS <link/> tags, and <style/> tags if needed.
{% endcomment %}
\ No newline at end of file
{% endcomment %}
......@@ -41,9 +41,8 @@
If you permit us, we will use those means to collect data on your visits for aggregated statistics to improve our service.</p>
</div>
<div class="banner-buttons">
<button class="btn edp-cookies-refuse" type="button">Accept cookies for aggregated statistics</button>
<button class="btn edp-cookies-accept" type="button">Accept cookies for aggregated statistics</button>
<button class="btn edp-cookies-refuse" type="button">No thanks, only technically necessary cookies</button>
<a class="btn btn-default edp-cookies-more" href="/about-edps/legal-notices_en">More information</a>
<a class="btn edp-cookies-more" href="/about-edps/legal-notices_en">More information</a>
</div>
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment