push/popState is handled better
This commit is contained in:
parent
9fc4a14ce3
commit
454d065baa
2 changed files with 21 additions and 17 deletions
|
|
@ -30,6 +30,7 @@ export class App {
|
|||
})
|
||||
|
||||
window.addEventListener('keydown', event => this.keyHandler(event))
|
||||
window.addEventListener('popstate', event => this.popState(event))
|
||||
document.getElementById('notes2').addEventListener('click', event => {
|
||||
if (event.target.id === 'notes2')
|
||||
document.getElementById('node-content')?.focus()
|
||||
|
|
@ -114,6 +115,9 @@ export class App {
|
|||
event.stopPropagation()
|
||||
}
|
||||
}//}}}
|
||||
popState(event) {// {{{
|
||||
_mbus.dispatch("GO_TO_NODE", { nodeUUID: event.state.nodeUUID, dontPush: true, dontExpand: true })
|
||||
}// }}}
|
||||
async getStartNode() {//{{{
|
||||
let nodeUUID = ROOT_NODE
|
||||
|
||||
|
|
@ -181,7 +185,6 @@ export class App {
|
|||
history.pushState({ nodeUUID }, '', `/notes2#${nodeUUID}`)
|
||||
|
||||
const node = nodeStore.node(nodeUUID)
|
||||
|
||||
node.reset() // any modifications are discarded.
|
||||
|
||||
this.currentNode = node
|
||||
|
|
@ -246,6 +249,7 @@ class N2Crumb extends CustomHTMLElement {
|
|||
|
||||
this.elLink.href = `/notes2#${this.uuid}`
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ export class N2Tree extends CustomHTMLElement {
|
|||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
|
|
@ -183,11 +183,11 @@ export class N2Tree extends CustomHTMLElement {
|
|||
const siblingExpanded = this.getNodeExpanded(siblingBefore?.UUID)
|
||||
if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
|
||||
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
|
||||
}
|
||||
|
||||
_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) {//{{{
|
||||
if (n === null || n === undefined)
|
||||
|
|
@ -202,17 +202,17 @@ export class N2Tree extends CustomHTMLElement {
|
|||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
if (n.isLastSibling()) {
|
||||
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
|
||||
}
|
||||
|
||||
_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) {//{{{
|
||||
if (n === null || n === undefined)
|
||||
|
|
@ -228,17 +228,17 @@ export class N2Tree extends CustomHTMLElement {
|
|||
parent = n.getParent()
|
||||
if (parent?.UUID === ROOT_NODE)
|
||||
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
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}//}}}
|
||||
|
|
@ -252,27 +252,27 @@ export class N2Tree extends CustomHTMLElement {
|
|||
// Traverse upward to nearest parent with next sibling.
|
||||
if (!nodeExpanded && n.isLastSibling()) {
|
||||
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
|
||||
}
|
||||
|
||||
if (nodeExpanded && n.isLastSibling() && !n.hasChildren()) {
|
||||
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
|
||||
}
|
||||
|
||||
// Node not expanded. Go to this node's next sibling.
|
||||
// GoToNode will abort if given null.
|
||||
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
|
||||
}
|
||||
|
||||
// Node is expanded.
|
||||
// Children will be visually beneath this node, if any.
|
||||
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
|
||||
}
|
||||
}//}}}
|
||||
|
|
@ -280,7 +280,7 @@ export class N2Tree extends CustomHTMLElement {
|
|||
const root = await nodeStore.get(ROOT_NODE)
|
||||
if (root.Children.length === 0)
|
||||
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() {//{{{
|
||||
const root = await nodeStore.get(ROOT_NODE)
|
||||
|
|
@ -292,9 +292,9 @@ export class N2Tree extends CustomHTMLElement {
|
|||
|
||||
if (toplevelExpanded) {
|
||||
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
|
||||
_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) {//{{{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue