Skip to content

Commit 48b820e

Browse files
AnthropicAnthropic
committed
Clean up example page and decorator function names
1 parent 4eedd69 commit 48b820e

File tree

4 files changed

+51
-140
lines changed

4 files changed

+51
-140
lines changed

‎examples/material-example.html‎

Lines changed: 2 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -5,80 +5,17 @@
55
<title>Material Design Schema Form Example</title>
66
<link rel="stylesheet" href="../bower_components/angular-material/angular-material.css">
77
<style type="text/css">
8-
.spinner {
9-
width: 35px;
10-
height: 35px;
11-
background-color: #333;
12-
13-
border-radius: 100%;
14-
-webkit-animation: scaleout 1.0s infinite ease-in-out;
15-
animation: scaleout 1.0s infinite ease-in-out;
16-
}
17-
18-
@-webkit-keyframes scaleout {
19-
0% { -webkit-transform: scale(0.0) }
20-
100% {
21-
-webkit-transform: scale(1.0);
22-
opacity: 0;
23-
}
24-
}
25-
26-
@keyframes scaleout {
27-
0% {
28-
transform: scale(0.0);
29-
-webkit-transform: scale(0.0);
30-
} 100% {
31-
transform: scale(1.0);
32-
-webkit-transform: scale(1.0);
33-
opacity: 0;
34-
}
35-
}
36-
378
body,html {
389
min-height: 1400px;
3910
}
4011

41-
.alert .form-group {
42-
margin-bottom: 0px;
43-
}
44-
45-
.red {
46-
border: 1px solid red;
47-
background: #fee;
48-
}
49-
50-
.ace_editor { font-size: 20px !important;}
5112
.form { height: 400px; }
5213
.schema { height: 800px; }
5314

54-
.btw { color: #777; font-size: 90%; padding-left: 6px;}
55-
56-
.glyphicon {
57-
color: #000;
58-
font-size: 80%;
59-
}
60-
6115
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
6216
display: none !important;
6317
}
6418

65-
.navbar-form > .form-group > .input-group {
66-
margin-left: 20px;
67-
}
68-
69-
.btn:active,
70-
.btn:focus,
71-
.btn.active {
72-
background-image: none;
73-
outline: 0;
74-
-webkit-box-shadow: none;
75-
box-shadow: none;
76-
}
77-
78-
.error {
79-
color: red;
80-
}
81-
8219
.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
8320
border-top-right-radius: 4px;
8421
border-bottom-right-radius: 4px;
@@ -215,8 +152,6 @@ <h3>Schema</h3>
215152
</div>
216153
</script>
217154

218-
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
219-
<script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery.ui@1.10"></script>
220155
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
221156
<script type="text/javascript" src="../bower_components/moment/moment.js"></script>
222157
<script type="text/javascript" src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script>
@@ -225,49 +160,19 @@ <h3>Schema</h3>
225160
<script src="../bower_components/angular-animate/angular-animate.js"></script>
226161
<script src="../bower_components/angular-material/angular-material.js"></script>
227162
<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
228-
<!--
229-
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
230-
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
231-
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ng-clip/0.2.6/ng-clip.min.js"></script>
232-
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
233-
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
234-
-->
235-
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> -->
236-
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-sanitize.min.js"></script> -->
237-
238-
239163
<!-- <script type="text/javascript" src="../bower_components/angular-ui-sortable/sortable.js"></script>
240164
-->
241165
<script type="text/javascript" src="../bower_components/angular-ui-ace/ui-ace.js"></script>
242166
<script type="text/javascript" src="../bower_components/objectpath/lib/ObjectPath.js"></script>
243-
<!--
244-
<script type="text/javascript" src="../bower_components/spectrum/spectrum.js"></script>
245-
<script type="text/javascript" src="../bower_components/spectrum/i18n/jquery.spectrum-sv.js"></script>
246-
<script type="text/javascript" src="../bower_components/angular-spectrum-colorpicker/dist/angular-spectrum-colorpicker.min.js"></script>
247-
-->
248-
249167
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/schema-form.js"></script>
250168
<script type="text/javascript" src="../material-decorator.js"></script>
251169

