From 79b366cb1860e00b2f1d370af3f32e729eb82985 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Fri, 29 Jan 2021 14:53:38 +0100 Subject: [PATCH] Cookie concent feature. --- assets/js/cookieconsent.js | 38 +++++++++++++++++++ assets/js/lib/js.cookie.min.js | 3 ++ assets/js/tracking.js | 13 +++++++ assets/sass/components/button/_button.scss | 7 ++++ .../cookieconsent/_cookieconsent.scss | 32 ++++++++++++++++ assets/sass/layouts/_layouts.scss | 22 ++++++++--- assets/sass/styles.scss | 1 + i18n/ar.toml | 13 ++++++- i18n/de.toml | 12 ++++++ i18n/en.toml | 12 ++++++ i18n/fr.toml | 12 ++++++ i18n/he.toml | 12 ++++++ i18n/id.toml | 12 ++++++ i18n/nb.toml | 12 ++++++ i18n/pt.toml | 12 ++++++ i18n/sv.toml | 12 ++++++ layouts/_default/baseof.html | 1 + layouts/partials/cookieconsent.html | 10 +++++ layouts/partials/scripts.html | 6 +++ 19 files changed, 236 insertions(+), 6 deletions(-) create mode 100644 assets/js/cookieconsent.js create mode 100644 assets/js/lib/js.cookie.min.js create mode 100644 assets/sass/components/cookieconsent/_cookieconsent.scss create mode 100644 layouts/partials/cookieconsent.html diff --git a/assets/js/cookieconsent.js b/assets/js/cookieconsent.js new file mode 100644 index 0000000..fa087bd --- /dev/null +++ b/assets/js/cookieconsent.js @@ -0,0 +1,38 @@ +(function () { + + 'use strict'; + + if (typeof window.Cookies !== 'undefined') { + const cookieconsent = document.querySelector('.cookieconsent'); + + if (window.Cookies.get('cookieconsent') === undefined && cookieconsent) { + cookieconsent.classList.add('js-cookieconsent-open'); + } + + const cookie_buttons = Array.prototype.slice.call( + document.querySelectorAll('button[data-consent]') + ); + const sitedomain = window.location.hostname.split('.').slice(-2); + const cookiedomain = sitedomain.join('.'); + let cookie_options = []; + cookie_options['domain'] = cookiedomain; + cookie_options['sameSite'] = 'strict'; + cookie_options['expires'] = 365; + if (window.location.protocol === 'https:') { + cookie_options['secure'] = true; + } + + cookie_buttons.forEach(function (button) { + button.addEventListener('click', function () { + if (button.getAttribute('data-consent') == 'true') { + window.Cookies.set('cookieconsent', 'accept', cookie_options); + } + else { + window.Cookies.set('cookieconsent', 'decline', cookie_options); + } + cookieconsent.classList.remove('js-cookieconsent-open'); + }) + }); + } + +})(); diff --git a/assets/js/lib/js.cookie.min.js b/assets/js/lib/js.cookie.min.js new file mode 100644 index 0000000..f5f4c36 --- /dev/null +++ b/assets/js/lib/js.cookie.min.js @@ -0,0 +1,3 @@ +/*! js-cookie v2.2.1 | MIT */ + +!function(a){var b;if("function"==typeof define&&define.amd&&(define(a),b=!0),"object"==typeof exports&&(module.exports=a(),b=!0),!b){var c=window.Cookies,d=window.Cookies=a();d.noConflict=function(){return window.Cookies=c,d}}}(function(){function a(){for(var a=0,b={};a overflow. @@ -39,7 +40,8 @@ 'side1' 'side2' 'bottom' - 'foot'; + 'foot' + 'notice'; grid-template-rows: auto auto auto @@ -47,6 +49,7 @@ auto auto auto + auto auto; grid-template-columns: 1fr; } @@ -58,6 +61,7 @@ auto 1fr auto + auto auto; } @@ -67,7 +71,8 @@ 'side1 top' 'side1 main' 'side1 bottom' - 'foot foot'; + 'foot foot' + 'notice notice'; grid-template-columns: 1fr 2fr; } @@ -78,7 +83,8 @@ 'top side2' 'main side2' 'bottom side2' - 'foot foot'; + 'foot foot' + 'notice notice'; grid-template-columns: 2fr 1fr; } @@ -89,7 +95,8 @@ 'side1 top side2' 'side1 main side2' 'side1 bottom side2' - 'foot foot foot'; + 'foot foot foot' + 'notice notice notice'; grid-template-columns: 1fr 2fr 1fr; @@ -127,6 +134,11 @@ &__footer { grid-area: foot; } + + &__cookieconsent { + grid-area: notice; + } + } } diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 67c0dd4..bb5b5d2 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -36,6 +36,7 @@ @import 'components/box/box'; @import 'components/clearfix/clearfix'; +@import 'components/cookieconsent/cookieconsent'; @import 'components/header/header'; @import 'components/hidden/hidden'; @import 'components/highlight-mark/highlight-mark'; diff --git a/i18n/ar.toml b/i18n/ar.toml index ee6bcd5..c1a8069 100644 --- a/i18n/ar.toml +++ b/i18n/ar.toml @@ -94,6 +94,17 @@ other = "تجاهل" [lang_select_title] other = "اختيار اللغات" - [posts] other = "المنشورات" + +[cookieconsent_message] +other = "This website uses non essential cookies for tracking and analytics that you can accept or decline." + +[cookieconsent_accept] +other = "Accept tracking" + +[cookieconsent_decline] +other = "Decline tracking" + +[privacy_policy] +other = "Privacy policy" diff --git a/i18n/de.toml b/i18n/de.toml index 506c90c..07a9385 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -93,3 +93,15 @@ other = "Überspringen, wenn du ein Mensch bist" [lang_select_title] other = "Sprachauswahl" + +[cookieconsent_message] +other = "This website uses non essential cookies for tracking and analytics that you can accept or decline." + +[cookieconsent_accept] +other = "Accept tracking" + +[cookieconsent_decline] +other = "Decline tracking" + +[privacy_policy] +other = "Privacy policy" diff --git a/i18n/en.toml b/i18n/en.toml index 38a7296..1db5c38 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -93,3 +93,15 @@ other = "Skip if you are a human" [lang_select_title] other = "Language selector" + +[cookieconsent_message] +other = "This website uses non essential cookies for tracking and analytics that you can accept or decline." + +[cookieconsent_accept] +other = "Accept tracking" + +[cookieconsent_decline] +other = "Decline tracking" + +[privacy_policy] +other = "Privacy policy" diff --git a/i18n/fr.toml b/i18n/fr.toml index 440dee0..45ab899 100644 --- a/i18n/fr.toml +++ b/i18n/fr.toml @@ -93,3 +93,15 @@ other = "Ne faites pas attention à ça si vous êtes humain" [lang_select_title] other = "Selection de la langue" + +[cookieconsent_message] +other = "This website uses non essential cookies for tracking and analytics that you can accept or decline." + +[cookieconsent_accept] +other = "Accept tracking" + +[cookieconsent_decline] +other = "Decline tracking" + +[privacy_policy] +other = "Privacy policy" diff --git a/i18n/he.toml b/i18n/he.toml index 7640b70..3109f9c 100644 --- a/i18n/he.toml +++ b/i18n/he.toml @@ -94,3 +94,15 @@ other = "דלג אם אתה בן אנוש" [lang_select_title] other = "בחירת שפה" +[cookieconsent_message] +other = "This website uses non essential cookies for tracking and analytics that you can accept or decline." + +[cookieconsent_accept] +other = "Accept tracking" + +[cookieconsent_decline] +other = "Decline tracking" + +[privacy_policy] +other = "Privacy policy" + diff --git a/i18n/id.toml b/i18n/id.toml index 2d1670a..6cb9654 100644 --- a/i18n/id.toml +++ b/i18n/id.toml @@ -93,3 +93,15 @@ other = "Lewati jika anda manusia" [lang_select_title] other = "Pilihan Bahasa" + +[cookieconsent_message] +other = "This website uses non essential cookies for tracking and analytics that you can accept or decline." + +[cookieconsent_accept] +other = "Accept tracking" + +[cookieconsent_decline] +other = "Decline tracking" + +[privacy_policy] +other = "Privacy policy" diff --git a/i18n/nb.toml b/i18n/nb.toml index a35e861..e50ab88 100644 --- a/i18n/nb.toml +++ b/i18n/nb.toml @@ -93,3 +93,15 @@ other = "Hopp over om du er menneske." [lang_select_title] other = "Velg språk" + +[cookieconsent_message] +other = "This website uses non essential cookies for tracking and analytics that you can accept or decline." + +[cookieconsent_accept] +other = "Accept tracking" + +[cookieconsent_decline] +other = "Decline tracking" + +[privacy_policy] +other = "Privacy policy" diff --git a/i18n/pt.toml b/i18n/pt.toml index 0ae8a3d..818f70d 100644 --- a/i18n/pt.toml +++ b/i18n/pt.toml @@ -94,3 +94,15 @@ other = "Pular se você é humano" [lang_select_title] other = "Seletor de idioma" + +[cookieconsent_message] +other = "This website uses non essential cookies for tracking and analytics that you can accept or decline." + +[cookieconsent_accept] +other = "Accept tracking" + +[cookieconsent_decline] +other = "Decline tracking" + +[privacy_policy] +other = "Privacy policy" diff --git a/i18n/sv.toml b/i18n/sv.toml index f8adc45..f2a8cd8 100644 --- a/i18n/sv.toml +++ b/i18n/sv.toml @@ -93,3 +93,15 @@ other = "Hoppa över ifall du är människa." [lang_select_title] other = "Språkväljare" + +[cookieconsent_message] +other = "Denna webb-plats använder valfria cookies för analys och spårning av besökare." + +[cookieconsent_accept] +other = "Godkänn spårning" + +[cookieconsent_decline] +other = "Avstå spårning" + +[privacy_policy] +other = "Personuppgiftsbehandling" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index e800ddd..5f7e87e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -36,6 +36,7 @@ {{ with $.Param "footer" }}

