From 1e17ccb8012d9ff48ceba737e49ec5e5444247d6 Mon Sep 17 00:00:00 2001 From: Track3 Date: Tue, 1 Jan 2019 17:53:20 +0800 Subject: [PATCH] Remove inline style and script of bg-img * See #22 --- assets/js/main.js | 34 ++++++++++++------- layouts/index.html | 22 ++++++++---- layouts/partials/header.html | 4 +-- layouts/posts/single.html | 22 ++++++++---- ...s_d11fe7b62c27961c87ecd0f2490357b9.content | 10 +++--- ...n.js_d11fe7b62c27961c87ecd0f2490357b9.json | 2 +- 6 files changed, 61 insertions(+), 33 deletions(-) diff --git a/assets/js/main.js b/assets/js/main.js index 6cf0b0d..b99c750 100644 --- a/assets/js/main.js +++ b/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 = () => { - 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'); -} - -// Toggle TOC +// ToC Toggle // 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(); diff --git a/layouts/index.html b/layouts/index.html index 0535cbb..7927023 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,10 +1,20 @@ +{{ define "head" }} + +{{ end }} + {{ define "main" }} - {{- if .Site.Params.bgImg }} -
- {{- else if .Site.Params.images }} - {{- range first 1 .Site.Params.images }} -
- {{- end }} + {{- if (or .Site.Params.images .Site.Params.bgImg) }} +
{{- end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 47b04b7..f643337 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -12,10 +12,10 @@
{{ if (or .Params.images .Params.featuredImg) -}} - + {{- end }} {{- with .Params.toc -}} - + {{- end }} {{- with .Site.Params.social -}} {{ partialCached "social-icons.html" . }} diff --git a/layouts/posts/single.html b/layouts/posts/single.html index 026a626..dc70fd3 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -1,14 +1,24 @@ +{{ define "head" }} + +{{ end }} + {{ define "header" }} {{ partial "header.html" . }} {{ end }} {{ define "main" }} - {{- if .Params.featuredImg }} -
- {{- else if .Params.images }} - {{- range first 1 .Params.images }} -
- {{- end }} + {{- if (or .Params.images .Params.featuredImg) }} +
{{- end }}
diff --git a/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content b/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content index a7e5c46..705bc10 100644 --- a/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content +++ b/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 showContent=()=>{document.getElementById('bg-img').classList.remove('show-bg-img');} +const toggleImg=()=>{document.querySelector('.bg-img').classList.toggle('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));} \ No newline at end of file +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));} \ No newline at end of file diff --git a/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json b/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json index 75492a3..135b9b5 100644 --- a/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json +++ b/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json @@ -1 +1 @@ -{"Target":"js/main.min.de4d516d3e45a2fbe013b06aa4292cd08f6f04d55e780c03d9009bd99b05dcd4.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-3k1RbT5FovvgE7BqpCks0I9vBNVeeAwD2QCb2ZsF3NQ="}} \ No newline at end of file +{"Target":"js/main.min.baf4bd16091e6cf6eaff40560751aa15a3834797c0f142546561af8265fdf910.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-uvS9FgkebPbq/0BWB1GqFaODR5fA8UJUZWGvgmX9+RA="}} \ No newline at end of file