Skip to content

Commit e2489c0

Browse files
AnthropicAnthropic
committed
Added section support
Basic section support to start working on flex grid
1 parent dbc0ff5 commit e2489c0

9 files changed

+60
-39
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
],
2121
"dependencies": {
2222
"angular-schema-form": ">=0.8.6",
23-
"angular": "1.4.0-beta.6",
23+
"angular": "1.4.5",
2424
"angular-material": "master",
2525
"angular-animate": "1.4",
2626
"angular-sanitize": "1.4"

‎examples/data/autocomplete.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
"properties": {
66
"first": {
77
"title": "What is your favourite Schwarzenegger movie?",
8-
"type": "string"
8+
"type": "object"
99
},
1010
"second": {
1111
"title": "What is your favourite Schwarzenegger movie?",
12-
"type": "string"
12+
"type": "object"
1313
}
1414
}
1515
},
@@ -32,7 +32,7 @@
3232
},
3333
{
3434
"type": "help",
35-
"helpvalue": "I need at least 4 characters"
35+
"helpvalue": "I need at least 4 non-space characters"
3636
},
3737
{
3838
"type": "submit",

‎examples/material-example.html

+2-5
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110

111111
</style>
112112
</head>
113-
<body ng-app="test" ng-controller="TestCtrl" ng-cloak>
113+
<body ng-app="test" ng-controller="TestCtrl as ctrl" ng-cloak>
114114

115115
<!--- nav hidden until we redo it in angular-material -->
116116
<nav ng-if="false" class="navbar navbar-default">
@@ -279,11 +279,11 @@ <h3>Schema</h3>
279279
app.controller('TestCtrl', function($scope, $http, $location, $timeout, $q) {
280280

281281
$scope.tests = [
282+
{ name: "Material Flex Grid", data: 'data/grid.json' },
282283
{ name: "Autocomplete", data: 'data/autocomplete.json' },
283284
{ name: "Simple", data: 'data/simple.json' },
284285
{ name: "Basic JSON Schema Type", data: 'data/types.json' },
285286
{ name: "TitleMap Examples", data: 'data/titlemaps.json' },
286-
/*{ name: "Material FLex Grid", data: 'data/grid.json' },*/
287287
/*{ name: "Complex Key Support", data: 'data/complex-keys.json' },*/
288288
/*{ name: "Array", data: 'data/array.json' },*/
289289
/*{ name: "Tab Array", data: 'data/tabarray.json' },*/
@@ -298,9 +298,6 @@ <h3>Schema</h3>
298298
$scope.searchText = null;
299299
$scope.simulateQuery = false;
300300
$scope.querySearch = querySearch;
301-
$scope.info = function (t) {
302-
console.info(t);
303-
};
304301
/**
305302
* Search for arnieFlix... use $timeout to simulate
306303
* remote dataservice call.

‎material-decorator.js

+25-8
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ $templateCache.put("decorators/material/checkbox.html","<div class=\"checkbox sc
66
$templateCache.put("decorators/material/checkboxes.html","<div sf-array=\"form\" sf-field-model=\"\" class=\"form-group schema-form-checkboxes {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label><div class=\"checkbox\" ng-repeat=\"val in titleMapValues track by $index\"><md-checkbox ng-model=\"titleMapValues[$index]\" sf-changed=\"form\" ng-disabled=\"form.readonly\" name=\"{{form.key.slice(-1)[0]}}\" ng-true-value=\"true\" ng-false-value=\"false\" aria-label=\"{{form.title || form.key.slice(-1)[0]}}\"><span ng-bind-html=\"form.titleMap[$index].name\"></span></md-checkbox></div><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
77
$templateCache.put("decorators/material/chips.html","<div class=\"form-group schema-form-chips {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}\"><md-chips sf-field-model=\"\" readonly=\"form.readonly\" flex=\"\" placeholder=\"{{form.title || form.key.slice(-1)[0]}}\"><md-chip-template><strong ng-if=\"!form.template\">{{$chip}}</strong></md-chip-template></md-chips><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
88
$templateCache.put("decorators/material/date.html","<md-input-container class=\"schema-form-date {{form.htmlClass}}\"><md-datepicker sf-field-model=\"\" sf-changed=\"form\" sf-type-parser=\"form.schema\" schema-validate=\"form\" id=\"{{form.key.slice(-1)[0]}}\" ng-show=\"form.key\" ng-class=\"form.fieldHtmlClass\" ng-disabled=\"form.readonly\" md-min-date=\"minDate\" md-max-date=\"maxDate\" md-placeholder=\"Enter date\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></md-datepicker></md-input-container>");
9-
$templateCache.put("decorators/material/default.html","<md-input-container class=\"schema-form-{{form.type}} {{form.htmlClass}}\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><input sf-field-model=\"\" ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" id=\"{{form.key.slice(-1)[0]}}\" ng-class=\"form.fieldHtmlClass\" ng-disabled=\"form.readonly\" name=\"{{form.key.slice(-1)[0]}}\" sf-type-parser=\"form.schema\" schema-validate=\"form\"><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></md-input-container>");
9+
$templateCache.put("decorators/material/default.html","<md-input-container class=\"schema-form-{{form.type}} {{form.htmlClass}}\" sf-messages=\"\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><input sf-field-model=\"\" ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" id=\"{{form.key.slice(-1)[0]}}\" ng-class=\"form.fieldHtmlClass\" sf-type-parser=\"form.schema\" ng-disabled=\"form.readonly\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\"></md-input-container>");
1010
$templateCache.put("decorators/material/fieldset-trcl.html","<fieldset ng-disabled=\"form.readonly\" class=\"standard {{form.htmlClass}}\" flex=\"\"><legend ng-show=\"form.title\">{{ form.title }}</legend><div ng-transclude=\"\"></div></fieldset>");
1111
$templateCache.put("decorators/material/fieldset.html","<fieldset ng-disabled=\"form.readonly\" class=\"standard {{form.htmlClass}}\" flex=\"\"><legend ng-show=\"form.title\">{{ form.title }}</legend></fieldset>");
1212
$templateCache.put("decorators/material/help.html","<div class=\"helpvalue schema-form-helpvalue {{form.htmlClass}}\" ng-bind-html=\"form.helpvalue\"></div>");
1313
$templateCache.put("decorators/material/radio-buttons.html","<div class=\"form-group schema-form-radiobuttons {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><div><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label></div><section layout=\"row\" layout-sm=\"column\" layout-align=\"center center\"><md-input-container ng-repeat=\"item in form.titleMap\"><md-button type=\"button\" class=\"group md-raised\" sf-field-model=\"replaceAll\" ng-model=\"$$value$$\" sf-changed=\"form\" ng-class=\"{\'md-primary\': ($$value$$ == item.value)}\" ng-disabled=\"form.readonly\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" ng-value=\"item.value\" ng-click=\"$$value$$ = item.value\" name=\"{{form.key.join(\'.\')}}\"><span ng-bind-html=\"item.name\"></span></md-button></md-input-container></section><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
1414
$templateCache.put("decorators/material/radios-inline.html","<div class=\"form-group schema-form-radios-inline {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label><md-radio-group layout=\"row\" sf-field-model=\"replaceAll\" ng-model=\"$$value$$\" class=\"{{form.fieldHtmlClass}}\" ng-class=\"{ active: item.value === $$value$$ }\" sf-changed=\"form\" schema-validate=\"form\" ng-disabled=\"form.readonly\" name=\"{{form.key.join(\'.\')}}\"><md-radio-button ng-repeat=\"item in form.titleMap\" ng-value=\"item.value\"><span ng-bind-html=\"item.name\"></span></md-radio-button></md-radio-group><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
1515
$templateCache.put("decorators/material/radios.html","<div class=\"form-group schema-form-radios {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"control-label\" ng-show=\"showTitle()\" aria-label=\"{{form.title}}\">{{form.title}} {{form.titleMap | json}}</label><md-radio-group sf-field-model=\"\" sf-changed=\"form\" ng-disabled=\"form.readonly\" name=\"{{form.key.join(\'.\')}}\"><md-radio-button ng-repeat=\"item in form.titleMap\" ng-value=\"item.value\" class=\"{{form.fieldHtmlClass}}\" sf-field-model=\"ng-class\" ng-class=\"{ active: item.value === $$value$$ }\"><span ng-bind-html=\"item.name\"></span></md-radio-button></md-radio-group><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
16-
$templateCache.put("decorators/material/section.html","<div class=\"schema-form-section {{form.htmlClass}}\"><sf-decorator ng-repeat=\"item in form.items\" form=\"item\"></sf-decorator></div>");
16+
$templateCache.put("decorators/material/section.html","<div class=\"schema-form-section {{form.htmlClass}}\"></div>");
1717
$templateCache.put("decorators/material/select.html","<md-input-container class=\"form-group {{form.htmlClass}} schema-form-select\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}\"><label ng-show=\"showTitle()\">{{form.title}}</label><md-select sf-field-model=\"\"><md-optgroup ng-repeat-start=\"(key, opt) in form.titleMap | orderBy:\'group\' as optGroups\" ng-if=\"opt.group && opt.group != optGroups[key-1].group\" label=\"{{opt.group}}\"><md-option ng-repeat=\"(key, filtered) in form.titleMap | filter: {group: opt.group} | orderBy:\'name\' as opts\" ng-value=\"filtered.value\">{{filtered.name}}</md-option></md-optgroup><md-option ng-repeat-end=\"\" ng-if=\"!opt.group\" ng-value=\"opt.value\">{{opt.name}}</md-option></md-select><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></md-input-container>");
1818
$templateCache.put("decorators/material/submit.html","<section class=\"schema-form-submit {{form.htmlClass}}\"><md-button class=\"md-raised {{ form.style || \'md-primary\' }} {{form.fieldHtmlClass}}\" ng-disabled=\"form.readonly\">{{form.title}}</md-button></section>");
1919
$templateCache.put("decorators/material/switch.html","<md-input-container class=\"schema-form-switch {{form.htmlClass}}\"><md-switch sf-field-model=\"\" sf-changed=\"form\" sf-type-parser=\"form.schema\" schema-validate=\"form\" id=\"{{form.key.slice(-1)[0]}}\" aria-label=\"{{form.title}}\" ng-true-value=\"\'yup\'\" ng-false-value=\"\'nope\'\" ng-show=\"form.key\" ng-class=\"form.fieldHtmlClass\" ng-disabled=\"form.readonly\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></md-switch></md-input-container>");
@@ -32,14 +32,16 @@ angular.module('schemaForm')
3232
var condition = sfBuilderProvider.builders.condition;
3333
var array = sfBuilderProvider.builders.array;
3434

35+
var sfMessagesNode = (function() {
36+
var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
37+
var div = document.createElement('div');
38+
div.innerHTML = html;
39+
return div.firstChild;
40+
})();
3541
var sfMessages = function(args) {
3642
var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
37-
if (messagesDiv) {
38-
messagesDiv.setAttribute('ng-messages', 'ngModel.$error');
39-
var child = document.createElement('div');
40-
child.setAttribute('sf-message', '');
41-
child.setAttribute('ng-message', '');
42-
messagesDiv.appendChild(child);
43+
if (messagesDiv && sfMessagesNode) {
44+
messagesDiv.appendChild(sfMessagesNode);
4345
}
4446
};
4547

@@ -141,6 +143,21 @@ angular.module('schemaForm')
141143
'item in evalExpr("this[\""+form.optionFilter+"\"](\""+searchText+"\")")');
142144
}
143145
}
146+
147+
.filter('autocompleteMovieTest', function() {
148+
function autocompleteMovieTestFilter(array, input){
149+
var current = input;
150+
// You could also call multiple filters here using:
151+
// current = $filter('filterName')(input)
152+
if(typeof current === 'string') {
153+
current = current.replace(' ','-').toLowerCase();
154+
}
155+
current = (!current) ? '_undefined' : current;
156+
return current;
157+
}
158+
159+
return externalOptionUriFilter;
160+
})
144161
*/
145162

146163
/**

‎material-decorator.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"author": "David Jensen <[email protected]>",
1313
"license": "MIT",
1414
"devDependencies": {
15-
"gulp": "^3.8.11",
15+
"gulp": "^3.9.0",
1616
"gulp-angular-templatecache": "^1.6.0",
1717
"gulp-concat": "^2.5.2",
1818
"gulp-minify-html": "^1.0.2",

‎src/default.html

+4-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
<md-input-container class="schema-form-{{form.type}} {{form.htmlClass}}">
1+
<md-input-container class="schema-form-{{form.type}} {{form.htmlClass}}" sf-messages>
22
<label ng-show="showTitle()" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
3-
4-
53
<!--
64
<input ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"
75
ng-show="form.key"
@@ -18,7 +16,6 @@
1816
name="{{form.key.slice(-1)[0]}}"
1917
aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">
2018
-->
21-
2219
<input sf-field-model
2320
ng-show="form.key"
2421
type="{{form.type}}"
@@ -27,15 +24,9 @@
2724
placeholder="{{form.placeholder}}"
2825
id="{{form.key.slice(-1)[0]}}"
2926
ng-class="form.fieldHtmlClass"
27+
sf-type-parser="form.schema"
3028
ng-disabled="form.readonly"
29+
schema-validate="form"
3130
name="{{form.key.slice(-1)[0]}}"
32-
sf-type-parser="form.schema"
33-
schema-validate="form" />
34-
<div ng-messages="ngModel.$error">
35-
<!--
36-
This is a bit of a hack. sf-message does the work, but ng-messages and ng-message
37-
is needed for the styling
38-
-->
39-
<div sf-message ng-message></div>
40-
</div>
31+
aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}" />
4132
</md-input-container>

‎src/material-decorator.js

+23-6
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,16 @@ angular.module('schemaForm')
1010
var condition = sfBuilderProvider.builders.condition;
1111
var array = sfBuilderProvider.builders.array;
1212

13+
var sfMessagesNode = (function() {
14+
var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
15+
var div = document.createElement('div');
16+
div.innerHTML = html;
17+
return div.firstChild;
18+
})();
1319
var sfMessages = function(args) {
1420
var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
15-
if (messagesDiv) {
16-
messagesDiv.setAttribute('ng-messages', 'ngModel.$error');
17-
var child = document.createElement('div');
18-
child.setAttribute('sf-message', '');
19-
child.setAttribute('ng-message', '');
20-
messagesDiv.appendChild(child);
21+
if (messagesDiv && sfMessagesNode) {
22+
messagesDiv.appendChild(sfMessagesNode);
2123
}
2224
};
2325

@@ -119,4 +121,19 @@ angular.module('schemaForm')
119121
'item in evalExpr("this[\""+form.optionFilter+"\"](\""+searchText+"\")")');
120122
}
121123
}
124+
125+
.filter('autocompleteMovieTest', function() {
126+
function autocompleteMovieTestFilter(array, input){
127+
var current = input;
128+
// You could also call multiple filters here using:
129+
// current = $filter('filterName')(input)
130+
if(typeof current === 'string') {
131+
current = current.replace(' ','-').toLowerCase();
132+
}
133+
current = (!current) ? '_undefined' : current;
134+
return current;
135+
}
136+
137+
return externalOptionUriFilter;
138+
})
122139
*/

‎src/section.html

-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
<div class="schema-form-section {{form.htmlClass}}">
2-
<sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator>
32
</div>

0 commit comments

Comments
 (0)