252-
<!--
253-
<script type="text/javascript" src="../bower_components/angular-schema-form-datepicker/bootstrap-datepicker.min.js"></script>
254-
<script type="text/javascript" src="../bower_components/angular-schema-form-colorpicker/bootstrap-colorpicker.min.js"></script>
255-
-->
256-
257170
<script type="text/javascript">
258171
// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
259-
//
260-
// To test the tinymce addon, uncomment the files above and inject 'tx-tinymce' below.
261-
/*global alert*/
262-
//var app = angular.module('test', ['schemaForm', 'ui.ace', 'ngClipboard', 'ui.bootstrap.tooltip']);
263172
var app = angular.module('test', ['schemaForm', 'ngMaterial', 'ui.ace'])
264173

265-
/*app.config(['ngClipProvider', function(ngClipProvider) {
266-
ngClipProvider.setPath('//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf');
267-
}]);*/
268-
269174
app.config(function($mdThemingProvider, $mdDateLocaleProvider) {
270-
$mdThemingProvider.setDefaultTheme('default')
175+
$mdThemingProvider.setDefaultTheme('default');
271176
$mdThemingProvider.alwaysWatchTheme(true);
272177
$mdDateLocaleProvider.formatDate = function(date) {
273178
console.info(moment(date).format('YYYY-MM-DD'));
@@ -279,8 +184,8 @@ <h3>Schema</h3>
279184
app.controller('TestCtrl', function($scope, $http, $location, $timeout, $q) {
280185

281186
$scope.tests = [
282-
{ name: "Autocomplete", data: 'data/autocomplete.json' },
283187
{ name: "Material Flex Grid", data: 'data/grid.json' },
188+
{ name: "Autocomplete", data: 'data/autocomplete.json' },
284189
{ name: "Simple", data: 'data/simple.json' },
285190
{ name: "Basic JSON Schema Type", data: 'data/types.json' },
286191
{ name: "TitleMap Examples", data: 'data/titlemaps.json' },

‎material-decorator.js‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -45,46 +45,46 @@ angular.module('schemaForm')
4545
}
4646
};
4747

48-
var sfAutocomplete = function(args) {
49-
var mdAutocomplete = args.fieldFrag.querySelector('[sf-autocomplete]');
50-
if (mdAutocomplete) {
48+
var mdAutocomplete = function(args) {
49+
var mdAutocompleteFrag = args.fieldFrag.querySelector('md-autocomplete');
50+
if (mdAutocompleteFrag) {
5151
if (args.form.onChange) {
52-
mdAutocomplete.setAttribute('md-selected-item-change', 'args.form.onChange(searchText)');
52+
mdAutocompleteFrag.setAttribute('md-selected-item-change', 'args.form.onChange(searchText)');
5353
};
5454
if (args.form.onChange) {
55-
mdAutocomplete.setAttribute('md-search-text-change', 'args.form.onChange(searchText)');
55+
mdAutocompleteFrag.setAttribute('md-search-text-change', 'args.form.onChange(searchText)');
5656
};
57-
// mdAutocomplete.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
57+
// mdAutocompleteFrag.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
5858
var minLength = args.form.minLength || 1;
5959
var maxLength = args.form.maxLength || false;
60-
mdAutocomplete.setAttribute('md-min-length', minLength);
60+
mdAutocompleteFrag.setAttribute('md-min-length', minLength);
6161
if (maxLength) {
62-
mdAutocomplete.setAttribute('md-max-length', maxLength);
62+
mdAutocompleteFrag.setAttribute('md-max-length', maxLength);
6363
};
6464
}
6565
};
6666

6767
var mdDatepicker = function(args) {
68-
var mdDatepicker = args.fieldFrag.querySelector('md-datepicker');
69-
if (mdDatepicker) {
68+
var mdDatepickerFrag = args.fieldFrag.querySelector('md-datepicker');
69+
if (mdDatepickerFrag) {
7070
if (args.form.onChange) {
71-
mdDatepicker.setAttribute('ng-change', 'args.form.onChange(searchText)');
71+
mdDatepickerFrag.setAttribute('ng-change', 'args.form.onChange(searchText)');
7272
};
73-
// mdDatepicker.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
73+
// mdDatepickerFrag.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
7474
var minDate = args.form.minimum || false;
7575
var maxDate = args.form.maximum || false;
7676
if (minDate) {
77-
mdDatepicker.setAttribute('md-max-date', minDate);
77+
mdDatepickerFrag.setAttribute('md-max-date', minDate);
7878
};
7979
if (maxDate) {
80-
mdDatepicker.setAttribute('md-max-date', maxDate);
80+
mdDatepickerFrag.setAttribute('md-max-date', maxDate);
8181
};
8282
}
8383
};
8484

85-
var tabs = function(args) {
85+
var mdTabs = function(args) {
8686
if (args.form.tabs && args.form.tabs.length > 0) {
87-
var tabContainer = args.fieldFrag.querySelector('md-tabs');
87+
var mdTabsFrag = args.fieldFrag.querySelector('md-tabs');
8888

8989
args.form.tabs.forEach(function(tab, index) {
9090
var mdTab = document.createElement('md-tab');
@@ -93,7 +93,7 @@ angular.module('schemaForm')
9393
var childFrag = args.build(tab.items, args.path + '.tabs[' + index + '].items', args.state);
9494
mdTabBody.appendChild(childFrag);
9595
mdTab.appendChild(mdTabBody);
96-
tabContainer.appendChild(mdTab);
96+
mdTabsFrag.appendChild(mdTab);
9797
});
9898
}
9999
};
@@ -105,7 +105,7 @@ angular.module('schemaForm')
105105
array: { template: base + 'array.html', builder: [ sfField, ngModelOptions, ngModel, array, condition ] },
106106
autocomplete: {
107107
template: base + 'autocomplete.html',
108-
builder: [ sfField, ngModel, ngModelOptions, sfMessages, condition, sfAutocomplete ]
108+
builder: [ sfField, ngModel, ngModelOptions, sfMessages, condition, mdAutocomplete ]
109109
},
110110
boolean: { template: base + 'checkbox.html', builder: defaults },
111111
button: { template: base + 'submit.html', builder: defaults },
@@ -114,7 +114,10 @@ angular.module('schemaForm')
114114
template: base + 'checkboxes.html',
115115
builder: [ sfField, ngModelOptions, ngModel, array, condition ]
116116
},
117-
date: { template: base + 'date.html', builder: [ sfField, ngModel, ngModelOptions, sfMessages, mdDatepicker, condition ] },
117+
date: {
118+
template: base + 'date.html',
119+
builder: [ sfField, ngModel, ngModelOptions, sfMessages, mdDatepicker, condition ]
120+
},
118121
'default': { template: base + 'default.html', builder: defaults },
119122
fieldset: { template: base + 'fieldset.html', builder: [ sfField, simpleTransclusion, condition ] },
120123
help: { template: base + 'help.html', builder: defaults },
@@ -126,7 +129,7 @@ angular.module('schemaForm')
126129
section: { template: base + 'section.html', builder: [ sfField, simpleTransclusion, condition ] },
127130
select: { template: base + 'select.html', builder: defaults },
128131
submit: { template: base + 'submit.html', builder: defaults },
129-
tabs: { template: base + 'tabs.html', builder: [ sfField, tabs, condition ] },
132+
tabs: { template: base + 'tabs.html', builder: [ sfField, mdTabs, condition ] },
130133
tabarray: { template: base + 'tabarray.html', builder: [ sfField, ngModelOptions, ngModel, array, condition ] },
131134
textarea: { template: base + 'textarea.html', builder: defaults }
132135
});
@@ -158,7 +161,7 @@ angular.module('schemaForm')
158161
}
159162
else {
160163
if (args.form.optionFilter) {
161-
mdDatepicker.setAttribute('md-items',
164+
mdAutocomplete.setAttribute('md-items',
162165
'item in evalExpr("this[\""+form.optionFilter+"\"](\""+searchText+"\")")');
163166
}
164167
}

0 commit comments

Comments
 (0)