CalvinBackup/apple-internals
1
0
Fork 0
mirror of https://github.com/mroi/apple-internals.git synced 2026-02-12 17:12:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

highlight filter term in content

Browse Source 
use <mark> tag and style accordingly
This commit is contained in:
Michael Roitzsch
2020-10-19 19:07:56 +02:00
parent c8ad794b5e
commit 1f1ad17d02
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@@ -27,18 +27,28 @@ class Converter {
generateTerm(text) {
const dt = document.createElement("dt");
dt.setAttribute("class", "col-sm-2");
dt.append(this.highlight(text));
dt.append.apply(dt, this.highlight(text));
return dt;
}
generateDefinition(text) {
const dd = document.createElement("dd");
dd.setAttribute("class", "col-sm-10");
dd.append(this.highlight(text));
dd.append.apply(dd, this.highlight(text));
return dd;
}
highlight(text) {
// TODO: highlight search text using <mark>
return 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;
}
}
@@ -70,6 +80,12 @@ document.addEventListener("DOMContentLoaded", event => {
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>