From 9d9f2bc46589f017dbfca714380bcc017de5ea49 Mon Sep 17 00:00:00 2001 From: Vladislav <24293461+kusyka911@users.noreply.github.com> Date: Sun, 21 May 2023 14:56:23 +0300 Subject: [PATCH] refactor: refactor JS (#39) * fix: refactor js code (cherry picked from commit 5163fd1532995d81b22bbcc908629b28111a9e71) * docs: refactor docs regarding addition of scripts * chore: remove `| fingerprint` in development environment --------- Co-authored-by: Vladyslav Shurbin <24293461+kusyka911@users.noreply.github.com> Co-authored-by: Sid <122173059+hugo-sid@users.noreply.github.com> --- assets/js/goToTop.js | 28 ++++++---- assets/js/main.js | 1 + assets/js/theme.js | 77 ++++++++++++++++++++++++++ assets/js/themeLoader.js | 38 ------------- assets/js/themeSwitchnMenu.js | 26 --------- exampleSite/config.toml | 6 ++ layouts/partials/scriptsBodyEnd.html | 36 +++++++++--- layouts/partials/scriptsBodyStart.html | 9 ++- layouts/partials/webmanifest.html | 2 +- 9 files changed, 137 insertions(+), 86 deletions(-) create mode 100644 assets/js/main.js create mode 100644 assets/js/theme.js delete mode 100644 assets/js/themeLoader.js delete mode 100644 assets/js/themeSwitchnMenu.js diff --git a/assets/js/goToTop.js b/assets/js/goToTop.js index 3dacd2c3..8182ae2e 100644 --- a/assets/js/goToTop.js +++ b/assets/js/goToTop.js @@ -1,12 +1,16 @@ -const gttButton = document.getElementById("totop"); - -window.onscroll = () => -{ - if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { - gttButton.style.visibility = "visible"; - gttButton.style.opacity = "1"; - } else { - gttButton.style.visibility = "hidden"; - gttButton.style.opacity = "0"; - } -} +window.addEventListener('load', () => { + const gttButton = document.getElementById("totop"); + if (!gttButton) return; + window.onscroll = () => { + if ( + document.body.scrollTop > 300 || + document.documentElement.scrollTop > 300 + ) { + gttButton.style.visibility = "visible"; + gttButton.style.opacity = "1"; + } else { + gttButton.style.visibility = "hidden"; + gttButton.style.opacity = "0"; + } + }; +}); diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 00000000..ad9a93a7 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1 @@ +'use strict'; diff --git a/assets/js/theme.js b/assets/js/theme.js new file mode 100644 index 00000000..630f0d01 --- /dev/null +++ b/assets/js/theme.js @@ -0,0 +1,77 @@ +(() => { + "use strict"; + const LS_THEME_KEY = "theme"; + const THEMES = { + LIGHT: "light", + DARK: "dark", + AUTO: "auto", + }; + + const body = document.body; + const config = body.getAttribute("data-theme"); + + const getThemeState = () => { + const lsState = localStorage.getItem(LS_THEME_KEY); + if (lsState) return lsState; + + let state; + switch (config) { + case THEMES.DARK: + state = THEMES.DARK; + break; + case THEMES.LIGHT: + state = THEMES.LIGHT; + break; + case THEMES.AUTO: + default: + state = window.matchMedia("(prefers-color-scheme: dark)") + .matches + ? THEMES.DARK + : THEMES.LIGHT; + break; + } + return state; + }; + + const initTheme = (state) => { + if (state === THEMES.DARK) { + document.documentElement.classList.add(THEMES.DARK); + document.documentElement.classList.remove(THEMES.LIGHT); + } else if (state === THEMES.LIGHT) { + document.documentElement.classList.remove(THEMES.DARK); + document.documentElement.classList.add(THEMES.LIGHT); + } + }; + + // init theme ASAP, then do the rest. + initTheme(getThemeState()); + requestAnimationFrame(() => body.classList.remove("notransition")) + setTimeout(() => { + const toggleTheme = () => { + const state = getThemeState(); + if (state === THEMES.DARK) { + localStorage.setItem(LS_THEME_KEY, THEMES.LIGHT); + initTheme(THEMES.LIGHT); + } else if (state === THEMES.LIGHT) { + localStorage.setItem(LS_THEME_KEY, THEMES.DARK); + initTheme(THEMES.DARK); + } + }; + + window.addEventListener("DOMContentLoaded", () => { + // Theme switch + const lamp = document.getElementById("mode"); + + lamp.addEventListener("click", () => toggleTheme()); + + // Blur the content when the menu is open + const cbox = document.getElementById("menu-trigger"); + + cbox.addEventListener("change", function () { + const area = document.querySelector(".wrapper"); + if (this.checked) return area.classList.add("blurry"); + area.classList.remove("blurry"); + }); + }); + }, 0) +})(); diff --git a/assets/js/themeLoader.js b/assets/js/themeLoader.js deleted file mode 100644 index 7d008883..00000000 --- a/assets/js/themeLoader.js +++ /dev/null @@ -1,38 +0,0 @@ -const body = document.body; -const config = body.getAttribute("data-theme"); - -const getThemeState = () => { - const lsState = localStorage.getItem("theme"); - if (lsState) return lsState; - - let state; - switch (config) { - case "dark": - state = "dark"; - break; - case "light": - state = "light"; - break; - case "auto": - default: - state = window.matchMedia("(prefers-color-scheme: dark)").matches - ? "dark" - : "light"; - break; - } - return state; -}; - -const initTheme = (state) => { - if (state === "dark") { - document.documentElement.classList.add("dark"); - document.documentElement.classList.remove("light"); - } else if (state === "light") { - document.documentElement.classList.remove("dark"); - document.documentElement.classList.add("light"); - } -}; - -initTheme(getThemeState()); - -setTimeout(() => body.classList.remove("notransition"), 75); diff --git a/assets/js/themeSwitchnMenu.js b/assets/js/themeSwitchnMenu.js deleted file mode 100644 index 4f1b743d..00000000 --- a/assets/js/themeSwitchnMenu.js +++ /dev/null @@ -1,26 +0,0 @@ -(() => { - // Theme switch - const lamp = document.getElementById("mode"); - - const toggleTheme = (state) => { - if (state === "dark") { - localStorage.setItem("theme", "light"); - initTheme("light"); - } else if (state === "light") { - localStorage.setItem("theme", "dark"); - initTheme("dark"); - } - }; - - lamp.addEventListener("click", () => toggleTheme(getThemeState())); - - // Blur the content when the menu is open - const cbox = document.getElementById("menu-trigger"); - - cbox.addEventListener("change", function () { - const area = document.querySelector(".wrapper"); - this.checked - ? area.classList.add("blurry") - : area.classList.remove("blurry"); - }); -})(); diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 857b5a84..1de49163 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -15,6 +15,7 @@ googleAnalytics = '' # G-MEASUREMENT_ID # Enable emojis globally enableEmoji = true +ignoreErrors = ["additional-script-loading-error"] # ignore error of loading additional scripts. # To enable Disqus comments, provide Disqus Shortname below. # To disable Disqus comments, simply leave the field empty or remove the next line @@ -56,6 +57,11 @@ disqusShortname = '' mainSections = ['posts'] toc = true # set to false to disable table of contents 'globally' goToTop = true # set to false to disable 'go to top' button + additionalScripts = ['js/custom.js', 'js/custom-2.js'] + # Will try to load 'assets/js/custom.js' and 'assets/js/custom-2.js'. + # Your custom scripts will be concatinated to one file `custom.js`. + # When building for production it will be minified. + # The file `custom.js` is loaded on each page (before body tag ends). [params.author] avatar = "avatar.jpg" # put the file in assets folder; also ensure that image has same height and width diff --git a/layouts/partials/scriptsBodyEnd.html b/layouts/partials/scriptsBodyEnd.html index 3e35baee..b8e39e0e 100644 --- a/layouts/partials/scriptsBodyEnd.html +++ b/layouts/partials/scriptsBodyEnd.html @@ -1,11 +1,33 @@ -{{ $theme := resources.Get "js/themeSwitchnMenu.js" }} +{{ $main := slice (resources.Get "js/main.js") }} {{ if .Site.Params.goToTop }} - {{ $goToTop := resources.Get "js/goToTop.js" }} - {{ $js := slice $theme $goToTop | resources.Concat "js/script.js" }} - {{ $js := $js | resources.Minify | resources.Fingerprint }} - + {{ $main = $main | append (resources.Get "js/goToTop.js") }} +{{ end }} + +{{ $custom := slice }} +{{ range $script := .Site.Params.additionalScripts }} + {{ $script_res := resources.Get $script }} + {{ if not $script_res}} + {{ erroridf "additional-script-loading-error" "Failed to load script \"%s\"" $script }} + {{ else }} + {{ $custom = $custom | append (resources.Get .) }} + {{ end }} +{{ end }} + +{{ if hugo.IsProduction }} + {{ $main = $main | resources.Concat "js/main.js" | resources.Minify | resources.Fingerprint }} + + + {{ if gt (len $custom) 0 }} + {{ $custom = $custom | resources.Concat "js/custom.js" | resources.Minify | resources.Fingerprint }} + + {{ end }} {{ else }} - {{ $js := $theme | resources.Minify | resources.Fingerprint }} - + {{ $main = $main | resources.Concat "js/main.js" }} + + + {{ if gt (len $custom) 0 }} + {{ $custom = $custom | resources.Concat "js/custom.js" }} + + {{ end }} {{ end }} diff --git a/layouts/partials/scriptsBodyStart.html b/layouts/partials/scriptsBodyStart.html index d0c61193..785457d6 100644 --- a/layouts/partials/scriptsBodyStart.html +++ b/layouts/partials/scriptsBodyStart.html @@ -1,2 +1,7 @@ -{{ $script_main := resources.Get "js/themeLoader.js" | minify | fingerprint }} - +{{ if hugo.IsProduction }} +{{ $theme_script := resources.Get "js/theme.js" | minify | fingerprint }} + +{{ else }} +{{ $theme_script := resources.Get "js/theme.js" }} + +{{ end}} diff --git a/layouts/partials/webmanifest.html b/layouts/partials/webmanifest.html index 507f12f3..70841fdd 100644 --- a/layouts/partials/webmanifest.html +++ b/layouts/partials/webmanifest.html @@ -1,6 +1,6 @@ {{ define "partials/hugo-blog-awesome/manifest-background-color" }} {{ $bg := ""}} - {{ if isset .Site.Params.webmanifest "background_color" }} + {{ if .Site.Params.webmanifest.background_color }} {{ $bg = .Site.Params.webmanifest.background_color }} {{ else if eq .Site.Params.defaultColor "dark" }} {{ $bg = "#131418" }}