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

Tree expansion handled better

Browse source
This commit is contained in:
Magnus Åhall 2026-06-03 20:31:23 +02:00
parent bea865dd82
commit a3864d2b55
6 changed files with 143 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

65
static/js/tree.mjs
View file

@ -2,6 +2,62 @@ import { ROOT_NODE } from 'node_store'
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
import { Color, Solver } from './lib/css_colorize.mjs'
// TreeExpandedHandler is responsible for collapsing or expanding
// the node tree, wide view or narrow "mobile" view.
class TreeExpansionHandler {// {{{
constructor() {
this.isNarrow = false
this.initializeMediaHandler()
this.initializeBusEvents()
}
initializeBusEvents() {
_mbus.subscribe('TREE_EXPANSION', ({ detail }) => {
// When a node is selected on the screen and the screen
// is narrow the tree is automatically hidden.
//
// Can't always hide the tree automatically when a node
// is selected since the wide mode shows the tree as standard.
if (detail.data?.when == 'narrow' && !this.isNarrow)
return
this.treeExpansion(detail.data?.expand)
})
}
initializeMediaHandler() {
const query = window.matchMedia('(max-width: 800px)')
query.addEventListener('change', event => this.screenNarrowHandler(event))
// Run once to set initial state, instead of needing to toggle state.
this.screenNarrowHandler(query)
}
// When screen becomes narrow, the tree is automatically hidden.
// Primary purpose is to read content, not browse, which is why
// the tree is hidden as standard.
screenNarrowHandler(event) {
this.isNarrow = event.matches
if (this.isNarrow)
this.treeExpansion(false)
else
this.treeExpansion(true)
}
treeExpansion(expanded) {
const notes2 = document.getElementById('notes2')
if (expanded) {
notes2.classList.remove('hide-tree')
notes2.classList.add('show-tree')
} else {
notes2.classList.add('hide-tree')
notes2.classList.remove('show-tree')
}
}
}// }}}
export class N2Tree extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
@ -22,7 +78,7 @@ export class N2Tree extends CustomHTMLElement {
</div>
<div class="icons">
<img data-el="sync" class='sync colorize' src="/images/${_VERSION}/icon_refresh.svg" />
<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
<img data-el="search" class='search colorize' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
<img data-el="settings" class='settings colorize' src="/images/${_VERSION}/icon_settings.svg" />
</div>
<div data-el="treenodes"></div>
@ -41,14 +97,15 @@ export class N2Tree extends CustomHTMLElement {
this.selectedNode = null
this.rendered = false
new TreeExpansionHandler()
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.elHideTree.addEventListener('click', event=>{
this.elHideTree.addEventListener('click', event => {
event.stopPropagation()
document.getElementById('notes2').classList.add('hide-tree')
document.getElementById('notes2').classList.remove('show-tree')
_mbus.dispatch('TREE_EXPANSION', { expand: false })
})
_mbus.subscribe('NODE_MODIFIED', ({ detail }) => {