Skip to content

Instantly share code, notes, and snippets.

@jcgregorio
Created September 19, 2017 17:38
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jcgregorio/1e85e2124996ddf56c9d04a07a359c36 to your computer and use it in GitHub Desktop.
Save jcgregorio/1e85e2124996ddf56c9d04a07a359c36 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<body>
<div id=target></div>
<script type="module" charset="utf-8">
import { html, render } from './lit-html.js';
const renderForm = (entity) => {
const e = [];
Object.keys(entity).forEach((attr) => {
switch (attr) {
case 'x':
e.push(html`<div><label for=x-mb>X:</label> <input size=5 id=x-mb value='${entity.x}'></div>`);
break;
case 'y':
e.push(html`<div><label for=x-mb>Y:</label> <input size=5 id=y-mb value='${entity.y}'></div>`);
break;
case 'stroke_width':
e.push(html`<div><label for=stroke_width-mb>Stroke Width:</label> <input size=5 id=stroke_width-mb value='${entity.stroke_width}'></div>`);
break;
}
})
return e;
}
const formTemplate = (entity) => html`<h2>Edit using this form</h2>${renderForm(entity)}`;
let target = document.getElementById('target');
render(formTemplate({x:200, y:100}), target);
render(formTemplate({stroke_width :20}), target);
render(formTemplate({x:200, y:100}), target);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment