adding stuff
This commit is contained in:
parent
e0b4c55364
commit
a94eb03a40
47 changed files with 852 additions and 575 deletions
|
@ -1 +1,91 @@
|
|||
function switchTheme(){"dark"==([...document.documentElement.classList].includes("dark")?"dark":"light")?(localStorage.theme="light",document.documentElement.classList.remove("dark"),document.getElementById("light").classList.add("hidden"),document.getElementById("dark").classList.remove("hidden"),document.getElementById("syntax_highlight").href="/syntax-light.css"):(localStorage.theme="dark",document.documentElement.classList.add("dark"),document.getElementById("dark").classList.add("hidden"),document.getElementById("light").classList.remove("hidden"),document.getElementById("syntax_highlight").href="/syntax-dark.css")}function toggleSidebar(){var e=document.getElementById("sidebar");[...e.classList].includes("translate-x-0")?(document.body.style.removeProperty("overflow"),e.classList.remove("translate-x-0"),e.classList.add("-translate-x-full")):(document.body.style.setProperty("overflow","hidden"),e.classList.remove("-translate-x-full"),e.classList.add("translate-x-0"))}function toggleMobileMenu(){var e=document.querySelector("#mobile-menu div.nav-links");[...e.classList].includes("h-screen")?(document.body.classList.remove("overflow-hidden","relative"),document.documentElement.classList.remove("overscroll-none"),e.classList.remove("h-screen"),e.classList.add("h-0")):(document.body.classList.add("overflow-hidden","relative"),document.documentElement.classList.add("overscroll-none"),e.classList.remove("h-0"),e.classList.add("h-screen"))}document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".nav-links a");let t=window.location.href.replace(/\/$/,"");e=[...e].filter(e=>e.href===t||e.href===window.location.href);if(0!==e.length)for(var d of e)d.className="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium";"dark"===localStorage.theme||!("theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?(document.documentElement.classList.add("dark"),document.getElementById("dark").classList.add("hidden"),document.getElementById("syntax_highlight").href="/syntax-dark.css"):(document.documentElement.classList.remove("dark"),document.getElementById("light").classList.add("hidden"),document.getElementById("syntax_highlight").href="/syntax-light.css"),document.getElementById("switch-theme")?.addEventListener("click",switchTheme),document.getElementById("toggle-sidebar")?.addEventListener("click",toggleSidebar),document.getElementById("toggle-mobile-menu")?.addEventListener("click",toggleMobileMenu)});
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// ---------------- Selected Navbar Link -------------------------
|
||||
let navbar_links = document.querySelectorAll('.nav-links a');
|
||||
let trim_last_slash = window.location.href.replace(/\/$/, '');
|
||||
let selected_navbar_link = [...navbar_links].filter((item) => {
|
||||
return ((item.href === trim_last_slash) || (item.href === window.location.href))
|
||||
})
|
||||
if (selected_navbar_link.length !== 0) {
|
||||
for (let element of selected_navbar_link) {
|
||||
element.className = "bg-gray-900 text-white px-3 py-2 rounded-md md:text-sm text-3xl font-medium"
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------- Image Zoom -------------------------
|
||||
// Probably should only grab the images we want but whatever
|
||||
const images = document.querySelectorAll('img');
|
||||
for (let img of images){
|
||||
img.addEventListener('click', zoomImage(img));
|
||||
}
|
||||
|
||||
// ---------------- Switch Theme -------------------------
|
||||
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
document.getElementById('dark').classList.add('hidden');
|
||||
document.getElementById("syntax_highlight").href = "/syntax-dark.css";
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
document.getElementById('light').classList.add('hidden');
|
||||
document.getElementById("syntax_highlight").href = "/syntax-light.css";
|
||||
}
|
||||
// Switch theme action
|
||||
document.getElementById('switch-theme')?.addEventListener('click', switchTheme);
|
||||
|
||||
// ---------------- Toggle Sidebar -------------------------
|
||||
document.getElementById('toggle-sidebar')?.addEventListener('click', toggleSidebar);
|
||||
|
||||
// ---------------- Toggle Mobile menu -------------------------
|
||||
document.getElementById('toggle-mobile-menu')?.addEventListener('click', toggleMobileMenu);
|
||||
});
|
||||
|
||||
function zoomImage(img) {
|
||||
const zoom = mediumZoom(img, {
|
||||
background: "#282a36dd"
|
||||
});
|
||||
}
|
||||
|
||||
function switchTheme() {
|
||||
let current_theme = ([...document.documentElement.classList].includes('dark')) ? 'dark' : 'light';
|
||||
if (current_theme === 'dark') {
|
||||
localStorage.theme = 'light';
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.getElementById('light').classList.add('hidden');
|
||||
document.getElementById('dark').classList.remove('hidden');
|
||||
document.getElementById("syntax_highlight").href = "/syntax-light.css";
|
||||
} else {
|
||||
localStorage.theme = 'dark';
|
||||
document.documentElement.classList.add('dark');
|
||||
document.getElementById('dark').classList.add('hidden');
|
||||
document.getElementById('light').classList.remove('hidden');
|
||||
document.getElementById("syntax_highlight").href = "/syntax-dark.css";
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSidebar() {
|
||||
let sidebar = document.getElementById('sidebar');
|
||||
if ([...sidebar.classList].includes('translate-x-0')) {
|
||||
document.body.style.removeProperty("overflow")
|
||||
sidebar.classList.remove('translate-x-0')
|
||||
sidebar.classList.add('-translate-x-full')
|
||||
} else {
|
||||
document.body.style.setProperty("overflow", "hidden")
|
||||
sidebar.classList.remove('-translate-x-full')
|
||||
sidebar.classList.add('translate-x-0')
|
||||
}
|
||||
}
|
||||
|
||||
function toggleMobileMenu() {
|
||||
let menu = document.querySelector('#mobile-menu div.nav-links');
|
||||
if ([...menu.classList].includes('h-screen')) {
|
||||
document.body.classList.remove("overflow-hidden", "relative")
|
||||
document.documentElement.classList.remove("overscroll-none",)
|
||||
menu.classList.remove('h-screen')
|
||||
menu.classList.add('h-0')
|
||||
} else {
|
||||
document.body.classList.add("overflow-hidden", "relative")
|
||||
document.documentElement.classList.add("overscroll-none",)
|
||||
menu.classList.remove('h-0')
|
||||
menu.classList.add('h-screen')
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1 +1,38 @@
|
|||
function getActiveTocElement(e){return[...e].find(e=>e.getBoundingClientRect().y<=0)}function findCorrespondingTocTitle(n){return[...document.querySelectorAll("#toc li a")].find(e=>e.href.substring(e.href.indexOf("#"))==="#"+n.id)}document.addEventListener("DOMContentLoaded",function(){if(null!==document.getElementById("toc")){var e=document.querySelectorAll("#toc li a");let n=[],t=([...e].forEach(e=>{n.push(e.href.substring(e.href.indexOf("#")))}),document.querySelectorAll(n.join(","))),i=[...t].reverse();var e=getActiveTocElement(i)||t[0],o=(findCorrespondingTocTitle(e).classList.add("bg-blue-700"),e);window.addEventListener("scroll",()=>{var e=getActiveTocElement(i)||t[0];e!==o&&(findCorrespondingTocTitle(o).classList.remove("bg-blue-700"),findCorrespondingTocTitle(e).classList.add("bg-blue-700"),o=e)})}});
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// ---------------- TOC Scrollspy --------------------
|
||||
if (document.getElementById('toc') !== null) {
|
||||
|
||||
const table_of_content_links = document.querySelectorAll('#toc li a')
|
||||
|
||||
let page_titles_ids = [];
|
||||
[...table_of_content_links].forEach((item)=> {
|
||||
page_titles_ids.push(item.href.substring(item.href.indexOf("#")))
|
||||
})
|
||||
const page_titles_elements = document.querySelectorAll(page_titles_ids.join(','));
|
||||
|
||||
let reversed_title_elements = [...page_titles_elements].reverse();
|
||||
let elem = getActiveTocElement(reversed_title_elements) || page_titles_elements[0]; //If no element has gone outside of viewport on y axis
|
||||
findCorrespondingTocTitle(elem).classList.add('bg-blue-700') //page load
|
||||
var previous_elem = elem
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
let element = getActiveTocElement(reversed_title_elements) || page_titles_elements[0];
|
||||
|
||||
if (element !== previous_elem) {
|
||||
findCorrespondingTocTitle(previous_elem).classList.remove('bg-blue-700')
|
||||
findCorrespondingTocTitle(element).classList.add('bg-blue-700')
|
||||
previous_elem = element
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
function getActiveTocElement(elements) {
|
||||
return [...elements].find((item) => {
|
||||
return (item.getBoundingClientRect().y <= 0)
|
||||
})
|
||||
}
|
||||
function findCorrespondingTocTitle(element) {
|
||||
return [...document.querySelectorAll('#toc li a')].find((item) => {
|
||||
return item.href.substring(item.href.indexOf("#")) === `#${element.id}`
|
||||
})
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue