9e38a854b9
* Add custom hover shadows * Support avatars * Add guide-card include * Use it in product-landing * Add gradient styles * Add guides frontmatter * Use guideArticles instead of full objects * Add support for authors * Add support for category header * Just pass the whole page * Use it * guide.url => guide.href * Use `*.githubusercontent.com` * Fix mobile card width * Remove showDescription check * Use featureLinks.guideCards * Forgot an if * Add contextualizers/actions-code-examples * Use code-example-card include * Tweak sizing/shadows * Add a basic filterer * Some visual tweaks * labels => tags * Cleanup some code * Improve spacing on mobile * Add "No results!" blurb * Fix a boog * Tweak spacing * Remove support banner * Improve "No results" state * Just use login instead of name/avatarUrl * Change card spacing * Use circular avatars * Add "Show more" button * Add margin beneath "Guides" * Use smaller font * Assume github.com for code examples * Show two columns at small screen * Make "Show more" a btn * Use the "repo" octicon * Link to contributing guide * Use a YAML file instead of a middleware * Link straight to the file * Fix some wonky markuip * Fix a broken link * Fix the borked test * Allow variables that aren't strings * Fix remaining tests
93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
function filterCards (cards, value) {
|
|
const noResults = document.querySelector('.js-code-example-no-results')
|
|
const matchReg = new RegExp(value, 'i')
|
|
|
|
// Track whether or not we had at least one match
|
|
let hasMatches = false
|
|
|
|
for (let index = 0; index < cards.length; index++) {
|
|
const card = cards[index]
|
|
|
|
// Filter was emptied
|
|
if (!value) {
|
|
// Make sure we don't show the "No results" blurb
|
|
hasMatches = true
|
|
|
|
// Hide all but the first 6
|
|
if (index > 5) {
|
|
card.classList.add('d-none')
|
|
} else {
|
|
card.classList.remove('d-none')
|
|
}
|
|
|
|
continue
|
|
}
|
|
|
|
// Check if this card matches
|
|
const { title, description, tags } = card.dataset
|
|
const cardMatches = (
|
|
matchReg.test(title) ||
|
|
matchReg.test(description) ||
|
|
matchReg.test(tags)
|
|
)
|
|
|
|
if (cardMatches) {
|
|
card.classList.remove('d-none')
|
|
hasMatches = true
|
|
} else {
|
|
card.classList.add('d-none')
|
|
}
|
|
}
|
|
|
|
// If there wasn't at least one match, show the "no results" text
|
|
if (!hasMatches) {
|
|
document.querySelector('.js-code-example-filter-value').textContent = value
|
|
noResults.classList.remove('d-none')
|
|
} else {
|
|
noResults.classList.add('d-none')
|
|
}
|
|
}
|
|
|
|
export default function filterCodeExamples () {
|
|
const filter = document.querySelector('.js-code-example-filter')
|
|
if (!filter) return
|
|
|
|
const cards = Array.from(document.querySelectorAll('.js-code-example-card'))
|
|
const showMoreButton = document.querySelector('.js-code-example-show-more')
|
|
|
|
filter.addEventListener('keyup', evt => {
|
|
const value = evt.currentTarget.value
|
|
|
|
// Show or hide the "Show more" button if there is a value
|
|
if (value) showMoreButton.classList.add('d-none')
|
|
else showMoreButton.classList.remove('d-none')
|
|
|
|
filterCards(cards, value)
|
|
})
|
|
|
|
showMoreButton.addEventListener('click', evt => {
|
|
// Number of cards that are currently visible
|
|
const numShown = cards.filter(card => !card.classList.contains('d-none')).length
|
|
// We want to show 6 more
|
|
const totalToShow = numShown + 6
|
|
|
|
for (let index = numShown; index < cards.length; index++) {
|
|
const card = cards[index]
|
|
|
|
// If the card we're at is less than the total number of cards
|
|
// we should show, show this one
|
|
if (index < totalToShow) {
|
|
card.classList.remove('d-none')
|
|
} else {
|
|
// Otherwise, we've shown the ones we intend to so exit the loop
|
|
break
|
|
}
|
|
}
|
|
|
|
// They're all shown now, we should hide the button
|
|
if (totalToShow === cards.length) {
|
|
evt.currentTarget.style.display = 'none'
|
|
}
|
|
})
|
|
}
|