marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add js to check height and decide if to top is required

pull/806/head
Wen Junhua 2024-02-06 23:16:47 +08:00
parent 94feae3cca
commit 62d4d4112c
2 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/js/appearance.js
View File

@ -38,7 +38,22 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
}); });
} }
function add_to_top_elem() {
var body = document.body,
html = document.documentElement;
const height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
) - 150;
document.getElementById("to-top").hidden = height < window.innerHeight;
}
window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("DOMContentLoaded", (event) => {
add_to_top_elem();
var switchers = document.querySelectorAll("[id^='appearance-switcher']"); var switchers = document.querySelectorAll("[id^='appearance-switcher']");
switchers.forEach((switcher) => { switchers.forEach((switcher) => {
switcher.addEventListener("click", () => { switcher.addEventListener("click", () => {

26
layouts/_default/baseof.html
View File

@ -29,18 +29,20 @@
<div class="relative flex grow flex-col"> <div class="relative flex grow flex-col">
<main id="main-content" class="grow"> <main id="main-content" class="grow">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
{{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }} <div
<div class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12"> class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12"
<a id="to-top"
href="#the-top" hidden
class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" >
aria-label="{{ i18n "nav.scroll_to_top_title" }}" <a
title="{{ i18n "nav.scroll_to_top_title" }}" href="#the-top"
> class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
&uarr; aria-label="{{ i18n "nav.scroll_to_top_title" }}"
</a> title="{{ i18n "nav.scroll_to_top_title" }}"
</div> >
{{ end }} &uarr;
</a>
</div>
</main> </main>
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
{{ if .Site.Params.enableSearch | default false }} {{ if .Site.Params.enableSearch | default false }}