Skip to content

Instantly share code, notes, and snippets.

@cmdoptesc
Last active December 21, 2017 20:55
Show Gist options
  • Save cmdoptesc/965e86c710b12be866d0611a07213dbb to your computer and use it in GitHub Desktop.
Save cmdoptesc/965e86c710b12be866d0611a07213dbb to your computer and use it in GitHub Desktop.
OLO Widget
.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;
}
}
// 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment