FilesExpand file tree

 main

/

filter-code-examples.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

92 lines (75 loc) · 2.58 KB

 main

/

filter-code-examples.js

Copy path

Top

File metadata and controls

• Code
• Blame

92 lines (75 loc) · 2.58 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

91

92

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'

}

})

}