|
class CookieBanner { |
|
|
|
dropCookie = true; // false disables the Cookie, allowing you to style the banner |
|
cookieDuration = 14; // Number of days before the cookie expires, and the banner reappears |
|
cookieName = 'complianceCookie'; // Name of our cookie |
|
cookieValue = 'on'; // Value of cookie |
|
initialBodyPaddingTop = 0; |
|
message = 'Our website uses cookies. By continuing we assume your permission to deploy cookies, as detailed in our {{privacyPolicy}}.'; // Message displayed on banner |
|
privacyPolicy = 'privacy policy'; // Privacy policy page text |
|
privacyPolicyPage = '/privacy-policy/'; // Privacy policy page URL |
|
closeText = "Close X"; |
|
bodytag; |
|
background = '#fff'; |
|
fontColor = '#000'; |
|
fontSize = '13px'; |
|
boxShadow = '0 3px 0 0 rgba(0,0,0,0.1)' |
|
|
|
constructor(dto = {}) { |
|
|
|
Object.assign(this, dto); |
|
|
|
window.onload = () => { |
|
this.bodytag = document.getElementsByTagName('body')[0]; |
|
this.initialBodyPaddingTop = this.bodytag.style.paddingTop; |
|
|
|
if (this.checkCookie(this.cookieName) != this.cookieValue) { |
|
this.createDiv(); |
|
} |
|
} |
|
} |
|
|
|
createDiv() { |
|
const div = document.createElement('div'); |
|
div.setAttribute('id', 'cookie-law'); |
|
div.style.background = this.background; |
|
div.style.color = this.fontColor; |
|
div.style.fontSize = this.fontSize; |
|
div.style.padding = '.5em'; |
|
div.style.position = 'fixed'; |
|
div.style.top = '0'; |
|
div.style.width = '100%'; |
|
div.style.zIndex = "1"; |
|
div.style.boxShadow = this.boxShadow; |
|
let innerHTML = ` |
|
<p>${this.message} |
|
<a id="cookieBannerClose" class="close-cookie-banner" href="javascript:void(0);""> |
|
<span>${this.closeText}</span> |
|
</a> |
|
</p> |
|
` |
|
innerHTML = innerHTML.replace('{{privacyPolicy}}', `<a href="${this.privacyPolicyPage}" title=${this.privacyPolicy} rel="nofollow" target="_blank">${this.privacyPolicy}</a>`); |
|
div.innerHTML = innerHTML; |
|
this.bodytag.insertBefore(div, this.bodytag.firstChild); // Adds the Cookie Law Banner just after the opening <body> tag |
|
|
|
document.getElementById('cookieBannerClose').addEventListener('click', () => { |
|
this.removeMe(); |
|
}); |
|
|
|
const bannerHeight = document.getElementById('cookie-law').offsetHeight; |
|
this.bodytag.style.paddingTop = `${bannerHeight}px`; |
|
|
|
document.getElementsByTagName('body')[0].className += ' cookiebanner'; //Adds a class tothe <body> tag when the banner is visible |
|
} |
|
|
|
createCookie(name, value, days) { |
|
if (days) { |
|
var date = new Date(); |
|
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); |
|
var expires = "; expires=" + date.toGMTString(); |
|
} else var expires = ""; |
|
if (this.dropCookie) { |
|
document.cookie = name + "=" + value + expires + "; path=/"; |
|
} |
|
} |
|
|
|
checkCookie(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(name) { |
|
this.createCookie(name, "", -1); |
|
} |
|
|
|
removeMe() { |
|
var element = document.getElementById('cookie-law'); |
|
element.parentNode.removeChild(element); |
|
this.bodytag.style.paddingTop = this.initialBodyPaddingTop; |
|
|
|
this.createCookie(this.cookieName, this.cookieValue, this.cookieDuration); // Create the cookie |
|
} |
|
} |
|
|
|
const cookieBanner = new CookieBanner({ |
|
dropCookie: true, |
|
cookieDuration: 14, |
|
message: 'Our website uses cookies. By continuing we assume your permission to deploy cookies, as detailed in our {{privacyPolicy}}.', |
|
privacyPolicy: 'privacy policy', |
|
privacyPolicyPage: '/privacy-policy/', |
|
closeText: "Close X", |
|
background: '#fff', |
|
fontColor: '#000', |
|
fontSize: '16px', |
|
boxShadow: '0 3px 0 0 rgba(0,0,0,0.1)' |
|
}); |
