Skip to content

Commit 61d17cb

Browse files
davidlgjdavidlgj
committed
Revamped bootstrap examples
Several examples can now be defined in JSON. More to come.
1 parent 79c2706 commit 61d17cb

File tree

10 files changed

+392
-207
lines changed

10 files changed

+392
-207
lines changed

‎dist/bootstrap-decorator.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/schema-form.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/bootstrap-example.html‎

Lines changed: 37 additions & 201 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
min-height: 1400px;
1515
}
1616

17+
.alert .form-group {
18+
margin-bottom: 0px;
19+
}
20+
1721
.red {
1822
border: 1px solid red;
1923
background: #fee;
@@ -31,12 +35,19 @@ <h1>Schema Form Example</h1>
3135
<div class="row">
3236
<div class="col-sm-4">
3337
<h3>The Generated Form</h3>
34-
<form name="ngform" sf-model="person" sf-form="form" sf-schema="schema" sf-decorator="{{decorator}}">
38+
<form name="ngform" sf-model="modelData" sf-form="form" sf-schema="schema" sf-decorator="{{decorator}}">
3539
</form>
3640
<h3>Model</h3>
3741
<pre ng-cloak>{{pretty()}}</pre>
3842
</div>
3943
<div class="col-sm-8">
44+
<h3>Select Example</h3>
45+
<div class="form-group">
46+
<select class="form-control" id="selectTest"
47+
ng-model="selectedTest"
48+
ng-options="obj.name for obj in tests">
49+
</select>
50+
</div>
4051
<h3>Form</h3>
4152
<div ui-ace="{ theme: 'monokai',mode:'json'}"
4253
ng-class="{red: !itParsesForm}" ng-model="formJson" class="form-control form"></div>
@@ -64,212 +75,34 @@ <h3>Schema</h3>
6475

6576
angular.module('test',['schemaForm','ui.ace']);
6677

67-
function TestCtrl($scope){
68-
$scope.person = {
69-
favorite: 'NaN',
70-
arraytest2: ["foo","bar","foo"]
71-
};
78+
function TestCtrl($scope,$http){
7279

73-
$scope.schema = {
74-
"type": "object",
75-
"required": ['name','shoesize'],
76-
"properties": {
77-
"arraytest": {
78-
"title": "arraytest",
79-
"type": "array",
80-
"items": {
81-
"type": "object",
82-
"title": "Names",
83-
"properties": {
84-
"name": { "type": "string", "title": "Your name" },
85-
"nick": { "type": "string", "title": "Your nick", "default": "Yo!" },
86-
}
87-
}
88-
},
89-
"arraytest2": {
90-
"title": "arraytest 2",
91-
"type": "array",
92-
"items": {
93-
"type": "string",
94-
"title": "Name"
95-
}
96-
},
97-
"arraytest3": {
98-
"title": "arraytest 3",
99-
"type": "array",
100-
"items": {
101-
"type": "object",
102-
"title": "Cool list",
103-
"properties": {
104-
"name": { "title": "sublist name", "type": "string" },
105-
"sublist": {
106-
"type": "array",
107-
"items": {
108-
"title": "sublist value", "type": "string"
109-
}
110-
}
111-
}
112-
}
113-
},
80+
$scope.tests = [
81+
{ name: "Simple", data: 'data/simple.json' },
82+
{ name: "Array", data: 'data/array.json' },
83+
{ name: "Tab Array", data: 'data/tabarray.json' },
84+
{ name: "Kitchen Sink", data: 'data/sink.json' }
85+
];
11486

115-
"name": {
116-
"title": "Name",
117-
"description": "Gimme yea name lad",
118-
"type": "string",
119-
"pattern": "^[^/]*$",
120-
"minLength": 2
121-
},
122-
"favorite": {
123-
"title": "Favorite",
124-
"type": "string",
125-
"enum": [
126-
"undefined",
127-
"null",
128-
"NaN",
129-
]
130-
},
131-
"shoesize": {
132-
"title": "Shoe size",
133-
"default": 42,
134-
"type": "number",
135-
},
136-
"attributes": {
137-
"type": "object",
138-
"title": "Attributes",
139-
"required": ['eyecolor'],
140-
"properties": {
141-
"eyecolor": { "type": "string", "title": "Eye color" },
142-
"haircolor": { "type": "string", "title": "Hair color" },
143-
"shoulders": {
144-
"type": "object",
145-
"title": "Shoulders",
146-
"properties": {
147-
"left": { "type": "string", "title": "Left" },
148-
"right": { "type": "string", "title": "Right" },
149-
}
150-
}
151-
}
152-
},
153-
"things": {
154-
"type": "array",
155-
"title": "I like...",
156-
"items": {
157-
"type": "string",
158-
"enum": [
159-
"clowns","compiling","sleeping"
160-
]
161-
}
162-
},
163-
"soul": {
164-
"title": "Terms Of Service",
165-
"description": "I agree to sell my undying <a href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'>soul</a>",
166-
"type": "boolean",
167-
"default": true,
168-
},
169-
"soulserial": {
170-
"title": "Soul Serial No",
171-
"type": "string"
172-
},
173-
"date": {
174-
"title": "Date of party",
175-
"type": "string",
176-
"format": "date"
177-
},
178-
"radio": {
179-
"type":"string",
180-
"enum": ["Transistor","Tube"]
181-
},
182-
"radiobuttons": {
183-
"type":"string",
184-
"enum": ["Select me!","No me!"]
185-
}
87+
$scope.selectedTest = $scope.tests[0];
88+
89+
$scope.$watch('selectedTest',function(val){
90+
if (val) {
91+
$http.get(val.data).then(function(res){
92+
$scope.schema = res.data.schema;
93+
$scope.form = res.data.form;
94+
$scope.schemaJson = JSON.stringify($scope.schema,undefined,2);
95+
$scope.formJson = JSON.stringify($scope.form,undefined,2);
96+
$scope.modelData = res.data.model || {};
97+
});
18698
}
187-
};
188-
189-
$scope.form = [
190-
{
191-
title: "value.name || 'Tab '+$index",
192-
key: "arraytest",
193-
type: "tabarray",
194-
items: [
195-
"arraytest[].nick",
196-
"arraytest[].name"
197-
]
198-
},
199-
"arraytest2",
200-
"arraytest3",
201-
{
202-
type: "fieldset",
203-
title: "Stuff",
204-
items: [
205-
{
206-
type: "tabs",
207-
tabs: [
208-
{
209-
title: "Simple stuff",
210-
items: [
211-
{
212-
key: "name",
213-
placeholder: "Check the console",
214-
onChange: "log(modelValue)",
215-
feedback: "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
216-
},
217-
{
218-
key: "favorite",
219-
feedback: false
220-
}
221-
]
222-
},
223-
{
224-
title: "More stuff",
225-
items: [
226-
"attributes",
227-
{
228-
key: "shoesize",
229-
feedback: false
230-
},
231-
"things"
232-
]
233-
}]
234-
},
235-
]
236-
},
237-
{
238-
type: "help",
239-
helpvalue: "<hr>"
240-
},
241-
"soul",
242-
{
243-
type: "conditional",
244-
condition: "person.soul",
245-
items: [
246-
{ key: "soulserial", placeholder: "ex. 666" }
247-
]
248-
},
249-
{ key: "date", minDate: "2014-06-20" },
250-
{ key: "radio",
251-
type: "radios",
252-
titleMap: {
253-
"Transistor": "Transistor <br> Not the tube kind.",
254-
"Tube": "Tube <br> The tube kind."
255-
}
256-
},
257-
{ key: "radiobuttons", type: "radiobuttons" },
258-
{
259-
type: 'actions',
260-
items: [
261-
{ type: 'submit', title: 'Do It!'},
262-
{ type: 'button', title: 'Noooooooooooo', onClick: 'sayNo()'}
263-
]
264-
}
265-
];
99+
});
266100

267101
$scope.decorator = 'bootstrap-decorator';
268102

269103
$scope.itParses = true;
270104
$scope.itParsesForm = true;
271-
$scope.schemaJson = JSON.stringify($scope.schema,undefined,2);
272-
$scope.formJson = JSON.stringify($scope.form,undefined,2);
105+
273106

274107
$scope.$watch('schemaJson',function(val,old){
275108
if (val && val !== old) {
@@ -293,9 +126,8 @@ <h3>Schema</h3>
293126
}
294127
});
295128

296-
297129
$scope.pretty = function(){
298-
return JSON.stringify($scope.person,undefined,2,2);
130+
return JSON.stringify($scope.modelData,undefined,2,2);
299131
};
300132

301133
$scope.log = function(msg){
@@ -306,6 +138,10 @@ <h3>Schema</h3>
306138
alert('Noooooooo');
307139
};
308140

141+
$scope.say = function(msg) {
142+
alert(msg);
143+
};
144+
309145
}
310146

311147
</script>

‎examples/data/array.json‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"schema": {
3+
"type": "object",
4+
"title": "Comment",
5+
"properties": {
6+
"comments": {
7+
"type": "array",
8+
"items": {
9+
"type": "object",
10+
"properties": {
11+
"name": {
12+
"title": "Name",
13+
"type": "string"
14+
},
15+
"email": {
16+
"title": "Email",
17+
"type": "string",
18+
"pattern": "^\\S+@\\S+$",
19+
"description": "Email will be used for evil."
20+
},
21+
"comment": {
22+
"title": "Comment",
23+
"type": "string",
24+
"maxLength": 20,
25+
"validationMessage": "Don't be greedy!"
26+
}
27+
},
28+
"required": ["name","email","comment"]
29+
}
30+
}
31+
}
32+
},
33+
"form": [
34+
{
35+
"type": "help",
36+
"helpvalue": "<h4>Array Example</h4><p>Try adding a couple of forms, reorder by drag'n'drop.</p>"
37+
},
38+
{
39+
"key": "comments",
40+
"items": [
41+
"comments[].name",
42+
"comments[].email",
43+
{
44+
"key": "comments[].comment",
45+
"type": "textarea"
46+
}
47+
]
48+
},
49+
{
50+
"type": "submit",
51+
"title": "OK"
52+
}
53+
]
54+
}

‎examples/data/simple.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"schema": {
3+
"type": "object",
4+
"title": "Comment",
5+
"properties": {
6+
"name": {
7+
"title": "Name",
8+
"type": "string"
9+
},
10+
"email": {
11+
"title": "Email",
12+
"type": "string",
13+
"pattern": "^\\S+@\\S+$",
14+
"description": "Email will be used for evil."
15+
},
16+
"comment": {
17+
"title": "Comment",
18+
"type": "string",
19+
"maxLength": 20,
20+
"validationMessage": "Don't be greedy!"
21+
}
22+
},
23+
"required": ["name","email","comment"]
24+
},
25+
"form": [
26+
"name",
27+
"email",
28+
{
29+
"key": "comment",
30+
"type": "textarea"
31+
},
32+
{
33+
"type": "submit",
34+
"title": "OK"
35+
}
36+
]
37+
}

0 commit comments

Comments
 (0)