FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
docs/javascripts/filter-code-examples.js at main · dvanwinkle/docs · GitHub
dvanwinkle
/
docs
Public
forked from
github/docs
Notifications
You must be signed in to change notification settings
Fork
0
Star
0
Code
Pull requests
0
Actions
Projects
Security and quality
0
Insights
Additional navigation options
Code
Pull requests
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
docs
/
javascripts
/
filter-code-examples.js
Copy path
More file actions
More file actions
Latest commit
History
History
History
92 lines (75 loc) · 2.58 KB
Breadcrumbs
docs
/
javascripts
/
filter-code-examples.js
Copy path
File metadata and controls
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'
}
}
)
}
Back
|
FazBrowse Home
|
New Git URL