|
--- |
|
|
|
--- |
|
|
|
<script is:inline> |
|
var CookieBanner = (function () { |
|
return { |
|
createCookieWhenBannerIsShown: false, |
|
createCookieWhenAcceptIsClicked: true, |
|
cookieDuration: 30, // Number of days before the cookie expires, and the banner reappears |
|
cookieName: 'cookieConsent', // Name of our cookie |
|
cookieValue: 'accepted', // Value of cookie |
|
|
|
_createDiv: function (html) { |
|
var bodytag = document.getElementsByTagName('body')[0]; |
|
var div = document.createElement('div'); |
|
div.setAttribute('id', 'cookie-law'); |
|
div.innerHTML = html; |
|
|
|
// bodytag.appendChild(div); // Adds the Cookie Law Banner just before the closing </body> tag |
|
// or |
|
bodytag.insertBefore(div, bodytag.firstChild); // Adds the Cookie Law Banner just after the opening <body> tag |
|
|
|
document.getElementsByTagName('body')[0].className += ' cookiebanner'; //Adds a class tothe <body> tag when the banner is visible |
|
|
|
if (CookieBanner.createCookieWhenBannerIsShown) { |
|
CookieBanner.createAcceptCookie(); |
|
} |
|
}, |
|
|
|
_createCookie: function (name, value, days) { |
|
var expires; |
|
if (days) { |
|
var date = new Date(); |
|
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); |
|
expires = '; expires=' + date.toGMTString(); |
|
} else { |
|
expires = ''; |
|
} |
|
document.cookie = name + '=' + value + expires + '; path=/'; |
|
}, |
|
|
|
_checkCookie: function (name) { |
|
var nameEQ = name + '='; |
|
var ca = document.cookie.split(';'); |
|
for (var i = 0; i < ca.length; i++) { |
|
var c = ca[i]; |
|
while (c.charAt(0) == ' ') c = c.substring(1, c.length); |
|
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); |
|
} |
|
return null; |
|
}, |
|
|
|
_eraseCookie: function (name) { |
|
CookieBanner._createCookie(name, '', -1); |
|
}, |
|
|
|
createAcceptCookie: function () { |
|
CookieBanner._createCookie(CookieBanner.cookieName, CookieBanner.cookieValue, CookieBanner.cookieDuration); // Create the cookie |
|
}, |
|
|
|
closeBanner: function () { |
|
var element = document.getElementById('cookie-law'); |
|
element.parentNode.removeChild(element); |
|
}, |
|
|
|
accept: function () { |
|
CookieBanner.createAcceptCookie(); |
|
CookieBanner.closeBanner(); |
|
}, |
|
|
|
showUnlessAccepted: function (html) { |
|
//alert(CookieBanner._checkCookie(CookieBanner.cookieName)); |
|
//alert(document.cookie); |
|
if (CookieBanner._checkCookie(CookieBanner.cookieName) != CookieBanner.cookieValue) { |
|
CookieBanner._createDiv(html); |
|
} |
|
}, |
|
}; |
|
})(); |
|
|
|
window.onload = function () { |
|
var html = |
|
'<div>' + 'This website uses cookies to measure performance. ' + '<a href="/privacy">Learn more</a>. ' + '</div>'; |
|
|
|
// Add the accept button |
|
html += '<div><a href="javascript:void(0);" onclick="CookieBanner.accept();"><span>Accept</span></a></div>'; |
|
|
|
CookieBanner.showUnlessAccepted(html); |
|
}; |
|
</script> |
|
|
|
<style is:global> |
|
#cookie-law { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
padding: 20px 5%; |
|
background-color: #e8e8e4; |
|
width: 100%; |
|
z-index: 999; |
|
font-size: 14px; |
|
} |
|
#cookie-law > div { |
|
color: rgb(79, 79, 79); |
|
} |
|
#cookie-law > div:first-child { |
|
padding-right: 40px; |
|
} |
|
#cookie-law > div:first-child > a { |
|
text-decoration: underline; |
|
} |
|
#cookie-law > div:last-child { |
|
vertical-align: middle; |
|
} |
|
#cookie-law > div:last-child > a { |
|
padding: 10px 20px; |
|
background-color: rgb(243, 131, 4); |
|
color: black; |
|
border: 1px solid black; |
|
text-decoration: none; |
|
} |
|
|
|
#cookie-law > div:last-child > a:hover { |
|
background-color: rgb(168, 98, 18); |
|
color: white; |
|
} |
|
</style> |
To use in Astro - import the component at the top of your root Layout file and call the component in the body section.