Timeline/index.html at master · LuanDopke/Timeline · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang=en-us>
<head>
  <meta charset=utf-8>
  <meta name=description content="Convert Markdown timeline to Graphviz DOT.">
  <title>Timeline</title>
</head>
<body>
<header style=position:fixed;font-family:Arial,sans-serif>
<h1 style=margin:0>Timeline</h1>
<button style=position:absolute;right:0 onclick=render()>Generate</button>
<textarea id=input rows=12 cols=60 style=white-space:pre></textarea>
<select id=dir style=display:block;width:100% onchange=render()>
  <option value=LR>Left-Right</option>
  <option value=RL>Right-Left</option>
  <option value=TB>Top-Bottom</option>
  <option value=BT>Bottom-Top</option>
</select>
<button style=display:block;width:50%;position:absolute onclick=download('graph.dot',dot)>Download DOT</button>
<button style=display:block;width:50%;position:absolute;right:0 onclick=download('graph.svg',document.getElementById('graph').innerHTML)>Download SVG</button>
<p style=position:fixed;bottom:0;background:#fffc>See this project on <a href=https://github.com/maumagnaguagno/Timeline>GitHub</a><br>Made by <a href=https://github.com/maumagnaguagno>Mau Magnaguagno</a></p>
</header>
<div id=graph></div>
<script src=https://d3js.org/d3.v6.min.js></script>
<script src=https://unpkg.com/@hpcc-js/wasm@1.4.1/dist/index.min.js type=javascript/worker></script>
<script src=https://unpkg.com/d3-graphviz@4.0.0/build/d3-graphviz.min.js></script>
<script>
const params = new URLSearchParams(window.location.search), from = params.get("from") || "README.md";
fetch(from).then(r => r.text()).then(t => {document.getElementById("input").value = t; render()});
document.getElementById("dir").value = params.get("dir") || (window.innerWidth >= window.innerHeight ? "LR" : "TB");
var dot, graphviz = d3.select("#graph").graphviz({width: window.innerWidth - 20, height: window.innerHeight - 20, fit: true});
function render() {
  var lines = document.getElementById("input").value.split("\n"), nodes = {}, info = {}, node_counter = 0, cluster_counter = 0, classcolor="";
  dot = "digraph timeline {\n  rankdir=" + document.getElementById("dir").value + "\n  nodesep=0.15\n  node [shape=box target=_blank style=filled fillcolor=white]\n\n";
  for(var i = 0; i < lines.length; ++i)
    if(m = lines[i].match(/^-\s*\[(.+)\]\s*(.*)/)) { // Node
      (nodes[m[1]] ||= []).push("node_" + node_counter);
      dot += "    node_" + node_counter++ + ' [label="' + [m[1]].concat(m[2] ? m[2].split(/\s+/) : []).join("\\n") + '"' + (info[m[1]] || "") + "]\n";
    } else if(m = lines[i].match(/^##\s+(.*)/)) { // Cluster
      if(cluster_counter) dot += "  }\n\n";
      dot += "  subgraph cluster_" + cluster_counter + ' {\n    label="' + m[1] + '"\n    order_node_' + cluster_counter++ + " [shape=point height=0 style=invis]\n";
    } else if(m = lines[i].match(/^\[(.+)\]:\s+(\S+)(?:\s+("[^"]+"))?$/)) // URL and tooltip
      info[m[1]] = ' URL="' + m[2] + (m[3] ? '" tooltip=' + m[3] : '"') + classcolor;
    else if(m = lines[i].match(/^<!--(\w+)\s+(#?\w+)-->/)) // Class and color
      classcolor = ' class="' + m[1] + '" fillcolor="' + m[2] + '"';
  if(cluster_counter) dot += "  }\n";
  if(cluster_counter > 1) {
    for(var i = 0; i < cluster_counter - 1;) dot += "\n  order_node_" + i++ + " ->";
    dot += "\n  order_node_" + (cluster_counter - 1) + " [style=invis]\n";
  }
  const values = Object.values(nodes);
  for(var i = 0; i < values.length; ++i) if(values[i].length > 1) dot += "\n  " + values[i].join(" -> ");
  graphviz.renderDot(dot += "\n}");
}
function download(filename, text) {
  var element = document.createElement("a");
  element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
  element.setAttribute("download", filename);
  element.click();
}
window.onresize = () => d3.select("#graph").selectWithoutDataPropagation("svg").attr("width", window.innerWidth - 20).attr("height", window.innerHeight - 20);
</script>
</body>
</html>