Add GDPR Banner (#12)

Author: excalith

assets/app.css

@@ -351,6 +351,36 @@ hr {
 .grid-item.history   { border-left: 4px solid #5270f5; color: #5270f5;}
 .grid-item.debug   { border-left: 4px solid #9c0000; color: #9c0000;}
 
+/* ---- GDPR BANNER ---- */
+.gdpr-wrapper {
+  display: none;
+  font-family: Arial, Helvetica, sans-serif;
+  position: fixed;
+  bottom: 0px;
+  left:0px;
+  right:0px;
+  height: 45px;
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+  background-color: #21252b;
+  border-top: 2px solid #ff5252;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+   -khtml-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.gdpr-close {
+  font-size:25px;
+  position: fixed;
+  right: 15px;
+  bottom: 5px;
+  color: #fff;
+}
+
 /* ---- OCTOCAT! ---- */
 .github-corner:hover .octo-arm {
   animation: octocat-wave 560ms ease-in-out

assets/app.js

@@ -1,6 +1,9 @@
 let isAdvanced = false;
 let lang = "en";
+let showGDPR = true;
+let gdprBanner;
 
+//Cookies.remove("showGDPR")
 // Cookies
 if (Cookies.get("showAdvanced")) {
   isAdvanced = Cookies.get("showAdvanced") == "true" ? true : false;
@@ -11,6 +14,14 @@ if (Cookies.get("language")) {
   lang = Cookies.get("language");
 }
 
+if (Cookies.get("showGDPR")) {
+  showGDPR = Cookies.get("showGDPR");
+}
+
+$(document).ready(function() {
+  toggleGDPR(showGDPR);
+});
+
 // init isotope
 let qsRegex;
 const $grid = $(".grid").isotope({
@@ -224,6 +235,21 @@ $("#ShowAdvanced").change(function() {
   refreshList();
 });
 
+function toggleGDPR(isShow) {
+  console.log("ShowGDPR: " + isShow);
+
+  if (isShow === true)
+    $(".gdpr-wrapper").show();
+  // else 
+  //   $(".gdpr-wrapper").hide();
+  //
+}
+
+$(".gdpr-close").click(function() {
+  Cookies.set("showGDPR", false);
+  $(".gdpr-wrapper").hide();
+});
+
 function getURLParameter(sParam) {
   const sPageURL = window.location.search.substring(1);
   const sURLVariables = sPageURL.split("&");

index.html

@@ -86,6 +86,12 @@
     <div class="grid">
     </div>
 
+    <!-- GDPR BANNER -->
+    <div class="gdpr-wrapper">
+            <p>We use cookies to store only your app related settings to your machine. By using our site, you consent to cookies.</p>
+            <a href="#"><div class="gdpr-close">✖</div></a>
+    </div>
+
     <script src="assets/app.js"></script>
 </body>