Files
apple-internals/index.html
Michael Roitzsch 270096c620 parse out structural elements from the text
row, term, definition
2020-10-19 19:08:07 +02:00

77 lines
2.5 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(this.highlight(text));
return dt;
}
generateDefinition(text) {
const dd = document.createElement("dd");
dd.setAttribute("class", "col-sm-10");
dd.append(this.highlight(text));
return dd;
}
highlight(text) {
// TODO: highlight search text using <mark>
return text;
}
}
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 content = document.getElementById("content");
content.append(converter.generate());
// update content when typing a filter word
document.getElementById("filter").addEventListener("input", event => {
// TODO: re-run converter to filter table rows and highlight typed text
});
// place cursor in filter control
document.getElementById("filter").focus();
});
});
</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%;
}
</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>