forked from github/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfilter-cards.js
More file actions
90 lines (74 loc) · 2.61 KB
/
filter-cards.js
File metadata and controls
90 lines (74 loc) · 2.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
function filterCards (cards, value) {
const noResults = document.querySelector('.js-filter-card-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 - any `data-*` attribute contains the string
const cardMatches = Object.keys(card.dataset)
.some(key => matchReg.test(card.dataset[key]))
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-filter-card-value').textContent = value
noResults.classList.remove('d-none')
} else {
noResults.classList.add('d-none')
}
}
export default function filterCodeExamples () {
const filter = document.querySelector('.js-filter-card-filter')
const cards = Array.from(document.querySelectorAll('.js-filter-card'))
const showMoreButton = document.querySelector('.js-filter-card-show-more')
if (filter) {
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)
})
}
if (showMoreButton) {
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'
}
})
}
}