First commit
Some checks failed
Blowfish Docs Deploy / build (push) Has been cancelled
Blowfish Docs Deploy / deploy (push) Has been cancelled
Test Build / Build Example Site (push) Has been cancelled
Mark stale issues and pull requests / stale (push) Has been cancelled
Update Hugo version / updateBlowfish (push) Has been cancelled
Some checks failed
Blowfish Docs Deploy / build (push) Has been cancelled
Blowfish Docs Deploy / deploy (push) Has been cancelled
Test Build / Build Example Site (push) Has been cancelled
Mark stale issues and pull requests / stale (push) Has been cancelled
Update Hugo version / updateBlowfish (push) Has been cancelled
Delete exampleSite Add initial content, images & docker-compose.yml Use extend-head.html for analytics Set remote url to gitea.novicelab.io Remove original .git due to "shallow update not allowed" error
This commit is contained in:
144
assets/js/appearance.js
Normal file
144
assets/js/appearance.js
Normal file
@@ -0,0 +1,144 @@
|
||||
const sitePreference = document.documentElement.getAttribute("data-default-appearance");
|
||||
const userPreference = localStorage.getItem("appearance");
|
||||
|
||||
if ((sitePreference === "dark" && userPreference === null) || userPreference === "dark") {
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
|
||||
if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches &&
|
||||
userPreference !== "light"
|
||||
) {
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
|
||||
if (event.matches) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mermaid dark mode support
|
||||
var updateMermaidTheme = () => {
|
||||
if (typeof mermaid !== 'undefined') {
|
||||
const isDark = document.documentElement.classList.contains("dark");
|
||||
|
||||
const mermaids = document.querySelectorAll('pre.mermaid');
|
||||
mermaids.forEach(e => {
|
||||
if (e.getAttribute('data-processed')) {
|
||||
// Already rendered, clean the processed attributes
|
||||
e.removeAttribute('data-processed');
|
||||
// Replace the rendered HTML with the stored text
|
||||
e.innerHTML = e.getAttribute('data-graph');
|
||||
} else {
|
||||
// First time, store the text
|
||||
e.setAttribute('data-graph', e.textContent);
|
||||
}
|
||||
});
|
||||
|
||||
if (isDark) {
|
||||
initMermaidDark();
|
||||
mermaid.run();
|
||||
} else {
|
||||
initMermaidLight();
|
||||
mermaid.run();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
const switcher = document.getElementById("appearance-switcher");
|
||||
const switcherMobile = document.getElementById("appearance-switcher-mobile");
|
||||
|
||||
updateMeta();
|
||||
this.updateLogo?.(getTargetAppearance());
|
||||
|
||||
// Initialize mermaid theme on page load
|
||||
updateMermaidTheme();
|
||||
|
||||
if (switcher) {
|
||||
switcher.addEventListener("click", () => {
|
||||
document.documentElement.classList.toggle("dark");
|
||||
var targetAppearance = getTargetAppearance();
|
||||
localStorage.setItem(
|
||||
"appearance",
|
||||
targetAppearance
|
||||
);
|
||||
updateMeta();
|
||||
updateMermaidTheme();
|
||||
this.updateLogo?.(targetAppearance);
|
||||
});
|
||||
switcher.addEventListener("contextmenu", (event) => {
|
||||
event.preventDefault();
|
||||
localStorage.removeItem("appearance");
|
||||
});
|
||||
}
|
||||
if (switcherMobile) {
|
||||
switcherMobile.addEventListener("click", () => {
|
||||
document.documentElement.classList.toggle("dark");
|
||||
var targetAppearance = getTargetAppearance();
|
||||
localStorage.setItem(
|
||||
"appearance",
|
||||
targetAppearance
|
||||
);
|
||||
updateMeta();
|
||||
updateMermaidTheme();
|
||||
this.updateLogo?.(targetAppearance);
|
||||
});
|
||||
switcherMobile.addEventListener("contextmenu", (event) => {
|
||||
event.preventDefault();
|
||||
localStorage.removeItem("appearance");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var updateMeta = () => {
|
||||
var elem, style;
|
||||
elem = document.querySelector('body');
|
||||
style = getComputedStyle(elem);
|
||||
document.querySelector('meta[name="theme-color"]').setAttribute('content', style.backgroundColor);
|
||||
}
|
||||
|
||||
{{ if and (.Site.Params.Logo) (.Site.Params.SecondaryLogo) }}
|
||||
{{ $primaryLogo := resources.Get .Site.Params.Logo }}
|
||||
{{ $secondaryLogo := resources.Get .Site.Params.SecondaryLogo }}
|
||||
{{ if and ($primaryLogo) ($secondaryLogo) }}
|
||||
var updateLogo = (targetAppearance) => {
|
||||
var imgElems = document.querySelectorAll("img.logo");
|
||||
var logoContainers = document.querySelectorAll("span.logo");
|
||||
|
||||
targetLogoPath =
|
||||
targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ?
|
||||
"{{ $primaryLogo.RelPermalink }}" : "{{ $secondaryLogo.RelPermalink }}"
|
||||
for (const elem of imgElems) {
|
||||
elem.setAttribute("src", targetLogoPath)
|
||||
}
|
||||
|
||||
{{ if eq $primaryLogo.MediaType.SubType "svg" }}
|
||||
targetContent =
|
||||
targetAppearance == "{{ .Site.Params.DefaultAppearance }}" ?
|
||||
`{{ $primaryLogo.Content | safeHTML }}` : `{{ $secondaryLogo.Content | safeHTML }}`
|
||||
for (const container of logoContainers) {
|
||||
container.innerHTML = targetContent;
|
||||
}
|
||||
{{ end }}
|
||||
}
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
|
||||
var getTargetAppearance = () => {
|
||||
return document.documentElement.classList.contains("dark") ? "dark" : "light"
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
const scroller = document.getElementById("top-scroller");
|
||||
const footer = document.getElementById("site-footer");
|
||||
if(scroller && footer && scroller.getBoundingClientRect().top > footer.getBoundingClientRect().top) {
|
||||
scroller.hidden = true;
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user