Skip to content

Commit fbab602

Browse files
AnthropicAnthropic
committed
Radiobuttons, mdDatepicker
Added material based buttons with radio group behaviour Added mdDatepicker support (style not working, but I will wait for next AM update before fixing)
1 parent c08dd44 commit fbab602

11 files changed

+205
-74
lines changed

‎bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
"angular-sanitize": "1.4"
2727
},
2828
"devDependencies": {
29-
"angular-ui-ace": "~0.2.3"
29+
"angular-ui-ace": "~0.2.3",
30+
"moment": "~2.10.6"
3031
},
3132
"resolutions": {
3233
"angular": "1.4.4"

‎examples/data/simple.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
"title": "Name",
88
"type": "string"
99
},
10+
"date": {
11+
"title": "Date",
12+
"type": "string",
13+
"format":"date"
14+
},
1015
"email": {
1116
"title": "Email",
1217
"type": "string",
@@ -24,6 +29,7 @@
2429
},
2530
"form": [
2631
"name",
32+
"date",
2733
"email",
2834
{
2935
"key": "comment",

‎examples/data/titlemaps.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
"type": "radiobuttons",
9494
"titleMap": [
9595
{"value": false, "name": "No way"},
96+
{"value": null, "name": "Maybe"},
9697
{"value": true, "name": "OK"}
9798
]
9899
}

‎examples/material-example.html

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,30 @@
8484
border-bottom-right-radius: 4px;
8585
}
8686

87+
.schema-form-radiobuttons md-input-container {
88+
margin: 0;
89+
padding: 0;
90+
}
91+
.schema-form-radiobuttons md-input-container button {
92+
font-size: 16px;
93+
margin: 20px 0;
94+
padding: 3px 15px 3px 15px;
95+
text-transform: none;
96+
font-weight: 400;
97+
min-width:100px;
98+
}
99+
.schema-form-radiobuttons md-input-container:first-child button {
100+
border-radius: 10px 0 0 10px;
101+
}
102+
.schema-form-radiobuttons md-input-container:not(:first-child):not(:last-child) button {
103+
border-radius: 0;
104+
border-left: 1px solid rgba(230, 230, 230, 0.96);
105+
border-right: 1px solid rgba(230, 230, 230, 0.96);
106+
}
107+
.schema-form-radiobuttons md-input-container:last-child button {
108+
border-radius: 0 10px 10px 0;
109+
}
110+
87111
</style>
88112
</head>
89113
<body ng-app="test" ng-controller="TestCtrl" ng-cloak>
@@ -198,6 +222,7 @@ <h3>Schema</h3>
198222
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
199223
<script type="text/javascript" src="//cdn.jsdelivr.net/g/[email protected]"></script>
200224
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
225+
<script type="text/javascript" src="../bower_components/moment/moment.js"></script>
201226
<script type="text/javascript" src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script>
202227
<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
203228
<script src="../bower_components/angular-aria/angular-aria.js"></script>
@@ -249,9 +274,13 @@ <h3>Schema</h3>
249274
ngClipProvider.setPath('//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf');
250275
}]);*/
251276

252-
app.config(function($mdThemingProvider) {
277+
app.config(function($mdThemingProvider, $mdDateLocaleProvider) {
253278
$mdThemingProvider.setDefaultTheme('default')
254279
$mdThemingProvider.alwaysWatchTheme(true);
280+
$mdDateLocaleProvider.formatDate = function(date) {
281+
console.info(moment(date).format('YYYY-MM-DD'));
282+
return moment(date).format('YYYY-MM-DD');
283+
};
255284
});
256285

257286

‎material-decorator.js

Lines changed: 52 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎material-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.

‎src/date.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<md-input-container class="schema-form-date {{form.htmlClass}}">
2+
<md-datepicker sf-field-model
3+
sf-changed="form"
4+
sf-type-parser="form.schema"
5+
schema-validate="form"
6+
id="{{form.key.slice(-1)[0]}}"
7+
ng-show="form.key"
8+
ng-class="form.fieldHtmlClass"
9+
ng-disabled="form.readonly"
10+
md-min-date="minDate"
11+
md-max-date="maxDate"
12+
md-placeholder="Enter date">
13+
<label ng-show="showTitle()" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
14+
<div sf-messages />
15+
</md-datepicker>
16+
</md-input-container>

‎src/default.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@
3030
ng-disabled="form.readonly"
3131
name="{{form.key.slice(-1)[0]}}"
3232
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>
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>
4141
</md-input-container>

‎src/material-decorator.js

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,40 @@
11
angular.module('schemaForm')
2-
.config([ 'schemaFormDecoratorsProvider', 'sfBuilderProvider',
3-
function(decoratorsProvider, sfBuilderProvider) {
4-
var base = 'decorators/material/';
2+
.config([ 'schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfBuilderProvider', 'sfPathProvider',
3+
function(schemaFormProvider, decoratorsProvider, sfBuilderProvider, sfPathProvider) {
4+
var base = 'decorators/material/';
55

6-
var simpleTransclusion = sfBuilderProvider.builders.simpleTransclusion;
7-
var ngModelOptions = sfBuilderProvider.builders.ngModelOptions;
8-
var ngModel = sfBuilderProvider.builders.ngModel;
9-
var sfField = sfBuilderProvider.builders.sfField;
6+
var transclusion = sfBuilderProvider.builders.simpleTransclusion;
7+
var ngModelOptions = sfBuilderProvider.builders.ngModelOptions;
8+
var ngModel = sfBuilderProvider.builders.ngModel;
9+
var sfField = sfBuilderProvider.builders.sfField;
10+
var sfMessages = function(args) {
11+
var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
12+
if(messagesDiv) {
13+
messagesDiv.setAttribute('ng-messages', 'ngModel.$error');
14+
var child = document.createElement('div');
15+
child.setAttribute('sf-message', '');
16+
child.setAttribute('ng-message', '');
17+
messagesDiv.appendChild(child);
18+
}
19+
};
1020

11-
var defaults = [ sfField, ngModel, ngModelOptions ];
21+
var defaults = [ sfField, ngModel, ngModelOptions, sfMessages ];
1222

13-
decoratorsProvider.defineDecorator('materialDecorator', {
14-
textarea: { template: base + 'textarea.html', builder: defaults },
15-
fieldset: { template: base + 'fieldset.html', builder: [ sfField, simpleTransclusion ] },
16-
'default': { template: base + 'default.html', builder: defaults },
17-
select: { template: base + 'select.html', builder: defaults },
18-
checkbox: { template: base + 'checkbox.html', builder: defaults },
19-
checkboxes: { template: base + 'checkboxes.html', builder: defaults },
20-
radios: { template: base + 'radios.html', builder: defaults },
21-
'radios-inline': { template: base + 'radios-inline.html', builder: defaults },
22-
radiobuttons: { template: base + 'radio-buttons.html', builder: defaults },
23-
submit: { template: base + 'submit.html', builder: defaults }
24-
});
23+
decoratorsProvider.defineDecorator('materialDecorator', {
24+
textarea: { template: base + 'textarea.html', builder: defaults },
25+
fieldset: { template: base + 'fieldset.html', builder: [ sfField, transclusion ] },
26+
'default': { template: base + 'default.html', builder: defaults },
27+
select: { template: base + 'select.html', builder: defaults },
28+
date: { template: base + 'date.html', builder: defaults },
29+
checkbox: { template: base + 'checkbox.html', builder: defaults },
30+
checkboxes: { template: base + 'checkboxes.html', builder: defaults },
31+
radios: { template: base + 'radios.html', builder: defaults },
32+
'radios-inline': { template: base + 'radios-inline.html', builder: defaults },
33+
radiobuttons: { template: base + 'radio-buttons.html', builder: defaults },
34+
submit: { template: base + 'submit.html', builder: defaults }
35+
});
2536

26-
/* decoratorsProvider.createDecorator('materialDecorator', {
37+
/* decoratorsProvider.createDecorator('materialDecorator', {
2738
textarea: base + 'textarea.html',
2839
fieldset: base + 'fieldset.html',
2940
array: base + 'array.html',
@@ -45,4 +56,19 @@ function(decoratorsProvider, sfBuilderProvider) {
4556
help: base + 'help.html',
4657
'default': base + 'default.html'
4758
});*/
48-
}]);
59+
60+
/**
61+
* Material Datepicker
62+
*/
63+
var date = function(name, schema, options) {
64+
if (schema.type === 'string' && (schema.format === 'date' || schema.format === 'date-time')) {
65+
var f = schemaFormProvider.stdFormObj(name, schema, options);
66+
f.key = options.path;
67+
f.type = 'date';
68+
options.lookup[sfPathProvider.stringify(options.path)] = f;
69+
return f;
70+
}
71+
};
72+
schemaFormProvider.defaults.string.unshift(date);
73+
}
74+
]);

‎src/radio-buttons.html

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,24 @@
33
<div>
44
<label class="control-label" ng-show="showTitle()">{{form.title}}</label>
55
</div>
6-
<div class="btn-group">
7-
<label class="btn {{ (item.value === $$value$$) ? form.style.selected || 'btn-default' : form.style.unselected || 'btn-default'; }}"
8-
ng-class="{ active: item.value === $$value$$ }"
9-
ng-repeat="item in form.titleMap">
10-
<input type="radio"
11-
class="{{form.fieldHtmlClass}}"
12-
sf-changed="form"
13-
style="display: none;"
14-
ng-disabled="form.readonly"
15-
ng-model="$$value$$"
16-
ng-model-options="form.ngModelOptions"
17-
schema-validate="form"
18-
ng-value="item.value"
19-
name="{{form.key.join('.')}}">
20-
<span ng-bind-html="item.name"></span>
21-
</label>
22-
</div>
6+
<section layout="row" layout-sm="column" layout-align="center center">
7+
<md-input-container ng-repeat="item in form.titleMap">
8+
<md-button type="button"
9+
class="group md-raised"
10+
sf-field-model="replaceAll"
11+
ng-model="$$value$$"
12+
sf-changed="form"
13+
class="radio {{form.fieldHtmlClass}}"
14+
ng-class="{'md-primary': ($$value$$ == item.value)}"
15+
ng-disabled="form.readonly"
16+
ng-model-options="form.ngModelOptions"
17+
schema-validate="form"
18+
ng-value="item.value"
19+
ng-click="$$value$$ = item.value"
20+
name="{{form.key.join('.')}}">
21+
<span ng-bind-html="item.name"></span>
22+
</md-button>
23+
</md-input-container>
24+
</section>
2325
<div class="help-block" sf-message="form.description"></div>
2426
</div>

0 commit comments

Comments
 (0)