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

wip

Browse source
This commit is contained in:
Magnus Åhall 2024-12-02 15:26:35 +01:00
parent 1d6ba99a36
commit 42b66714aa
3 changed files with 62 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

46
static/js/app.mjs
View file

@ -2,25 +2,27 @@ import { h, Component, createRef } from 'preact'
import { signal } from 'preact/signals'
import htm from 'htm'
import { API } from 'api'
import { Node } from 'node'
import { Node, NodeUI } from 'node'
const html = htm.bind(h)
export class Notes2 {
constructor() {//{{{
this.startNode = null
this.tree = createRef()
this.nodeUI = createRef()
this.setStartNode()
}//}}}
render() {//{{{
return html`
<button onclick=${() => API.logout()}>Log out</button>
<${Tree} ref=${this.tree} app=${this} />
<${NodeUI} app=${this} ref=${this.nodeUI} />
`
}//}}}
setStartNode() {//{{{
let urlParams = new URLSearchParams(window.location.search)
let nodeID = urlParams.get('node')
this.startNode = new Node(this, nodeID ? parseInt(nodeID) : 0)
const urlParams = new URLSearchParams(window.location.search)
const nodeID = urlParams.get('node')
this.startNode = new Node(this, nodeID ? Number.parseInt(nodeID) : 0)
}//}}}
treeGet() {//{{{
@ -45,9 +47,9 @@ class Tree extends Component {
this.retrieve()
}//}}}
render({ app }) {//{{{
let renderedTreeTrunk = this.treeTrunk.map(node => {
const renderedTreeTrunk = this.treeTrunk.map(node => {
this.treeNodeComponents[node.ID] = createRef()
return html`<${TreeNode} key=${"treenode_" + node.ID} tree=${this} node=${node} ref=${this.treeNodeComponents[node.ID]} selected=${node.ID == app.startNode.ID} />`
return html`<${TreeNode} key=${`treenode_${node.ID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.ID]} selected=${node.ID === app.startNode.ID} />`
})
return html`<div id="tree">${renderedTreeTrunk}</div>`
}//}}}
@ -64,8 +66,8 @@ class Tree extends Component {
// returned from the server to be sorted in such a way that
// a parent node always appears before a child node.
// The server uses a recursive SQL query delivering this.
res.forEach(nodeData => {
let node = new Node(
for (const nodeData of res) {
const node = new Node(
this,
nodeData.ID,
)
@ -80,11 +82,11 @@ class Tree extends Component {
this.treeNodes[node.ID] = node
if (node.ParentID == 0)
if (node.ParentID === 0)
this.treeTrunk.push(node)
else if (this.treeNodes[node.ParentID] !== undefined)
this.treeNodes[node.ParentID].Children.push(node)
})
}
// When starting with an explicit node value, expanding all nodes
// on its path gives the user a sense of location. Not necessarily working
// as the start node isn't guaranteed to have returned data yet.
@ -107,17 +109,17 @@ class Tree extends Component {
this.expandToTrunk(node.ID)
}//}}}
crumbsUpdateNodes(node) {//{{{
this.props.app.startNode.Crumbs.forEach(crumb => {
for (const crumb in this.props.app.startNode.Crumbs) {
// Start node is loaded before the tree.
let node = this.treeNodes[crumb.ID]
const node = this.treeNodes[crumb.ID]
if (node)
node._expanded = true
// Tree is done before the start node.
let component = this.treeNodeComponents[crumb.ID]
if (component && component.current)
const component = this.treeNodeComponents[crumb.ID]
if (component?.component.current)
component.current.expanded.value = true
})
}
// Will be undefined when called from tree initialization
// (as tree nodes aren't rendered yet)
@ -145,13 +147,13 @@ class TreeNode extends Component {
}//}}}
render({ tree, node }) {//{{{
let children = node.Children.map(node => {
const children = node.Children.map(node => {
tree.treeNodeComponents[node.ID] = createRef()
return html`<${TreeNode} key=${"treenode_" + node.ID} tree=${tree} node=${node} ref=${tree.treeNodeComponents[node.ID]} selected=${node.ID == tree.props.app.startNode.ID} />`
return html`<${TreeNode} key=${`treenode_${node.ID}`} tree=${tree} node=${node} ref=${tree.treeNodeComponents[node.ID]} selected=${node.ID === tree.props.app.startNode.ID} />`
})
let expandImg = ''
if (node.Children.length == 0)
if (node.Children.length === 0)
expandImg = html`<img src="/images/${window._VERSION}/leaf.svg" />`
else {
if (this.expanded.value)
@ -161,13 +163,15 @@ class TreeNode extends Component {
}
let selected = (this.selected.value ? 'selected' : '')
const selected = (this.selected.value ? 'selected' : '')
return html`
<div class="node">
<div class="expand-toggle" onclick=${() => this.expanded.value ^= true}>${expandImg}</div>
<div class="name ${selected}" onclick=${() => window._app.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
<div class="expand-toggle" onclick=${() => { this.expanded.value ^= true }}>${expandImg}</div>
<div class="name ${selected}" onclick=${() => window._notes2.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
<div class="children ${node.Children.length > 0 && this.expanded.value ? 'expanded' : 'collapsed'}">${children}</div>
</div>`
}//}}}
}
// vim: foldmethod=marker