magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

push/popState is handled better

Browse source
This commit is contained in:
Magnus Åhall 2026-05-03 09:51:48 +02:00
parent 9fc4a14ce3
commit 454d065baa
2 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

6
static/js/app.mjs
View file

@ -30,6 +30,7 @@ export class App {
}) })
window.addEventListener('keydown', event => this.keyHandler(event)) window.addEventListener('keydown', event => this.keyHandler(event))
window.addEventListener('popstate', event => this.popState(event))
document.getElementById('notes2').addEventListener('click', event => { document.getElementById('notes2').addEventListener('click', event => {
if (event.target.id === 'notes2') if (event.target.id === 'notes2')
document.getElementById('node-content')?.focus() document.getElementById('node-content')?.focus()
@ -114,6 +115,9 @@ export class App {
event.stopPropagation() event.stopPropagation()
} }
}//}}} }//}}}
popState(event) {// {{{
_mbus.dispatch("GO_TO_NODE", { nodeUUID: event.state.nodeUUID, dontPush: true, dontExpand: true })
}// }}}
async getStartNode() {//{{{ async getStartNode() {//{{{
let nodeUUID = ROOT_NODE let nodeUUID = ROOT_NODE
@ -181,7 +185,6 @@ export class App {
history.pushState({ nodeUUID }, '', `/notes2#${nodeUUID}`) history.pushState({ nodeUUID }, '', `/notes2#${nodeUUID}`)
const node = nodeStore.node(nodeUUID) const node = nodeStore.node(nodeUUID)
node.reset() // any modifications are discarded. node.reset() // any modifications are discarded.
this.currentNode = node this.currentNode = node
@ -246,6 +249,7 @@ class N2Crumb extends CustomHTMLElement {
this.elLink.href = `/notes2#${this.uuid}` this.elLink.href = `/notes2#${this.uuid}`
this.elLink.innerText = this.label this.elLink.innerText = this.label
this.elLink.addEventListener('click', () => _mbus.dispatch("GO_TO_NODE", { nodeUUID: this.uuid, dontPush: false, dontExpand: true }))
}// }}} }// }}}
} }
customElements.define('n2-crumb', N2Crumb) customElements.define('n2-crumb', N2Crumb)

32
static/js/tree.mjs
View file

@ -175,7 +175,7 @@ export class N2Tree extends CustomHTMLElement {
} }
if (n.isFirstSibling() && n.getParent().UUID !== ROOT_NODE) { if (n.isFirstSibling() && n.getParent().UUID !== ROOT_NODE) {
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getParent()?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getParent()?.UUID, dontPush: false, dontExpand: true })
return return
} }
@ -183,11 +183,11 @@ export class N2Tree extends CustomHTMLElement {
const siblingExpanded = this.getNodeExpanded(siblingBefore?.UUID) const siblingExpanded = this.getNodeExpanded(siblingBefore?.UUID)
if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) { if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
const siblingAbove = this.getLastExpandedNode(siblingBefore) const siblingAbove = this.getLastExpandedNode(siblingBefore)
_mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingAbove?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingAbove?.UUID, dontPush: false, dontExpand: true })
return return
} }
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingBefore()?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingBefore()?.UUID, dontPush: false, dontExpand: true })
}//}}} }//}}}
async navigateRight(n) {//{{{ async navigateRight(n) {//{{{
if (n === null || n === undefined) if (n === null || n === undefined)
@ -202,17 +202,17 @@ export class N2Tree extends CustomHTMLElement {
} }
if (expanded && n.hasChildren()) { if (expanded && n.hasChildren()) {
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.Children[0]?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.Children[0]?.UUID, dontPush: false, dontExpand: true })
return return
} }
if (n.isLastSibling()) { if (n.isLastSibling()) {
const nextNode = this.getParentWithNextSibling(n) const nextNode = this.getParentWithNextSibling(n)
_mbus.dispatch("GO_TO_NODE", { nodeUUID: nextNode?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: nextNode?.UUID, dontPush: false, dontExpand: true })
return return
} }
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: false, dontExpand: true })
}//}}} }//}}}
async navigateUp(n) {//{{{ async navigateUp(n) {//{{{
if (n === null || n === undefined) if (n === null || n === undefined)
@ -228,17 +228,17 @@ export class N2Tree extends CustomHTMLElement {
parent = n.getParent() parent = n.getParent()
if (parent?.UUID === ROOT_NODE) if (parent?.UUID === ROOT_NODE)
return return
_mbus.dispatch("GO_TO_NODE", { nodeUUID: parent?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: parent?.UUID, dontPush: false, dontExpand: true })
return return
} }
if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) { if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
_mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingBefore.Children[siblingBefore.Children.length - 1]?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingBefore.Children[siblingBefore.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
return return
} }
if (siblingBefore) { if (siblingBefore) {
_mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingBefore.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingBefore.UUID, dontPush: false, dontExpand: true })
return return
} }
}//}}} }//}}}
@ -252,27 +252,27 @@ export class N2Tree extends CustomHTMLElement {
// Traverse upward to nearest parent with next sibling. // Traverse upward to nearest parent with next sibling.
if (!nodeExpanded && n.isLastSibling()) { if (!nodeExpanded && n.isLastSibling()) {
const wantedNode = this.getParentWithNextSibling(n) const wantedNode = this.getParentWithNextSibling(n)
_mbus.dispatch("GO_TO_NODE", { nodeUUID: wantedNode?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: wantedNode?.UUID, dontPush: false, dontExpand: true })
return return
} }
if (nodeExpanded && n.isLastSibling() && !n.hasChildren()) { if (nodeExpanded && n.isLastSibling() && !n.hasChildren()) {
const wantedNode = this.getParentWithNextSibling(n) const wantedNode = this.getParentWithNextSibling(n)
_mbus.dispatch("GO_TO_NODE", { nodeUUID: wantedNode?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: wantedNode?.UUID, dontPush: false, dontExpand: true })
return return
} }
// Node not expanded. Go to this node's next sibling. // Node not expanded. Go to this node's next sibling.
// GoToNode will abort if given null. // GoToNode will abort if given null.
if (!nodeExpanded || !n.hasChildren()) { if (!nodeExpanded || !n.hasChildren()) {
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: false, dontExpand: true })
return return
} }
// Node is expanded. // Node is expanded.
// Children will be visually beneath this node, if any. // Children will be visually beneath this node, if any.
if (nodeExpanded && n.hasChildren()) { if (nodeExpanded && n.hasChildren()) {
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.Children[0].UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.Children[0].UUID, dontPush: false, dontExpand: true })
return return
} }
}//}}} }//}}}
@ -280,7 +280,7 @@ export class N2Tree extends CustomHTMLElement {
const root = await nodeStore.get(ROOT_NODE) const root = await nodeStore.get(ROOT_NODE)
if (root.Children.length === 0) if (root.Children.length === 0)
return return
_mbus.dispatch("GO_TO_NODE", { nodeUUID: root.Children[0]?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: root.Children[0]?.UUID, dontPush: false, dontExpand: true })
}//}}} }//}}}
async navigateBottom() {//{{{ async navigateBottom() {//{{{
const root = await nodeStore.get(ROOT_NODE) const root = await nodeStore.get(ROOT_NODE)
@ -292,9 +292,9 @@ export class N2Tree extends CustomHTMLElement {
if (toplevelExpanded) { if (toplevelExpanded) {
const lastnode = this.getLastExpandedNode(toplevel) const lastnode = this.getLastExpandedNode(toplevel)
_mbus.dispatch("GO_TO_NODE", { nodeUUID: lastnode?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: lastnode?.UUID, dontPush: false, dontExpand: true })
} else } else
_mbus.dispatch("GO_TO_NODE", { nodeUUID: root.Children[root.Children.length - 1]?.UUID, dontPush: true, dontExpand: true }) _mbus.dispatch("GO_TO_NODE", { nodeUUID: root.Children[root.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
}//}}} }//}}}
getParentWithNextSibling(node) {//{{{ getParentWithNextSibling(node) {//{{{