kovarp-jquery-cookiebar
Version:
Simple jQuery plugin for add information bar about cookies using.
245 lines (208 loc) • 8.59 kB
JavaScript
/*!
* Cookie Bar component (https://github.com/kovarp/jquery.cookieBar)
* Version 1.2.6
*
* Copyright 2020 Pavel Kovář - Frontend developer [www.pavelkovar.cz]
* @license: MIT (https://github.com/kovarp/jquery.cookieBar/blob/master/LICENSE)
*/
if (typeof jQuery === 'undefined') {
throw new Error('Cookie Bar component requires jQuery')
}
/**
* ------------------------------------------------------------------------
* Cookie Bar component
* ------------------------------------------------------------------------
*/
(function ( $ ) {
// Global variables
var cookieBar, config;
// Cookie Bar translations
var translation = [];
translation['en'] = {
message: 'We use cookies to provide our services. By using this website, you agree to this.',
acceptText: 'OK',
infoText: 'More information',
privacyText: 'Privacy protection'
};
translation['de'] = {
message: 'Zur Bereitstellung von Diensten verwenden wir Cookies. Durch die Nutzung dieser Website stimmen Sie zu.',
acceptText: 'OK',
infoText: 'Mehr Informationen',
privacyText: 'Datenschutz'
};
translation['cs'] = {
message: 'K poskytování služeb využíváme soubory cookie. Používáním tohoto webu s tím souhlasíte.',
acceptText: 'V pořádku',
infoText: 'Více informací',
privacyText: 'Ochrana soukromí'
};
translation['sk'] = {
message: 'Na poskytovanie služieb využívame súbory cookie. Používaním tohto webu s tým súhlasíte.',
acceptText: 'V poriadku',
infoText: 'Viac informácií',
privacyText: 'Ochrana súkromia'
};
translation['ru'] = {
message: 'Данный сайт использует для предоставления услуг, персонализации объявлений и анализа трафика печенье. Используя этот сайт, вы соглашаетесь.',
acceptText: 'Я согласен',
infoText: 'Больше информации',
privacyText: 'Конфиденциальность'
};
translation['ua'] = {
message: 'Ми використовуємо файли cookies для надання послуг. Використовуючи наш сайт, ви погоджуєтесь на це.',
acceptText: 'Гаразд',
infoText: 'Більше інформації',
privacyText: 'Захист конфіденційності'
};
translation['pl'] = {
message: 'Używamy plików cookie w celu świadczenia naszych usług. Korzystając z tej strony, zgadzasz się na to.',
acceptText: 'Dobrze',
infoText: 'Więcej informacji',
privacyText: 'Ochrona prywatności'
};
translation['es'] = {
message: 'Este sitio web utiliza cookies para mejorar su experiencia. Si continúas navegando, consideraremos que aceptas su uso.',
acceptText: 'Aceptar',
infoText: 'Más información',
privacyText: 'Protección de datos'
};
var methods = {
init : function(options) {
cookieBar = '#cookie-bar';
var defaults = {
infoLink: 'https://www.google.com/policies/technologies/cookies/',
infoTarget: '_blank',
wrapper: 'body',
expireDays: 365,
style: 'top',
language: $('html').attr('lang') || 'en',
privacy: false,
privacyTarget: '_blank',
privacyContent: null
};
config = $.extend(defaults, options);
if(!translation[config.language]) {
config.language = 'en';
}
if(methods.getCookie('cookies-state') !== 'accepted') {
methods.displayBar();
}
// Accept cookies
$(document).on('click', cookieBar + ' .cookie-bar__btn', function(e) {
e.preventDefault();
methods.setCookie('cookies-state', 'accepted', config.expireDays);
methods.hideBar();
});
// Open privacy info popup
$(document).on('click', '[data-toggle="cookieBarPrivacyPopup"]', function(e) {
e.preventDefault();
methods.showPopup();
});
// Close privacy info popup
$(document).on('click', '.cookie-bar-privacy-popup, .cookie-bar-privacy-popup__dialog__close', function(e) {
methods.hidePopup();
});
$(document).on('click', '.cookie-bar-privacy-popup__dialog', function(e) {
e.stopPropagation();
});
},
displayBar : function() {
if (!$.trim($(config.wrapper).html())) {
$(config.wrapper).empty();
}
// Display Cookie Bar on page
var acceptButton = '<button type="button" class="cookie-bar__btn">' + translation[config.language].acceptText + '</button>';
var infoLink = '<a href="' + config.infoLink + '" target="' + config.infoTarget + '" class="cookie-bar__link cookie-bar__link--cookies-info">' + translation[config.language].infoText + '</a>';
var privacyButton = '';
if (config.privacy) {
if (config.privacy === 'link') {
privacyButton = '<a href="' + config.privacyContent + '" target="' + config.privacyTarget + '" class="cookie-bar__link cookie-bar__link--privacy-info">' + translation[config.language].privacyText + '</a>';
} else if (config.privacy === 'bs_modal') {
privacyButton = '<a href="' + config.privacyContent + '" data-toggle="modal" class="cookie-bar__link cookie-bar__link--privacy-info">' + translation[config.language].privacyText + '</a>';
} else if (config.privacy === 'popup') {
methods.renderPopup();
privacyButton = '<a href="#" data-toggle="cookieBarPrivacyPopup" class="cookie-bar__link cookie-bar__link--privacy-info">' + translation[config.language].privacyText + '</a>';
}
}
var template = '<div id="cookie-bar" class="cookie-bar cookie-bar--' + config.style + '"><div class="cookie-bar__inner"><span class="cookie-bar__message">' + translation[config.language].message + '</span><span class="cookie-bar__buttons">' + acceptButton + infoLink + privacyButton + '</span></div></div>';
if (config.style === 'top') {
$(config.wrapper).prepend(template);
} else {
$(config.wrapper).append(template);
}
$('body').addClass('has-cookie-bar');
if (config.style === 'bottom') {
$(config.wrapper).css('padding-bottom', $('#cookie-bar').outerHeight());
}
},
hideBar : function() {
// Hide Cookie Bar
$(cookieBar).slideUp();
$('body').removeClass('has-cookie-bar');
if (config.style === 'bottom') {
$(config.wrapper).css('padding-bottom');
}
},
renderPopup : function() {
var popup = $('<div id="cookieBarPrivacyPopup" class="cookie-bar-privacy-popup cookie-bar-privacy-popup--hidden"><div class="cookie-bar-privacy-popup__dialog"><button type="button" class="cookie-bar-privacy-popup__dialog__close"></button></div></div>');
$('body').append(popup);
$('.cookie-bar-privacy-popup__dialog', popup).append(config.privacyContent);
},
showPopup : function() {
$('#cookieBarPrivacyPopup').removeClass('cookie-bar-privacy-popup--hidden');
},
hidePopup : function() {
$('#cookieBarPrivacyPopup').addClass('cookie-bar-privacy-popup--hidden');
},
addTranslation : function(lang, translate) {
translation[lang] = translate;
},
switchTranslation : function(lang) {
// Not current lang & just bar
if(lang !== config.language && !config.privacy) {
// Check loaded translation
if(!translation[lang]) {
config.language = 'en';
} else {
config.language = lang;
}
// Rebuild bar if it's visible
if(methods.getCookie('cookies-state') !== 'accepted') {
methods.displayBar();
}
}
},
setCookie : function(cname, cvalue, exdays) {
// Helpful method for set cookies
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
},
getCookie : function(cname) {
// Helpful method for get cookies
var name = cname + "=";
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);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return '';
}
};
// Create jQuery cookieBar function
$.cookieBar = function (methodOrOptions) {
if ( methods[methodOrOptions] ) {
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + methodOrOptions + ' does not exist on Cookie Bar component' );
}
};
}( jQuery ));