Asset page filtering (#734)

Co-authored-by: Carter Anderson <mcanders1@gmail.com>

sass/pages/_assets.scss

@@ -16,4 +16,19 @@
     .item-grid {
         margin-bottom: 52px;
     }
+
+    .assets-search {
+        margin-bottom: 20px;
+
+        &__input {
+            @include card;
+            font-size: 1.2rem;
+            padding: $asset-card-padding;
+            width: 100%;
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+    }
 }

static/assets.js

@@ -0,0 +1,39 @@
+const searchElement = document.querySelector('#assets-search')
+
+searchElement.addEventListener("input", (_) => {
+    filterSearchTerms()
+    hideEmptySubSections()
+    hideEmptySections()
+})
+
+function filterSearchTerms() {
+    const searchTerms = searchElement.value.toLowerCase().split(' ')
+    for (const asset of document.querySelectorAll('.asset-card')) {
+        const fullText = asset.text.toLowerCase()
+        const searchMatch = searchTerms.every((term) => fullText.includes(term))
+        asset.parentElement.style.display = searchMatch ? 'block' : 'none'
+    }
+}
+
+function hideEmptySubSections() {
+    for (const itemGrid of document.querySelectorAll('.item-grid')) {
+        const cardInGrid = [...itemGrid.querySelectorAll('.asset-card')]
+        const areAllHidden = (cardInGrid.every((card) => card.parentElement.style.display === 'none'))
+        itemGrid.style.display = areAllHidden ? 'none' : 'grid'
+        itemGrid.previousElementSibling.style.display = areAllHidden ? 'none' : 'block'
+    }
+}
+
+function hideEmptySections() {
+    document.querySelectorAll('.asset-section').forEach(section => {
+        let nextElement = section.nextElementSibling
+        while (nextElement && !nextElement.classList.contains('asset-section')) {
+            if (nextElement.style.display !== 'none') {
+                section.style.display = 'block'
+                return
+            }
+            nextElement = nextElement.nextElementSibling
+        }
+        section.style.display = 'none'
+    })
+}

templates/assets.html

@@ -15,6 +15,10 @@
     <div class="assets">
         {{ assets_macros::init_svg() }}
 
+        <div class="assets-search">
+            <input class="assets-search__input" type="text" id="assets-search" placeholder="Search (ie: 0.11 MIT)">
+        </div>
+
         <div class="assets-intro media-content">
             A collection of third-party Bevy assets, plugins, learning resources, and apps made by the community. If you would like to
             share what you're working on, <a href="https://github.com/bevyengine/bevy-assets">submit a pull request</a>!
@@ -62,4 +66,8 @@ <h3 class="asset-subsection" id="{{ section.title | slugify }}">
         {% endfor %}
         {% endfor %}
     </div>
+
+    <script type="module">
+        import '/assets.js'
+    </script>
 {% endblock %}