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

fix navigating to fragment in chrome

Browse source
This commit is contained in:
liquidex 2023-09-03 11:45:14 +02:00
parent 12ceaa6e4e
commit c0179cd29c
1 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
static/js/tree.js
View file

@ -2,6 +2,8 @@
import { navigationMap } from "/navmap.js"; import { navigationMap } from "/navmap.js";
/* Branch persistence */
const branchStateKey = "treehouse.openBranches"; const branchStateKey = "treehouse.openBranches";
let branchState = JSON.parse(sessionStorage.getItem(branchStateKey)) || {}; let branchState = JSON.parse(sessionStorage.getItem(branchStateKey)) || {};
@ -34,6 +36,8 @@ class Branch extends HTMLLIElement {
customElements.define("th-b", Branch, { extends: "li" }); customElements.define("th-b", Branch, { extends: "li" });
/* Linked branches */
class LinkedBranch extends Branch { class LinkedBranch extends Branch {
static byLink = new Map(); static byLink = new Map();
@ -96,9 +100,21 @@ class LinkedBranch extends Branch {
} }
} }
customElements.define("th-b-linked", LinkedBranch, { extends: "li" }); customElements.define("th-b-linked", LinkedBranch, { extends: "li" });
/* Fragment navigation */
let rehashing = false;
function rehash() { // https://www.youtube.com/watch?v=Tv1SYqLllKI
if (!rehashing) {
rehashing = true;
let hash = window.location.hash;
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") {
@ -113,15 +129,13 @@ function navigateToPage(page) {
} }
async function navigateToBranch(fragment) { async function navigateToBranch(fragment) {
if (fragment.length == 0) { if (fragment.length == 0) return;
return;
}
let element = document.getElementById(fragment); let element = document.getElementById(fragment);
if (element !== null) { if (element !== null) {
// If the element is already loaded on the page, we're good. // If the element is already loaded on the page, we're good.
expandDetailsRecursively(element); expandDetailsRecursively(element);
window.location.hash = window.location.hash; rehash();
} else { } else {
// The element is not loaded, we need to load the tree that has it. // The element is not loaded, we need to load the tree that has it.
let parts = fragment.split(':'); let parts = fragment.split(':');
@ -150,7 +164,7 @@ async function navigateToBranch(fragment) {
if (lastBranch != null) { if (lastBranch != null) {
expandDetailsRecursively(lastBranch.details); expandDetailsRecursively(lastBranch.details);
} }
window.location.hash = window.location.hash; rehash();
} }
} else { } else {
// In case the navigation map does not contain the given page, we can try // In case the navigation map does not contain the given page, we can try
@ -163,7 +177,7 @@ async function navigateToBranch(fragment) {
async function navigateToCurrentBranch() { async function navigateToCurrentBranch() {
let location = window.location.hash.substring(1); let location = window.location.hash.substring(1);
navigateToBranch(location); await navigateToBranch(location);
} }
// When you click on a link, and the destination is within a <details> that is not expanded, // When you click on a link, and the destination is within a <details> that is not expanded,