Created
September 18, 2018 16:38
-
-
Save snoopdouglas/286db5b68e0eec86364fb3bfc67d09b1 to your computer and use it in GitHub Desktop.
Tiny Barba.js-esque push-state static page transitioner
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// "wait for ready or just run immediately" function | |
import ready from 'ready' | |
// https://stackoverflow.com/a/21210643 | |
import queryMap from 'query-map' | |
const transitionQueryParam = '__dynamic' | |
ready(() => { | |
if(queryMap[transitionQueryParam] === '1') | |
return | |
const main = document.querySelector('main') | |
const iframe = document.createElement('IFRAME') | |
iframe.style.visibility = 'none' | |
iframe.style.zIndex = '-1000' | |
iframe.style.position = 'fixed' | |
iframe.style.top = '-99999px' | |
iframe.style.left = '-99999px' | |
document.body.appendChild(iframe) | |
document.addEventListener('click', (e) => { | |
const link = e.target | |
if(link.tagName !== 'A') | |
return | |
if(typeof link.dataset.transition === 'undefined') | |
return | |
e.preventDefault() | |
iframe.src = link.href + `?${transitionQueryParam}=1` | |
}) | |
iframe.onload = () => { | |
if(iframe.src === 'about:blank') | |
return | |
const idocument = iframe.contentWindow.document | |
const imainHTML = idocument.querySelector('main').innerHTML | |
window.history.pushState(imainHTML, idocument.title, iframe.src) | |
main.innerHTML = imainHTML | |
iframe.src = 'about:blank' | |
} | |
window.addEventListener('popstate', (e) => main.innerHTML = e.state) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment