Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ES6 Class for UK Cookies Message pop up
"use strict";
/**
* CookiesPopup
* a simple class to check for, set, a cookie if not currently set,
* and inform the user that cookies are present
*/
/**
* set up some private vars
*/
const _ExpireIn = Symbol();
let _CookieName = Symbol();
let _cookieMessage = Symbol();
export default class CookiesPopup {
/**
* @param string cookieName
* @param string message
*/
constructor(cookieName, message) {
//-- cookies name
this[_CookieName] = (cookieName !=='')
? cookieName
: 'ImACookie';
// set expiry date in days
this[_ExpireIn] = 365;
//-- cookie message
this[_cookieMessage] = (message !=='')
? message
: 'Please except the cookies I add';
}
/**
* init method
*/
init (){
//-- check if cookie is set
this._checkCookie();
}
/**
* Display message and set cookie if cookie not set
*/
_displayMessage(){
//-- construct the message and container
var message = this._constructMessage();
//--display the message
document.body.appendChild(message);
//-- assign an event listener for the close btn
document.getElementById('close-button').addEventListener('click', this._removeMessage);
//-- set the cookie and time
this._setCookie();
}
/**
* Remove the cookies message on click
*/
_removeMessage(evt){
evt.preventDefault();
var wrapper = this.parentNode.parentNode;
wrapper.className += " dismiss";
//-- complete the remove message
}
/**
* check for the required cookie
*/
_checkCookie() {
//-- get the required cookie
var cookie = this._getCookie();
//-- check if we do have a cookie already set
if (cookie !=="") return;
//-- if not lets display message and set it
this._displayMessage(cookie);
}
/**
* get the required cookie
*/
_getCookie(){
var name = this[_CookieName] + "=";
var ca = document.cookie.split(';');
for(let i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
/**
* set a cookie
*/
_setCookie() {
var d = new Date(),
cvalue = this._createCookieValue();
d.setTime(d.getTime() + (this[_ExpireIn]*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = this[_CookieName] + "=" + cvalue + "; " + expires;
}
/**
* create a cookie value
*/
_createCookieValue (s) {
var a = () => { return (((1 + Math.random()) * 65536) | 0).toString(16).substring(1)};
return (a() + a() + "-" + a() + "-" + a() + a() + a())
};
/**
* construct the message container and message
*/
_constructMessage() {
//-- construct the container
var cookiewrapper = document.createElement('div');
cookiewrapper.className = 'cookies-wrapper';
//-- create the message area
var cookiemessage = document.createElement('div');
cookiemessage.className = 'cookies-message';
var cookietxt = document.createTextNode(this[_cookieMessage]);
cookiemessage.appendChild(cookietxt);
//-- create the close button
var closeButtonWrapper = document.createElement('div');
closeButtonWrapper.className = 'button-wrapper';
var closebutton = document.createElement('button');
closebutton.id = 'close-button';
var closeTxt = document.createTextNode('\u00d7');
closebutton.appendChild(closeTxt);
closeButtonWrapper.appendChild(closebutton);
//-- lets string it all together
cookiewrapper.appendChild(cookiemessage);
cookiewrapper.appendChild(closeButtonWrapper);
//-- return for output
return cookiewrapper;
}
}
/**
* Example usage of the Cookies Popup Files
*/
import Cookies from './CookiesPopup';
let CookiesMessage = 'We use cookies to ensure that we give you the best experience on our website. By clikcing on the "Close" icon, you are agreeing to allowing my site to use 3rd party cookies.';
//-- init the class
let Cookie = new Cookies('CookiePopUpMessage',CookiesMessage);
//-- start the cookie process
Cookie.init();
/**
* An example of using the Cookies Class within another via extends
*/
import Cookies from './CookiesPopup';
export default class Main extends Cookies {
constructor() {
let CookiesMessage = 'We use cookies to ensure that we give you the best experience on our website. By clikcing on the "Close" icon, you are agreeing to allowing my site to use 3rd party cookies.';
//-- init the cookies class
super('CookiePopUpMessage',CookiesMessage);
}
initMain(name){
//-- call the cookies init method to start the process
super.init();
}
}
/**
* Example Styles used for the above Cookies pop up code
*/
.cookies-wrapper {
position: fixed;
z-index: 4000;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: 100%;
display: table;
background: rgba(0,0,0,.5);
-webkit-transition: opacity 300ms ease;
-moz-transition: opacity 300ms ease;
-o-transition: opacity 300ms ease;
transition: opacity 300ms ease;
}
.cookies-wrapper.dismiss {opacity: 0;}
.cookies-wrapper .cookies-message {
margin: 0;
padding: 15px 10px;
display: table-cell;
vertical-align: middle;
font-size: 13px;
font-family: sans-serif;
color: white;
text-align: left;
width: 93%;
}
.cookies-wrapper .button-wrapper {
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
width: 6%;
pointer-events: auto;
}
.cookies-wrapper .button-wrapper button {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
font-size: 16px;
font-family: sans-serif;
font-weight: 700;
color: white;
background: transparent;
border-left: 1px rgba(0,0,0,.2) solid;
cursor: pointer;
outline: none;
-webkit-transition: background 300ms ease;
-moz-transition: background 300ms ease;
-o-transition: background 300ms ease;
transition: background 300ms ease;
}
.cookies-wrapper .button-wrapper button:hover {
background: rgba(0,0,0,.8);
}
@media (max-width: 800px) {
.cookies-wrapper .cookies-message {width: 90%; font-size: 11px}
.cookies-wrapper .button-wrapper{width: 10%}
}
@media (max-width: 400px) {
.cookies-wrapper .cookies-message {width: 86%}
.cookies-wrapper .button-wrapper{width: 13%}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment