akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 15:17:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Render choice nodes as a dropdown

Browse Source
This commit is contained in:
Misode
2020-11-08 12:54:34 +01:00
parent 97302dbecf
commit 8d2bf43764
3 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/hooks/renderHtml.ts
View File

@@ -38,19 +38,19 @@ export const renderHtml: Hook<[any, Mounter], [string, string, string]> = {
const pathWithContext = (config?.context) ?
new ModelPath(path.getModel(), new Path(path.getArray(), [config.context])) : path
const pathWithChoiceContext = config?.choiceContext ? new Path([], [config.choiceContext]) : config?.context ? new Path([], [config.context]) : path
const inject = choices.map(c => {
if (c.type === choice.type) {
return `<button class="selected" disabled>
${htmlEncode(pathLocale(pathWithChoiceContext.push(c.type)))}
</button>`
}
const buttonId = mounter.registerClick(el => {
const inputId = mounter.register(el => {
(el as HTMLSelectElement).value = choice.type
el.addEventListener('change', () => {
const c = choices.find(c => c.type === (el as HTMLSelectElement).value) ?? choice
path.model.set(path, c.change ? c.change(value) : c.node.default())
})
return `<button data-id="${buttonId}">
})
const inject = `<select data-id="${inputId}">
${choices.map(c => `<option value="${htmlEncode(c.type)}">
${htmlEncode(pathLocale(pathWithChoiceContext.push(c.type)))}
</button>`
}).join('')
</option>`).join('')}
</select>`
const [prefix, suffix, body] = choice.node.hook(this, pathWithContext, value, mounter)
return [prefix, inject + suffix, body]