Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic Cookie Consent Bar
@chrisboakes

This comment has been minimized.

Copy link
Owner Author

commented May 23, 2018

var barClassName = 'c-cookie-consent';
var policyText = 'We use cookies to make your experience of our website better. To comply with the E-Privacy Regulations, we need to ask for your consent to set these cookies.';
var additionalLink = null;
var additionalLinkText = null;

window.onload=function(){if(!checkConsent()){var cookieBarClassNames=(additionalLink&&additionalLinkText)?' '+barClassName+'--has-additional':'';var cookieBar=this.createDOMElement('div','',barClassName+cookieBarClassNames);var cookieBarInner=createDOMElement('div','',barClassName+'__inner');cookieBar.appendChild(cookieBarInner);cookieBarInner.appendChild(createDOMElement('p',policyText,barClassName+'__policy'));cookieBarInner.appendChild(createButtons());document.body.insertAdjacentHTML('afterbegin',cookieBar.outerHTML);setAcceptListener()}};createDOMElement=function(type,content,className){var element=document.createElement(type);if(className){element.setAttribute('class',className)}
element.innerHTML=content;return element};createButtons=function(){var buttonsWrap=createDOMElement('div','',barClassName+'__buttons-wrap');buttonsWrap.appendChild(createAcceptButton());if(additionalLink&&additionalLinkText){var buttonContent=createDOMElement('span',additionalLinkText,barClassName+'__button-text');var additionalButton=createDOMElement('a',buttonContent.outerHTML,barClassName+'__button '+barClassName+'__button--additional');additionalButton.setAttribute('href',additionalLink);buttonsWrap.appendChild(additionalButton)}
return buttonsWrap};createAcceptButton=function(){var buttonContent=createDOMElement('span','Accept '+getAccessiblityText(),barClassName+'__button-text');var button=createDOMElement('button',buttonContent.outerHTML,barClassName+'__button '+barClassName+'__button--accept');button.setAttribute('aria-label','Accept consent to set cookies');return button};getAccessiblityText=function(){return createDOMElement('span','consent to set cookies',barClassName+'__accessible-text').outerHTML};checkConsent=function(){var isConsentSet=localStorage.getItem('consent');return(isConsentSet&&isConsentSet==='true')};setConsent=function(){localStorage.setItem('consent',!0);removeCookieBar()};removeCookieBar=function(){var cookieBar=document.querySelector('.'+barClassName);if(cookieBar){cookieBar.outerHTML=""}};setAcceptListener=function(){var acceptButton=document.querySelector('.'+barClassName+'__button--accept');if(acceptButton){acceptButton.addEventListener('click',setConsent)}};
@chrisboakes

This comment has been minimized.

Copy link
Owner Author

commented May 23, 2018

