passkey-authenticator-aaguids/explorer/js/aaguids-explorer.js

98 lines
2.6 KiB
JavaScript

'use strict';
function imageTag(src) {
return src ? "<img src='" + src + "'/>" : "";
}
function $(query) {
return document.querySelector(query);
}
function $toggle(query, show) {
return $(query).style.display = (show ? 'block' : 'none');
}
function $$(query) {
return document.querySelectorAll(query);
}
function appendRow(table, html) {
const row = document.createElement("tr");
row.innerHTML = html;
table.appendChild(row);
}
document.onreadystatechange = async () => {
if (document.readyState == "complete") {
try {
let file, switchJsonUrl, switchJsonText;
if (location.search === "?combined") {
file = "combined_aaguid.json";
switchJsonUrl = ".";
switchJsonText = "Exclude MDS authenticators"
} else {
file = "aaguid.json";
switchJsonUrl = "./?combined";
switchJsonText = "Include MDS authenticators"
}
$("#switch-json").setAttribute("href", switchJsonUrl);
$("#switch-json").innerText = switchJsonText;
const response = await fetch("../" + file);
const json = await response.json();
$toggle("#loading", false);
$toggle("#main", true);
const table = $("#aaguids");
appendRow(table, `
<tr>
<th>AAGUID <br/></th>
<th>Name <br/>
<input id="filter" type="text" placeholder="Filter by name..."/>
<a id="clear-filter" href="#" title="clear">X</a>
</th>
<th>Icon light</th>
<th class="dark">Icon dark</th>
</tr>
`);
for (const aaguid in json) {
if (Object.hasOwnProperty.call(json, aaguid)) {
appendRow(table, `
<tr>
<td>${aaguid}</td>
<td class="name">${json[aaguid].name}</td>
<td class="icon">${imageTag(json[aaguid].icon_light)}</td>
<td class="icon dark">${imageTag(json[aaguid].icon_dark)}</td>
</tr>
`);
}
}
function applyFilter(filter) {
$$("#aaguids tr").forEach( (row) => {
const name = row.querySelector("td.name")?.innerText?.toLowerCase();
const show = !filter || (!name || name.indexOf(filter.toLowerCase()) >= 0);
row.style.display = (show ? 'table-row' : 'none');
});
}
$("#filter").addEventListener("keyup", () => {
applyFilter($("#filter").value);
});
$("#clear-filter").addEventListener("click", (event) => {
$("#filter").value = "";
applyFilter();
event.preventDefault();
});
} catch (err) {
$toggle("#loading-error", true);
console.error(err);
}
}
}