andy/hermit-V2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Remove inline style and script of bg-img

Browse source 
* See #22
This commit is contained in:
Track3 2019-01-01 17:53:20 +08:00
parent f38b9203b2
commit 1e17ccb801
6 changed files with 61 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
assets/js/main.js
View file

@ -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();

22
layouts/index.html
View file

@ -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 }}
<div class="bg-img" style="background-image: url({{.Site.Params.bgImg}});"></div>
{{- else if .Site.Params.images }}
{{- range first 1 .Site.Params.images }}
<div class="bg-img" style="background-image: url({{.}});"></div>
{{- end }}
{{- if (or .Site.Params.images .Site.Params.bgImg) }}
<div class="bg-img"></div>
{{- end }}
<div id="spotlight" class="animated fadeIn">
<div id="home-center">

4
layouts/partials/header.html
View file

@ -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>

22
layouts/posts/single.html
View file

@ -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 }}
<div id="bg-img" class="bg-img" style="background-image: url({{.Params.featuredImg}});" onclick="showContent()"></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 }}
{{- if (or .Params.images .Params.featuredImg) }}
<div class="bg-img"></div>
{{- end }}
<main class="site-main section-inner animated fadeIn faster">
<article class="thin">

10
resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content
View file

@ -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));}
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));}

2
resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json
View file

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