Skip to content

Instantly share code, notes, and snippets.

@lsbardel
Last active May 28, 2018 15:33
Show Gist options
  • Save lsbardel/ee4ca05791e13997b7289a538ad7864d to your computer and use it in GitHub Desktop.
Save lsbardel/ee4ca05791e13997b7289a538ad7864d to your computer and use it in GitHub Desktop.
d3-view forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 forms with d3-view</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://giottojs.org/d3-view/0.5.0/d3-view.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<d3form schema="test.json"></d3form>
</div>
<div class="col-sm-6">
<div d3-html='formData'></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
(function () {
vm = d3.view({
model: {
formData: ''
}
}).use(d3.viewForms).use(d3.viewBootstrapForms);
vm.mount('body', function (vm) {
if (vm.name !== 'd3form') return;
var form = vm.model;
form.$on(function () {
var markdown = [
"## Form inputs",
"```json",
JSON.stringify(form.$inputData(), null, ' '),
"```"
];
vm.model.formData = marked(markdown.join('\n'));
});
});
}());
{
"type": "form",
"children": [
{
"type": "text",
"maxLength": 64,
"minLength": 2,
"label": "Name",
"required": true,
"name": "name"
},
{
"type": "password",
"maxLength": 32,
"minLength": 8,
"label": "Application Token",
"required": true,
"name": "token"
},
{
"type": "textarea",
"label": "Write a message (note no label!)",
"srOnly": true,
"name": "message"
},
{
"type": "select",
"label": "Choose an option",
"name": "opt",
"options": [
["", "Choose..."],
"opt1",
["op2", "Option 2"],
["op3"]
],
"help": "Choose a random option, just for fun"
},
{
"type": "checkbox",
"label": "Remember me",
"name": "remember"
},
{
"type": "email",
"srOnly": true,
"name": "email",
"required": "inputs.remember.value"
},
{
"type": "submit",
"label": "Submit",
"name": "submit",
"disabled": "!form.$isValid()"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment