thin down the JavaScript that scrolls to branches
_lots_ of early treehouse stuff to fix there
This commit is contained in:
parent
645ae598f2
commit
f192ac2a8e
|
|
@ -147,20 +147,6 @@ addSpell("b-linked", LinkedBranch);
|
||||||
|
|
||||||
/* Fragment navigation */
|
/* 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) {
|
function expandDetailsRecursively(element) {
|
||||||
while (element && element.tagName != "MAIN") {
|
while (element && element.tagName != "MAIN") {
|
||||||
if (element.tagName == "DETAILS") {
|
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() {
|
function getCurrentlyHighlightedBranch() {
|
||||||
if (window.location.pathname == "/b" && window.location.search.length > 0) {
|
if (window.location.pathname == "/b" && window.location.search.length > 0) {
|
||||||
let shortID = window.location.search.substring(1);
|
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() {
|
async function highlightCurrentBranch() {
|
||||||
let branch = document.getElementById(getCurrentlyHighlightedBranch());
|
let branch = document.getElementById(getCurrentlyHighlightedBranch());
|
||||||
if (branch != null) {
|
if (branch != null) {
|
||||||
|
expandDetailsRecursively(branch);
|
||||||
branch.classList.add("target");
|
branch.classList.add("target");
|
||||||
|
branch.scrollIntoView();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue