Skip to content

Instantly share code, notes, and snippets.

@sounisi5011

sounisi5011/README.md

Last active Jun 2, 2019
Embed
What would you like to do?
入力項目が自動で増えていく入力欄郡
<!doctype html>
<html lang=ja>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=format-detection content="telephone=no,email=no,address=no">
<title>入力項目が自動で増えていく入力欄郡</title>
<h1>入力項目が自動で増えていく入力欄郡</h1>
<h2>Hyperapp</h2>
<p id=hyperapp-app>
<h2>Mithril</h2>
<p id=mithril-app>
<footer>
<h2>Gist</h2>
<p><a href="https://gist.github.com/sounisi5011/f671ba491064630e7966764785240787">https://gist.github.com/sounisi5011/f671ba491064630e7966764785240787</a>
</footer>
<script src=https://unpkg.com/hyperapp@1.2.9/dist/hyperapp.js integrity="sha512-Ybb0wXz6bm1POGjbKYy6Z7fo+Ja+grGC9bf4vIa+GEb5rD5oIo1NlkS5jISRArb9p+XyZwd733MMdXKx4jsMDw==" crossorigin=anonymous></script>
<script src=https://unpkg.com/mithril@1.1.6/mithril.js integrity="sha512-I/X/C6biw9PlwVcXBlEYPvj+aHdimyJ4d9ORRe85a4nOBCOc1R6xkfLVNkltz8JZKIdvIfS7WP/KToQw5F2+HA==" crossorigin=anonymous></script>
<script src=./main.hyperapp.js></script>
<script src=./main.mithril.js></script>
{
const {h, app} = hyperapp;
const state = {
valueMap: new Map,
};
const actions = {
input: ([key, value]) => state => {
const { valueMap } = state;
valueMap.set(key, value);
return {
valueMap,
};
},
update: ([key, value]) => state => {
const { valueMap } = state;
// 値が空、または、値が他の項目と被っている場合、
// 現在の入力欄を削除する
if (
value === '' ||
[...valueMap.entries()].some(([k, v]) => k !== key && v === value)
) {
valueMap.delete(key, value);
}
return {
valueMap,
};
},
};
const view = (state, actions) => {
const { valueMap } = state;
const maxKey = Math.max(-1, ...valueMap.keys())
const lastItem = valueMap.get(maxKey);
return h('div', {}, [
[...valueMap.entries()]
.concat((lastItem === undefined || lastItem !== '') ? [[maxKey + 1, '']] : [])
.map(([key, value]) => h('div', { key }, [
h('input', {
type: 'text',
oninput(event) {
actions.input([key, event.target.value]);
},
onblur(event) {
actions.update([key, event.target.value]);
},
}),
`key:${key}`,
])),
]);
};
app(state, actions, view, document.getElementById('hyperapp-app'));
}
{
const valueMap = new Map;
const input = ([key, value]) => {
valueMap.set(key, value);
};
const update = ([key, value]) => {
// 値が空、または、値が他の項目と被っている場合、
// 現在の入力欄を削除する
if (
value === '' ||
[...valueMap.entries()].some(([k, v]) => k !== key && v === value)
) {
valueMap.delete(key, value);
}
};
const App = {
view() {
const maxKey = Math.max(-1, ...valueMap.keys());
const lastItem = valueMap.get(maxKey);
return m('div', {}, [
[...valueMap.entries()]
.concat((lastItem === undefined || lastItem !== '') ? [[maxKey + 1, '']] : [])
.map(([key, value]) => m('div', { key }, [
m('input', {
type: 'text',
oninput(event) {
input([key, event.target.value]);
},
onblur(event) {
update([key, event.target.value]);
},
}),
`key:${key}`,
])),
]);
},
};
m.mount(document.getElementById('mithril-app'), App);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment