22
33let BeautifulJekyllJS = {
44
5- bigImgEl : null ,
6- numImgs : null ,
5+ bigImgEl : null ,
6+ numImgs : null ,
77
8- init : function ( ) {
8+ init : function ( ) {
99 setTimeout ( BeautifulJekyllJS . initNavbar , 10 ) ;
1010
11+ let navbar = document . querySelector ( ".navbar" ) ;
12+
1113 // Shorten the navbar after scrolling a little bit down
12- $ ( window ) . scroll ( function ( ) {
13- if ( $ ( ".navbar" ) . offset ( ) . top > 50 ) {
14- $ ( ". navbar" ) . addClass ( "top-nav-short" ) ;
15- } else {
16- $ ( ". navbar" ) . removeClass ( "top-nav-short" ) ;
17- }
14+ window . addEventListener ( 'scroll' , function ( ) {
15+ if ( window . scrollY > 50 ) {
16+ navbar . classList . add ( "top-nav-short" ) ;
17+ } else {
18+ navbar . classList . remove ( "top-nav-short" ) ;
19+ }
1820 } ) ;
1921
2022 // On mobile, hide the avatar when expanding the navbar menu
21- $ ( '# main-navbar') . on ( 'show.bs.collapse' , function ( ) {
22- $ ( ". navbar" ) . addClass ( "top-nav-expanded" ) ;
23+ document . getElementById ( ' main-navbar') . addEventListener ( 'show.bs.collapse' , function ( ) {
24+ navbar . classList . add ( "top-nav-expanded" ) ;
2325 } ) ;
24- $ ( '# main-navbar') . on ( 'hidden.bs.collapse' , function ( ) {
25- $ ( ". navbar" ) . removeClass ( "top-nav-expanded" ) ;
26+ document . getElementById ( ' main-navbar') . addEventListener ( 'hidden.bs.collapse' , function ( ) {
27+ navbar . classList . remove ( "top-nav-expanded" ) ;
2628 } ) ;
2729
2830 // show the big header image
@@ -31,26 +33,30 @@ let BeautifulJekyllJS = {
3133 BeautifulJekyllJS . initSearch ( ) ;
3234 } ,
3335
34- initNavbar : function ( ) {
36+ initNavbar : function ( ) {
3537 // Set the navbar-dark/light class based on its background color
36- const rgb = $ ( '.navbar' ) . css ( "background-color" ) . replace ( / [ ^ \d , ] / g, '' ) . split ( "," ) ;
38+ const rgb = getComputedStyle ( document . querySelector ( '.navbar' ) ) . backgroundColor . replace ( / [ ^ \d , ] / g, '' ) . split ( "," ) ;
3739 const brightness = Math . round ( ( // http://www.w3.org/TR/AERT#color-contrast
3840 parseInt ( rgb [ 0 ] ) * 299 +
3941 parseInt ( rgb [ 1 ] ) * 587 +
4042 parseInt ( rgb [ 2 ] ) * 114
4143 ) / 1000 ) ;
44+
45+ let navbar = document . querySelector ( ".navbar" ) ;
4246 if ( brightness <= 125 ) {
43- $ ( ".navbar" ) . removeClass ( "navbar-light" ) . addClass ( "navbar-dark" ) ;
47+ navbar . classList . remove ( "navbar-light" ) ;
48+ navbar . classList . add ( "navbar-dark" ) ;
4449 } else {
45- $ ( ".navbar" ) . removeClass ( "navbar-dark" ) . addClass ( "navbar-light" ) ;
50+ navbar . classList . remove ( "navbar-dark" ) ;
51+ navbar . classList . add ( "navbar-light" ) ;
4652 }
4753 } ,
4854
49- initImgs : function ( ) {
50- // If the page was large images to randomly select from, choose an image
51- if ( $ ( "# header-big-imgs") . length > 0 ) {
52- BeautifulJekyllJS . bigImgEl = $ ( "# header-big-imgs") ;
53- BeautifulJekyllJS . numImgs = BeautifulJekyllJS . bigImgEl . attr ( "data-num-img" ) ;
55+ initImgs : function ( ) {
56+ // If the page has large images to randomly select from, choose an image
57+ if ( document . getElementById ( " header-big-imgs") ) {
58+ BeautifulJekyllJS . bigImgEl = document . getElementById ( " header-big-imgs") ;
59+ BeautifulJekyllJS . numImgs = BeautifulJekyllJS . bigImgEl . getAttribute ( "data-num-img" ) ;
5460
5561 // 2fc73a3a967e97599c9763d05e564189
5662 // set an initial image
@@ -69,19 +75,19 @@ let BeautifulJekyllJS = {
6975 prefetchImg . src = src ;
7076 // if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
7177
72- setTimeout ( function ( ) {
73- const img = $ ( "<div></div>" ) . addClass ( "big-img-transition" ) . css ( "background-image" , 'url(' + src + ')' ) ;
74- $ ( ".intro-header.big-img" ) . prepend ( img ) ;
75- setTimeout ( function ( ) { img . css ( "opacity" , "1" ) ; } , 50 ) ;
78+ setTimeout ( function ( ) {
79+ const img = document . createElement ( "div" ) ;
80+ img . className = "big-img-transition" ;
81+ img . style . backgroundImage = 'url(' + src + ')' ;
82+ document . querySelector ( ".intro-header.big-img" ) . prepend ( img ) ;
83+ setTimeout ( function ( ) { img . style . opacity = "1" ; } , 50 ) ;
7684
7785 // after the animation of fading in the new image is done, prefetch the next one
78- //img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
7986 setTimeout ( function ( ) {
8087 BeautifulJekyllJS . setImg ( src , desc ) ;
8188 img . remove ( ) ;
8289 getNextImg ( ) ;
8390 } , 1000 ) ;
84- //});
8591 } , 6000 ) ;
8692 } ;
8793
@@ -92,46 +98,51 @@ let BeautifulJekyllJS = {
9298 }
9399 } ,
94100
95- getImgInfo : function ( ) {
101+ getImgInfo : function ( ) {
96102 const randNum = Math . floor ( ( Math . random ( ) * BeautifulJekyllJS . numImgs ) + 1 ) ;
97- const src = BeautifulJekyllJS . bigImgEl . attr ( "data-img-src-" + randNum ) ;
98- const desc = BeautifulJekyllJS . bigImgEl . attr ( "data-img-desc-" + randNum ) ;
103+ const src = BeautifulJekyllJS . bigImgEl . getAttribute ( "data-img-src-" + randNum ) ;
104+ const desc = BeautifulJekyllJS . bigImgEl . getAttribute ( "data-img-desc-" + randNum ) ;
99105
100106 return {
101- src : src ,
102- desc : desc
107+ src : src ,
108+ desc : desc
103109 }
104110 } ,
105111
106- setImg : function ( src , desc ) {
107- $ ( ".intro-header.big-img" ) . css ( "background-image" , 'url(' + src + ')' ) ;
112+ setImg : function ( src , desc ) {
113+ document . querySelector ( ".intro-header.big-img" ) . style . backgroundImage = 'url(' + src + ')' ;
114+
115+ let imgDesc = document . querySelector ( ".img-desc" ) ;
108116 if ( typeof desc !== typeof undefined && desc !== false ) {
109- $ ( ".img-desc" ) . text ( desc ) . show ( ) ;
117+ imgDesc . textContent = desc ;
118+ imgDesc . style . display = "block" ;
110119 } else {
111- $ ( ".img-desc" ) . hide ( ) ;
120+ imgDesc . style . display = "none" ;
112121 }
113122 } ,
114123
115- initSearch : function ( ) {
124+ initSearch : function ( ) {
116125 if ( ! document . getElementById ( "beautifuljekyll-search-overlay" ) ) {
117126 return ;
118127 }
119128
120- $ ( "# nav-search-link") . click ( function ( e ) {
129+ document . getElementById ( " nav-search-link") . addEventListener ( 'click' , function ( e ) {
121130 e . preventDefault ( ) ;
122- $ ( "#beautifuljekyll-search-overlay" ) . show ( ) ;
123- $ ( "#nav-search-input" ) . focus ( ) . select ( ) ;
124- $ ( "body" ) . addClass ( "overflow-hidden" ) ;
131+ document . getElementById ( "beautifuljekyll-search-overlay" ) . style . display = "block" ;
132+ const searchInput = document . getElementById ( "nav-search-input" ) ;
133+ searchInput . focus ( ) ;
134+ searchInput . select ( ) ;
135+ document . body . classList . add ( "overflow-hidden" ) ;
125136 } ) ;
126- $ ( "# nav-search-exit") . click ( function ( e ) {
137+ document . getElementById ( " nav-search-exit") . addEventListener ( 'click' , function ( e ) {
127138 e . preventDefault ( ) ;
128- $ ( "# beautifuljekyll-search-overlay") . hide ( ) ;
129- $ ( " body" ) . removeClass ( "overflow-hidden" ) ;
139+ document . getElementById ( " beautifuljekyll-search-overlay") . style . display = "none" ;
140+ document . body . classList . remove ( "overflow-hidden" ) ;
130141 } ) ;
131- $ ( document ) . on ( 'keyup' , function ( e ) {
132- if ( e . key == "Escape" ) {
133- $ ( "# beautifuljekyll-search-overlay") . hide ( ) ;
134- $ ( " body" ) . removeClass ( "overflow-hidden" ) ;
142+ document . addEventListener ( 'keyup' , function ( e ) {
143+ if ( e . key === "Escape" ) {
144+ document . getElementById ( " beautifuljekyll-search-overlay") . style . display = "none" ;
145+ document . body . classList . remove ( "overflow-hidden" ) ;
135146 }
136147 } ) ;
137148 }
0 commit comments