Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(305)

Side by Side Diff: third_party/pkg/angular/lib/directive/ng_class.dart

Issue 180873006: Update the Angular/DI tests to latest from github. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Review feedback Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 part of angular.directive; 1 part of angular.directive;
2 2
3 /** 3 /**
4 * The `ngClass` allows you to set CSS classes on HTML an element, dynamically, 4 * The `ngClass` allows you to set CSS classes on HTML an element, dynamically,
5 * by databinding an expression that represents all classes to be added. 5 * by databinding an expression that represents all classes to be added.
6 * 6 *
7 * The directive won't add duplicate classes if a particular class was 7 * The directive won't add duplicate classes if a particular class was
8 * already set. 8 * already set.
9 * 9 *
10 * When the expression changes, the previously added classes are removed and 10 * When the expression changes, the previously added classes are removed and
11 * only then the new classes are added. 11 * only then the new classes are added.
12 * 12 *
13 * The result of the expression evaluation can be a string representing space 13 * The result of the expression evaluation can be a string representing space
14 * delimited class names, an array, or a map of class names to boolean values. 14 * delimited class names, an array, or a map of class names to boolean values.
15 * In the case of a map, the names of the properties whose values are truthy 15 * In the case of a map, the names of the properties whose values are truthy
16 * will be added as css classes to the element. 16 * will be added as css classes to the element.
17 * 17 *
18 * ##Examples 18 * ##Examples
19 * 19 *
20 * index.html: 20 * index.html:
21 * 21 *
22 * <p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</ p> 22 * <!--
23 * The map syntax:
24 *
25 * ng-class="{key1: value1, key2: value2, ...}"
26 *
27 * results in only adding CSS classes represented by the map keys when
28 * the corresponding value expressions are truthy.
29 *
30 * To use a css class that contains a hyphen (such as line-through in this
31 * example), you should quote the name to make it a valid map key. You
32 * may, of course, quote all the map keys for consistency.
33 * -->
34 * <p ng-class="{'line-through': strike, bold: bold, red: red}">Map Syntax E xample</p>
23 * <input type="checkbox" ng-model="bold"> bold 35 * <input type="checkbox" ng-model="bold"> bold
24 * <input type="checkbox" ng-model="strike"> strike 36 * <input type="checkbox" ng-model="strike"> strike
25 * <input type="checkbox" ng-model="red"> red 37 * <input type="checkbox" ng-model="red"> red
26 * <hr> 38 * <hr>
39 *
27 * <p ng-class="style">Using String Syntax</p> 40 * <p ng-class="style">Using String Syntax</p>
28 * <input type="text" ng-model="style" placeholder="Type: bold strike red"> 41 * <input type="text" ng-model="style" placeholder="Type: bold strike red">
29 * <hr> 42 * <hr>
43 *
30 * <p ng-class="[style1, style2, style3]">Using Array Syntax</p> 44 * <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
31 * <input ng-model="style1" placeholder="Type: bold"><br> 45 * <input ng-model="style1" placeholder="Type: bold"><br>
32 * <input ng-model="style2" placeholder="Type: strike"><br> 46 * <input ng-model="style2" placeholder="Type: strike"><br>
33 * <input ng-model="style3" placeholder="Type: red"><br> 47 * <input ng-model="style3" placeholder="Type: red"><br>
34 * 48 *
35 * style.css: 49 * style.css:
36 * 50 *
37 * .strike { 51 * .strike {
38 * text-decoration: line-through; 52 * text-decoration: line-through;
39 * } 53 * }
54 * .line-through {
55 * text-decoration: line-through;
56 * }
40 * .bold { 57 * .bold {
41 * font-weight: bold; 58 * font-weight: bold;
42 * } 59 * }
43 * .red { 60 * .red {
44 * color: red; 61 * color: red;
45 * } 62 * }
46 * 63 *
47 */ 64 */
48 @NgDirective( 65 @NgDirective(
49 selector: '[ng-class]', 66 selector: '[ng-class]',
50 map: const {'ng-class': '@valueExpression'}, 67 map: const {'ng-class': '@valueExpression'},
51 exportExpressionAttrs: const ['ng-class']) 68 exportExpressionAttrs: const ['ng-class'])
52 class NgClassDirective extends _NgClassBase { 69 class NgClassDirective extends _NgClassBase {
53 NgClassDirective(dom.Element element, Scope scope, NodeAttrs attrs) 70 NgClassDirective(dom.Element element, Scope scope, NodeAttrs attrs, AstParser parser)
54 : super(element, scope, null, attrs); 71 : super(element, scope, null, attrs, parser);
55 } 72 }
56 73
57 /** 74 /**
58 * The `ngClassOdd` and `ngClassEven` directives work exactly as 75 * The `ngClassOdd` and `ngClassEven` directives work exactly as
59 * {@link ng.directive:ngClass ngClass}, except it works in 76 * {@link ng.directive:ngClass ngClass}, except it works in
60 * conjunction with `ngRepeat` and takes affect only on odd (even) rows. 77 * conjunction with `ngRepeat` and takes affect only on odd (even) rows.
61 * 78 *
62 * This directive can be applied only within a scope of an `ngRepeat`. 79 * This directive can be applied only within a scope of an `ngRepeat`.
63 * 80 *
64 * ##Examples 81 * ##Examples
(...skipping 13 matching lines...) Expand all
78 * } 95 * }
79 * .even { 96 * .even {
80 * color: blue; 97 * color: blue;
81 * } 98 * }
82 */ 99 */
83 @NgDirective( 100 @NgDirective(
84 selector: '[ng-class-odd]', 101 selector: '[ng-class-odd]',
85 map: const {'ng-class-odd': '@valueExpression'}, 102 map: const {'ng-class-odd': '@valueExpression'},
86 exportExpressionAttrs: const ['ng-class-odd']) 103 exportExpressionAttrs: const ['ng-class-odd'])
87 class NgClassOddDirective extends _NgClassBase { 104 class NgClassOddDirective extends _NgClassBase {
88 NgClassOddDirective(dom.Element element, Scope scope, NodeAttrs attrs) 105 NgClassOddDirective(dom.Element element, Scope scope, NodeAttrs attrs, AstPars er parser)
89 : super(element, scope, 0, attrs); 106 : super(element, scope, 0, attrs, parser);
90 } 107 }
91 108
92 /** 109 /**
93 * The `ngClassOdd` and `ngClassEven` directives work exactly as 110 * The `ngClassOdd` and `ngClassEven` directives work exactly as
94 * {@link ng.directive:ngClass ngClass}, except it works in 111 * {@link ng.directive:ngClass ngClass}, except it works in
95 * conjunction with `ngRepeat` and takes affect only on odd (even) rows. 112 * conjunction with `ngRepeat` and takes affect only on odd (even) rows.
96 * 113 *
97 * This directive can be applied only within a scope of an `ngRepeat`. 114 * This directive can be applied only within a scope of an `ngRepeat`.
98 * 115 *
99 * ##Examples 116 * ##Examples
(...skipping 13 matching lines...) Expand all
113 * } 130 * }
114 * .even { 131 * .even {
115 * color: blue; 132 * color: blue;
116 * } 133 * }
117 */ 134 */
118 @NgDirective( 135 @NgDirective(
119 selector: '[ng-class-even]', 136 selector: '[ng-class-even]',
120 map: const {'ng-class-even': '@valueExpression'}, 137 map: const {'ng-class-even': '@valueExpression'},
121 exportExpressionAttrs: const ['ng-class-even']) 138 exportExpressionAttrs: const ['ng-class-even'])
122 class NgClassEvenDirective extends _NgClassBase { 139 class NgClassEvenDirective extends _NgClassBase {
123 NgClassEvenDirective(dom.Element element, Scope scope, NodeAttrs attrs) 140 NgClassEvenDirective(dom.Element element, Scope scope, NodeAttrs attrs, AstPar ser parser)
124 : super(element, scope, 1, attrs); 141 : super(element, scope, 1, attrs, parser);
125 } 142 }
126 143
127 abstract class _NgClassBase { 144 abstract class _NgClassBase {
128 final dom.Element element; 145 final dom.Element element;
129 final Scope scope; 146 final Scope scope;
130 final int mode; 147 final int mode;
131 final NodeAttrs nodeAttrs; 148 final NodeAttrs nodeAttrs;
149 final AstParser _parser;
132 var previousSet = []; 150 var previousSet = [];
133 var currentSet = []; 151 var currentSet = [];
134 152
135 _NgClassBase(this.element, this.scope, this.mode, this.nodeAttrs) { 153 _NgClassBase(this.element, this.scope, this.mode, this.nodeAttrs, this._parser ) {
136 var prevClass; 154 var prevClass;
137 155
138 nodeAttrs.observe('class', (String newValue) { 156 nodeAttrs.observe('class', (String newValue) {
139 if (prevClass != newValue) { 157 if (prevClass != newValue) {
140 prevClass = newValue; 158 prevClass = newValue;
141 _handleChange(scope[r'$index']); 159 _handleChange(scope.context[r'$index']);
142 } 160 }
143 }); 161 });
144 } 162 }
145 163
146 set valueExpression(currentExpression) { 164 set valueExpression(currentExpression) {
147 // this should be called only once, so we don't worry about cleaning up 165 // this should be called only once, so we don't worry about cleaning up
148 // watcher registrations. 166 // watcher registrations.
149 scope.$watchCollection(currentExpression, (current) { 167 scope.watch(
150 currentSet = _flatten(current); 168 _parser(currentExpression, collection: true),
151 _handleChange(scope[r'$index']); 169 (current, _) {
152 }); 170 currentSet = _flatten(current);
171 _handleChange(scope.context[r'$index']);
172 },
173 readOnly: true
174 );
153 if (mode != null) { 175 if (mode != null) {
154 scope.$watch(r'$index', (index, oldIndex) { 176 scope.watch(_parser(r'$index'), (index, oldIndex) {
155 var mod = index % 2; 177 var mod = index % 2;
156 if (oldIndex == null || mod != oldIndex % 2) { 178 if (oldIndex == null || mod != oldIndex % 2) {
157 if (mod == mode) { 179 if (mod == mode) {
158 element.classes.addAll(currentSet); 180 element.classes.addAll(currentSet);
159 } else { 181 } else {
160 element.classes.removeAll(previousSet); 182 element.classes.removeAll(previousSet);
161 } 183 }
162 } 184 }
163 }); 185 }, readOnly: true);
164 } 186 }
165 } 187 }
166 188
167 _handleChange(index) { 189 _handleChange(index) {
168 if (mode == null || (index != null && index % 2 == mode)) { 190 if (mode == null || (index != null && index % 2 == mode)) {
169 element.classes.removeAll(previousSet); 191 element.classes..removeAll(previousSet)..addAll(currentSet);
170 element.classes.addAll(currentSet);
171 } 192 }
172 193
173 previousSet = currentSet; 194 previousSet = currentSet;
174 } 195 }
175 196
176 static List<String> _flatten(classes) { 197 static List<String> _flatten(classes) {
177 if (classes == null) return []; 198 if (classes == null) return [];
199 if (classes is CollectionChangeRecord) {
200 classes = (classes as CollectionChangeRecord).iterable.toList();
201 }
178 if (classes is List) { 202 if (classes is List) {
179 return classes; 203 return classes.where((String e) => e != null && e.isNotEmpty)
204 .toList(growable: false);
205 }
206 if (classes is MapChangeRecord) {
207 classes = (classes as MapChangeRecord).map;
180 } 208 }
181 if (classes is Map) { 209 if (classes is Map) {
182 return classes.keys.where((key) => toBool(classes[key])).toList(); 210 return classes.keys.where((key) => toBool(classes[key])).toList();
183 } 211 }
184 if (classes is String) { 212 if (classes is String) return classes.split(' ');
185 return classes.split(' '); 213 throw 'ng-class expects expression value to be List, Map or String, got $cla sses';
186 }
187 throw 'ng-class expects expression value to be List, Map or String.';
188 } 214 }
189 } 215 }
OLDNEW
« no previous file with comments | « third_party/pkg/angular/lib/directive/ng_bind_template.dart ('k') | third_party/pkg/angular/lib/directive/ng_control.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698