GDPR Notice

by Emily Humphrey

HTML

<div class="GDPR-notice">
  <p>On this site we use Cookies. By using this site, you are accepting our Cookie Policy.<button class="JS-GDPR-button">close</button></p>
</div>

SCSS

.GDPR-notice {
  & {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, .3);
    display: none;
  }
  .display_gdpr_notice & {
    display: block;
  }
  P {
    padding: 10px;
  }
}

JavaScript

var GDPR = (function() {
  var closed = false;
  var cookie_name = "GDPRNotice";
  var raw_cookies = document.cookie;
  var baked_cookies = {};
  var $button = document.querySelectorAll(".JS-GDPR-button")[0];
  var $html = document.querySelectorAll("html")[0];

  raw_cookies.split(";").forEach(function(i){
    i = i.split("=")
    baked_cookies[i[0]] = i[1];
  })

  check_for_cookie()
  $button.addEventListener("click", function() {
    close_banner()
  })
  $button.addEventListener("touchend", function() {
    close_banner()
  })

  function check_for_cookie() {
    if (!baked_cookies.GDPRNotice) {
      display_banner()
    }
  }

  function close_banner() {
    if (!closed) {
      closed = true;
      document.cookie = cookie_name + "=true";
      $html.classList.remove("display_gdpr_notice");
    }
  }

  function display_banner() {
    $html.classList.add("display_gdpr_notice");
  }
})();