-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdocs.leo
372 lines (341 loc) · 12 KB
/
docs.leo
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<?xml version="1.0" encoding="utf-8"?>
<!-- Created by Leo: http://leoeditor.com/leo_toc.html -->
<leo_file xmlns:leo="http://leoeditor.com/namespaces/leo-python-editor/1.1" >
<leo_header file_format="2" tnodes="0" max_tnode_index="0" clone_windows="0"/>
<globals body_outline_ratio="0.5" body_secondary_ratio="0.5">
<global_window_position top="50" left="50" height="500" width="700"/>
<global_log_window_position top="0" left="0" height="0" width="0"/>
</globals>
<preferences/>
<find_panel_settings/>
<vnodes>
<v t="josephorr.20180907154621.1" a="E"><vh>[Formio.js Form Renderer](README.md)</vh>
<v t="josephorr.20180908090057.1" a="E"><vh>Source Files</vh>
<v t="josephorr.20180907165357.1"><vh>@clean src/simple.html</vh>
<v t="josephorr.20180907165423.1" a="E"><vh><html></vh>
<v t="josephorr.20180907165423.2" a="E"><vh><head></vh>
<v t="josephorr.20180907165423.3"><vh>bootstrap style link</vh></v>
<v t="josephorr.20180907165423.4"><vh>formio style link</vh></v>
<v t="josephorr.20180907170852.1"><vh>formio library link</vh></v>
<v t="josephorr.20180907165423.5"><vh>page style</vh></v>
<v t="josephorr.20180907165423.6" a="E"><vh>The form script tag</vh>
<v t="josephorr.20180908082728.1" a="E"><vh>onload</vh>
<v t="josephorr.20180908082939.1"><vh><< create the form >></vh></v>
<v t="josephorr.20180908083431.1"><vh><< register form events >></vh></v>
</v>
</v>
</v>
<v t="josephorr.20180907165423.7"><vh><body></vh></v>
</v>
</v>
<v t="josephorr.20180910210054.1" a="E"><vh>@clean src/kitchen-sink.html</vh>
<v t="josephorr.20180910210227.1"><vh><html></vh>
<v t="josephorr.20180910210227.2" a="E"><vh><head></vh>
<v t="josephorr.20180910210227.4"><vh>formio stylesheet</vh></v>
<v t="josephorr.20180910210227.7"><vh>page css</vh></v>
<v t="josephorr.20180910210227.3"><vh>bootstrap css</vh></v>
<v t="josephorr.20180910210227.6"><vh>jquery script link</vh></v>
<v t="josephorr.20180910210227.5"><vh>formio script link</vh></v>
<v t="josephorr.20180910210227.8" a="E"><vh>page script tag</vh>
<v t="josephorr.20180910210655.1"><vh>onload</vh></v>
</v>
</v>
<v t="josephorr.20180910210227.9"><vh><body></vh></v>
</v>
</v>
<v t="josephorr.20181013192119.1" a="E"><vh>@clean src/form-builder.html</vh>
<v t="josephorr.20181013192457.1" a="E"><vh><html></vh>
<v t="josephorr.20181013215203.1"><vh><< head >></vh></v>
<v t="josephorr.20181013215225.1"><vh><< body >></vh></v>
<v t="josephorr.20181013215237.1" a="E"><vh><< script >></vh>
<v t="josephorr.20181014090131.1" a="E"><vh><< script body >></vh>
<v t="josephorr.20181013215315.1"><vh><< create builder >></vh></v>
<v t="josephorr.20181013215339.1"><vh><< display builder and register listener to display JSON >></vh></v>
</v>
</v>
</v>
</v>
</v>
<v t="josephorr.20180907154643.1"><vh>[Simple Example](src/simple.html)</vh></v>
<v t="josephorr.20180910211339.1"><vh>[Kitchen Sink](src/kitchen-sink.html)</vh></v>
<v t="josephorr.20181013192846.1"><vh>[FormBuilder](src/form-builder.html)</vh></v>
<v t="josephorr.20181013215400.1"><vh>[FormBuilder with Edit](src/form-builder-edit.html)</vh></v>
<v t="josephorr.20180908090152.1"><vh>More Info</vh>
<v t="josephorr.20180908090341.1"><vh>[License](LICENSE.txt)</vh></v>
<v t="josephorr.20180908121552.1"><vh>This Documentation</vh></v>
</v>
</v>
</vnodes>
<tnodes>
<t tx="josephorr.20180907154621.1"></t>
<t tx="josephorr.20180907154643.1"></t>
<t tx="josephorr.20180907165357.1">@language html
@others
@ This is the start of a Leo outline. Directives (start with "@") will not be written to the source file. Click on a child node to start navigating the source file.
</t>
<t tx="josephorr.20180907165423.1">@language htmlsource
<html>
@others
</html>
</t>
<t tx="josephorr.20180907165423.2"><head>
@others
</head>
</t>
<t tx="josephorr.20180907165423.3"><link
rel='stylesheet'
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
@others
</t>
<t tx="josephorr.20180907165423.4"><link
rel='stylesheet'
href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
@others
</t>
<t tx="josephorr.20180907165423.5"><style type="text/css">
#formio {
margin: 60px;
}
</style>
</t>
<t tx="josephorr.20180907165423.6"><script type='text/javascript'>
@others
</script>
</t>
<t tx="josephorr.20180907165423.7"><body>
<div id='formio'></div>
</body>
</t>
<t tx="josephorr.20180907170852.1"><script
src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'>
</script>
</t>
<t tx="josephorr.20180908082728.1">@language javascript
window.onload = function() {
Formio.createForm(
<< create the form >>
).then(form => {
<< register form events >>
})
}
</t>
<t tx="josephorr.20180908082939.1">document.getElementById('formio'),
{
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
placeholder: 'Enter your first name.',
input: true
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary'
}
]
},
{
hooks: {
beforeSubmit: (submission, next) => {
alert('Before Submit: \n\n' + JSON.stringify(submission, null, 2))
next()
}
}
}
</t>
<t tx="josephorr.20180908083431.1">form.on('submit', submission => {
alert('The form was just submitted!\n\n' + JSON.stringify(submission, null, 2))
form.emit('submitDone', submission)
})
form.on('submitDone', submission => {
alert('Done submitting form.')
})
form.on('change', changed => {
console.log('Form was changed', changed);
})
form.on('error', errors => {
alert('We have errors')
console.log(errors)
})
</t>
<t tx="josephorr.20180908090057.1">@language md
This node contains a couple of example source files broken down into small chunks.
This file can be directly edited with the Leo Editor and the source files will be updated on save.
The JSON for both examples are from the form.io demo site:
[Form.io demo site with Form Builder](https://formio.github.io/formio.js/)
Using the Form Builder on the above site, you can quickly build complex forms, export the JSON and display
with the code shown here.</t>
<t tx="josephorr.20180908090152.1"></t>
<t tx="josephorr.20180908090341.1"></t>
<t tx="josephorr.20180908121552.1">@language md
This document was created with the open source [Leo Editor](http://www.leoeditor.com) and
is displayed on this site with [Leo Vue](https://kaleguy.github.io/leovue).
Leo is a code and document outliner, among other things. For example,
* Outline a source file (see <<src/simple.html>> for an example.
* Organize all of your files and documentation into outlines
A single content item in a Leo outline can be placed on multiple nodes, making a Leo outline
considerably more powerful than the code folding feature of most IDE's. In effect, a single Leo outline
can provide multiple outline views of a target document.
The Leo Editor updates node
content in outlines as it is changed in other editors, so Leo can be used alongside any other IDE.
This documentation was made from a single Leo file displayed with LeoVue. Some nodes on the Leo
file point to other files such as code files or markdown files, causing LeoVue to load these files
into the appropriate chosen node. This makes it possible to provide a site with complete documentation for a
code project, including the actual code described with a multi-view outline.</t>
<t tx="josephorr.20180910210054.1">@language htmlsource
@others
</t>
<t tx="josephorr.20180910210227.1">@language htmlsource
<html>
@others
</html>
</t>
<t tx="josephorr.20180910210227.2"><head>
@others
</head>
</t>
<t tx="josephorr.20180910210227.3"><link
rel='stylesheet'
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
</t>
<t tx="josephorr.20180910210227.4"><link
rel='stylesheet'
href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
</t>
<t tx="josephorr.20180910210227.5"><script
src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'>
</script>
</t>
<t tx="josephorr.20180910210227.6"><script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
</t>
<t tx="josephorr.20180910210227.7"><style type="text/css">
#formio {
margin: 60px;
}
</style>
</t>
<t tx="josephorr.20180910210227.8"><script type='text/javascript'>
@others
</script>
</t>
<t tx="josephorr.20180910210227.9"><body>
<div id='formio'></div>
</body>
</t>
<t tx="josephorr.20180910210655.1">@language javascript
window.onload = function() {
function createForm({components}) {
Formio.createForm(
document.getElementById('formio'),
{
components: components
},
{
hooks: {
beforeSubmit: (submission, next) => {
alert('Before Submit: \n\n' + JSON.stringify(submission, null, 2))
next()
}
}
}
).then(form => {
form.on('submit', submission => {
alert('The form was just submitted!\n\n' + JSON.stringify(submission, null, 2))
form.emit('submitDone', submission)
})
form.on('submitDone', submission => {
alert('Done submitting form.')
})
form.on('change', changed => {
console.log('Form was changed', changed);
})
form.on('error', errors => {
alert('We have errors')
console.log(errors)
})
})
}
$.get('kitchen-sink.json').then(createForm)
}
</t>
<t tx="josephorr.20180910211339.1"></t>
<t tx="josephorr.20181013192119.1">@language htmlsource
@others
</t>
<t tx="josephorr.20181013192457.1">@language htmlsource
<html>
<< head >>
<< body >>
<< script >>
</html>
</t>
<t tx="josephorr.20181013192846.1"></t>
<t tx="josephorr.20181013215203.1"><head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js'></script>
<script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>
<style type="text/css">
BODY {
padding: 20px;
padding-right: 40px;
}
#json {
border: 1px solid #555;
padding: 20px;
background: #eee;
}
</style>
</head>
</t>
<t tx="josephorr.20181013215225.1">@language htmlsource
<body>
<h3>Form Builder</h3>
<div id="builder"></div>
<h3>Form JSON</h3>
<pre id="json"></pre>
</body>
</t>
<t tx="josephorr.20181013215237.1">@language htmlsource
<script type='text/javascript'>
<< script body >></script>
</t>
<t tx="josephorr.20181013215315.1">var builder = new Formio.FormBuilder(document.getElementById("builder"), {
display: 'form',
components: [],
settings: {}
}, {
baseUrl: ''
});
</t>
<t tx="josephorr.20181013215339.1">builder.setDisplay('form').then(function (instance) {
instance.on('change', function (form) {
if (form.components) {
jsonElement.innerHTML = '';
jsonElement.appendChild(document.createTextNode(JSON.stringify(form, null, 4)));
}
});
});
</t>
<t tx="josephorr.20181013215400.1"></t>
<t tx="josephorr.20181014090131.1">@language javascript
var jsonElement = document.getElementById('json');
<< create builder >>
<< display builder and register listener to display JSON >>
</t>
</tnodes>
</leo_file>