minimal implementation of customized choice

infinum · Sep 16, 2021 · 8c2384a · 8c2384a
1 parent fbc327e
commit 8c2384a
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 12 deletions.
diff --git 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
@@ -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
@@ -2,15 +2,24 @@
   <% 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_eu_text_html', default: t'(cookies_eu.cookies_text')) %>
+        <%= 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" %>

diff --git a/app/views/cookies_eu/_consent_customize.html.erb b/app/views/cookies_eu/_consent_customize.html.erb
@@ -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>