timeline.html

---
layout: fullpage
title: "Timeline #gdmr20 in your timezone"
---

<style>
  #events {
    margin: 10px;
    width: calc(100% - 20px);
    font-size: 0.87em;
    line-height: 1.2em;
  }
  #events > tr:hover {
    background: rgba(0, 0, 0, 0.1);
  }
  .timeline-td {
    width: 50%;
    height: 100%;
  }
  .timeline-date {
    white-space: nowrap;
  }
  #events tr td {
    padding: 2px;
  }
  .timeline-bar {
    height: 100%;
    max-height: 20px;
    display: inline-block;
    width: 100%;
  }
</style>
<table id="events">
  <thead>
    <tr>
      <th>Location</th>
      <th>Language</th>
      <th>Event page</th>
      <th>Time</th>
      <th>Timeline</th>
    </tr>
  </thead>
</table>

<script>
  const EARLIEST_START = new Date("2020-07-18T00:00:00.000+14:00");
  const LATEST_START = new Date("2020-07-19T00:00:00.000-12:00");
  const properDates = e => Object.assign({}, e, {date: Object.assign({}, e.date, { start: new Date(e.date.start), end: new Date(e.date.end )})});
  const sortByStart = (e1, e2) => e1.date.start-e2.date.start;
  const onTheWeekend = e => EARLIEST_START <= e.date.start && e.date.start <= LATEST_START;
  const all_events = Object.values({{ site.data.events_gdmr2020 | jsonify }})
      .map(properDates)
      .sort(sortByStart)
      .filter(onTheWeekend);


  const createEl = (tag, content, contentClass) => {
    const el = document.createElement(tag);
    if(typeof content === "function") {
      content(el);
    } else {
      el.append(content);
    }
    if(typeof contentClass === "string"){
      el.classList.add(contentClass);
    }
    return el;
  }

  const EARLIEST_EVENT = Math.min(...all_events.map(e => e.date.start.getTime()));
  const LAST_EVENT = Math.max(...all_events.map(e => e.date.end.getTime()));
  const DURATION = LAST_EVENT-EARLIEST_EVENT;
  const RATIO = 100/DURATION;
  const svgns = "http://www.w3.org/2000/svg";

  const nowX = (new Date().getTime()-EARLIEST_EVENT)*RATIO;
  const nowLine = nowX >= 0 && nowX <= 100 ? `<line class="nowLine" x2="${nowX}" x1="${nowX}" y2="0" y1="10" stroke-width="0.3" stroke="#D1917E"/>` : "";

  setInterval(() => {
    const lines = [...document.querySelectorAll(".nowLine")];
    lines.forEach(line => {
      const nowX = (new Date().getTime()-EARLIEST_EVENT)*RATIO;
      line.setAttribute("x1", nowX);
      line.setAttribute("x2", nowX);
    })
  }, 60*1000)

  const createContactsTD = (event) => createEl("td", td => {
    const moderators = (event.moderators || [])
      .filter(mod => mod && mod.url && mod.url.includes("twitter.com"))
      .map(mod => {
        const text = "@" +
        mod.url
          .split("/")
          .slice(-1)[0]
          .replace("@", "");

        return createEl("a", a => {
          a.href = mod.url;
          a.append(text);
        })
      })
      .slice(0, 2);

    moderators.forEach(mod => { 
      td.append(mod);
      td.append(" ");
    });
  });

  const createSvg = (event) => {
    const template = document.createElement("template");

    //const x = (event.date.start.getTime()-EARLIEST_EVENT)*RATIO;
    //const width = (event.date.end.getTime()-event.date.start.getTime())*RATIO;
    const x = (event.date.start.getTime()-EARLIEST_EVENT)*RATIO;
    const width = (event.date.end.getTime()-event.date.start.getTime())*RATIO;

    template.innerHTML = `<svg xmlns="${svgns}" preserveAspectRatio="none" viewBox="0 0 100 10" class="timeline-bar">
        <rect style="fill:#1b3f47" x="${x}" height="10" width="${width}" rx="3" ry="20"/>
        ${nowLine}
      </svg>`;

    return template.content.firstChild;
  };

      const initTable = (table) => {
    for(let event of all_events) {
      const row = document.createElement("tr");
      if(event.location.country) {
        row.append(createEl("td", event.location.city +", "+event.location.country+", "+event.location.hosting))
      } else {
        row.append(createEl("td", event.location.hosting));
      }
      row.append(createEl("td", event.language));
//      row.append(createContactsTD(event));

      row.append(createEl("td", td => {
        td.append(createEl("a", a => {
          a.href = event.url;
          a.target="_blank";
          a.append(event.title);
        }));
      }));

      const startTime = event.date.start.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
      const endTime = event.date.end.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
      row.append(createEl("td", startTime + " -" + endTime, "timeline-date"));

      row.append(createEl("td", createSvg(event), "timeline-td"));
      table.append(row);
    }
  }

  const initSvg = (svg) => {

  }


  const run = () => {
    const table = document.querySelector("#events");
    initTable(table);
  };
  run();
</script>