diff --git a/sass/pages/_assets.scss b/sass/pages/_assets.scss index b626cd41b9..3f95cffa0c 100644 --- a/sass/pages/_assets.scss +++ b/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; + } + } + } } \ No newline at end of file diff --git a/static/assets.js b/static/assets.js new file mode 100644 index 0000000000..77031d1bd9 --- /dev/null +++ b/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' + }) +} \ No newline at end of file diff --git a/templates/assets.html b/templates/assets.html index 7d777caf09..1f83e9556d 100644 --- a/templates/assets.html +++ b/templates/assets.html @@ -15,6 +15,10 @@