dynamic text

by austinpray

HTML

<div class='demo-controls'>
  <h4>
    Search Params
  </h4>
  <input id='searchString' type='text' value='?abtest=a' />
  <button id='loadPage'>
  Load Page
  </button>
  <button id='resetPage'>
  Reset Page
  </button>
</div>
<div class='demo-after'>
  <p>
    Bogus bogus before
  </p>
</div>
<div class='demo-dyn' data-dynamic-text='abtest'>
  <h1>
    hella fallback text
  </h1>
  <p>
    yep yep
  </p>
</div>
<div class='demo-after'>
  <p>
    Bogus bogus after
  </p>
</div>

CSS

/* Library */

[data-dynamic-text] * {
  opacity: 0;
}

.no-js [data-dynamic-text] *,
[data-dynamic-text][data-dynamic-text-loaded] * {
  opacity: 1;
}

/* Demo */

.demo-dyn {
  background: SlateGrey;
  color: white;
  padding: 1em;
}

.demo-after {
  background: Tomato;
  color: white;
  padding: 1em;
}

.demo-controls {
  padding: 0em 1em 0.5em;
}

body {
  font-family: sans-serif;
}

JavaScript

/* Library */

function dynamicText(templates, params, el) {
  const done = () => {
    el.dataset.dynamicTextLoaded = true;
    return el;
  }

  const paramName = el.dataset.dynamicText;
  const param = params.get(paramName);

  if (!param || !(param in templates)) {
    return done();
  }

  if (param in templates) {
    el.innerHTML = templates[param];
  }

  return done();
}


const templates = {
  a: `
    <h1>"A" version</h1>
    <img src='https://img.kizuna.guap.io/images/879bf634e1ea4e63928dc36c4ac3add1.jpg' width='100' />
  `,
  b: `
    <h1>"B" version</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/5HANnK0nGLc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  `
}

function render(searchString) {
  const urlParams = new URLSearchParams(searchString);
  document.querySelectorAll('[data-dynamic-text]').forEach((e) => dynamicText(templates, urlParams, e));
}

/* Demo */

document.getElementById('loadPage').addEventListener('click', function() {
  render(document.getElementById('searchString').value)
});

const demoEl = document.querySelector('.demo-dyn');
const fallback = demoEl.innerHTML;

document.getElementById('resetPage').addEventListener('click', function() {
  demoEl.innerHTML = fallback;
  delete demoEl.dataset.dynamicTextLoaded;
});