-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
124 lines (107 loc) · 4.24 KB
/
index.html
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
<head>
<title>UK TIMES Codes & Acronyms</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="utf-8">
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="d3.min.js"></script> <!-- From http://d3js.org/ -->
<script src="lunr.min.js"></script> <!-- From http://lunrjs.com -->
<style>
tr.entry.hide {
display: none;
}
tr:nth-child(even) { background-color: #e4ca00; }
</style>
<body>
<h1>List of codes in UK TIMES</h1>
<p>You can download an <a href='./example.xlsx' download>example excel file</a> that connects to this data, or the <a href='./uk_times_acronyms.iqy' download>Excel data connection file</a> if you want to make the connection from scratch. Please see the <a href='https://github.com/decc/uk-times-acronyms/blob/gh-pages/README.md'>README</a> for instructions on how to edit this data.</p>
<div>
Filter: <input type='text' id='filter' placeholder='Filter...' autocomplete='off' autofocus>
<a href='/' id='showall'>Show all</a>
</div>
<table>
<thead>
<tr class='header'><th>Code</th><th>Short description</th><th>Long description</th></tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// We create a searchable index of all the records
// See http://lunrjs.com
var index = lunr(function () {
this.field('Code', {boost: 10});
this.field('Short', {boost: 5});
this.field('Long');
this.ref('Code');
this.pipeline.reset();
});
// We need to convert a code into a valid id
var id_for_code = function(code) {
return "code_"+code.replace(/[^a-z0-9]+/ig,'_');
}
// This loads the data and draws the table
d3.tsv("codes.tsv").get(function(error, rows) {
var rows = d3.select("tbody").selectAll("tr.entry")
.data(rows);
var new_rows = rows.enter().append("tr")
.attr("class", "entry")
.attr("id", function(d) { return id_for_code(d["Code"]); });
// Adds the record to the search index
new_rows.each(function(d) { index.add(d)})
new_rows.append("td").attr("class", "code");
new_rows.append("td").attr("class", "short");
new_rows.append("td").attr("class", "long");
rows.select("td.code").text(function(d) { return d["Code"] });
rows.select("td.short").text(function(d) { return d["Short"] });
rows.select("td.long").text(function(d) { return d["Long"] });
rows.exit().remove();
});
// This wires up the search box
d3.select("#filter").on('keyup', function() {
// Clear the search if the user presses escape
if(d3.event.keyCode == 27) { clear_filter(); return; }
// Get the search term the user has input
var term = d3.select("#filter").node().value;
if(term.length == 0) {
// If the search term is empty show everything
d3.selectAll(".entry.hide").classed('hide', false);
} else if(term.length == 1) {
// If it is short, just match the first couple of letters of the code
d3.selectAll("tr.entry").each(function(d) {
var row = d3.select(this);
if(d.Code[0] != term) {
row.classed("hide", true);
}
});
} else if(term.length == 2) {
// If it is short, just match the first couple of letters of the code
d3.selectAll("tr.entry").each(function(d) {
var row = d3.select(this);
if(d.Code[0] != term[0] || d.Code[1] != term[1]) {
row.classed("hide", true);
}
});
} else {
// Hide all the rows
d3.selectAll(".entry").classed('hide', true);
// Then look through the results and removes
// the hide label on each of the matching rows
index.search(term).forEach(function(result) {
d3.select("tr#"+id_for_code(result.ref)).classed("hide", false);
});
}
d3.event.preventDefault();
});
var clear_filter = function() {
// This undoes the effect of the search
d3.selectAll(".entry.hide").classed('hide', false);
// This clears the search box
d3.select("#filter").node().value = "";
};
d3.select('#showall').on('click', function() { clear_filter(); d3.event.preventDefault(); return; });
</script>
</body>
</html>