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

Upgraded the TreeNative component to a custom HTML component

Browse source
This commit is contained in:
Magnus Åhall 2026-04-29 14:48:27 +02:00
parent e2b20816c2
commit 993bbf59f3
2 changed files with 27 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

46
static/js/tree.mjs
View file

@ -1,46 +1,49 @@
import { ROOT_NODE } from 'node_store'
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
export class TreeNative {
export class N2Tree extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
<div data-el="logo" id="logo"><img src="/images/${_VERSION}/logo.svg" /></div>
<div class="icons">
<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
<img data-el="sync" class='sync' src="/images/${_VERSION}/icon_refresh.svg" />
</div>
`
}// }}}
constructor() {// {{{
super()
this.id = 'tree-nodes'
this.tabIndex = 0
this.treeNodeComponents = {}
this.treeTrunk = []
this.expandedNodes = {} // keyed on UUID
this.selectedNode = null
this.rendered = false
this.addEventListener('keydown', event => this.keyHandler(event))
this.elSearch.addEventListener('click', () => _mbus.dispatch('op-search'))
this.elSync.addEventListener('click', () => _sync.run())
this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
this.populateFirstLevel()
}// }}}
render() {// {{{
if (this.rendered)
alert('Tree should only be rendered once.')
const tmpl = document.createElement('template')
tmpl.innerHTML = `
<div id="tree-nodes" tabindex=0>
<div id="logo"><img src="/images/${_VERSION}/logo.svg" /></div>
<div class="icons">
<img class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
<img class='sync' src="/images/${_VERSION}/icon_refresh.svg" />
</div>
<div>`
const treeEl = tmpl.content.getElementById('tree-nodes')
treeEl.addEventListener('keydown', event => this.keyHandler(event))
tmpl.content.querySelector('.icons .search').addEventListener('click', () => _mbus.dispatch('op-search'))
tmpl.content.querySelector('.icons .sync').addEventListener('click', () => _sync.run())
tmpl.content.getElementById('logo').addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
for (const node of this.treeTrunk) {
const treenode = new N2TreeNode(this, node)
this.treeNodeComponents[node.UUID] = treenode
treeEl.appendChild(treenode.render())
this.appendChild(treenode.render())
}
this.rendered = true
return tmpl.content
return this
}// }}}
populateFirstLevel() {//{{{
nodeStore.get(ROOT_NODE)
@ -330,6 +333,7 @@ export class TreeNative {
treenode?.scrollIntoView({ block: 'nearest' })
}// }}}
}
customElements.define('n2-tree', N2Tree)
export class N2TreeNode extends CustomHTMLElement {
static {// {{{