feat: autohide back-to-top toggle

reuixiy · Dec 30, 2019 · 6659f25 · 6659f25
1 parent a4e4137
commit 6659f25
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 4 deletions.
diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js
@@ -0,0 +1,10 @@
+backToTop();
+
+function backToTop() {
+    var backToTop = document.getElementById('back-to-top');
+    if (backToTop !== null) {
+        window.addEventListener('scroll', function () {
+            window.scrollY > 100 ? backToTop.classList.add('show') : backToTop.classList.remove('show');
+        });
+    }
+}
diff --git a/assets/scss/_common/back-to-top.scss b/assets/scss/_common/back-to-top.scss
@@ -2,7 +2,20 @@
     font-size: 90%;
     color: var(--color-contrast-medium);
     position: fixed;
-    bottom: 1em;
     right: 1em;
     z-index: 1;
+}
+
+@if ($enableBackToTopAutoHide) {
+    .back-to-top {
+        bottom: -2em;
+        transition: bottom 0.3s ease-in-out;
+        &.show {
+            bottom: 1em;
+        }
+    }
+} @else {
+    .back-to-top {
+        bottom: 1em;
+    }
 }
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -11,6 +11,12 @@
     $listWidth: {{ . }}em;
 {{ end }}
 
+{{ if .Site.Params.enableBackToTopAutoHide }}
+    $enableBackToTopAutoHide: true;
+{{ else }}
+    $enableBackToTopAutoHide: false;
+{{ end }}
+
 {{ if .Site.Params.enableChinesePunctuationGlyphCorrection }}
     {{ .Scratch.Set "glyph" "'glyph-correction', " }}
     $glyph: true;

diff --git a/config-examples/en-us/config.toml b/config-examples/en-us/config.toml
@@ -1082,6 +1082,8 @@ uglyURLs = false
 
     enableBackToTop = true
 
+    enableBackToTopAutoHide = true
+
     displayBackToTopInHome = true
 
     backToTopIcon = "arrow-up"

diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml
@@ -1045,6 +1045,9 @@ uglyURLs = false
     # 是否开启
     enableBackToTop = true
 
+    # 是否开启自动隐藏
+    enableBackToTopAutoHide = true
+
     # 是否在首页显示
     displayBackToTopInHome = true
 

diff --git a/...leSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content b/...leSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.content
diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json
@@ -1 +1 @@
-{"Target":"css/meme.min.1a62b125ec50989ec305a5ba8a826c7705be1471ede622b2b26d2f8dcc536843.css","MediaType":"text/css","Data":{"Integrity":"sha256-GmKxJexQmJ7DBaW6ioJsdwW+FHHt5iKysm0vjcxTaEM="}}
+{"Target":"css/meme.min.fab06b4f1edf8acfa72af56b03bef62f13de7a260e3750467664d4b093b1126f.css","MediaType":"text/css","Data":{"Integrity":"sha256-+rBrTx7fis+nKvVrA772LxPeeiYON1BGdmTUsJOxEm8="}}
diff --git a/layouts/partials/back-to-top.html b/layouts/partials/back-to-top.html
@@ -1,3 +1,3 @@
 {{ if or (and .IsHome .Site.Params.displayBackToTopInHome) (and (not .IsHome) .Site.Params.enableBackToTop) }}
-    <a href="#" class="back-to-top">{{ index .Site.Data.SVG .Site.Params.backToTopIcon | safeHTML }}</a>
+    <a href="#" id="back-to-top" class="back-to-top">{{ index .Site.Data.SVG .Site.Params.backToTopIcon | safeHTML }}</a>
 {{ end }}
diff --git a/layouts/partials/script.html b/layouts/partials/script.html
@@ -1,11 +1,16 @@
 {{- $main := resources.Get "js/main.js" | resources.ExecuteAsTemplate "js/main-rendered.js" . -}}
+{{- $backToTop := resources.Get "js/back-to-top.js" | resources.ExecuteAsTemplate "js/back-to-top-rendered.js" . -}}
 {{- $darkMode := resources.Get "js/dark-mode.js" | resources.ExecuteAsTemplate "js/dark-mode-rendered.js" . -}}
 {{- $lang := resources.Get "js/multilingual.js" | resources.ExecuteAsTemplate "js/multilingual-rendered.js" . -}}
 {{- $instantClick := resources.Get "js/instantclick.js" | resources.ExecuteAsTemplate "js/instantclick-rendered.js" . -}}
 {{- $custom := resources.Get "js/custom.js" | resources.ExecuteAsTemplate "js/custom-rendered.js" . -}}
 
 {{- .Scratch.Set "script" (slice $main) -}}
 
+{{- if .Site.Params.enableBackToTopAutoHide -}}
+    {{- .Scratch.Add "script" (slice $backToTop) -}}
+{{- end -}}
+
 {{- if .Site.Params.enableDarkMode -}}
     {{- .Scratch.Add "script" (slice $darkMode) -}}
 {{- end -}}

diff --git a/layouts/partials/third-party/instantclick.html b/layouts/partials/third-party/instantclick.html
@@ -1,5 +1,13 @@
 <script data-no-instant>InstantClick.init();</script>
 
+{{ if .Site.Params.enableBackToTopAutoHide }}
+    <script data-no-instant>
+        InstantClick.on('change', function () {
+            backToTop();
+        });
+    </script>
+{{ end }}
+
 {{ if .Site.Params.enableDarkMode }}
     <script data-no-instant>
         InstantClick.on('change', function () {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"Target":"css/meme.min.1a62b125ec50989ec305a5ba8a826c7705be1471ede622b2b26d2f8dcc536843.css","MediaType":"text/css","Data":{"Integrity":"sha256-GmKxJexQmJ7DBaW6ioJsdwW+FHHt5iKysm0vjcxTaEM="}}
		{"Target":"css/meme.min.fab06b4f1edf8acfa72af56b03bef62f13de7a260e3750467664d4b093b1126f.css","MediaType":"text/css","Data":{"Integrity":"sha256-+rBrTx7fis+nKvVrA772LxPeeiYON1BGdmTUsJOxEm8="}}