Render choice nodes as a dropdown

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

22
package-lock.json generated
View File

@@ -5,24 +5,24 @@
"requires": true, "requires": true,
"dependencies": { "dependencies": {
"@mcschema/core": { "@mcschema/core": {
"version": "0.11.1", "version": "0.11.2",
"resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.11.1.tgz", "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.11.2.tgz",
"integrity": "sha512-WSPS8Ht7/ugv0grAF1UWIIzdQ8OQzSpscby6U/BSip7Wgos0ITnX79fQpq7iIlbkIf6VfdTlM1yO4VRMks8D0g==" "integrity": "sha512-Y5jKXDesEkwwM/USwSQFoNaokAfZZDopb2bjIz77RppSFsa4f7zJuHPn+A+Wohn4ZZAmizkXx7P6slUj4rvc6Q=="
}, },
"@mcschema/java-1.16": { "@mcschema/java-1.16": {
"version": "0.5.13", "version": "0.5.14",
"resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.13.tgz", "resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.5.14.tgz",
"integrity": "sha512-wANhbztNSnvHWkqpRq3xZaqazT2AkA8UlOYHFtvP+8LA3IbKyQ7YmUH0J+OGMZ/FnFrrLbdFZhBSFZwy/vIGww==", "integrity": "sha512-k9V9SN6+fkSaWIqGNpGS9CHfeaNDqPsApzm8+tOc1Azw0sBIIaa1XEDEuzHgFmx//O5L8RD6eC/3EPZG9udfbA==",
"requires": { "requires": {
"@mcschema/core": "^0.11.1" "@mcschema/core": "^0.11.2"
} }
}, },
"@mcschema/java-1.17": { "@mcschema/java-1.17": {
"version": "0.1.2", "version": "0.1.3",
"resolved": "https://registry.npmjs.org/@mcschema/java-1.17/-/java-1.17-0.1.2.tgz", "resolved": "https://registry.npmjs.org/@mcschema/java-1.17/-/java-1.17-0.1.3.tgz",
"integrity": "sha512-LMT6QVpTypceZJmPM/Ceuit6NFa7HxSh5tvWXQAM3cAUv5zQ7WTKe6/BeRCLEnp3a80t46umEr1NzS82S8HUZg==", "integrity": "sha512-YQ0zxBAS2MFk6YWOTYip2/eZo/WXHBWxh/CuZEyibYoRMqEwryj0IR71d5Q/mgFZlhm4S8MI05ucuwfRk+X27A==",
"requires": { "requires": {
"@mcschema/core": "^0.11.1" "@mcschema/core": "^0.11.2"
} }
}, },
"@mcschema/locales": { "@mcschema/locales": {

View File

@@ -12,9 +12,9 @@
"author": "Misode", "author": "Misode",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@mcschema/core": "^0.11.1", "@mcschema/core": "^0.11.2",
"@mcschema/java-1.16": "^0.5.13", "@mcschema/java-1.16": "^0.5.14",
"@mcschema/java-1.17": "^0.1.2", "@mcschema/java-1.17": "^0.1.3",
"@mcschema/locales": "^0.1.11", "@mcschema/locales": "^0.1.11",
"@types/google.analytics": "0.0.40", "@types/google.analytics": "0.0.40",
"@types/split.js": "^1.4.0", "@types/split.js": "^1.4.0",

View File

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