{{ . | markdownify }}

{{ end }} {{ if $.Param "poweredby" }}

Powered by Hugo and the Zen theme.

{{ end }} +{{ if $.Param "cookieconsent" }}{{ partial "cookieconsent.html" . }}{{ end -}} {{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}} diff --git a/layouts/partials/cookieconsent.html b/layouts/partials/cookieconsent.html new file mode 100644 index 0000000..0da0e90 --- /dev/null +++ b/layouts/partials/cookieconsent.html @@ -0,0 +1,10 @@ +
+
+ {{ i18n "cookieconsent_message" }} + {{ with .Site.Params.privacyPolicyUrl }}{{ i18n "privacy_policy" }}{{ end }} +
+
+ + +
+
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 14377e2..d73eef2 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -10,6 +10,12 @@ {{ $mobilemenu := resources.Get "js/mobile.js" | minify | fingerprint -}} {{ end -}} +{{ if $.Param "cookieconsent" -}} +{{ $jscookie := resources.Get "js/lib/js.cookie.min.js" | fingerprint -}} + +{{ $cookieconsent := resources.Get "js/cookieconsent.js" | minify | fingerprint -}} + +{{ end -}} {{ if .HasShortcode "contact" -}} {{ $contact := resources.Get "js/contact.js" | minify | fingerprint -}}