Fix featured image toggle

This commit is contained in:
Track3 2019-01-03 18:25:14 +08:00
parent f601584822
commit 334d05e5a1
9 changed files with 24 additions and 31 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -3,6 +3,7 @@ let header=document.getElementById('site-header');let lastScrollPosition=window.
lastScrollPosition=currentScrollPosition;} 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' 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;}} 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');} 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));}

View file

@ -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="}}

File diff suppressed because one or more lines are too long

View file

@ -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="}}