Icons and keybindings for creating sub-documents and sibling documents

This commit is contained in:
Magnus Åhall 2026-06-12 08:47:24 +02:00
parent ffb7f4ac53
commit 9af733be64
4 changed files with 81 additions and 15 deletions

View file

@ -82,19 +82,18 @@ export class App {
keyHandler(event) {//{{{
let handled = true
if (event.key == 'F2') {
this.nodeUI.renameNode()
return
}
// All keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
// Most keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
// Ctrl+S is the exception to using Alt+Shift, since it is overridable and in such widespread use for saving.
// Thus, the exception is acceptable to consequent use of alt+shift.
if (!(event.shiftKey && event.altKey) && !(event.key.toUpperCase() === 'S' && event.ctrlKey))
return
const SHIFT_ALT = event.shiftKey && !event.ctrlKey && event.altKey
const SHIFT_CTRL_ALT = event.shiftKey && event.ctrlKey && event.altKey
switch (event.key.toUpperCase()) {
case 'F2':
this.nodeUI.renameNode()
break
case 'T':
if (!SHIFT_ALT) break
if (document.activeElement.id === 'tree-nodes')
this.nodeUI.takeFocus()
else
@ -102,18 +101,25 @@ export class App {
break
case 'F':
if (!SHIFT_ALT) break
_mbus.dispatch('op-search')
break
case 'M':
if (!SHIFT_ALT) break
globalThis._mbus.dispatch('MARKDOWN_TOGGLE')
break
case 'N':
this.createNode()
if (SHIFT_ALT)
this.createNode()
else if (SHIFT_CTRL_ALT) {
this.createNode(this.currentNode?.ParentUUID)
}
break
case 'S':
if (!SHIFT_ALT) break
this.nodeUI.saveNode()
break
@ -142,17 +148,20 @@ export class App {
async saveNode() {//{{{
}//}}}
async createNode() {//{{{
let name = prompt("Name")
async createNode(createUnderUUID) {//{{{
const parentUUID = createUnderUUID ? createUnderUUID : this.currentNode.UUID
const p = createUnderUUID ? 'Name for sibling document' : 'Name for sub-document'
let name = prompt(p)
if (!name)
return
const nn = Node.create(name, this.currentNode.UUID)
const nn = Node.create(name, parentUUID)
await nn.save()
// Treenode is forcefully rerendered and children refetched to both show the new node
// and to get it resorted.
const parentTreenode = this.sidebar.getTreeNode(this.currentNode.UUID)
const parentTreenode = this.sidebar.getTreeNode(parentUUID)
await parentTreenode.render(true, true)
_mbus.dispatch('GO_TO_NODE', { nodeUUID: nn.UUID })
}//}}}

View file

@ -9,10 +9,11 @@ export class N2PageNodeUI extends CustomHTMLElement {
<style>
.el-functions {
display: grid;
grid-template-columns: 1fr repeat(3, min-content);
grid-template-columns: 1fr repeat(4, min-content);
grid-gap: 8px;
align-items: center;
justify-items: end;
cursor: pointer;
img {
height: 24px;
@ -29,6 +30,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
<img data-el="icon-markdown">
<img data-el="icon-table-format" class="colorize" src="/images/${_VERSION}/icon_table.svg">
<img data-el="icon-history" class="colorize" src="/images/${_VERSION}/icon_history.svg">
<img data-el="icon-new-document" class="colorize" src="/images/${_VERSION}/icon_new_document.svg">
</div>
`
}// }}}
@ -83,6 +85,12 @@ export class N2PageNodeUI extends CustomHTMLElement {
})
this.elIconHistory.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'history' }))
this.elIconSave.addEventListener('click', () => this.saveNode())
this.elIconNewDocument.addEventListener('click', event => {
if (event.shiftKey)
_app.createNode(this.node.ParentUUID)
else
_app.createNode()
})
this.showMarkdown(true)
}// }}}