feat(CSSClass): add support for string and array expresions

Closes #2025

modules/angular2/src/directives/class.ts

@@ -1,40 +1,71 @@
 import {Directive, onCheck} from 'angular2/annotations';
 import {ElementRef} from 'angular2/core';
 import {PipeRegistry} from 'angular2/src/change_detection/pipes/pipe_registry';
-import {isPresent} from 'angular2/src/facade/lang';
+import {Pipe} from 'angular2/src/change_detection/pipes/pipe';
 import {Renderer} from 'angular2/src/render/api';
+import {KeyValueChanges} from 'angular2/src/change_detection/pipes/keyvalue_changes';
+import {IterableChanges} from 'angular2/src/change_detection/pipes/iterable_changes';
+import {isPresent, isString, StringWrapper} from 'angular2/src/facade/lang';
+import {ListWrapper, StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collection';
 
 @Directive({selector: '[class]', lifecycle: [onCheck], properties: ['rawClass: class']})
 export class CSSClass {
-  _pipe;
+  _pipe: Pipe;
   _rawClass;
 
   constructor(private _pipeRegistry: PipeRegistry, private _ngEl: ElementRef,
               private _renderer: Renderer) {}
 
   set rawClass(v) {
+    this._cleanupClasses(this._rawClass);
+
+    if (isString(v)) {
+      v = v.split(' ');
+    }
+
     this._rawClass = v;
-    this._pipe = this._pipeRegistry.get('keyValDiff', this._rawClass);
+    this._pipe = this._pipeRegistry.get(isListLikeIterable(v) ? 'iterableDiff' : 'keyValDiff', v);
   }
 
-  _toggleClass(className, enabled): void {
+  onCheck(): void {
-    this._renderer.setElementClass(this._ngEl, className, enabled);
-  }
-
-  onCheck() {
     var diff = this._pipe.transform(this._rawClass);
-    if (isPresent(diff)) this._applyChanges(diff.wrapped);
+    if (isPresent(diff) && isPresent(diff.wrapped)) {
-  }
+      if (diff.wrapped instanceof IterableChanges) {
-
+        this._applyArrayChanges(diff.wrapped);
-  private _applyChanges(diff) {
+      } else {
-    if (isPresent(diff)) {
+        this._applyObjectChanges(diff.wrapped);
-      diff.forEachAddedItem((record) => { this._toggleClass(record.key, record.currentValue); });
+      }
-      diff.forEachChangedItem((record) => { this._toggleClass(record.key, record.currentValue); });
-      diff.forEachRemovedItem((record) => {
-        if (record.previousValue) {
-          this._toggleClass(record.key, false);
-        }
-      });
     }
   }
+
+  private _cleanupClasses(rawClassVal): void {
+    if (isPresent(rawClassVal)) {
+      if (isListLikeIterable(rawClassVal)) {
+        ListWrapper.forEach(rawClassVal, (className) => { this._toggleClass(className, false); });
+      } else {
+        StringMapWrapper.forEach(rawClassVal, (expVal, className) => {
+          if (expVal) this._toggleClass(className, false);
+        });
+      }
+    }
+  }
+
+  private _applyObjectChanges(diff: KeyValueChanges): void {
+    diff.forEachAddedItem((record) => { this._toggleClass(record.key, record.currentValue); });
+    diff.forEachChangedItem((record) => { this._toggleClass(record.key, record.currentValue); });
+    diff.forEachRemovedItem((record) => {
+      if (record.previousValue) {
+        this._toggleClass(record.key, false);
+      }
+    });
+  }
+
+  private _applyArrayChanges(diff: IterableChanges): void {
+    diff.forEachAddedItem((record) => { this._toggleClass(record.item, true); });
+    diff.forEachRemovedItem((record) => { this._toggleClass(record.item, false); });
+  }
+
+  private _toggleClass(className: string, enabled): void {
+    this._renderer.setElementClass(this._ngEl, className, enabled);
+  }
 }

modules/angular2/test/directives/class_spec.ts

@@ -12,41 +12,206 @@ import {
   it,
   xit,
 } from 'angular2/test_lib';
-
+import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {StringMapWrapper} from 'angular2/src/facade/collection';
-
 import {Component, View} from 'angular2/angular2';
-
 import {TestBed} from 'angular2/src/test_lib/test_bed';
-
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {CSSClass} from 'angular2/src/directives/class';
 
 export function main() {
   describe('binding to CSS class list', () => {
 
-    it('should add classes specified in an object literal',
+    describe('expressions evaluating to objects', () => {
+
+      it('should add classes specified in an object literal',
+         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           var template = '<div [class]="{foo: true, bar: false}"></div>';
+
+           tb.createView(TestComponent, {html: template})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+                 async.done();
+               });
+         }));
+
+      it('should add and remove classes based on changes in object literal values',
+         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
+
+           tb.createView(TestComponent, {html: template})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+                 view.context.condition = false;
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding bar');
+
+                 async.done();
+               });
+         }));
+
+      it('should add and remove classes based on changes to the expression object',
+         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           var template = '<div [class]="objExpr"></div>';
+
+           tb.createView(TestComponent, {html: template})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+                 StringMapWrapper.set(view.context.objExpr, 'bar', true);
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+
+                 StringMapWrapper.set(view.context.objExpr, 'baz', true);
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar baz');
+
+                 StringMapWrapper.delete(view.context.objExpr, 'bar');
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo baz');
+
+                 async.done();
+               });
+         }));
+
+      it('should add and remove classes based on reference changes to the expression object',
+         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           var template = '<div [class]="objExpr"></div>';
+
+           tb.createView(TestComponent, {html: template})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+                 view.context.objExpr = {foo: true, bar: true};
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+
+                 view.context.objExpr = {baz: true};
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding baz');
+
+                 async.done();
+               });
+         }));
+    });
+
+    describe('expressions evaluating to lists', () => {
+
+      it('should add classes specified in a list literal',
+         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           var template = `<div [class]="['foo', 'bar']"></div>`;
+
+           tb.createView(TestComponent, {html: template})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+
+                 async.done();
+               });
+         }));
+
+      it('should add and remove classes based on changes to the expression',
+         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           var template = '<div [class]="arrExpr"></div>';
+
+           tb.createView(TestComponent, {html: template})
+               .then((view) => {
+
+                 var arrExpr: List<string> = view.context.arrExpr;
+
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+                 arrExpr.push('bar');
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+
+                 arrExpr[1] = 'baz';
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo baz');
+
+                 ListWrapper.remove(view.context.arrExpr, 'baz');
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+                 async.done();
+               });
+         }));
+
+      it('should add and remove classes when a reference changes',
+         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           var template = '<div [class]="arrExpr"></div>';
+
+           tb.createView(TestComponent, {html: template})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+                 view.context.arrExpr = ['bar'];
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding bar');
+
+                 async.done();
+               });
+         }));
+    });
+
+    describe('expressions evaluating to string', () => {
+
+      it('should add classes specified in a string literal',
+         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           var template = `<div [class]="'foo bar'"></div>`;
+
+           tb.createView(TestComponent, {html: template})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+
+                 async.done();
+               });
+         }));
+
+      it('should add and remove classes based on changes to the expression',
+         inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
+           var template = '<div [class]="strExpr"></div>';
+
+           tb.createView(TestComponent, {html: template})
+               .then((view) => {
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+
+                 view.context.strExpr = 'foo bar';
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
+
+                 view.context.strExpr = 'baz';
+                 view.detectChanges();
+                 expect(view.rootNodes[0].className).toEqual('ng-binding baz');
+
+                 async.done();
+               });
+         }));
+    });
+
+    it('should remove active classes when expression evaluates to null',
        inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         var template = '<div [class]="{foo: true, bar: false}"></div>';
+         var template = '<div [class]="objExpr"></div>';
 
          tb.createView(TestComponent, {html: template})
              .then((view) => {
                view.detectChanges();
                expect(view.rootNodes[0].className).toEqual('ng-binding foo');
 
-               async.done();
+               view.context.objExpr = null;
-             });
-       }));
-
-    it('should add and remove classes based on changes in object literal values',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
-
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
                view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+               expect(view.rootNodes[0].className).toEqual('ng-binding');
 
-               view.context.condition = false;
+               view.context.objExpr = {'foo': false, 'bar': true};
                view.detectChanges();
                expect(view.rootNodes[0].className).toEqual('ng-binding bar');
 
@@ -54,63 +219,31 @@ export function main() {
              });
        }));
 
