90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
|
import { h, Component } from 'preact'
|
||
|
|
import htm from 'htm'
|
||
|
|
import { signal } from 'preact/signals'
|
||
|
|
const html = htm.bind(h)
|
||
|
|
|
||
|
|
export class NodeUI extends Component {
|
||
|
|
constructor() {//{{{
|
||
|
|
super()
|
||
|
|
this.node = signal(null)
|
||
|
|
window.addEventListener('popstate', evt=>{
|
||
|
|
if(evt.state && evt.state.hasOwnProperty('nodeID'))
|
||
|
|
this.goToNode(evt.state.nodeID, true)
|
||
|
|
else
|
||
|
|
this.goToNode(0, true)
|
||
|
|
})
|
||
|
|
}//}}}
|
||
|
|
render() {//{{{
|
||
|
|
if(this.node.value === null)
|
||
|
|
return
|
||
|
|
|
||
|
|
let node = this.node.value
|
||
|
|
|
||
|
|
let crumbs = [
|
||
|
|
html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`
|
||
|
|
]
|
||
|
|
|
||
|
|
crumbs = crumbs.concat(node.Crumbs.slice(1).map(node=>
|
||
|
|
html`<div class="crumb" onclick=${()=>this.goToNode(node.ID)}>${node.Name}</div>`
|
||
|
|
).reverse())
|
||
|
|
|
||
|
|
let children = node.Children.sort((a,b)=>{
|
||
|
|
if(a.Name.toLowerCase() > b.Name.toLowerCase()) return 1;
|
||
|
|
if(a.Name.toLowerCase() < b.Name.toLowerCase()) return -1;
|
||
|
|
return 0
|
||
|
|
}).map(child=>html`
|
||
|
|
<div class="child-node" onclick=${()=>this.goToNode(child.ID)}>${child.Name}</div>
|
||
|
|
`)
|
||
|
|
|
||
|
|
return html`
|
||
|
|
${node.ID > 0 ? html`<div class="crumbs">${crumbs}</crumbs>` : html``}
|
||
|
|
<div class="node-name">${node.Name}</div>
|
||
|
|
${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
|
||
|
|
<div class="node-content">${node.Content}</div>
|
||
|
|
`
|
||
|
|
}//}}}
|
||
|
|
componentDidMount() {//{{{
|
||
|
|
let root = new Node(this.props.app, 0)
|
||
|
|
root.retrieve(node=>{
|
||
|
|
this.node.value = node
|
||
|
|
})
|
||
|
|
}//}}}
|
||
|
|
goToNode(nodeID, dontPush) {//{{{
|
||
|
|
if(!dontPush)
|
||
|
|
history.pushState({ nodeID }, '', `#${nodeID}`)
|
||
|
|
let node = new Node(this.props.app, nodeID)
|
||
|
|
node.retrieve(node=>{
|
||
|
|
this.node.value = node
|
||
|
|
})
|
||
|
|
}//}}}
|
||
|
|
}
|
||
|
|
|
||
|
|
class Node {
|
||
|
|
constructor(app, nodeID) {//{{{
|
||
|
|
this.app = app
|
||
|
|
this.ID = nodeID
|
||
|
|
this.ParentID = 0
|
||
|
|
this.UserID = 0
|
||
|
|
this.Name = ''
|
||
|
|
this.Content = ''
|
||
|
|
this.Children = []
|
||
|
|
this.Crumbs = []
|
||
|
|
}//}}}
|
||
|
|
|
||
|
|
retrieve(callback) {//{{{
|
||
|
|
this.app.request('/node/retrieve', { ID: this.ID })
|
||
|
|
.then(res=>{
|
||
|
|
this.ParentID = res.Node.ParentID
|
||
|
|
this.UserID = res.Node.UserID
|
||
|
|
this.Name = res.Node.Name
|
||
|
|
this.Content = res.Node.Content
|
||
|
|
this.Children = res.Node.Children
|
||
|
|
this.Crumbs = res.Node.Crumbs
|
||
|
|
callback(this)
|
||
|
|
})
|
||
|
|
.catch(this.app.responseError)
|
||
|
|
}//}}}
|
||
|
|
}
|
||
|
|
|
||
|
|
// vim: foldmethod=marker
|