mirror of
https://github.com/mroi/apple-internals.git
synced 2026-02-12 17:12:44 +00:00
114 lines
3.9 KiB
HTML
114 lines
3.9 KiB
HTML
<!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 : "");
|
||
});
|
||
// select filter text on return
|
||
document.getElementById("filter").addEventListener("change", event => {
|
||
event.target.select();
|
||
});
|
||
// clear filter button
|
||
document.getElementById("clear").addEventListener("click", event => {
|
||
document.getElementById("filter").value = "";
|
||
document.getElementById("filter").focus();
|
||
update("");
|
||
});
|
||
// initialize filter control
|
||
document.getElementById("clear").click();
|
||
});
|
||
});
|
||
</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 Apple’s 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>
|
||
<div class="input-group" style="max-width:30em">
|
||
<input id="filter" type="text" class="form-control" placeholder="Filter">
|
||
<div id="clear" class="input-group-text">
|
||
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div id="content" class="mt-3">
|
||
</body>
|