D3 Examples - Sommar & Vinter i P1: archive

xxxxxxxxxx
 
<!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); };
});
​
function show(ep) {
  var date = ep.when.replace(' klockan ', ', ');
  var time = ep.minutes + ' min';
  var link = { href: ep.url, title: ep.person };
  var text = ep.preamble;
  if (text.indexOf(ep.person) === 0)
    text = text.slice(ep.person.length).replace(/^[\s.]+/, '');
  if (ep.person == false) delete link.title;
  var attr = { class: 'episode', 'data-name': ep.title };
  if (!(new RegExp(q.name || '', 'i')).test(ep.title))
    attr.style = 'display: none';
  return div(attr, [
    h2(a(link, q(ep.title))),
    img({ src: ep.img, title: text, width: 292, height: 164 }),
    h4( q(date) + ' ('+ q(time) +')'),
    audio({ src: ep.mp3, controls: true, preload: 'none' }),
    '</div>'
  ].join('\n'));
}
​
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';
  });
};
​
function unparam(s) {
  var data = {}, tuple;
  (s||location.search).replace(/\+/g, '%20').split('&').forEach(function(k, t) {
    if (t = /^\??([^=]*)=(.*)/.exec(k))
      try { data[decodeURIComponent(t[1])] = decodeURIComponent(t[2]); }
      catch (t) {}
  });
  return data;
}
</script>
<style>
body.loaded .loading { display: none; }
audio { display: block; width: 300px; }
div { float: left; }
a { text-decoration: none; }
.filter { width: 80%; }
label { clear: left; }
​
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>
<!--
<tr><th>Kompositör:</th><td><input class="filter" id="by-Kompositör"></td></tr>
<tr><th>Skivbolag:</th><td><input class="filter" id="by-Bolag"></td></tr>
<tr><th>Album:</th><td><input class="filter" id="by-Album"></td></tr>
-->
</tbody></table>
​
<script>
var Q = unparam();
var field = document.querySelector('#by-name');
if (Q.name) {
  field.value = Q.name;
  window.onkeyup({ target: field });
}
​
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>
​
    