Files
apple-internals/index.html
Michael Roitzsch 1f1ad17d02 highlight filter term in content
use <mark> tag and style accordingly
2020-10-19 19:08:07 +02:00

98 lines
3.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<meta charset="utf-8">
<title>Apple Internals</title>
<script>
// generate HTML markup from plain text internals document
class Converter {
constructor(text) {
this.text = text;
this.filter = "";
}
generate() {
const dl = document.createElement("dl");
dl.setAttribute("class", "row");
for (const rowText of this.text.split("\n"))
if (rowText.length && rowText.toLowerCase().includes(this.filter.toLowerCase()))
dl.append.apply(dl, this.generateRow(rowText));
return dl;
}
generateRow(text) {
let result = new Array();
const parts = text.split("\t");
result.push(this.generateTerm(parts[0]));
result.push(this.generateDefinition(parts.slice(1).join("; ")));
return result;
}
generateTerm(text) {
const dt = document.createElement("dt");
dt.setAttribute("class", "col-sm-2");
dt.append.apply(dt, this.highlight(text));
return dt;
}
generateDefinition(text) {
const dd = document.createElement("dd");
dd.setAttribute("class", "col-sm-10");
dd.append.apply(dd, this.highlight(text));
return dd;
}
highlight(text) {
if (!this.filter.length) return Array(text);
let result = new Array();
let index = 0;
while (index = text.toLowerCase().indexOf(this.filter.toLowerCase()), index >= 0) {
result.push(text.substr(0, index));
const mark = document.createElement("mark");
mark.append(text.substr(index, this.filter.length));
result.push(mark);
text = text.substr(index + this.filter.length);
}
result.push(text);
return result;
}
}
document.addEventListener("DOMContentLoaded", event => {
// load main content
fetch("internals.txt").then(function(response) {
if (!response.ok) return "";
return response.text();
}).then(function(text) {
const converter = new Converter(text);
const update = filter => {
converter.filter = filter;
const content = document.getElementById("content");
while (content.firstChild) content.firstChild.remove();
content.append(converter.generate());
};
// update content when typing a filter word
document.getElementById("filter").addEventListener("input", event => {
update(event.target.value.length >= 3 ? event.target.value : "");
});
// place cursor in filter control
document.getElementById("filter").focus();
update("");
});
});
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<style type="text/css">
body {
font-size: 90%;
}
mark {
position: relative;
z-index: -1;
padding: .2em;
margin: -.2em;
}
</style>
<body class="container-fluid p-4">
<h1 class="mb-3">Apple Internals</h1>
<p class="my-0">Collected knowledge about the internals of Apples platforms.</p>
<p class="my-0">Sorted by keyword, abbreviation, or codename.</p>
<p>Feel free to contribute on <a href="https://github.com/mroi/apple-internals">GitHub</a>.</p>
<input id="filter" type="text" class="form-control" placeholder="Filter" style="max-width:30em">
<div id="content" class="mt-3">
</body>