liquidex/treehouse
liquidex/treehouse
1
Fork 0
Code Issues 41 Activity

thin down the JavaScript that scrolls to branches

Browse source 
_lots_ of early treehouse stuff to fix there
This commit is contained in:
liquidex 2024-11-23 22:43:32 +01:00
parent 645ae598f2
commit f192ac2a8e
1 changed files with 2 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
static/js/tree.js
View file

@ -147,20 +147,6 @@ addSpell("b-linked", LinkedBranch);
/* Fragment navigation */
let rehashing = false;
function rehash() {
// https://www.youtube.com/watch?v=Tv1SYqLllKI
if (!rehashing) {
rehashing = true;
let hash = window.location.hash;
if (hash.length > 0) {
window.location.hash = "";
window.location.hash = hash;
}
rehashing = false;
}
}
function expandDetailsRecursively(element) {
while (element && element.tagName != "MAIN") {
if (element.tagName == "DETAILS") {
@ -170,69 +156,6 @@ function expandDetailsRecursively(element) {
}
}
function navigateToPage(page) {
window.location.pathname = `${page}`;
}
async function navigateToBranch(fragment) {
if (fragment.length == 0) return;
let { navigationMap } = await import("/navmap.js");
let element = document.getElementById(fragment);
if (element !== null) {
// If the element is already loaded on the page, we're good.
expandDetailsRecursively(element);
rehash();
// NOTE(2024-03-31): Only scroll into view in the loaded case.
// This case happens very often with `/b`-navigated branches, and those serve the specific
// page that contains the provided branch.
// Hash-links are not used anymore so upgrading the second case is unnecessary.
// They were a thing before I linked to the treehouse very often so no need to update.
element.scrollIntoView();
} else {
// The element is not loaded, we need to load the tree that has it.
let parts = fragment.split(":");
if (parts.length >= 2) {
let [page, _id] = parts;
let fullPath = navigationMap[page];
if (Array.isArray(fullPath)) {
// TODO: This logic will probably need to be upgraded at some point to support
// navigation maps with roots other than index. Currently though only index is
// generated so that doesn't matter.
let [_root, ...path] = fullPath;
if (path !== undefined) {
let isNotAtIndexHtml =
window.location.pathname != "" &&
window.location.pathname != "/" &&
window.location.pathname != "/index.html";
let lastBranch = null;
for (let linked of path) {
let branch = LinkedBranch.byLink.get(linked);
if (isNotAtIndexHtml && branch === undefined) {
navigateToPage("index");
return;
}
await branch.loadTree("navigateToBranch");
lastBranch = branch;
}
if (lastBranch != null) {
expandDetailsRecursively(lastBranch.details);
}
rehash();
}
} else {
// In case the navigation map does not contain the given page, we can try
// redirecting the user to a concrete page on the site.
navigateToPage(page);
}
}
}
}
function getCurrentlyHighlightedBranch() {
if (window.location.pathname == "/b" && window.location.search.length > 0) {
let shortID = window.location.search.substring(1);
@ -242,33 +165,12 @@ function getCurrentlyHighlightedBranch() {
}
}
async function navigateToCurrentBranch() {
await navigateToBranch(getCurrentlyHighlightedBranch());
}
// When you click on a link, and the destination is within a <details> that is not expanded,
// expand the <details> recursively.
window.addEventListener("popstate", navigateToCurrentBranch);
addEventListener("DOMContentLoaded", navigateToCurrentBranch);
// When you enter the website through a link someone sent you, it would be nice if the linked branch
// got expanded by default.
async function expandLinkedBranch() {
let currentlyHighlightedBranch = getCurrentlyHighlightedBranch();
if (currentlyHighlightedBranch.length > 0) {
let linkedBranch = document.getElementById(currentlyHighlightedBranch);
if (linkedBranch.children.length > 0 && linkedBranch.children[0].tagName == "DETAILS") {
expandDetailsRecursively(linkedBranch.children[0]);
}
}
}
addEventListener("DOMContentLoaded", expandLinkedBranch);
async function highlightCurrentBranch() {
let branch = document.getElementById(getCurrentlyHighlightedBranch());
if (branch != null) {
expandDetailsRecursively(branch);
branch.classList.add("target");
branch.scrollIntoView();
}
}