cookiesense
Version:
Easy cookie consent popup manager
223 lines (222 loc) • 12.2 kB
JavaScript
"use strict";
var styles = {
"base": {
css: "position:fixed;bottom:0px;right:0px;z-index:120;font-family:sans-serif;box-sizing:border-box;"
}
};
var templates = {
default: {
css: "border:4px solid rgb(40,40,40);display:flex;flex-direction:column;justify-content:center;background-color:rgb(240,240,240);color:rgb(40,40,40);width:90%;max-width:280px;text-align:center;",
html: "\n <h1 class='cs_cstm-title' style='padding:10px 20px;margin:0;font-size:1.4em;'>We use cookies.</h1>\n <p class='cs_cstm-notice' style='padding:10px 20px;margin:0;'>To use parts of our website, we require your consent to use cookies.</p>\n <div class='buttons' style='display:flex;'>\n <button class='cs_btn-refuse' style='display:none;flex:1;border:none;padding:10px;font-weight:600;cursor:pointer;outline:none;font-size:1em;background-color:rgb(230,230,230);'>Refuse</button> \n <button class='cs_btn-accept' style='flex:1;border:none;padding:10px;font-weight:600;cursor:pointer;outline:none;font-size:1em;background-color:rgb(220,220,220);'>Accept</button>\n </div>\n "
},
bar: {
css: "display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:rgb(1,1,1,.8);color:white;width:100%;text-align:center;padding:10px 30px;",
html: "\n <p class='cs_cstm-notice' style='padding:10px 0px;margin:0;'>To use parts of our website, we require your consent to use cookies.</p>\n <div class='buttons' style='display:flex;'>\n <button class='cs_btn-refuse' style='display:none;flex:1;border:none;padding:10px 20px;font-weight:600;cursor:pointer;outline:none;font-size:1em;background-color:transparent;color:white;'>Refuse</button>\n <button class='cs_btn-accept' style='flex:1;border:none;padding:10px 20px;font-weight:600;cursor:pointer;outline:none;font-size:1em;background-color:transparent;color:white;'>Accept</button>\n </div>\n "
},
};
var CookieSense = (function () {
function CookieSense(params, selector) {
this.params = params;
this.isOpen = true;
this.popup = document.createElement('div');
if (this.params === undefined)
this.params = {};
if (this.params.gutter === undefined && this.params.template !== 'bar')
this.params.gutter = 25;
if (this.params.saverefuse === undefined)
this.params.saverefuse = true;
if (this.params.expiry === undefined)
this.params.expiry = 30;
this.params.name = this.validateCustomName(this.params.name);
if (selector) {
this.handleSelector(selector);
}
else {
this.handleTemplate(this.params.template);
}
if (this.params.choice)
this.handleChoice();
if (this.params.content)
this.handleContent(this.params.content);
this.popup.style.margin = (this.params.gutter || 0) + 'px';
if (this.params.position)
this.updatePosition(this.params.position);
this.bindButtons();
if (this.params.useLocalStorage) {
if (localStorage.getItem(this.params.name + '-consent') === 'true' || ((localStorage.getItem(this.params.name + '-consent') === 'false') && !this.params.persist))
this.close();
}
else {
if ((document.cookie.indexOf(this.params.name + '-consent=true') >= 0) || ((document.cookie.indexOf(this.params.name + '-consent=false') >= 0) && !this.params.persist))
this.close();
}
}
CookieSense.prototype.handleSelector = function (selector) {
if (this.params.template)
throw new Error('A template has been specified alongside a custom selector. Please choose either or!');
var el = document.querySelector(selector);
if (el === null)
throw new Error("Invalid selector. To use a default popup, omit this argument.");
this.popup = el;
this.popup.id = this.params.name;
};
CookieSense.prototype.handleTemplate = function (template) {
if (template === undefined) {
this.warn('No template specified. Using the default template.');
template = 'default';
}
if (!templates[template])
throw new Error("Template specified is invalid. Visit our GitHub page to learn more about the available templates.");
this.popup.innerHTML = templates[template].html;
this.popup.style.cssText += styles.base.css + templates[template].css;
this.popup.id = this.params.name;
document.body.appendChild(this.popup);
this.popup = document.getElementById(this.params.name);
};
CookieSense.prototype.handleChoice = function () {
this.getElement('.cs_btn-refuse').style.display = 'block';
};
CookieSense.prototype.handleContent = function (config) {
if (config.popup) {
this.popup.style.boxShadow = config.popup.boxShadow || this.popup.style.boxShadow;
this.popup.style.maxWidth = config.popup.width || this.popup.style.maxWidth;
this.popup.style.border = config.popup.border || this.popup.style.border;
this.popup.style.cssText += config.popup.css || '';
if (config.popup.bgColor && config.popup.bgColor.indexOf('gradient') >= 0) {
this.popup.style.backgroundImage = config.popup.bgColor;
}
else {
this.popup.style.backgroundColor = config.popup.bgColor || this.popup.style.backgroundColor;
}
}
var errMsg = 'You are trying to customize an element that does not exist in your popup. Element: ';
if (config.title)
this.updateCustomization(this.getElement('.cs_cstm-title', errMsg + '.cs_cstm-title'), config.title);
if (config.notice)
this.updateCustomization(this.getElement('.cs_cstm-notice', errMsg + '.cs_cstm-notice'), config.notice);
if (config.btnAccept)
this.updateCustomization(this.getElement('.cs_btn-accept', errMsg + '.cs_btn-accept'), config.btnAccept);
if (config.btnRefuse)
this.updateCustomization(this.getElement('.cs_btn-refuse', errMsg + '.cs_btn-refuse'), config.btnRefuse);
};
CookieSense.prototype.validateCustomName = function (name) {
if (name === undefined) {
this.warn('A custom name for this cookiesense was not set. If you have multiple cookiesense\'s, please start using custom names.');
return 'default';
}
if (!(/^[A-Za-z]+[\w\-\:\.]*$/).test(name))
throw new Error('Name is invalid. Make sure its valid as an HTML 5 id selector.');
if (document.querySelector('#' + this.params.name) !== null)
throw new Error('You have duplicate cookiesense names. Make sure they are unique!');
return name;
};
CookieSense.prototype.updateCustomization = function (el, config) {
el.style.backgroundColor = config.bgColor || el.style.backgroundColor;
el.style.color = config.textColor || el.style.color;
el.style.border = config.border || el.style.border;
el.style.boxShadow = config.boxShadow || el.style.boxShadow;
el.style.textShadow = config.textShadow || el.style.textShadow;
el.style.cssText += config.css || '';
el.innerText = config.text || el.innerText;
};
CookieSense.prototype.updatePosition = function (position) {
this.popup.style.top = 'inherit';
this.popup.style.right = 'inherit';
this.popup.style.bottom = 'inherit';
this.popup.style.left = 'inherit';
if (position === 'center top') {
this.popup.style.right = 'calc(50% - ((' + this.popup.style.maxWidth + ' + (' + this.params.gutter + 'px) * 2)/2))';
this.popup.style.top = this.params.gutter + 'px';
return;
}
var positions = position.split(" ");
for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
var pos = positions_1[_i];
switch (pos) {
case "top":
this.popup.style.top = '0';
break;
case "right":
this.popup.style.right = '0';
break;
case "bottom":
this.popup.style.bottom = '0';
break;
case "left":
this.popup.style.left = '0';
break;
case "center":
this.popup.style.right = 'calc(50% - ((' + this.popup.style.maxWidth + ' + (' + this.params.gutter + 'px) * 2)/2))';
this.popup.style.bottom = 'calc(50vh - (' + this.popup.clientHeight + 'px + ' + this.params.gutter + 'px) / 2)';
break;
}
}
};
CookieSense.prototype.open = function () { this.popup.style.display = 'inherit'; this.isOpen = true; };
CookieSense.prototype.close = function () { this.popup.style.display = 'none'; this.isOpen = false; };
CookieSense.prototype.reset = function () {
var d = new Date();
d.setTime(d.getTime() - (1000 * 60 * 60 * 24));
var expires = "expires=" + d.toTimeString();
document.cookie = this.params.name + '-consent=; ' + expires;
};
CookieSense.prototype.getElement = function (selector, errMsg) {
var el = document.querySelector('#' + this.params.name + ' ' + selector);
if (el === null && errMsg !== false)
throw new Error(errMsg || "Couldn't find element with selector " + selector + ". Please add it or remove the config which requires it.");
return el;
};
CookieSense.prototype.setConsentStatus = function (status, expiry) {
if (this.params.useLocalStorage) {
localStorage.setItem(this.params.name + '-consent', (status ? 'true' : 'false'));
}
else {
document.cookie = this.params.name + '-consent=' + status + ';expires=' + new Date((new Date()).valueOf() + (1000 * 60 * 60 * 24 * expiry));
}
};
CookieSense.prototype.warn = function (msg) {
if (this.params.warn || this.params.warn === undefined)
console.warn(msg);
};
CookieSense.prototype.check = function () {
var consentName = this.params.name + '-consent';
if (this.params.useLocalStorage) {
if (localStorage.getItem(consentName) === 'true')
return true;
else if (localStorage.getItem(consentName) === 'false')
return false;
}
else {
if (document.cookie.indexOf(consentName + '=true') >= 0)
return true;
else if (document.cookie.indexOf(consentName + '=false') >= 0)
return false;
}
return false;
};
CookieSense.prototype.bindButtons = function () {
this.buttonAccept();
this.buttonRefuse();
};
CookieSense.prototype.buttonAccept = function () {
var _this = this;
this.getElement('.cs_btn-accept', "Accept button not found in template. Add 'cs_btn-accept' class to your accept button.").addEventListener('click', function () {
_this.close();
_this.setConsentStatus(true, _this.params.expiry);
});
};
CookieSense.prototype.buttonRefuse = function () {
var _this = this;
var el = this.getElement('.cs_btn-refuse', false);
if (el === null)
return;
el.addEventListener('click', function () {
_this.close();
if (_this.params.saverefuse)
_this.setConsentStatus(false, _this.params.expiry);
});
};
CookieSense.test = function () { console.log("Cookie Sense - Everything is working correctly! :)"); };
return CookieSense;
}());
window.cookiesense = CookieSense;