js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move cheatsheet JS to separate file

Browse Source
This commit is contained in:
Lea Verou
2024-12-03 12:36:51 -05:00
parent 3c81f9c5e9
commit 6cc3b05fb7
2 changed files with 77 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/assets/scripts/cheatsheet.js Normal file
View File

@@ -0,0 +1,76 @@
let url = new URL(location);
const pushedURL = false;
const matchers = {
default(textContent, query) {
return textContent.includes(query);
},
i(textContent, query) {
return textContent.toLowerCase().includes(query.toLowerCase());
},
regexp(textContent, query) {
query.lastIndex = 0;
return query.test(textContent);
}
};
matchers.iregexp = matchers.regexp; // i is baked into the query
function filterByName(value) {
const previousFilter = url.searchParams.get('name') || '';
url = new URL(location);
if (value) {
const isRegexp = name_search_regexp.checked;
const i = !name_search_i.checked;
const query = isRegexp ? new RegExp(value, 'gmsv' + (i ? 'i' : '')) : value;
const matcherId = (i ? 'i' : '') + (isRegexp ? 'regexp' : '');
const matcher = matchers[matcherId] ?? matchers.default;
for (const th of document.querySelectorAll('table tbody th:first-child')) {
const tr = th.parentNode;
const matches = matcher(th.textContent, query);
tr.toggleAttribute('hidden', !matches);
}
url.searchParams.set('name', value);
if (matcherId) {
url.searchParams.set('match', matcherId);
} else {
url.searchParams.delete('match');
}
} else {
for (const tr of document.querySelectorAll('table tbody tr[hidden]')) {
tr.removeAttribute('hidden');
}
url.searchParams.delete('name');
url.searchParams.delete('match');
}
if (value !== previousFilter) {
history[pushedURL ? 'replaceState' : 'pushState'](null, '', url);
}
// Update heading counts
for (const h2 of document.querySelectorAll('h2:has(+ table)')) {
const count = h2.querySelector('.count');
if (!count) continue;
const table = h2.nextElementSibling;
const visibleRows = table.querySelectorAll('tbody tr:not([hidden])').length;
count.textContent = visibleRows;
const outlineLink = document.querySelector(`#outline-standard a[href="#${h2.id}"]`);
if (outlineLink) {
// Why not just = h2.textContent? To skip the "Jump to heading" link
outlineLink.textContent = '';
outlineLink.append(...[...h2.childNodes].slice(0, 3).map(n => n.cloneNode(true)));
}
}
}
if (name_search.value) {
filterByName(name_search.value);
}
name_search_group.addEventListener('wa-input', e => filterByName(name_search.value));

81
docs/docs/components/cheatsheet.njk
View File

@@ -43,86 +43,7 @@ table code {
}
}
</script>
<script type=module>
let url = new URL(location);
let pushedURL = false;
let matchers = {
default (textContent, query) {
return textContent.includes(query);
},
i (textContent, query) {
return textContent.toLowerCase().includes(query.toLowerCase());
},
regexp (textContent, query) {
query.lastIndex = 0;
return query.test(textContent);
},
};
matchers.iregexp = matchers.regexp; // i is baked into the query
function filterByName (value) {
let previousFilter = url.searchParams.get("name") || "";
url = new URL(location);
if (value) {
let isRegexp = name_search_regexp.checked;
let i = !name_search_i.checked;
let query = isRegexp ? new RegExp(value, "gmsv" + (i ? "i" : "")) : value;
let matcherId = (i ? "i" : "") + (isRegexp ? "regexp" : "");
let matcher = matchers[matcherId] ?? matchers.default;
for (let th of document.querySelectorAll("table tbody th:first-child")) {
let tr = th.parentNode;
let matches = matcher(th.textContent, query);
tr.toggleAttribute("hidden", !matches);
}
url.searchParams.set("name", value);
if (matcherId) {
url.searchParams.set("match", matcherId);
}
else {
url.searchParams.delete("match");
}
}
else {
for (let tr of document.querySelectorAll("table tbody tr[hidden]")) {
tr.removeAttribute("hidden");
}
url.searchParams.delete("name");
url.searchParams.delete("match");
}
if (value !== previousFilter) {
history[pushedURL ? "replaceState" : "pushState"](null, "", url);
}
// Update heading counts
for (let h2 of document.querySelectorAll("h2:has(+ table)")) {
let count = h2.querySelector(".count");
if (!count) continue;
let table = h2.nextElementSibling;
let visibleRows = table.querySelectorAll("tbody tr:not([hidden])").length;
count.textContent = visibleRows;
let outlineLink = document.querySelector(`#outline-standard a[href="#${ h2.id }"]`);
if (outlineLink) {
// Why not just = h2.textContent? To skip the "Jump to heading" link
outlineLink.textContent = "";
outlineLink.append(...[...h2.childNodes].slice(0, 3).map(n => n.cloneNode(true)));
}
}
}
if (name_search.value) {
filterByName(name_search.value);
}
name_search_group.addEventListener("wa-input", e => filterByName(name_search.value));
</script>
<script type="module" src="/assets/scripts/cheatsheet.js"></script>
{% for type, all in componentsBy -%}
{% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %}