Remove inline style and script of bg-img

* See #22

assets/js/main.js

@@ -16,14 +16,22 @@ const throttle = (callback, limit) => {
   };
 };
 
+// addEventListener Helper
+//
+const listen = (ele, e, callback) => {
+  if (document.querySelector(ele) !== null) {
+    document.querySelector(ele).addEventListener(e, callback);
+  }
+}
+
 /**
  * Functions
  */
 
 // Auto Hide Header
 //
-let lastScrollPosition = window.pageYOffset;
 let header = document.getElementById('site-header');
+let lastScrollPosition = window.pageYOffset;
 
 const autoHideHeader = () => {
   let currentScrollPosition = window.pageYOffset;
@@ -39,10 +47,10 @@ const autoHideHeader = () => {
 
 // Mobile Menu Toggle
 //
-let mobileMenu = document.getElementById('mobile-menu');
 let mobileMenuVisible = false;
 
-const mobileMenuToggle = () => {
+const toggleMobileMenu = () => {
+  let mobileMenu = document.getElementById('mobile-menu');
   if (mobileMenuVisible == false) {
     mobileMenu.style.animationName = 'bounceInRight';
     mobileMenu.style.webkitAnimationName = 'bounceInRight';
@@ -55,24 +63,24 @@ const mobileMenuToggle = () => {
   }
 }
 
-// Show Featured Image
+// Featured Image Toggle
 //
-const showFeaturedImg = () => {
+const toggleImg = () => {
-  document.getElementById('bg-img').classList.add('show-bg-img');
+  document.querySelector('.bg-img').classList.toggle('show-bg-img');
 }
 
-const showContent = () => {
+// ToC Toggle
-  document.getElementById('bg-img').classList.remove('show-bg-img');
-}
-
-// Toggle TOC
 //
 const toggleToc = () => {
   document.getElementById('toc').classList.toggle('show-toc');
 }
 
-if (document.getElementById('site-header') !== null) {
+
-  document.getElementById('menu-btn').addEventListener('click', mobileMenuToggle);
+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();

layouts/index.html

@@ -1,10 +1,20 @@
+{{ define "head" }}
+	<style>
+	.bg-img {background-image: url('
+	{{- if .Site.Params.bgImg -}}
+		{{.Site.Params.bgImg | absURL}}
+	{{- else if .Site.Params.images -}}
+		{{- range first 1 .Site.Params.images -}}
+		{{. | absURL}}
+		{{- end -}}
+	{{- end -}}
+	');}
+	</style>
+{{ end }}
+
 {{ define "main" }}
-	{{- if .Site.Params.bgImg }}
+	{{- if (or .Site.Params.images .Site.Params.bgImg) }}
-	<div class="bg-img" style="background-image: url({{.Site.Params.bgImg}});"></div>
+	<div class="bg-img"></div>
-	{{- else if .Site.Params.images }}
-	{{- range first 1 .Site.Params.images }}
-	<div class="bg-img" style="background-image: url({{.}});"></div>
-	{{- end }}
 	{{- end }}
 	<div id="spotlight" class="animated fadeIn">
 		<div id="home-center">

layouts/partials/header.html

@@ -12,10 +12,10 @@
 			</div>
 			<div class="hdr-right hdr-icons">
 				{{ if (or .Params.images .Params.featuredImg) -}}
-				<button class="hdr-btn" onclick="showFeaturedImg()" title="{{i18n "featuredImage"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
+				<button id="img-btn" class="hdr-btn" title="{{i18n "featuredImage"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
 				{{- end }}
 				{{- with .Params.toc -}}
-				<button class="hdr-btn desktop-only-ib" onclick="toggleToc()" title="{{i18n "tableOfContents"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
+				<button id="toc-btn" class="hdr-btn desktop-only-ib" title="{{i18n "tableOfContents"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
 				{{- end }}
 				{{- with .Site.Params.social -}}
 				<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>

layouts/posts/single.html

@@ -1,14 +1,24 @@
+{{ define "head" }}
+	<style>
+	.bg-img {background-image: url('
+	{{- if .Params.featuredImg -}}
+		{{.Params.featuredImg | absURL}}
+	{{- else if .Params.images -}}
+		{{- range first 1 .Params.images -}}
+		{{. | absURL}}
+		{{- end -}}
+	{{- end -}}
+	');}
+	</style>
+{{ end }}
+
 {{ define "header" }}
 {{ partial "header.html" . }}
 {{ end }}
 
 {{ define "main" }}
-	{{- if .Params.featuredImg }}
+	{{- if (or .Params.images .Params.featuredImg) }}
-	<div id="bg-img" class="bg-img" style="background-image: url({{.Params.featuredImg}});" onclick="showContent()"></div>
+	<div class="bg-img"></div>
-	{{- else if .Params.images }}
-	{{- range first 1 .Params.images }}
-	<div id="bg-img" class="bg-img" style="background-image: url({{.}});" onclick="showContent()"></div>
-	{{- end }}
 	{{- end }}
 	<main class="site-main section-inner animated fadeIn faster">
 		<article class="thin">

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

@@ -1,8 +1,8 @@
-const throttle=(callback,limit)=>{let timeoutHandler=null;return()=>{if(timeoutHandler==null){timeoutHandler=setTimeout(()=>{callback();timeoutHandler=null;},limit);}};};let lastScrollPosition=window.pageYOffset;let header=document.getElementById('site-header');const autoHideHeader=()=>{let currentScrollPosition=window.pageYOffset;if(currentScrollPosition>lastScrollPosition){header.classList.remove('slideInUp');header.classList.add('slideOutDown');}else{header.classList.remove('slideOutDown');header.classList.add('slideInUp');}
+const throttle=(callback,limit)=>{let timeoutHandler=null;return()=>{if(timeoutHandler==null){timeoutHandler=setTimeout(()=>{callback();timeoutHandler=null;},limit);}};};const listen=(ele,e,callback)=>{if(document.querySelector(ele)!==null){document.querySelector(ele).addEventListener(e,callback);}}
+let header=document.getElementById('site-header');let lastScrollPosition=window.pageYOffset;const autoHideHeader=()=>{let currentScrollPosition=window.pageYOffset;if(currentScrollPosition>lastScrollPosition){header.classList.remove('slideInUp');header.classList.add('slideOutDown');}else{header.classList.remove('slideOutDown');header.classList.add('slideInUp');}
 lastScrollPosition=currentScrollPosition;}
-let mobileMenu=document.getElementById('mobile-menu');let mobileMenuVisible=false;const mobileMenuToggle=()=>{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'
+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 showFeaturedImg=()=>{document.getElementById('bg-img').classList.add('show-bg-img');}
+const toggleImg=()=>{document.querySelector('.bg-img').classList.toggle('show-bg-img');}
-const showContent=()=>{document.getElementById('bg-img').classList.remove('show-bg-img');}
 const toggleToc=()=>{document.getElementById('toc').classList.toggle('show-toc');}
-if(document.getElementById('site-header')!==null){document.getElementById('menu-btn').addEventListener('click',mobileMenuToggle);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",toggleImg);listen('.bg-img',"click",toggleImg);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.de4d516d3e45a2fbe013b06aa4292cd08f6f04d55e780c03d9009bd99b05dcd4.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-3k1RbT5FovvgE7BqpCks0I9vBNVeeAwD2QCb2ZsF3NQ="}}
+{"Target":"js/main.min.baf4bd16091e6cf6eaff40560751aa15a3834797c0f142546561af8265fdf910.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-uvS9FgkebPbq/0BWB1GqFaODR5fA8UJUZWGvgmX9+RA="}}