Cookie concent feature.
This commit is contained in:
Fredrik Jonsson
parent
39031274e8
commit
79b366cb18
7 changed files with 236 additions and 6 deletions
38
assets/js/cookieconsent.js
Normal file
38
assets/js/cookieconsent.js
Normal file
|
|
@ -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');
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
3
assets/js/lib/js.cookie.min.js
vendored
Normal file
3
assets/js/lib/js.cookie.min.js
vendored
Normal file
|
|
@ -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<arguments.length;a++){var c=arguments[a];for(var d in c)b[d]=c[d]}return b}function b(a){return a.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}function c(d){function e(){}function f(b,c,f){if("undefined"!=typeof document){f=a({path:"/"},e.defaults,f),"number"==typeof f.expires&&(f.expires=new Date(1*new Date+864e5*f.expires)),f.expires=f.expires?f.expires.toUTCString():"";try{var g=JSON.stringify(c);/^[\{\[]/.test(g)&&(c=g)}catch(j){}c=d.write?d.write(c,b):encodeURIComponent(c+"").replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),b=encodeURIComponent(b+"").replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var h="";for(var i in f)f[i]&&(h+="; "+i,!0!==f[i]&&(h+="="+f[i].split(";")[0]));return document.cookie=b+"="+c+h}}function g(a,c){if("undefined"!=typeof document){for(var e={},f=document.cookie?document.cookie.split("; "):[],g=0;g<f.length;g++){var h=f[g].split("="),i=h.slice(1).join("=");c||'"'!==i.charAt(0)||(i=i.slice(1,-1));try{var j=b(h[0]);if(i=(d.read||d)(i,j)||b(i),c)try{i=JSON.parse(i)}catch(k){}if(e[j]=i,a===j)break}catch(k){}}return a?e[a]:e}}return e.set=f,e.get=function(a){return g(a,!1)},e.getJSON=function(a){return g(a,!0)},e.remove=function(b,c){f(b,"",a(c,{expires:-1}))},e.defaults={},e.withConverter=c,e}return c(function(){})});
|
||||
|
|
@ -3,16 +3,29 @@
|
|||
* A JavaScript file for analytic tracking.
|
||||
*/
|
||||
|
||||
var cookieConsent = {{ .Site.Params.cookieConsent | default false }};
|
||||
|
||||
var idSite = '{{ .Site.Params.piwikSiteID }}';
|
||||
var matomoTrackingApiUrl = 'https://{{ .Site.Params.piwikTrackerUrl }}/matomo.php';
|
||||
|
||||
var _paq = window._paq || [];
|
||||
if (cookieConsent) {
|
||||
_paq.push(['requireConsent']);
|
||||
}
|
||||
_paq.push(['setTrackerUrl', matomoTrackingApiUrl]);
|
||||
_paq.push(['setSiteId', idSite]);
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
if (typeof window.Cookies !== 'undefined' && Cookies.get('cookieconsent') === 'accept') {
|
||||
_paq.push(['setConsentGiven']);
|
||||
}
|
||||
|
||||
var googleAnalytics = '{{ .Site.GoogleAnalytics }}';
|
||||
if (cookieConsent) {
|
||||
if (typeof window.Cookies === 'undefined' || Cookies.get('cookieconsent') !== 'accept') {
|
||||
window['ga-disable-' + googleAnalytics] = true;
|
||||
}
|
||||
}
|
||||
|
||||
var _gaq = window._gaq || [];
|
||||
_gaq.push(['_setAccount', googleAnalytics]);
|
||||
|
|
|
|||
|
|
@ -74,6 +74,13 @@ button,
|
|||
// Add button variations here.
|
||||
.button,
|
||||
%button {
|
||||
&--small {
|
||||
@include type-layout(xs, 1);
|
||||
@include margin-right(.3);
|
||||
@include margin-bottom(.3);
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
&--variant-name {
|
||||
// Add styles here.
|
||||
}
|
||||
|
|
|
|||
32
assets/sass/components/cookieconsent/_cookieconsent.scss
Normal file
32
assets/sass/components/cookieconsent/_cookieconsent.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
// Cookieconsent
|
||||
|
||||
.cookieconsent {
|
||||
@include type-layout(s, 1);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: $warning;
|
||||
background-color: $warning-bg;
|
||||
border-top: 4px solid $warning-border;
|
||||
text-align: center;
|
||||
transform: translateY(100vh);
|
||||
transition: all 130ms ease-in;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
&--accept {
|
||||
border-color: $status;
|
||||
}
|
||||
|
||||
&--decline {
|
||||
border-color: $warning-border;
|
||||
}
|
||||
}
|
||||
|
||||
.js-cookieconsent-open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
|
@ -17,7 +17,8 @@
|
|||
&__first-sidebar,
|
||||
&__second-sidebar,
|
||||
&__page-top,
|
||||
&__page-bottom {
|
||||
&__page-bottom,
|
||||
&__cookieconsent {
|
||||
padding: 0 $zen-gutters / 2;
|
||||
min-width: 0; // With display grid defaults to auto, making <pre> 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue