Skip to content

Commit 7a71f7b

Browse files
dandoyondandoyon
committed
Refactoring based on peer-reviewed feedback
Removed samples and changed ui-config for filter Added templates folder to test-config.js
1 parent 17cb802 commit 7a71f7b

File tree

4 files changed

+31
-173
lines changed

4 files changed

+31
-173
lines changed

‎templates/README.md

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,30 @@ Currently there are only two templates, one for filter and one for directive alo
55

66
## Usage
77

8-
Here's how the two sample impls could be used
8+
Here's how the two template impls could be used
99
<html>
1010
<head>
1111
<!-- your angular and other library imports here -->
1212
<script>
1313
// create global prefix/suffix for elements using wrap filter
1414
var myApp = angular.module('myApp',['ui'])
15-
.value('ui.config', { 'wrapFilter': { 'prefix' : 'foo-', 'suffix' : '-bar' }});
15+
.value('ui.config', { 'directiveTmpl': { 'somedirectiveopt' : 'myval' } });
1616
1717
function MyCtrl($scope) {
18-
$scope.alpha = "some words here";
19-
$scope.num = " 123 ";
18+
$scope.mymodel = "a value";
2019
}
2120
</script>
2221

23-
<style>
24-
.ui-alpha {
25-
font-size: 150%;
26-
color: red;
27-
}
28-
.ui-numeric {
29-
font-size: 180%;
30-
color: green;
31-
}
32-
</style>
33-
3422
</head>
3523

3624
<body ng-controller="MyCtrl">
3725
<div>
38-
<span>{{alpha | wrap}}</span>
39-
<span ui-stylize ng-model="alpha"></span>
40-
<span ui-stylize ng-model="num"></span>
26+
<span>{{mymodel | filterTmpl}}</span>
27+
28+
<span ui-directive-template ng-model="mymodel"></span>
29+
<ui-directive-template ng-model="mymodel"></ui-directive-template>
30+
4131
</div>
4232
</body>
4333

4434
</html>
45-
### Todo
46-
- sample wrapping third party lib

‎templates/template.js

