From 68a378630abcc3b9d3fe60833e70456b0aa40d32 Mon Sep 17 00:00:00 2001 From: Tobias Florek Date: Thu, 16 Sep 2021 13:05:56 +0200 Subject: [PATCH 1/4] allow injecting html as cookies_text --- app/views/cookies_eu/_consent_banner.html.erb | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/views/cookies_eu/_consent_banner.html.erb b/app/views/cookies_eu/_consent_banner.html.erb index ae6ac5b..aed4e45 100644 --- a/app/views/cookies_eu/_consent_banner.html.erb +++ b/app/views/cookies_eu/_consent_banner.html.erb @@ -1,7 +1,9 @@ <% if cookies.kind_of? ActionDispatch::Cookies::CookieJar %> <% if cookies && cookies['cookie_eu_consented'] != 'true' %>
> - <%= t('cookies_eu.cookies_text') %> + + <%= t('cookies_eu.cookies_eu_text_html', default: t'(cookies_eu.cookies_text')) %> + <% if defined?(link).present? %> From 9ab19d6cf14037518cab9e3486863669ea287ca5 Mon Sep 17 00:00:00 2001 From: Tobias Florek Date: Thu, 16 Sep 2021 15:40:01 +0200 Subject: [PATCH 2/4] add editorconfig file --- .editorconfig | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..77ccd16 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_size = 2 +indent_style = space From fbc327efdcdc5de9b16c8f7663cdd4e239b2b99a Mon Sep 17 00:00:00 2001 From: Tobias Florek Date: Thu, 16 Sep 2021 17:32:33 +0200 Subject: [PATCH 3/4] allow overwriting scss variables --- app/assets/stylesheets/cookies_eu.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/cookies_eu.scss b/app/assets/stylesheets/cookies_eu.scss index 9e31296..28556ca 100644 --- a/app/assets/stylesheets/cookies_eu.scss +++ b/app/assets/stylesheets/cookies_eu.scss @@ -1,8 +1,8 @@ -$cookies-eu-background-color: #F2F2F2; -$cookies-eu-border-color: #E4E4E4; -$cookies-eu-button-background-color: #4D90FE; -$cookies-eu-button-color: #FFFFFF; -$cookies-eu-mobile: 'max-width: 767px'; +$cookies-eu-background-color: #F2F2F2 !default; +$cookies-eu-border-color: #E4E4E4 !default; +$cookies-eu-button-background-color: #4D90FE !default; +$cookies-eu-button-color: #FFFFFF !default; +$cookies-eu-mobile: 'max-width: 767px' !default; .cookies-eu { line-height: 40px; From 8c2384acd30c3a272ddb7b27103137788c5fa25d Mon Sep 17 00:00:00 2001 From: Tobias Florek Date: Thu, 16 Sep 2021 13:06:48 +0200 Subject: [PATCH 4/4] minimal implementation of customized choice --- app/assets/javascripts/cookies_eu.js | 55 ++++++++++++++++--- app/assets/stylesheets/cookies_eu.scss | 31 +++++++++++ app/views/cookies_eu/_consent_banner.html.erb | 19 +++++-- .../cookies_eu/_consent_customize.html.erb | 27 +++++++++ 4 files changed, 120 insertions(+), 12 deletions(-) create mode 100644 app/views/cookies_eu/_consent_customize.html.erb 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 @@ +