5
5
* release notes pages.
6
6
*/
7
7
8
- // Use jQuery filter to get an array of all the *release* h2 elements
9
- const releases = $ ( 'h2' ) . filter (
10
- ( _i , el ) => ! el . id . match ( / c h e c k p o i n t - r e l e a s e s / )
8
+ // Get all h2 elements that are not checkpoint-releases
9
+ const releases = Array . from ( document . querySelectorAll ( 'h2' ) ) . filter (
10
+ el => ! el . id . match ( / c h e c k p o i n t - r e l e a s e s / )
11
11
) ;
12
12
13
13
// Extract data about each release from the array of releases
14
- releaseData = releases . map ( ( _i , el ) => ( {
14
+ const releaseData = releases . map ( el => ( {
15
15
name : el . textContent ,
16
16
id : el . id ,
17
17
class : el . getAttribute ( 'class' ) ,
18
18
date : el . getAttribute ( 'date' )
19
19
} ) ) ;
20
20
21
21
// Use release data to generate a list item for each release
22
- getReleaseItem = ( releaseData ) => {
23
- var li = document . createElement ( "li" ) ;
22
+ function getReleaseItem ( releaseData ) {
23
+ const li = document . createElement ( "li" ) ;
24
24
if ( releaseData . class !== null ) {
25
25
li . className = releaseData . class ;
26
26
}
@@ -29,30 +29,41 @@ getReleaseItem = (releaseData) => {
29
29
return li ;
30
30
}
31
31
32
- // Use jQuery each to build the release table of contents
33
- releaseData . each ( ( _i , release ) => {
34
- $ ( '#release-toc ul' ) [ 0 ] . appendChild ( getReleaseItem ( release ) ) ;
32
+ // Build the release table of contents
33
+ const releaseTocUl = document . querySelector ( '#release-toc ul' ) ;
34
+ releaseData . forEach ( release => {
35
+ releaseTocUl . appendChild ( getReleaseItem ( release ) ) ;
35
36
} ) ;
36
37
37
38
/*
38
39
* This script is used to expand the release notes table of contents by the
39
40
* number specified in the `show` attribute of `ul.release-list`.
40
41
* Once all the release items are visible, the "Show More" button is hidden.
41
42
*/
42
- $ ( '#release-toc .show-more' ) . click ( function ( ) {
43
- const itemHeight = 1.885 ; // Item height in rem
44
- const releaseNum = releaseData . length ;
45
- const maxHeight = releaseNum * itemHeight ;
46
- const releaseIncrement = Number ( $ ( '#release-list' ) [ 0 ] . getAttribute ( 'show' ) ) ;
47
- const currentHeight = Number (
48
- $ ( '#release-list' ) [ 0 ] . style . height . match ( / \d + \. ? \d + / ) [ 0 ]
49
- ) ;
50
- const potentialHeight = currentHeight + releaseIncrement * itemHeight ;
51
- const newHeight = potentialHeight > maxHeight ? maxHeight : potentialHeight ;
52
-
53
- $ ( '#release-list' ) [ 0 ] . style . height = `${ newHeight } rem` ;
54
-
55
- if ( newHeight >= maxHeight ) {
56
- $ ( '#release-toc .show-more' ) . fadeOut ( 100 ) ;
57
- }
58
- } ) ;
43
+ const showMoreBtn = document . querySelector ( '#release-toc .show-more' ) ;
44
+ if ( showMoreBtn ) {
45
+ showMoreBtn . addEventListener ( 'click' , function ( ) {
46
+ const itemHeight = 1.885 ; // Item height in rem
47
+ const releaseNum = releaseData . length ;
48
+ const maxHeight = releaseNum * itemHeight ;
49
+ const releaseList = document . getElementById ( 'release-list' ) ;
50
+ const releaseIncrement = Number ( releaseList . getAttribute ( 'show' ) ) ;
51
+ const currentHeightMatch = releaseList . style . height . match ( / \d + \. ? \d + / ) ;
52
+ const currentHeight = currentHeightMatch
53
+ ? Number ( currentHeightMatch [ 0 ] )
54
+ : 0 ;
55
+ const potentialHeight = currentHeight + releaseIncrement * itemHeight ;
56
+ const newHeight = potentialHeight > maxHeight ? maxHeight : potentialHeight ;
57
+
58
+ releaseList . style . height = `${ newHeight } rem` ;
59
+
60
+ if ( newHeight >= maxHeight ) {
61
+ // Simple fade out
62
+ showMoreBtn . style . transition = 'opacity 0.1s' ;
63
+ showMoreBtn . style . opacity = 0 ;
64
+ setTimeout ( ( ) => {
65
+ showMoreBtn . style . display = 'none' ;
66
+ } , 100 ) ;
67
+ }
68
+ } ) ;
69
+ }
0 commit comments