Lines changed: 9 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
* Filter/directive templates
33
*/
44
angular.module('ui.filters')
5-
.filter('tmpl', ['ui.config', function(uiConfig) { // tmplFilter is a boilerplate setup for your coding pleasure
6-
var config = { };
7-
if (uiConfig.tmplFilter) {
8-
angular.extend(config, uiConfig.tmplFilter);
5+
.filter('filterTmpl', ['ui.config', function(uiConfig) {
6+
var config = { 'somefilteropt' : 'foo'};
7+
if (uiConfig.filterTmpl) {
8+
angular.extend(config, uiConfig.filterTmpl);
99
}
1010
return function (value, kind) {
1111
var opts = {}, inputs = {}, out;
@@ -20,36 +20,13 @@ angular.module('ui.filters')
2020
out = value;
2121
return out;
2222
};
23-
}])
24-
.filter('wrap', ['ui.config', function(uiConfig) { // wrapFilter is a simple filter that wraps the incoming value, but only if value has a value.
25-
var config = { };
26-
if (uiConfig.wrapFilter) {
27-
angular.extend(config, uiConfig.wrapFilter);
28-
}
29-
return function (value, prefix, suffix) {
30-
var opts = {}, inputs = {};
31-
// if an input is given then override
32-
if(prefix) {
33-
inputs = {'prefix' : prefix, 'suffix' : suffix};
34-
}
35-
// build up our options
36-
angular.extend(opts, config, inputs);
37-
if(!value || value == '') {
38-
return '';
39-
}
40-
41-
if(opts.prefix) {
42-
return opts.prefix + value + (opts.suffix || '');
43-
}
44-
return value;
45-
};
4623
}]);
4724

4825
angular.module('ui.directives')
49-
.directive('uiTmpl', ['ui.config', function(uiConfig) {
50-
var config = { };
51-
if (uiConfig.tmpl) {
52-
angular.extend(config, uiConfig.tmpl);
26+
.directive('uiDirectiveTmpl', ['ui.config', function(uiConfig) {
27+
var config = { 'somedirectiveopt' : 'bar' };
28+
if (uiConfig.directiveTmpl) {
29+
angular.extend(config, uiConfig.directiveTmpl);
5330
}
5431
return {
5532
restrict: 'EAC', // supports using directive as element, attribute and class
@@ -66,42 +43,4 @@ angular.module('ui.directives')
6643
};
6744
}
6845
};
69-
}])
70-
.directive('uiStylize', ['ui.config', function(uiConfig) { // uiStylize sets style based on if value is alpha or numeric
71-
var config = { };
72-
if (uiConfig.stylize) {
73-
angular.extend(config, uiConfig.stylize);
74-
}
75-
return {
76-
restrict: 'EAC', // supports using directive as element, attribute and class
77-
require: 'ngModel', // requires ng-model controller so we get the two-way binding
78-
link: function(scope, element, attrs, ngModel) {
79-
var opts = {}; // instance-specific options
80-
81-
// build up our options
82-
angular.extend(opts, config, scope.$eval(attrs.uiStylize)); // element attributes that override default options
83-
84-
// override the controllers render function and do something interesting in here
85-
ngModel.$render = function() {
86-
var numval;
87-
try {
88-
// a different approach would be to use a regex, however this might be faster
89-
numval = parseFloat(ngModel.$viewValue);
90-
// javascript will parse a number with characters and come up with a number
91-
// make sure that the result is the same as what was in model
92-
if(numval != ngModel.$viewValue) {
93-
numval = null;
94-
}
95-
} catch(err) {
96-
// don't do anything numval will be undefined
97-
}
98-
if(numval) {
99-
element.addClass("ui-numeric");
100-
} else {
101-
element.addClass("ui-alpha");
102-
}
103-
element.text(ngModel.$viewValue); // boring
104-
};
105-
}
106-
};
107-
}]);
46+
}]);

‎templates/test/templateSpec.js

Lines changed: 11 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ describe('uiTemplates', function() {
99
// override uiConfig for testing purposes, this definition will clobber anything already predefined ... so be careful
1010
angular.module('ui.config', [])
1111
.value('ui.config', {
12-
'tmplFilter' : { 'someopt' : 'foo' },
13-
'wrapFilter' : { 'prefix' : 'cfoo-', 'suffix' : '-cbar' },
14-
'stylize' : {}
12+
'filterTmpl' : { 'somefilteropt' : 'foo' },
13+
'directiveTmpl' : { 'somedirectiveopt' : 'bar' }
1514
});
1615

1716
beforeEach(module('ui.directives'));
@@ -33,106 +32,36 @@ describe('uiTemplates', function() {
3332
}));
3433

3534
// very simple boilerplate setup of test for a custom filter
36-
describe('tmplFilter', function() {
35+
describe('filterTmpl should', function() {
3736
var tmpl;
3837
beforeEach(function() {
39-
tmpl = $filter('tmpl');
38+
tmpl = $filter('filterTmpl');
4039
});
4140

42-
it('prove exists when provided', function() {
41+
it('exist when provided', function() {
4342
expect(tmpl).toBeDefined();
4443
});
4544

46-
it('should return exactly what interesting thing (or not) the filter is doing to input', function() {
45+
it('return exactly what interesting thing the filter is doing to input', function() {
4746
expect(tmpl('text')).toEqual('text');
4847
});
4948

5049
});
51-
52-
// a test suite for a custom filter that does something
53-
describe('wrapFilter', function() {
54-
var wrap;
55-
beforeEach(function() {
56-
wrap = $filter('wrap');
57-
});
58-
59-
// this is a good test to always have make sure it has been properly defined, no reason to bother with the rest
60-
it('prove exists when provided', function() {
61-
expect(wrap).toBeDefined();
62-
});
63-
64-
it('should return empty string for undefined/null/empty/missing values', function() {
65-
expect(wrap('')).toEqual('');
66-
expect(wrap(null)).toEqual('');
67-
expect(wrap(undefined)).toEqual('');
68-
expect(wrap()).toEqual('');
69-
});
70-
it('should properly wrap non-empty string without providing prefix/suffix', function() {
71-
expect(wrap('text')).toEqual('cfoo-text-cbar');
72-
});
73-
it('should properly prefix non-empty string with prefix', function() {
74-
expect(wrap('text','foo-')).toEqual('foo-text');
75-
});
76-
it('should properly wrap non-empty string with both prefix and suffix', function() {
77-
expect(wrap('text','foo-','-bar')).toEqual('foo-text-bar');
78-
});
79-
});
8050
});
8151

8252
describe('directive tests', function() {
8353
var element;
84-
describe('uiTmpl', function() {
85-
it('should create an element if using Element-style', function() {
86-
var element = $compile('<ui-tmpl ng-model="a"></ui-tmpl>')($rootScope);
87-
expect(element).toBeDefined();
88-
});
89-
it('should render the models value in element', function() {
90-
var element = $compile('<div ui-tmpl ng-model="a"></div>')($rootScope);
91-
expect(element.text()).toEqual('');
92-
$rootScope.a = 'foo';
93-
$rootScope.$digest();
94-
expect(element.text()).toEqual('foo');
95-
});
96-
});
97-
98-
describe('uiStylize', function() {
99-
it('should create an element if using Element-style', function() {
100-
var element = $compile('<ui-stylize ng-model="a"></ui-stylize>')($rootScope);
54+
describe('uiDirectiveTmpl should', function() {
55+
it('create an element if using element-style', function() {
56+
var element = $compile('<ui-directive-tmpl ng-model="a"></ui-directive-tmpl>')($rootScope);
10157
expect(element).toBeDefined();
10258
});
103-
104-
it('should render the alphabetic model value in element and assign ui-alpha class', function() {
105-
var element = $compile('<div ui-stylize ng-model="a"></div>')($rootScope);
59+
it('render the models value in element', function() {
60+
var element = $compile('<div ui-directive-tmpl ng-model="a"></div>')($rootScope);
10661
expect(element.text()).toEqual('');
10762
$rootScope.a = 'foo';
10863
$rootScope.$digest();
10964
expect(element.text()).toEqual('foo');
110-
expect(element.hasClass('ui-alpha')).toBeTruthy('ui-alpha');
111-
expect(element.hasClass('ui-numeric')).toBeFalsy('ui-numeric');
112-
});
113-
it('should handle integer model value in element and assign ui-numeric class', function() {
114-
var element = $compile('<div ui-stylize ng-model="a"></div>')($rootScope);
115-
expect(element.text()).toEqual('');
116-
$rootScope.a = '123';
117-
$rootScope.$digest();
118-
expect(element.hasClass('ui-numeric')).toBeTruthy('ui-numeric');
119-
expect(element.hasClass('ui-alpha')).toBeFalsy('ui-alpha');
120-
});
121-
it('should handle float model value in element and assign ui-numeric class', function() {
122-
var element = $compile('<div ui-stylize ng-model="a"></div>')($rootScope);
123-
expect(element.text()).toEqual('');
124-
$rootScope.a = '123.000123';
125-
$rootScope.$digest();
126-
expect(element.hasClass('ui-numeric')).toBeTruthy('ui-numeric');
127-
expect(element.hasClass('ui-alpha')).toBeFalsy('ui-alpha');
128-
});
129-
it('should handle mixed alpha/numeric model value in element and assign ui-alpha class', function() {
130-
var element = $compile('<div ui-stylize ng-model="a"></div>')($rootScope);
131-
expect(element.text()).toEqual('');
132-
$rootScope.a = '123.000ABC';
133-
$rootScope.$digest();
134-
expect(element.hasClass('ui-numeric')).toBeFalsy('ui-numeric');
135-
expect(element.hasClass('ui-alpha')).toBeTruthy('ui-alpha');
13665
});
13766
});
13867

‎test/test-config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ files = [
1818
'test/lib/codemirror/codemirror.js',
1919
'test/lib/googlemaps/googlemaps.js',
2020
'build/angular-ui.js',
21-
'modules/*/*/test/*.js'
21+
'modules/*/*/test/*.js',
22+
'templates/*.js',
23+
'templates/*/test/*.js'
2224
];
2325

2426
// list of files to exclude

0 commit comments

Comments
 (0)