DEV Community

Discussion on: Understanding Transitional JavaScript Apps

Collapse
 
justinnoel profile image
Justin Noel

Do you have a sample of this somewhere? I'm not finding it.

Collapse
 
lexlohr profile image
Alex Lohr

No, I wrote it for an employer who did not believe in open source. However, it was a pretty simple script, somewhat along the lines of

document.addEventListener('click', (ev) => {
  const link = ev.target;
  if (
    link.href &&
    link.host === location.host &&
    link.hasAttribute('data-selector')
) {
    link.classList.add('loading');
    fetch(link.href)
     .then((response) => response.text())
     .then((html) => {
       const loaded = new DOMParser().parseFromString(html, 'text/html');
       document.querySelector(ev.target.getAttribute('data-selector')).innerHTML = loaded.body.innerHTML;
        link.classList.remove('loading');
     });
  }
});
Enter fullscreen mode Exit fullscreen mode

That was the main gist, I updated it with fetch, which wasn't stable at the time then; the history handling was a bit more involved, though.

Or did you mean an example of a transitional app?