Initial use of simple message bus

static/js/mbus.mjs

@@ -0,0 +1,17 @@
+export class MessageBus {
+	constructor() {
+		this.bus = new EventTarget()
+	}
+
+	subscribe(eventName, fn) {
+		this.bus.addEventListener(eventName, fn)
+	}
+
+	unsubscribe(eventName, fn) {
+		this.bus.removeEventListener(eventName, fn)
+	}
+
+	dispatch(eventName, data) {
+		this.bus.dispatchEvent(new CustomEvent(eventName, { detail: data }))
+	}
+}

static/js/node.mjs

@@ -215,6 +215,10 @@ export class NodeUI extends Component {
 				else
 					document.getElementById('tree').focus()
 				break
+
+			case 'F':
+				_mbus.dispatch('op-search')
+				break
 			/*
 			case 'C':
 				this.showPage('node')

static/js/notes2.mjs

@@ -13,10 +13,13 @@ export class Notes2 extends Component {
 		this.state = {
 			startNode: null,
 		}
+		this.op = signal('')
 
 		window._sync = new Sync()
 		window._sync.run()
 
+		new OpSearch()
+
 		this.getStartNode()
 	}//}}}
 	render(_props, { startNode }) {//{{{
@@ -27,6 +30,15 @@ export class Notes2 extends Component {
 		if (startNode === null)
 			return
 
+		/*
+		let op = null
+		switch(this.op.value) {
+			case 'search':
+				op = html`<${OpSearch} />`
+			break
+		}
+		*/
+
 		return html`
 			<${Tree} app=${this} key=${treeKey} startNode=${startNode} />
 			<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
@@ -99,8 +111,8 @@ class Tree extends Component {
 			<div id="tree" ref=${this.treeDiv} tabindex="0">
 				<div id="logo" onclick=${() => _notes2.current.goToNode(ROOT_NODE)}><img src="/images/${_VERSION}/logo.svg" /></div>
 				<div class="icons">
-					<img src="/images/${_VERSION}/icon_search.svg" style="height: 22px" onclick=${()=>_sync.run()} />
-					<img src="/images/${_VERSION}/icon_refresh.svg" onclick=${()=>_sync.run()} />
+					<img src="/images/${_VERSION}/icon_search.svg" style="height: 22px" onclick=${() => _mbus.dispatch('op-search')} />
+					<img src="/images/${_VERSION}/icon_refresh.svg" onclick=${() => _sync.run()} />
 				</div>
 				${renderedTreeTrunk}
 			</div>`
@@ -189,7 +201,7 @@ class Tree extends Component {
 	}//}}}
 	async setNodeExpanded(node, value) {//{{{
 		return new Promise((resolve, reject) => {
-			const work = uuid=>{
+			const work = uuid => {
 				// Creating a default value if it doesn't exist already.
 				this.getNodeExpanded(uuid)
 				this.expandedNodes[uuid].value = value
@@ -200,7 +212,7 @@ class Tree extends Component {
 				work(node.UUID)
 				return
 			} else {
-				this.fetchChildrenNotify(node.UUID, uuid=>work(uuid))
+				this.fetchChildrenNotify(node.UUID, uuid => work(uuid))
 			}
 		})
 	}//}}}
@@ -468,4 +480,79 @@ class TreeNode extends Component {
 	}//}}}
 }
 
+class Op {
+	constructor(id) {
+		this.id = id
+		_mbus.subscribe(this.id, p => this.render(p))
+	}
+	render(html) {
+		const op = document.getElementById('op')
+		const t = document.createElement('template')
+		t.innerHTML = `<dialog id="${this.id}" class="op">${html}</dialog>`
+		op.replaceChildren(t.content)
+		document.getElementById(this.id).showModal()
+	}
+	get(selector) {
+		return document.querySelector(`#${this.id} ${selector}`)
+	}
+	bind(selector, event, fn) {
+		this.get(selector).addEventListener(event, evt => fn(evt))
+	}
+}
+
+function tmpl(html) {
+	const el = document.createElement('template')
+	el.innerHTML = html
+	return el.content.children
+}
+
+class OpSearch extends Op {
+	constructor() {
+		super('op-search')
+	}
+
+	render() {
+		super.render(`
+			<div class="header">Search</div>
+			<div>
+				<input type="text" />
+			</div>
+			<div class="header">Results</div>
+			<div class="results"></div>
+		`)
+
+		this.bind('input[type="text"]', 'keydown', evt => this.search(evt))
+	}
+
+	search(event) {
+		if (event.key !== 'Enter')
+			return
+
+		const searchFor = document.querySelector('#op-search input').value
+		nodeStore.search(searchFor, ROOT_NODE)
+			.then(res => this.displayResults(res))
+	}
+
+	displayResults(results) {
+		const rs = []
+		for (const r of results) {
+			const ancestors = r.ancestry.reverse().map(a => {
+				const div = tmpl(`<div class="ancestor">${a.data.Name}</div>`)
+				div[0].addEventListener('click', ()=>_notes2.current.goToNode(a.UUID))
+				return div[0]
+			})
+
+
+			const div = tmpl(`<div>${r.name}</div>`)
+			div[0].addEventListener('click', ()=>_notes2.current.goToNode(r.uuid))
+			rs.push(...div)
+
+			const ancDev = tmpl('<div class="ancestors"></div>')
+			ancDev[0].append(...ancestors)
+			rs.push(ancDev[0])
+		}
+		this.get('.results').replaceChildren(...rs)
+	}
+}
+
 // vim: foldmethod=marker