Fixed crumbs

static/js/node.mjs

@@ -14,11 +14,12 @@ export class NodeUI extends Component {
 		this.nodeModified = signal(false)
 		this.keys = signal([])
 		this.page = signal('node')
+		this.crumbs = []
 		window.addEventListener('popstate', evt => {
 			if (evt.state?.hasOwnProperty('nodeUUID'))
-				this.goToNode(evt.state.nodeUUID, true)
+				_notes2.current.goToNode(evt.state.nodeUUID, true)
 			else
-				this.goToNode(0, true)
+				_notes2.current.goToNode('00000000-0000-0000-0000-000000000000', true)
 		})
 
 		window.addEventListener('keydown', evt => this.keyHandler(evt))
@@ -32,13 +33,23 @@ export class NodeUI extends Component {
 
 		const nodeModified = this.nodeModified.value ? 'node-modified' : ''
 
+
+		const crumbDivs = [
+			html`<div class="crumb" onclick=${() => _notes2.current.goToNode(ROOT_NODE)}>Start</div>`
+		]
+		for (let i = this.crumbs.length-1; i >= 0; i--) {
+			const crumbNode = this.crumbs[i]
+			crumbDivs.push(html`<div class="crumb" onclick=${() => _notes2.current.goToNode(crumbNode.UUID)}>${crumbNode.get('Name')}</div>`)
+		}
+		if (node.UUID !== ROOT_NODE)
+			crumbDivs.push(
+				html`<div class="crumb" onclick=${() => _notes2.current.goToNode(node.UUID)}>${node.get('Name')}</div>`
+			)
+
 		return html`
-			<div id="crumbs" onclick=${()=>this.saveNode()}>
+			<div id="crumbs" onclick=${() => this.saveNode()}>
 				<div class="crumbs ${nodeModified}">
-					<div class="crumb" onclick=${()=>_notes2.current.goToNode(ROOT_NODE)}>Start</div>
-					<div class="crumb">Minnie</div>
-					<div class="crumb">Fluffy</div>
-					<div class="crumb">Chili</div>
+					${crumbDivs}
 				</div>
 			</div>
 			<div id="name">${node.get('Name')}</div>
@@ -149,6 +160,9 @@ export class NodeUI extends Component {
 		this.nodeModified.value = false
 		this.node.value = node
 	}//}}}
+	setCrumbs(nodes) {//{{{
+		this.crumbs = nodes
+	}//}}}
 	async saveNode() {//{{{
 		if (!this.nodeModified.value)
 			return
@@ -242,13 +256,13 @@ class NodeContent extends Component {
 			`
 		}
 
-		let element
 		/*
+		let element
 		if (node.RenderMarkdown.value)
 			element = html`<${MarkdownContent} key='markdown-content' content=${content} />`
 		else
 		*/
-			element = html`
+		const element = html`
 				<div class="grow-wrap">
 					<textarea id="node-content" class="node-content" ref=${this.contentDiv} oninput=${evt => this.contentChanged(evt)} required rows=1>${content}</textarea>
 				</div>
@@ -338,7 +352,6 @@ export class Node {
 		this._children_fetched = true
 		return this.Children
 	}//}}}
-
 	content() {//{{{
 		/* TODO - implement crypto
 		if (this.CryptoKeyID != 0 && !this._decrypted)

static/js/node_store.mjs

@@ -115,9 +115,9 @@ export class NodeStore {
 	}//}}}
 
 	node(uuid, dataIfUndefined, newLevel) {//{{{
-		let n = this.node[uuid]
+		let n = this.nodes[uuid]
 		if (n === undefined && dataIfUndefined !== undefined)
-			n = this.node[uuid] = new Node(dataIfUndefined, newLevel)
+			n = this.nodes[uuid] = new Node(dataIfUndefined, newLevel)
 		return n
 	}//}}}
 
@@ -355,6 +355,9 @@ export class NodeStore {
 	}//}}}
 	async getNodeAncestry(node, accumulated) {//{{{
 		return new Promise((resolve, reject) => {
+			if (accumulated === undefined)
+				accumulated = []
+
 			const nodeParentIndex = this.db
 				.transaction('nodes', 'readonly')
 				.objectStore('nodes')

static/js/notes2.mjs

@@ -43,7 +43,7 @@ export class Notes2 extends Component {
 			this.setState({ startNode: node })
 		})
 	}//}}}
-	goToNode(nodeUUID, dontPush) {//{{{
+	async goToNode(nodeUUID, dontPush) {//{{{
 		// Don't switch notes until saved.
 		if (this.nodeUI.current.nodeModified.value) {
 			if (!confirm("Changes not saved. Do you want to discard changes?"))
@@ -56,7 +56,9 @@ export class Notes2 extends Component {
 		// New node is fetched in order to retrieve content and files.
 		// Such data is unnecessary to transfer for tree/navigational purposes.
 		const node = nodeStore.node(nodeUUID)
+		const ancestors = await nodeStore.getNodeAncestry(node)
 		this.nodeUI.current.setNode(node)
+		this.nodeUI.current.setCrumbs(ancestors)
 		this.tree.setSelected(node)
 	}//}}}
 	logout() {//{{{