From 1be6b8241942a45fe0eb71a152c187150ee32e28 Mon Sep 17 00:00:00 2001
From: Carlos Mogas da Silva <r3pek@r3pek.org>
Date: Thu, 13 May 2021 22:06:29 +0100
Subject: [PATCH] Create popup for cookie consent

---
 i18n/en.yaml                              | 10 ++++-
 i18n/pt.yaml                              |  5 ++-
 layouts/partials/matomo_cookie_popup.html | 24 ++++++++++
 layouts/partials/matomo_head.html         | 53 ++++++++++++-----------
 static/assets/css/hugo-matomo.css         | 15 +++++++
 5 files changed, 79 insertions(+), 28 deletions(-)
 create mode 100644 layouts/partials/matomo_cookie_popup.html
 create mode 100644 static/assets/css/hugo-matomo.css

diff --git a/i18n/en.yaml b/i18n/en.yaml
index bfa2cdc..da1ff12 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -1,2 +1,10 @@
 trackingStatus:
-  other: Tracking Status
\ No newline at end of file
+  other: Tracking Status
+cookieConsentStatus:
+  other: Cookie Consent Status
+dismissPopup:
+  other: Dismiss
+popupMsg:
+  other: By visiting my website, you agree with my
+cookiePolicy:
+  other: cookie policy
\ No newline at end of file
diff --git a/i18n/pt.yaml b/i18n/pt.yaml
index 7ab14ea..0d8c87a 100644
--- a/i18n/pt.yaml
+++ b/i18n/pt.yaml
@@ -1,2 +1,5 @@
 trackingStatus:
-  other: Estado da monitorização
\ No newline at end of file
+  other: Estado da monitorização
+
+dismissPopup:
+  other: Fechar
\ No newline at end of file
diff --git a/layouts/partials/matomo_cookie_popup.html b/layouts/partials/matomo_cookie_popup.html
new file mode 100644
index 0000000..fbba0b3
--- /dev/null
+++ b/layouts/partials/matomo_cookie_popup.html
@@ -0,0 +1,24 @@
+{{ if and (isset .Site.Params "matomo") (eq .Site.Params.matomo.enable true) }}
+    <script type="text/javascript">
+        window.addEventListener("load", function() {
+            t=Matomo.getTracker("{{- .Site.Params.matomo.url -}}", "{{- .Site.Params.matomo.id -}}");
+            when = t.getRememberedCookieConsent();
+
+            banner = document.getElementsByClassName("cookie-banner")[0];
+            if (when == 0) {
+                banner.style.display = 'block';
+            }
+        }, false);
+
+        function dismissPopup() {
+            t=Matomo.getTracker("{{- .Site.Params.matomo.url -}}", "{{- .Site.Params.matomo.id -}}");
+            t.rememberCookieConsentGiven()
+            banner = document.getElementsByClassName("cookie-banner")[0];
+            banner.style.display = 'none';
+        }
+    </script>
+    <div class="cookie-banner" style="display:none">
+        <p>{{ i18n "popupMsg" }}<a href="{{- .Site.Params.matomo.policyurl -}}"> <u>{{ i18n "cookiePolicy" }}</u></a>.</p>
+        <a style="font-size: 12px;" href="javascript:dismissPopup()">({{ i18n "dismissPopup" }})</a>
+    </div>
+{{ end }}
diff --git a/layouts/partials/matomo_head.html b/layouts/partials/matomo_head.html
index d0b2777..cf5905f 100644
--- a/layouts/partials/matomo_head.html
+++ b/layouts/partials/matomo_head.html
@@ -1,29 +1,30 @@
 {{ if and (isset .Site.Params "matomo") (eq .Site.Params.matomo.enable true) }}
-  <!-- Matomo -->
-  <script type="text/javascript">
-    var _paq = window._paq = window._paq || [];
-    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-    {{ if and (isset .Site.Params.matomo "disablecookies") (eq .Site.Params.matomo.disablecookies true) }}
-    _paq.push(['disableCookies']);
+    <link rel="stylesheet" type="text/css" href="{{ "assets/css/hugo-matomo.css" | absURL }}" />
+    <!-- Matomo -->
+    <script type="text/javascript">
+        var _paq = window._paq = window._paq || [];
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        {{ if and (isset .Site.Params.matomo "disablecookies") (eq .Site.Params.matomo.disablecookies true) }}
+        _paq.push(['disableCookies']);
+        {{ end }}
+        {{ if or (not (isset .Site.Params.matomo "requirecookieconsent")) (eq .Site.Params.matomo.requirecookieconsent true) }}
+        _paq.push(['requireCookieConsent']);
+        {{ end }}
+        {{ if and (isset .Site.Params.matomo "heartbeat") (eq .Site.Params.matomo.heartbeat true) }}
+        _paq.push(['enableHeartBeatTimer']);
+        {{ end }}
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+            var u="{{- .Site.Params.matomo.url -}}/";
+            _paq.push(['setTrackerUrl', u+'matomo.php']);
+            _paq.push(['setSiteId', '{{- .Site.Params.matomo.id -}}']);
+            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+            g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+        })();
+    </script>
+    {{ if and (isset .Site.Params.matomo "noscript") (eq .Site.Params.matomo.noscript true) }}
+        <noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="{{- .Site.Params.matomo.url -}}/matomo.php?idsite={{- .Site.Params.matomo.id -}}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
     {{ end }}
-    {{ if or (not (isset .Site.Params.matomo "requirecookieconsent")) (eq .Site.Params.matomo.requirecookieconsent true) }}
-    _paq.push(['requireCookieConsent']);
-    {{ end }}
-    {{ if and (isset .Site.Params.matomo "heartbeat") (eq .Site.Params.matomo.heartbeat true) }}
-    _paq.push(['enableHeartBeatTimer']);
-    {{ end }}
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
-    (function() {
-      var u="{{- .Site.Params.matomo.url -}}/";
-      _paq.push(['setTrackerUrl', u+'matomo.php']);
-      _paq.push(['setSiteId', '{{- .Site.Params.matomo.id -}}']);
-      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-    })();
-  </script>
-  {{ if and (isset .Site.Params.matomo "noscript") (eq .Site.Params.matomo.noscript true) }}
-  <noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="{{- .Site.Params.matomo.url -}}/matomo.php?idsite={{- .Site.Params.matomo.id -}}&amp;rec=1" style="border:0;" alt="" /></p></noscript>
-  {{ end }}
-  <!-- End Matomo Code -->
+    <!-- End Matomo Code -->
 {{ end }}
diff --git a/static/assets/css/hugo-matomo.css b/static/assets/css/hugo-matomo.css
new file mode 100644
index 0000000..77ec9ba
--- /dev/null
+++ b/static/assets/css/hugo-matomo.css
@@ -0,0 +1,15 @@
+.cookie-banner {
+  align-items: center;
+  background: inherit;
+  border-radius: 5px;
+  border-width: 10px;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.7);
+  position: fixed;
+  bottom: 40px;
+  left: 25%;
+  right: 25%;
+  width: 50%;
+  padding: 5px 14px;
+  display: flex;
+  text-align: center;
+}
\ No newline at end of file