Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: allow customizing cookie consent, help needed #92

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

WIP: allow customizing cookie consent, help needed #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
68a3786
allow injecting html as cookies_text
ibotty Sep 16, 2021
9ab19d6
add editorconfig file
ibotty Sep 16, 2021
fbc327e
allow overwriting scss variables
ibotty Sep 16, 2021
8c2384a
minimal implementation of customized choice
ibotty Sep 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_size = 2
indent_style = space
55 changes: 48 additions & 7 deletions app/assets/javascripts/cookies_eu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
}
};
Expand Down
41 changes: 36 additions & 5 deletions app/assets/stylesheets/cookies_eu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -57,3 +57,34 @@ $cookies-eu-mobile: 'max-width: 767px';
}
}
}
.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;
}
}
21 changes: 16 additions & 5 deletions app/views/cookies_eu/_consent_banner.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
<% if cookies.kind_of? ActionDispatch::Cookies::CookieJar %>
<% if cookies && cookies['cookie_eu_consented'] != 'true' %>
<div class="cookies-eu js-cookies-eu" <%= "dir=rtl" if I18n.exists?('cookies_eu.direction', I18n.locale) && I18n.t("cookies_eu.direction") == "rtl" %>>
<span class="cookies-eu-content-holder"><%= t('cookies_eu.cookies_text') %></span>
<span class="cookies-eu-content-holder">
<%= t('cookies_eu.cookies_text_html', default: t('cookies_eu.cookies_text')) %>
</span>
<span class="cookies-eu-button-holder">
<button class="cookies-eu-ok js-cookies-eu-ok"> <%= t('cookies_eu.ok') %> </button>
<% if defined?(link).present? %>
<a href="<%= link %>" class="cookies-eu-link" target="<%= defined?(target).present? ? target : '' %>"> <%= t('cookies_eu.learn_more') %> </a>
<% end %>
<% if defined?(customize) and customize %>
<button class="cookies-eu-ok js-cookies-eu-customize"> <%= t('cookies_eu.customize') %> </button>
<button class="cookies-eu-ok js-cookies-eu-ok"> <%= t('cookies_eu.minimal') %> </button>
<button class="cookies-eu-ok js-cookies-eu-ok" data-cookies-eu-accept-all=true> <%= t('cookies_eu.all') %> </button>
<% else %>
<button class="cookies-eu-ok js-cookies-eu-ok"> <%= t('cookies_eu.ok') %> </button>
<% end %>
<% if defined?(link).present? %>
<a href="<%= link %>" class="cookies-eu-link" target="<%= defined?(target).present? ? target : '' %>"> <%= t('cookies_eu.learn_more') %> </a>
<% end %>
</span>
</div>
<% 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" %>
Expand Down
27 changes: 27 additions & 0 deletions app/views/cookies_eu/_consent_customize.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<div class="cookies-eu-customize" style="display:none" <%= "dir=rtl" if I18n.exists?('cookies_eu.direction', locale) && t("cookies_eu.direction") == "rtl" %>>
<form>
<h2><%= t('cookies_eu.customize_header') %></h2>
<p><%= t('cookies_eu.customize_intro_html', default: t('cookies_eu.customize_intro')) %></p>

<div class="cookies-eu-customize-checkboxes">
<label for="cookies-eu-minimal"><%= t('cookies_eu.minimal_label') %></label>
<input type="checkbox" id="cookies-eu-minimal" name="minimal" value="minimal" checked disabled>
<p><%= t('cookies_eu.minimal_intro_html', default: t('cookies_eu.minimal_intro')) %></p>

<% if defined?(analytics) and analytics %>
<label for="cookies-eu-analytics"><%= t('cookies_eu.analytics_label') %></label>
<input type="checkbox" id="cookies-eu-analytics" name="analytics" value="analytics">
<p><%= t('cookies_eu.analytics_intro_html', default: t('cookies_eu.analytics_intro')) %></p>
<% end %>
<% if defined?(advertisment) and advertisement %>
<label for="cookies-eu-advertisement"><%= t('cookies_eu.advertisement_label') %></label>
<input type="checkbox" id="cookies-eu-advertisement" name="advertisement" value="advertisement">
<p><%= t('cookies_eu.advertisement_intro_html', default: t('cookies_eu.advertisement_intro')) %></p>
<% end %>
</div>
<div class="cookies-eu-customize-button-holder">
<button class="cookies-eu-ok js-cookies-eu-ok" type="button"><%= t('cookies_eu.customize_submit') %></button>
</div>
</form>
</div>