-    it('should add and remove classes based on changes to the expression object',
+    it('should have no effect when activated by a static class attribute',
        inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         var template = '<div [class]="expr"></div>';
+         var template = '<div class="init foo"></div>';
 
          tb.createView(TestComponent, {html: template})
              .then((view) => {
                view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding foo');
+               // TODO(pk): in CJS className isn't initialized properly if we don't mutate classes
-
+               expect(ListWrapper.join(DOM.classList(view.rootNodes[0]), ' '))
-               StringMapWrapper.set(view.context.expr, 'bar', true);
+                   .toEqual('init foo ng-binding');
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
-
-               StringMapWrapper.set(view.context.expr, 'baz', true);
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding foo bar baz');
-
-               StringMapWrapper.delete(view.context.expr, 'bar');
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding foo baz');
-
-               async.done();
-             });
-       }));
-
-    it('should retain existing classes when expression evaluates to null',
-       inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         var template = '<div [class]="expr"></div>';
-
-         tb.createView(TestComponent, {html: template})
-             .then((view) => {
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding foo');
-
-               view.context.expr = null;
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding foo');
-
-               view.context.expr = {'foo': false, 'bar': true};
-               view.detectChanges();
-               expect(view.rootNodes[0].className).toEqual('ng-binding bar');
-
                async.done();
              });
        }));
 
     it('should co-operate with the class attribute',
        inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         var template = '<div [class]="expr" class="init foo"></div>';
+         var template = '<div [class]="objExpr" class="init foo"></div>';
 
          tb.createView(TestComponent, {html: template})
              .then((view) => {
-               StringMapWrapper.set(view.context.expr, 'bar', true);
+               StringMapWrapper.set(view.context.objExpr, 'bar', true);
                view.detectChanges();
                expect(view.rootNodes[0].className).toEqual('init foo ng-binding bar');
 
-               StringMapWrapper.set(view.context.expr, 'foo', false);
+               StringMapWrapper.set(view.context.objExpr, 'foo', false);
                view.detectChanges();
                expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
 
@@ -120,18 +253,18 @@ export function main() {
 
     it('should co-operate with the class attribute and class.name binding',
        inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
-         var template = '<div class="init foo" [class]="expr" [class.baz]="condition"></div>';
+         var template = '<div class="init foo" [class]="objExpr" [class.baz]="condition"></div>';
 
          tb.createView(TestComponent, {html: template})
              .then((view) => {
                view.detectChanges();
                expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz');
 
-               StringMapWrapper.set(view.context.expr, 'bar', true);
+               StringMapWrapper.set(view.context.objExpr, 'bar', true);
                view.detectChanges();
                expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz bar');
 
-               StringMapWrapper.set(view.context.expr, 'foo', false);
+               StringMapWrapper.set(view.context.objExpr, 'foo', false);
                view.detectChanges();
                expect(view.rootNodes[0].className).toEqual('init ng-binding baz bar');
 
@@ -148,10 +281,8 @@ export function main() {
 @Component({selector: 'test-cmp'})
 @View({directives: [CSSClass]})
 class TestComponent {
-  condition: boolean;
+  condition: boolean = true;
-  expr;
+  arrExpr: List<string> = ['foo'];
-  constructor() {
+  objExpr = {'foo': true, 'bar': false};
-    this.condition = true;
+  strExpr = 'foo';
-    this.expr = {'foo': true, 'bar': false};
-  }
 }