Sommar & Vinter i P1: archive

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Sommar &amp; Vinter i P1</title>
<script>
function q(s) { return s
  .replace(/\x26/g, '&amp;')
  .replace(/\x3c/g, '&lt;')
  .replace(/\x3e/g, '&gt;')
  .replace(/\x22/g, '&quot;');
}

function tag(attr, content) {
  var html = '<' + this, end = this == 'img' ? '' : '</'+ this +'>';
  if (typeof attr == 'string') {
    content = attr;
    attr = false;
  }
  if (attr)
    for (var key in attr)
      html += ' ' + q(key) + '="'+ q(String(attr[key])) +'"';
  return html +'>'+ (content == null ? '' : content) + end;
}

['a', 'audio', 'div', 'img', 'h2', 'h4'].forEach(function(name) {
  window[name] = function() { return tag.apply(name, arguments); };
});

window.onkeyup = function(e) {
  if (e.target.nodeName !== 'INPUT') return;
  var id = e.target.id, by = id && id.replace(/^by-/, '');
  var val = e.target.value, match = new RegExp(val, 'i');

function show(x) { x.style.display = ''; }
  function hide(x) { x.style.display = 'none'; }
  function each(sel, fn) {
    [].slice.call(document.querySelectorAll(sel)).forEach(fn);
  }

each('.episode', function(ep) {
    ep.style.display = match.test(ep.dataset[by]) ? '' : 'none';
  });
};

h2, h4, .episode {
  width: 300px;
  margin-top: 1px;
  margin-bottom: 2px;
}

h2 {
  font-size: 1.4em;
}

.episode {
  height: 270px;
  margin: 10px 10px 2px 0;
  text-align: center;
}

img {
  border: 3px solid #fff;
  outline: 1px solid #ccc;
}
</style>
</head><body>

<table width="100%">
<tbody><tr><th width="10%">Pratare:</th><td><input class="filter" id="by-name"></td></tr>

</tbody></table>

try { !document.body.classList.contains('loaded') && fetch('sommar-vinter.json')
  .then((response) => {
    return response.json();
  }).then(function(json) {
    document.body.innerHTML += json.list.map(show).join('\n\n');
    document.body.className += ' loaded';
    if (Q.name) {
      field.value = Q.name;
    }
  }).catch(function(ex) {
    console.log('parsing failed', ex);
  });
} catch(e) {
  document.body.innerHTML = 'Sorry; you need a modern browser like Chrome Canary, supporting the fetch api';
}
</script>

<h1 class="loading">Loading; please wait</h1>

</body></html>