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

make headings optional

Browse Source
This commit is contained in:
Cory LaViska
2025-06-11 15:15:29 -04:00
parent 7a2e0161ae
commit ce217995e9
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/webawesome/docs/assets/scripts/search-list.js
View File

@@ -5,7 +5,7 @@
* <div class="search-list">
* <input class="search-list-input" type="search" placeholder="Search...">
*
* <h2>Category Name</h2> <!-- Any heading level h1-h6 works -->
* <h2>Category Name</h2> <!-- Optional heading; h1-h6 all work -->
* <section class="search-list-grid">
* <a href="...">
* <span class="page-name">Component Title</span>
@@ -33,6 +33,7 @@ function enableSearchLists() {
const query = e.target.value.toLowerCase().trim();
let totalVisible = 0;
// Handle sections with headings
container.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
const section = heading.nextElementSibling;
if (!section) return;
@@ -51,6 +52,21 @@ function enableSearchLists() {
totalVisible += sectionVisible;
});
// Handle standalone sections without headings
container.querySelectorAll('.search-list-grid').forEach(section => {
const prevElement = section.previousElementSibling;
const hasHeading = prevElement && /^H[1-6]$/.test(prevElement.tagName);
if (!hasHeading) {
section.querySelectorAll('a').forEach(card => {
const title = card.querySelector('.page-name')?.textContent?.toLowerCase() || '';
const visible = !query || title.includes(query);
card.style.display = visible ? '' : 'none';
if (visible) totalVisible++;
});
}
});
emptyState.hidden = totalVisible > 0;
}, 300);
});