diff --git a/app/assets/javascripts/cookies_eu.js b/app/assets/javascripts/cookies_eu.js index f959caf..d04c834 100644 --- a/app/assets/javascripts/cookies_eu.js +++ b/app/assets/javascripts/cookies_eu.js @@ -5,31 +5,72 @@ var windowIsTurbolinked = 'Turbolinks' in window; var cookiesEu = { init: function() { - var cookiesEuOKButton = document.querySelector('.js-cookies-eu-ok'); + var cookiesEuOkButtons = document.querySelectorAll('.js-cookies-eu-ok'); + var cookiesEuCustomizeButton = document.querySelector('.js-cookies-eu-customize'); - if (cookiesEuOKButton) { - this.addListener(cookiesEuOKButton); + for (var i = 0; i < cookiesEuOkButtons.length; i++) { + this.addCookieOkListener(cookiesEuOkButtons[i]); // clear turbolinks cache so cookie banner does not reappear windowIsTurbolinked && window.Turbolinks.clearCache(); + }; + + if (cookiesEuCustomizeButton) { + this.addCustomizeListener(cookiesEuCustomizeButton); + } + }, + + addCookieOkListener: function(target) { + // Support for IE < 9 + if (target.attachEvent) { + target.attachEvent('onclick', this.handleCookieOk); + } else { + target.addEventListener('click', this.handleCookieOk, false); } }, - addListener: function(target) { + addCustomizeListener: function(target) { // Support for IE < 9 if (target.attachEvent) { - target.attachEvent('onclick', this.setCookie); + target.attachEvent('onclick', this.showCustomizeContainer); } else { - target.addEventListener('click', this.setCookie, false); + target.addEventListener('click', this.showCustomizeContainer, false); } }, + + showCustomizeContainer: function(e) { + var customize_container = document.querySelector('.cookies-eu-customize'); + customize_container.style.display = ""; + }, - setCookie: function() { + handleCookieOk: function(e) { var isSecure = location.protocol === 'https:'; + var accept_all_cookies = false; Cookies.set('cookie_eu_consented', true, { path: '/', expires: 365, secure: isSecure }); + if (e.target.getAttribute('data-cookies-eu-accept-all')) { + accept_all_cookies = true; + } + // find cookie names to set (for customized cookies) + var cookie_name_prefix = 'cookie_eu_consented_'; + var checkboxes = document.querySelectorAll('.cookies-eu-customize input[type=checkbox]'); + for (var i = 0; i < checkboxes.length; i++) { + var element = checkboxes[i]; + if (accept_all_cookies || element.checked) { + if (element.value) { + var cookie_name = cookie_name_prefix + element.value; + Cookies.set(cookie_name, true, { path: '/', expires: 365, secure: isSecure }); + } + } + }; + var container = document.querySelector('.js-cookies-eu'); container.parentNode.removeChild(container); + var customize_container = document.querySelector('.cookies-eu-customize'); + if (customize_container) { + customize_container.parentNode.removeChild(customize_container); + } + document.dispatchEvent(new CustomEvent('cookies-eu-acknowledged')); } }; diff --git a/app/assets/stylesheets/cookies_eu.scss b/app/assets/stylesheets/cookies_eu.scss index 28556ca..1f48e59 100644 --- a/app/assets/stylesheets/cookies_eu.scss +++ b/app/assets/stylesheets/cookies_eu.scss @@ -57,3 +57,34 @@ $cookies-eu-mobile: 'max-width: 767px' !default; } } } +.cookies-eu-customize { + width: 100%; + padding: 0 20px; + background-color: $cookies-eu-background-color; + height: 100%; + position: fixed; + display: block; + bottom: 0px; + right: 0px; + z-index: 1000; + + .cookies-eu-ok { + font-size: 11px; + font-weight: bold; + + line-height: 20px; + + min-width: 26px; + margin-right: 5px; + padding: 2px 11px; + + cursor: pointer; + text-align: center; + white-space: nowrap; + + color: $cookies-eu-button-color; + border: 0; + outline: none; + background-color: $cookies-eu-button-background-color; + } +} diff --git a/app/views/cookies_eu/_consent_banner.html.erb b/app/views/cookies_eu/_consent_banner.html.erb index aed4e45..5221f1b 100644 --- a/app/views/cookies_eu/_consent_banner.html.erb +++ b/app/views/cookies_eu/_consent_banner.html.erb @@ -2,15 +2,24 @@ <% if cookies && cookies['cookie_eu_consented'] != 'true' %>
> - <%= t('cookies_eu.cookies_eu_text_html', default: t'(cookies_eu.cookies_text')) %> + <%= t('cookies_eu.cookies_text_html', default: t('cookies_eu.cookies_text')) %> - - <% if defined?(link).present? %> - <%= t('cookies_eu.learn_more') %> - <% end %> + <% if defined?(customize) and customize %> + + + + <% else %> + + <% end %> + <% if defined?(link).present? %> + <%= t('cookies_eu.learn_more') %> + <% end %>
+ <% if defined?(customize) and customize %> + <%= render 'cookies_eu/consent_customize', analytics: local_assigns[:analytics], advertisement: local_assigns[:advertisement] %> + <% end %> <% end %> <% else %> <% raise Exception.new "'cookies' is a reserved Rails class, please rename your method" %> diff --git a/app/views/cookies_eu/_consent_customize.html.erb b/app/views/cookies_eu/_consent_customize.html.erb new file mode 100644 index 0000000..a4659f2 --- /dev/null +++ b/app/views/cookies_eu/_consent_customize.html.erb @@ -0,0 +1,27 @@ +