OLO Widget

olo_widget.css

.up-olo-opener {
  cursor: pointer;
}

.up-olo-container, .up-olo-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.up-olo-container {
  z-index: 31415926535;
  display: flex;
  align-items: start;
}

.up-olo-overlay {
  background: rgba(0, 0, 0, .80);
  opacity: 0;
  transition: opacity 0.2s ease-out 0.15s;
}

.up-olo-section, .up-olo-iframe {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.up-olo-section {
  position: relative;
  transform: translate3d(-100%, 0, 0);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.up-olo-iframe {
  position: absolute;
  background: #777;
}

.up-olo-closer {
  position: relative;
  cursor: pointer;
  color: #ddd;
  font-size: 3em;
  padding-left: 0.3em;
  opacity: 1;
  transition: opacity 0.1s ease-in;
}

.up-olo-container .fade-in {
  opacity: 1;
}

.up-olo-container .fade-out {
  opacity: 0;
}

.up-olo-container .slide-in {
  animation: slide-in 0.4s ease-out forwards;
  -webkit-animation: slide-in 0.4s ease-out forwards;
}

.up-olo-container .slide-out {
  animation: slide-out 0.2s forwards;
  -webkit-animation: slide-out 0.2s forwards;
}

@keyframes slide-in {
  0% { transform: translate3d(-100%, 0, 0); }
  85% { transform: translate3d(1%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes slide-in {
  0% { -webkit-transform: translate3d(-100%, 0, 0); }
  85% { -webkit-transform: translate3d(1%, 0, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes slide-out {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

@-webkit-keyframes slide-out {
  0% { -webkit-transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

.up-olo-spinner {
  position: absolute;
  height: 100%;
  background: rgba(255, 255, 255, .80);
  opacity: 1;
  transition: opacity 0.2s ease-in 0.1s;
}

.up-olo-spinner .up-olo-logo {
  position: absolute;
  top: 25%;
  left: 45%;
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  background: url('./small_logo.png');
  background-size: cover;
}

.up-olo-spinner .up-olo-logo:after {
  content: ' ';
  position: absolute;
  top: -9px;
  left: -9px;
  width: 54px;
  height: 54px;
  border-radius: 44px;
  border: 4px solid rgba(0, 0, 0, 0.2);
  border-top-color: rgba(0, 0, 0, 0.5);
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0%    { transform:rotate(0deg); }
  100%  { transform:rotate(360deg); }
}

@-webkit-keyframes spin {
  0% { -webkit-transform:rotate(0deg); }
  100% { -webkit-transform:rotate(360deg); }
}

@media (max-width: 700px) {
  .up-olo-section {
      max-width: 320px;
  }
  .up-olo-spinner {
    width: 320px;
  }
}
@media (min-width: 701px) and (max-width: 900px) {
  .up-olo-section {
      max-width: 480px;
  }
  .up-olo-spinner {
    width: 480px;
  }
}
@media (min-width: 901px) {
  .up-olo-section {
      max-width: 600px;
  }
  .up-olo-spinner {
    width: 600px;
  }
}

olo_widget.js

// e.g.
// <script src="olo_widget.js" type="text/javascript" data-up-spu="shorty-goldsteins-sf" id="up-olo-script"></script>

;(function(window, document, undefined) {
  var olo = {};
  var minScreenWidth = 400;
  var baseUrl = 'http://localhost:8080/s/';

  var errors = {
    idTag: "OLO widget improperly embedded. Make sure the copied script element includes \"id='up-olo-script'\".",
    spu: "OLO widget improperly embedded. Check the script element's data-up-spu attribute.",
    targets: "Unable to find click targets. Make sure links or buttons have 'up-olo-opener' as a class."
  };

  try {
    var scriptTag = document.querySelectorAll('#up-olo-script');
    if (scriptTag.length < 1) {
      throw new Error(errors.idTag);
    } else {
      olo.spu = scriptTag[0].getAttribute('data-up-spu');
      if (!olo.spu || olo.spu.length < 3) {
        throw new Error(errors.spu);
      }

      olo.style = document.createElement('link');
      olo.style.rel = 'stylesheet';
      olo.style.media = 'all';
      olo.style.href = scriptTag[0].getAttribute('src').replace('.js', '.css');
      scriptTag[0].parentNode.appendChild(olo.style);

      // check if the stylesheet loaded
      var attempts = 0;
      olo.intId = setInterval(function() {
        if (olo.style.sheet && olo.style.sheet.cssRules) {
          olo.cssLoaded = true;
          clearInterval(olo.intId);
        }
        // quit after 15 seconds
        if (attempts > 300) {
          clearInterval(olo.intId);
        }
        attempts++;
      }, 50);
    }

    var handleOpenClick = function(event) {
      event.preventDefault();

      if (window.screen.width < minScreenWidth || !olo.cssLoaded) {
        var newWindow = window.open();
        newWindow.opener = null;
        newWindow.location = baseUrl + olo.spu;
        return false;
      } else {
        openFrame(event);
      }
    };

    var openFrame = function(event) {
      event.preventDefault();

      if (!(olo && olo.container)) {
        olo.container = makeFrame();
      }

      olo.container.style.visibility = 'visible';
      olo.container.style.display = 'flex';
      setTimeout(function() {
        olo.section.classList.add('slide-in');
        olo.overlay.classList.add('fade-in');
      }, 10);
    };

    var closeFrame = function() {
      olo.closer.classList.add('fade-out');
      olo.section.classList.add('slide-out');
      olo.section.classList.remove('slide-in');
      olo.overlay.classList.remove('fade-in');

      setTimeout(function() {
        olo.container.style.visibility = 'hidden';
        olo.container.style.display = 'none';
        olo.section.classList.remove('slide-out');
        olo.closer.classList.remove('fade-out');
      }, 350);
    };

    var makeFrame = function() {
      olo.container = document.createElement('div');
      olo.container.className = 'up-olo-container';

      olo.overlay = document.createElement('div');
      olo.overlay.className = 'up-olo-overlay';

      olo.section = document.createElement('section');
      olo.section.className = 'up-olo-section';

      olo.iframe = document.createElement('iframe');
      olo.iframe.className = 'up-olo-iframe';
      olo.iframe.setAttribute('frameborder', 0);

      olo.closer = document.createElement('div');
      olo.closer.className = 'up-olo-closer';
      olo.closer.innerHTML = '&times;';
      olo.closer.setAttribute('role', 'button');
      olo.closer.setAttribute('aria-label', 'Close OLO widget');
      olo.closer.addEventListener('click', closeFrame);

      olo.spinner = document.createElement('div');
      olo.spinner.className = 'up-olo-spinner';

      olo.spinnerLogo = document.createElement('div');
      olo.spinnerLogo.className = 'up-olo-logo';

      olo.spinner.appendChild(olo.spinnerLogo);
      olo.section.appendChild(olo.iframe);
      olo.section.appendChild(olo.spinner);

      olo.container.appendChild(olo.overlay);
      olo.container.appendChild(olo.section);
      olo.container.appendChild(olo.closer);

      olo.iframe.src = baseUrl + olo.spu;
      olo.iframe.onload = function(e) {
        olo.spinner.classList.add('fade-out');
        setTimeout(function() {
          olo.spinner.style.visibility = 'hidden';
          olo.spinner.style.display = 'none';
        }, 450);
      };

      document.body.appendChild(olo.container);

      return olo.container;
    };

    // add click event listeners
    var targets = document.querySelectorAll('.up-olo-opener');
    if (targets.length < 1) {
      throw new Error(errors.targets);
    } else {
      targets.forEach(function(target) {
        target.addEventListener("click", handleOpenClick);
      });
    }
  } catch (ex) {
    window.console.warn(ex);
  }
})(window, document);