.c-cookie-consent{background-color:#333;bottom:0;color:#fff;font-family:Arial;font-size:16px;left:0;line-height:1.4;position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);width:100%;z-index:1000}.c-cookie-consent__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;max-width:1400px;padding:20px 0;width:100%}@media only screen and (min-width:800px){.c-cookie-consent__inner{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.c-cookie-consent__policy{-webkit-box-flex:2;-ms-flex:2;flex:2;margin:0;padding:0 20px}.c-cookie-consent__buttons-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}@media only screen and (min-width:500px){.c-cookie-consent__buttons-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}@media only screen and (min-width:800px){.c-cookie-consent__buttons-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.c-cookie-consent__button{background:none;background-color:#fff;border:0;color:#333;cursor:pointer;display:block;font-family:Arial;font-size:16px;font-weight:700;margin:20px 20px 0;padding:0;position:relative;text-align:center;text-decoration:none;width:auto}@media only screen and (min-width:500px){.c-cookie-consent__button{max-width:200px;width:calc(50% - 40px)}}@media only screen and (min-width:800px){.c-cookie-consent__button{margin:0 20px}}.c-cookie-consent__button:hover{background-color:#f2f2f2}.c-cookie-consent__button:focus{outline:none}.c-cookie-consent__button-text{display:block;padding:10px 20px}.c-cookie-consent__accessible-text{height:1px;overflow:hidden;position:absolute;top:-10px;width:1px}.c-cookie-consent--has-additional .c-cookie-consent__policy{-webkit-box-flex:.8;-ms-flex:.8;flex:.8}@media only screen and (min-width:1200px){.c-cookie-consent--has-additional .c-cookie-consent__policy{-webkit-box-flex:1.5;-ms-flex:1.5;flex:1.5}}.c-cookie-consent--has-additional .c-cookie-consent__button{max-width:none}
@gemmadlou

This comment has been minimized.

Copy link

commented May 23, 2018

<script>
var barClassName = 'c-cookie-consent';
var policyText = 'We use cookies to make your experience of our website better. To comply with the E-Privacy Regulations, we need to ask for your consent to set these cookies.';
var additionalLink = null;
var additionalLinkText = null;

window.onload=function(){if(!checkConsent()){var cookieBarClassNames=(additionalLink&&additionalLinkText)?' '+barClassName+'--has-additional':'';var cookieBar=this.createDOMElement('div','',barClassName+cookieBarClassNames);var cookieBarInner=createDOMElement('div','',barClassName+'__inner');cookieBar.appendChild(cookieBarInner);cookieBarInner.appendChild(createDOMElement('p',policyText,barClassName+'__policy'));cookieBarInner.appendChild(createButtons());document.body.insertAdjacentHTML('afterbegin',cookieBar.outerHTML);setAcceptListener()}};createDOMElement=function(type,content,className){var element=document.createElement(type);if(className){element.setAttribute('class',className)}
element.innerHTML=content;return element};createButtons=function(){var buttonsWrap=createDOMElement('div','',barClassName+'__buttons-wrap');buttonsWrap.appendChild(createAcceptButton());if(additionalLink&&additionalLinkText){var buttonContent=createDOMElement('span',additionalLinkText,barClassName+'__button-text');var additionalButton=createDOMElement('a',buttonContent.outerHTML,barClassName+'__button '+barClassName+'__button--additional');additionalButton.setAttribute('href',additionalLink);buttonsWrap.appendChild(additionalButton)}
return buttonsWrap};createAcceptButton=function(){var buttonContent=createDOMElement('span','Accept '+getAccessiblityText(),barClassName+'__button-text');var button=createDOMElement('button',buttonContent.outerHTML,barClassName+'__button '+barClassName+'__button--accept');button.setAttribute('aria-label','Accept consent to set cookies');return button};getAccessiblityText=function(){return createDOMElement('span','consent to set cookies',barClassName+'__accessible-text').outerHTML};checkConsent=function(){var isConsentSet=localStorage.getItem('consent');return(isConsentSet&&isConsentSet==='true')};setConsent=function(){localStorage.setItem('consent',!0);removeCookieBar()};removeCookieBar=function(){var cookieBar=document.querySelector('.'+barClassName);if(cookieBar){cookieBar.outerHTML=""}};setAcceptListener=function(){var acceptButton=document.querySelector('.'+barClassName+'__button--accept');if(acceptButton){acceptButton.addEventListener('click',setConsent)}};
</script>

<style>
.c-cookie-consent{background-color:#333;bottom:0;color:#fff;font-family:Arial;font-size:16px;left:0;line-height:1.4;position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);width:100%;z-index:1000}.c-cookie-consent__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;max-width:1400px;padding:20px 0;width:100%}@media only screen and (min-width:800px){.c-cookie-consent__inner{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.c-cookie-consent__policy{-webkit-box-flex:2;-ms-flex:2;flex:2;margin:0;padding:0 20px}.c-cookie-consent__buttons-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}@media only screen and (min-width:500px){.c-cookie-consent__buttons-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}@media only screen and (min-width:800px){.c-cookie-consent__buttons-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.c-cookie-consent__button{background:none;background-color:#fff;border:0;color:#333;cursor:pointer;display:block;font-family:Arial;font-size:16px;font-weight:700;margin:20px 20px 0;padding:0;position:relative;text-align:center;text-decoration:none;width:auto}@media only screen and (min-width:500px){.c-cookie-consent__button{max-width:200px;width:calc(50% - 40px)}}@media only screen and (min-width:800px){.c-cookie-consent__button{margin:0 20px}}.c-cookie-consent__button:hover{background-color:#f2f2f2}.c-cookie-consent__button:focus{outline:none}.c-cookie-consent__button-text{display:block;padding:10px 20px}.c-cookie-consent__accessible-text{height:1px;overflow:hidden;position:absolute;top:-10px;width:1px}.c-cookie-consent--has-additional .c-cookie-consent__policy{-webkit-box-flex:.8;-ms-flex:.8;flex:.8}@media only screen and (min-width:1200px){.c-cookie-consent--has-additional .c-cookie-consent__policy{-webkit-box-flex:1.5;-ms-flex:1.5;flex:1.5}}.c-cookie-consent--has-additional .c-cookie-consent__button{max-width:none}
.c-terms-bar {background-color: black;clear: both;display: block;width: 100%;}
.c-terms-bar__inner {padding: 5px 10px;}
.c-terms-bar__inner {padding: 10px 15px;}
.c-terms-bar p {font-size: 12px !important; margin-bottom: 0 !important;}
.c-terms-bar a {color: white !important;}
</style>

<!-- footer -->
<div class="c-terms-bar">
    <div class="c-terms-bar__inner">
        <p><a href="/privacy-policy.html">Privacy Policy</a></p>
    </div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.