royalbeer site-selector

royalbeer-site-selector.js

function createCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    expires = "; expires="+date.toGMTString();
  }
  document.cookie = name+"="+value+expires+"; path=/";
}


function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0) ===' ') {
      c = c.substring(1,c.length);
    }
    if (c.indexOf(nameEQ) === 0) {
      return c.substring(nameEQ.length,c.length);
    }
  }
  return null;
}


function calculateAge(birthdate) {
  var ageDifMs = Date.now() - birthdate.getTime();
  var ageDate = new Date(ageDifMs); // miliseconds from epoch
  return Math.abs(ageDate.getUTCFullYear() - 1970);
}

function isValidAge(dd, mm, yyyy) {
  return (
    parseInt(yyyy, 10) > 1900 &&
    parseInt(yyyy, 10) < 2016 &&
    parseInt(mm, 10) >= 1 &&
    parseInt(mm, 10) <= 12 &&
    parseInt(dd, 10) >= 1 &&
    parseInt(dd, 10) <= 31);
}


function isOldEnough(){
  var dd = document.querySelector('#age-verification-dd').value;
  var mm = document.querySelector('#age-verification-mm').value;
  var yyyy = document.querySelector('#age-verification-yyyy').value;

  if (!isValidAge(dd, mm, yyyy)){
    return;
  }
  var date = new Date(yyyy, mm, dd);
  var age = calculateAge(date);
  return age >= 18;
}


function getAgeVerificationHTML() {
  var html = '' +
    '<div class="age-verification">' +
      '<h3 class="age-verification-title">Er du fyldt 18 år?</h3>' +
      '<div class="age-verification-excerpt">Du skal være fyldt 18 år for at tilgå indholdet på dette website.<br>Indtast din fødselsdato fro at fortsætte</div>' +
      '<div class="age-verification-inputs">' +
        '<input type="number" id="age-verification-dd" placeholder="DD">' +
        '<input type="number" id="age-verification-mm" placeholder="MM">' +
        '<input type="number" id="age-verification-yyyy" placeholder="YYYY">' +
      '</div>' +
    '</div>';

  return html;
}


function getPresaleHTML() {
  var presaleHTML = '' +
    '<div class="presales">';

  jQuery
    .getJSON('/wp-json/wp/v2/presale?_embed')
    .then(function(data) {
      var $presales = document.querySelector('.presales')
      data.forEach(function (presale) {
        $presales.innerHTML += '' +
          '<div class="presale-wrapper" style="background-image: url('+presale._embedded['wp:featuredmedia'][0].source_url+')">' +
            '<div class="presale">' +
              '<h3 class="presale-title">'+presale.title.rendered+'</h3>' +
              '<div class="presale-place">'+presale.place+'</div>' +
              '<div class="presale-date">'+presale.date+'</div>' +
            '</div>' +
            '<div class="presale-footer" style="background-color: '+presale.color+'">Presale</div>' +
          '</div>';
      });
    });

  presaleHTML += '</div>';

  return presaleHTML;
}


function getOverlayHTML(isOver18) {
  var html = '' +
    '<div class="site-selector-overlay '+(!isOver18 ? 'disabled' : '')+'">' +
      '<img class="site-selector-logo" src="/wp-content/themes/royalbeer/assets/build/img/front-page/royal-beer-logo.png">' +
      (isOver18 ? '' : getAgeVerificationHTML()) +
      '<div class="sites">' +
        '<a class="site-link site-link--royal-beer" href="/">' + // TODO: Instead of href use javascript to hide overlay
          '<div class="site-link-go-to">Gå til</div>' +
          '<div class="site-link-title">Royal Beer</div>' +
        '</a>' +
        '<a class="site-link site-link--tak-rock" href="/tak-rock">' +
          '<div class="site-link-go-to">Gå til</div>' +
          '<div class="site-link-title">Tak Rock</div>' +
        '</a>' +
      '</div>' +
      getPresaleHTML() +
    '</div>';
  return html;
}


function setUpEventHandlers() {
  (function inputHandlers() {
    var inputs = document.querySelectorAll('.site-selector-overlay input');
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].addEventListener('input', function() {
        if (isOldEnough()) {
          createCookie("over-18", true, 30);
          document.querySelector('.site-selector-overlay .age-verification').style.display = 'none';
          document.querySelector('.site-selector-overlay').classList.remove('disabled');
        }
      });
    }
  })();

  (function linkHandlers() {
    document.querySelector('.site-selector-overlay .site-link--royal-beer').addEventListener('click', function (event) {
      event.preventDefault();
      removeOverlay();
      return false;
    });

  })();
}

function removeOverlay() {
    document.body.style.overflow = '';
    document.querySelector('.site-selector-overlay').remove();
}

(function renderOverlay() {
  var isOver18 = readCookie("over-18");
  var isFrontPage = window.location.pathname === '/';

  if (isFrontPage || (!isFrontPage && !isOver18)) {
    document.body.style.overflow = 'hidden';
    document.body.innerHTML += getOverlayHTML(isOver18);
    setUpEventHandlers();
  }

})();