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

Refactored tree to sidebar

Browse source
This commit is contained in:
Magnus Åhall 2026-06-08 16:48:25 +02:00
parent 83abc3f456
commit b3e5d79403
4 changed files with 25 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

6
static/css/notes2.css
View file

@ -92,7 +92,7 @@ button {
border-right: none; border-right: none;
} }
n2-tree { n2-sidebar {
display: none; display: none;
} }
@ -164,7 +164,7 @@ button {
border-right: 1px solid var(--line-color); border-right: 1px solid var(--line-color);
n2-tree { n2-sidebar {
.el-treenodes { .el-treenodes {
margin: 24px 32px 32px 32px; margin: 24px 32px 32px 32px;
} }
@ -508,7 +508,7 @@ dialog.op {
} }
#tree { #tree {
n2-tree { n2-sidebar {
.el-treenodes { .el-treenodes {
height: calc(100vh - 64px - 64px); height: calc(100vh - 64px - 64px);
margin: 0px; margin: 0px;

12
static/js/app.mjs
View file

@ -1,12 +1,12 @@
import { ROOT_NODE } from 'node_store' import { ROOT_NODE } from 'node_store'
import { CustomHTMLElement } from './lib/custom_html_element.mjs' import { CustomHTMLElement } from './lib/custom_html_element.mjs'
import { N2Tree } from 'tree' import { N2Sidebar } from 'sidebar'
import { Node } from 'node' import { Node } from 'node'
export class App { export class App {
constructor() {// {{{ constructor() {// {{{
this.currentNode = null this.currentNode = null
this.tree = new N2Tree() this.sidebar = new N2Sidebar() // XXX - rename this.tree
this.crumbs = new N2Crumbs() this.crumbs = new N2Crumbs()
this.crumbsElement = document.getElementById('crumbs') this.crumbsElement = document.getElementById('crumbs')
this.nodeUI = document.getElementById('note') this.nodeUI = document.getElementById('note')
@ -22,7 +22,7 @@ export class App {
this.goToNode(startNode.UUID, false, false) this.goToNode(startNode.UUID, false, false)
}) })
document.getElementById('tree').append(await this.tree.render()) document.getElementById('tree').append(await this.sidebar.render())
document.getElementById('tree-nodes')?.focus() document.getElementById('tree-nodes')?.focus()
if (startNode.UUID == ROOT_NODE) if (startNode.UUID == ROOT_NODE)
@ -85,7 +85,7 @@ export class App {
if (document.activeElement.id === 'tree-nodes') { if (document.activeElement.id === 'tree-nodes') {
this.nodeUI.takeFocus() this.nodeUI.takeFocus()
} else { } else {
this.tree.focus() this.sidebar.focus()
} }
break break
@ -184,7 +184,7 @@ export class App {
node.reset() // any modifications are discarded. node.reset() // any modifications are discarded.
this.currentNode = node this.currentNode = node
this.tree.setSelected(node, dontExpand) this.sidebar.setSelected(node, dontExpand)
const ancestors = await nodeStore.getNodeAncestry(node) const ancestors = await nodeStore.getNodeAncestry(node)
_mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render())) _mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render()))
@ -193,7 +193,7 @@ export class App {
_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' }) _mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
// Scrolls node into view. // Scrolls node into view.
this.tree.makeVisible(node) this.sidebar.makeVisible(node)
}//}}} }//}}}
} }

30
static/js/tree.mjs → static/js/sidebar.mjs
View file

@ -59,12 +59,12 @@ class TreeExpansionHandler {// {{{
} }
}// }}} }// }}}
export class N2Tree extends CustomHTMLElement { export class N2Sidebar extends CustomHTMLElement {
static {// {{{ static {// {{{
this.tmpl = document.createElement('template') this.tmpl = document.createElement('template')
this.tmpl.innerHTML = ` this.tmpl.innerHTML = `
<style> <style>
n2-tree { n2-sidebar {
#logo { #logo {
display: grid; display: grid;
grid-template-columns: 1fr min-content; grid-template-columns: 1fr min-content;
@ -464,14 +464,14 @@ export class N2Tree extends CustomHTMLElement {
treenode?.scrollIntoView({ block: 'nearest' }) treenode?.scrollIntoView({ block: 'nearest' })
}// }}} }// }}}
} }
customElements.define('n2-tree', N2Tree) customElements.define('n2-sidebar', N2Sidebar)
export class N2TreeNode extends CustomHTMLElement { export class N2TreeNode extends CustomHTMLElement {
static {// {{{ static {// {{{
this.tmpl = document.createElement('template') this.tmpl = document.createElement('template')
this.tmpl.innerHTML = ` this.tmpl.innerHTML = `
<style> <style>
n2-tree:focus-within { n2-sidebar:focus-within {
.el-name { .el-name {
&.selected { &.selected {
span { span {
@ -503,18 +503,18 @@ export class N2TreeNode extends CustomHTMLElement {
` `
}// }}} }// }}}
constructor(tree, node, parent) {//{{{ constructor(sidebar, node, parent) {//{{{
super() super()
this.classList.add('node') this.classList.add('node')
this.tree = tree this.sidebar = sidebar
this.node = node this.node = node
this.parent = parent this.parent = parent
this.children_populated = false this.children_populated = false
this.rendered = false this.rendered = false
this.elExpandToggle.addEventListener('click', () => this.tree.setNodeExpanded(this.node, !this.tree.getNodeExpanded(this.node.UUID))) this.elExpandToggle.addEventListener('click', () => this.sidebar.setNodeExpanded(this.node, !this.sidebar.getNodeExpanded(this.node.UUID)))
this.elName.addEventListener('click', () => _mbus.dispatch('TREE_NODE_SELECTED', this.node)) this.elName.addEventListener('click', () => _mbus.dispatch('TREE_NODE_SELECTED', this.node))
_mbus.subscribe(`NODE_CHILDREN_FETCHED_${node.UUID}`, () => { _mbus.subscribe(`NODE_CHILDREN_FETCHED_${node.UUID}`, () => {
@ -525,7 +525,7 @@ export class N2TreeNode extends CustomHTMLElement {
this.render(true) this.render(true)
}) })
if (this.node.Level === 0 || this.tree.getNodeExpanded(this.node.UUID)) if (this.node.Level === 0 || this.sidebar.getNodeExpanded(this.node.UUID))
this.fetchChildren() this.fetchChildren()
}// }}} }// }}}
async fetchChildren() {//{{{ async fetchChildren() {//{{{
@ -537,16 +537,16 @@ export class N2TreeNode extends CustomHTMLElement {
return this return this
// Fetch the next level of children if the parent tree node is expanded and our children thus will be visible. // Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
const expanded = this.node.hasChildren() && this.tree.getNodeExpanded(this.node.UUID) const expanded = this.node.hasChildren() && this.sidebar.getNodeExpanded(this.node.UUID)
if (!this.children_populated && this.tree.getNodeExpanded(this.parent?.node.UUID)) { if (!this.children_populated && this.sidebar.getNodeExpanded(this.parent?.node.UUID)) {
this.node.fetchChildren().then(() => this.children_populated = true) this.node.fetchChildren().then(() => this.children_populated = true)
} }
// Update the name and selected status // Update the name and selected status
this.elName.querySelector('span').innerText = this.node.get('Name') this.elName.querySelector('span').innerText = this.node.get('Name')
if (this.tree.isSelected(this.node)) if (this.sidebar.isSelected(this.node))
this.elName.classList.add('selected') this.elName.classList.add('selected')
else else
this.elName.classList.remove('selected') this.elName.classList.remove('selected')
@ -565,7 +565,7 @@ export class N2TreeNode extends CustomHTMLElement {
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/icon_home.svg`) this.setImgSrc(this.elExpand, `/images/${window._VERSION}/icon_home.svg`)
else if (!this.node.hasChildren()) else if (!this.node.hasChildren())
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`) this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`)
else if (this.tree.getNodeExpanded(this.node.UUID)) else if (this.sidebar.getNodeExpanded(this.node.UUID))
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/expanded.svg`) this.setImgSrc(this.elExpand, `/images/${window._VERSION}/expanded.svg`)
else else
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/collapsed.svg`) this.setImgSrc(this.elExpand, `/images/${window._VERSION}/collapsed.svg`)
@ -575,10 +575,10 @@ export class N2TreeNode extends CustomHTMLElement {
let children = [] let children = []
if (expanded) if (expanded)
children = this.node.Children.map(node => { children = this.node.Children.map(node => {
let treenode = this.tree.treeNodeComponents[node.UUID] let treenode = this.sidebar.treeNodeComponents[node.UUID]
if (treenode === undefined) { if (treenode === undefined) {
treenode = new N2TreeNode(this.tree, node, this) treenode = new N2TreeNode(this.sidebar, node, this)
this.tree.treeNodeComponents[node.UUID] = treenode this.sidebar.treeNodeComponents[node.UUID] = treenode
_mbus.dispatch(`NODE_COMPONENT_EXIST_${node.UUID}`) _mbus.dispatch(`NODE_COMPONENT_EXIST_${node.UUID}`)
} }
return treenode return treenode

2
views/layouts/main.gotmpl
View file

@ -15,7 +15,7 @@
"crypto": "/js/{{ .VERSION }}/crypto.mjs", "crypto": "/js/{{ .VERSION }}/crypto.mjs",
"node_store": "/js/{{ .VERSION }}/node_store.mjs", "node_store": "/js/{{ .VERSION }}/node_store.mjs",
"node": "/js/{{ .VERSION }}/page_node.mjs", "node": "/js/{{ .VERSION }}/page_node.mjs",
"tree": "/js/{{ .VERSION }}/tree.mjs" "sidebar": "/js/{{ .VERSION }}/sidebar.mjs"
} }
} }
</script> </script>