-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
132 lines (125 loc) · 5.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Form.io + United States Web Design System</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/css/uswds.min.css">
<link rel="stylesheet" href="https://cdn.form.io/js/formio.full.min.css">
<link rel="stylesheet" href="dist/uswds.css">
</head>
<body>
<header class="usa-header usa-header--extended">
<div class="usa-navbar">
<div class="usa-logo" id="extended-logo" style="max-width:inherit;">
<em class="usa-logo__text"><img height="46px;" style="float:left;" alt="Form.io" src="https://help.form.io/assets/formio-logo.png"> + United States Web Design System</em>
</div>
</div>
</header>
<main id="main-content" style="padding: 10px;">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-8">
<h3 class="text-center text-muted">The <a href="https://github.com/formio/formio.js" target="_blank">Form Builder</a> allows you to build a <select class="form-control" id="form-select" style="display: inline-block; width: 150px;"><option value="form">Form</option><option value="wizard">Wizard</option><option value="pdf">PDF</option></select></h3>
<div id="builder"></div>
</div>
<div class="tablet:grid-col-4">
<h3 class="text-center text-muted">as JSON Schema</h3>
<div class="jsonviewer" style="padding: 10px; background-color: #fefefe;">
<pre id="json"></pre>
</div>
</div>
</div>
<div class="grid-row grid-gap">
<div class="grid-col-8 grid-offset-2">
<h3 class="text-center text-muted">which <a href="https://github.com/formio/ngFormio" target="_blank">Renders as a Form</a> in your Application</h3>
<div id="formio" class="card card-body bg-light"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="grid-row grid-gap">
<div class="grid-col-8 grid-offset-2">
<h3 class="text-center text-muted">which creates a Submission JSON</h3>
<div class="card card-body bg-light jsonviewer">
<pre id="subjson"></pre>
</div>
</div>
<div class="clearfix"></div>
</div>
</main>
<footer class="usa-footer">
<div class="usa-footer__secondary-section">
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
<div class="mobile-lg:grid-col-auto">
<img class="usa-footer__logo-img" src="../../dist/img/logo-img.png" alt="">
</div>
<div class="mobile-lg:grid-col-auto">
<h4 class="usa-footer__logo-heading">Open Sourced by <a href="https://form.io" target="_blank">Form.io</a></h4>
</div>
</div>
<div class="usa-footer__contact-links mobile-lg:grid-col-6">
<h3 class="usa-footer__contact-heading">Contact Us</h3>
<address class="usa-footer__address">
<div class="usa-footer__contact-info grid-row grid-gap">
<div class="grid-col-auto">
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</address>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.7.1/js/uswds.min.js"></script>
<script src="https://cdn.form.io/js/formio.full.min.js"></script>
<script src="dist/uswds.js"></script>
<script type="text/javascript">
Formio.use(uswds);
var jsonElement = document.getElementById('json');
var formElement = document.getElementById('formio');
var subJSON = document.getElementById('subjson');
var builder = new Formio.FormBuilder(document.getElementById("builder"), {
display: 'form',
components: [],
settings: {
pdf: {
"id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
"src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
}
}
}, {
baseUrl: 'https://examples.form.io'
});
var onForm = function(form) {
form.on('change', function() {
subJSON.innerHTML = '';
subJSON.appendChild(document.createTextNode(JSON.stringify(form.submission, null, 4)));
});
};
var onBuild = function(build) {
jsonElement.innerHTML = '';
formElement.innerHTML = '';
jsonElement.appendChild(document.createTextNode(JSON.stringify(builder.instance.schema, null, 4)));
Formio.createForm(formElement, builder.instance.form).then(onForm);
};
var onReady = function() {
var jsonElement = document.getElementById('json');
var formElement = document.getElementById('formio');
builder.instance.on('saveComponent', onBuild);
builder.instance.on('editComponent', onBuild);
};
var setDisplay = function(display) {
builder.setDisplay(display).then(onReady);
};
// Handle the form selection.
var formSelect = document.getElementById('form-select');
formSelect.addEventListener("change", function() {
setDisplay(this.value);
});
builder.instance.ready.then(onReady);
</script>
</body>
</html>