Fix featured image toggle

Author: Track3

assets/js/main.js

@@ -65,8 +65,12 @@ const toggleMobileMenu = () => {
 
 // Featured Image Toggle
 //
-const toggleImg = () => {
-  document.querySelector('.bg-img').classList.toggle('show-bg-img');
+const showImg = () => {
+  document.querySelector('.bg-img').classList.add('show-bg-img');
+}
+
+const hideImg = () => {
+  document.querySelector('.bg-img').classList.remove('show-bg-img');
 }
 
 // ToC Toggle
@@ -79,8 +83,8 @@ const toggleToc = () => {
 if (header !== null) {
   listen('#menu-btn', "click", toggleMobileMenu);
   listen('#toc-btn', "click", toggleToc);
-  listen('#img-btn', "click", toggleImg);
-  listen('.bg-img', "click", toggleImg);
+  listen('#img-btn', "click", showImg);
+  listen('.bg-img', "click", hideImg);
 
   window.addEventListener('scroll', throttle(() => {
     autoHideHeader();

assets/scss/style.scss

@@ -447,7 +447,6 @@ p.img-404 {
   z-index: -1;
   position: fixed;
   top: 0;
-  cursor: pointer;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
@@ -458,6 +457,7 @@ p.img-404 {
 .show-bg-img {
   z-index: 100;
   opacity: 1;
+  cursor: pointer;
 }
 
 .post-header {

layouts/_default/single.html

@@ -1,15 +1,11 @@
 {{ define "head" }}
-	<style>
-	.bg-img {background-image: url('
-	{{- if .Params.featuredImg -}}
-		{{.Params.featuredImg | absURL}}
+	{{ if .Params.featuredImg -}}
+	<style>.bg-img {background-image: url('{{.Params.featuredImg | absURL}}');}</style>
 	{{- else if .Params.images -}}
 		{{- range first 1 .Params.images -}}
-		{{. | absURL}}
+		<style>.bg-img {background-image: url('{{. | absURL}}');}</style>
 		{{- end -}}
 	{{- end -}}
-	');}
-	</style>
 {{ end }}
 
 {{ define "header" }}

layouts/index.html

@@ -1,15 +1,11 @@
 {{ define "head" }}
-	<style>
-	.bg-img {background-image: url('
-	{{- if .Site.Params.bgImg -}}
-		{{.Site.Params.bgImg | absURL}}
+	{{ if .Site.Params.bgImg -}}
+	<style>.bg-img {background-image: url('{{.Site.Params.bgImg | absURL}}');}</style>
 	{{- else if .Site.Params.images -}}
 		{{- range first 1 .Site.Params.images -}}
-		{{. | absURL}}
+		<style>.bg-img {background-image: url('{{. | absURL}}');}</style>
 		{{- end -}}
 	{{- end -}}
-	');}
-	</style>
 {{ end }}
 
 {{ define "main" }}

layouts/posts/single.html

@@ -1,15 +1,11 @@
 {{ define "head" }}
-	<style>
-	.bg-img {background-image: url('
-	{{- if .Params.featuredImg -}}
-		{{.Params.featuredImg | absURL}}
+	{{ if .Params.featuredImg -}}
+	<style>.bg-img {background-image: url('{{.Params.featuredImg | absURL}}');}</style>
 	{{- else if .Params.images -}}
 		{{- range first 1 .Params.images -}}
-		{{. | absURL}}
+		<style>.bg-img {background-image: url('{{. | absURL}}');}</style>
 		{{- end -}}
 	{{- end -}}
-	');}
-	</style>
 {{ end }}
 
 {{ define "header" }}

resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content

@@ -3,6 +3,7 @@ let header=document.getElementById('site-header');let lastScrollPosition=window.
 lastScrollPosition=currentScrollPosition;}
 let mobileMenuVisible=false;const toggleMobileMenu=()=>{let mobileMenu=document.getElementById('mobile-menu');if(mobileMenuVisible==false){mobileMenu.style.animationName='bounceInRight';mobileMenu.style.webkitAnimationName='bounceInRight';mobileMenu.style.display='block';mobileMenuVisible=true;}else{mobileMenu.style.animationName='bounceOutRight';mobileMenu.style.webkitAnimationName='bounceOutRight'
 mobileMenuVisible=false;}}
-const toggleImg=()=>{document.querySelector('.bg-img').classList.toggle('show-bg-img');}
+const showImg=()=>{document.querySelector('.bg-img').classList.add('show-bg-img');}
+const hideImg=()=>{document.querySelector('.bg-img').classList.remove('show-bg-img');}
 const toggleToc=()=>{document.getElementById('toc').classList.toggle('show-toc');}
-if(header!==null){listen('#menu-btn',"click",toggleMobileMenu);listen('#toc-btn',"click",toggleToc);listen('#img-btn',"click",toggleImg);listen('.bg-img',"click",toggleImg);window.addEventListener('scroll',throttle(()=>{autoHideHeader();if(mobileMenuVisible==true){mobileMenuToggle();}},250));}
+if(header!==null){listen('#menu-btn',"click",toggleMobileMenu);listen('#toc-btn',"click",toggleToc);listen('#img-btn',"click",showImg);listen('.bg-img',"click",hideImg);window.addEventListener('scroll',throttle(()=>{autoHideHeader();if(mobileMenuVisible==true){mobileMenuToggle();}},250));}

resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json

@@ -1 +1 @@
-{"Target":"js/main.min.baf4bd16091e6cf6eaff40560751aa15a3834797c0f142546561af8265fdf910.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-uvS9FgkebPbq/0BWB1GqFaODR5fA8UJUZWGvgmX9+RA="}}
+{"Target":"js/main.min.2405236001a8a985219a76eff5aa74e776ad317c13a0afb1246e088843a91335.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-JAUjYAGoqYUhmnbv9ap053atMXwToK+xJG4IiEOpEzU="}}

resources/_gen/assets/scss/scss/style.scss_c16d144eee185fbddd582cd5e25a4fae.content

@@ -1 +1 @@
-{"Target":"css/style.min.596d2b6d7d2e495d157742e20873596f54af152ac3fef754b0d4a0a71795ff29.css","MediaType":"text/css","Data":{"Integrity":"sha256-WW0rbX0uSV0Vd0LiCHNZb1SvFSrD/vdUsNSgpxeV/yk="}}
+{"Target":"css/style.min.9a30741782203507f3d35fe9cefabad487c72fc82dfbdf59121759fc2fa52f92.css","MediaType":"text/css","Data":{"Integrity":"sha256-mjB0F4IgNQfz01/pzvq61IfHL8gt+99ZEhdZ/C+lL5I="}}