From e1d401916b9d262104a73511a3f78ab55f08a2a8 Mon Sep 17 00:00:00 2001
From: Victor <victor@suumit.com>
Date: Wed, 19 Mar 2014 15:54:10 +0100
Subject: [PATCH 1/7] doc(NodeAttrs): rework class comments, make namings
 consistent

---
 lib/core_dom/directive.dart    | 27 ++++++++++++++++++++-------
 lib/core_dom/view_factory.dart |  2 +-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/lib/core_dom/directive.dart b/lib/core_dom/directive.dart
index bf183fac9..9a6c868b2 100644
--- a/lib/core_dom/directive.dart
+++ b/lib/core_dom/directive.dart
@@ -7,9 +7,12 @@ typedef void _AttributeChanged(String newValue);
 typedef void Mustache(bool hasObservers);
 
 /**
- * NodeAttrs is a facade for element attributes. The facade is responsible
- * for normalizing attribute names as well as allowing access to the
- * value of the directive.
+ * NodeAttrs is a facade for element attributes.
+ *
+ * This facade allows reading and writing the attribute values as well as
+ * adding observers triggered when:
+ * - The value of an attribute changes,
+ * - An element becomes observed.
  */
 class NodeAttrs {
   final dom.Element element;
@@ -30,15 +33,20 @@ class NodeAttrs {
     } else {
       element.attributes[attrName] = value;
     }
+
     if (_observers != null && _observers.containsKey(attrName)) {
       _observers[attrName].forEach((notifyFn) => notifyFn(value));
     }
   }
 
   /**
-   * Observe changes to the attribute by invoking the [notifyFn] function. On
-   * registration the [notifyFn] function gets invoked synchronize with the
-   * current value.
+   * Observes changes to the attribute by invoking the [notifyFn]
+   * function. On registration the [notifyFn] function gets invoked in order to
+   * synchronize with the current value.
+   *
+   * When an observed is registered on an attributes any existing
+   * [_observerListeners] will be called with the first parameter set to
+   * [:true:]
    */
   observe(String attrName, notifyFn(String value)) {
     if (_observers == null) _observers = <String, List<_AttributeChanged>>{};
@@ -61,6 +69,11 @@ class NodeAttrs {
 
   Iterable<String> get keys => element.attributes.keys;
 
+  /**
+   * Registers a listener to be called when the attribute [attrName] becomes
+   * observed. On registration [notifyFn] function gets invoked with [:false:]
+   * as the first argument.
+   */
   void listenObserverChanges(String attrName, Mustache notifyFn) {
     _mustacheAttrs[attrName] = new _MustacheAttr(notifyFn);
     notifyFn(false);
@@ -68,7 +81,7 @@ class NodeAttrs {
 }
 
 /**
- * TemplateLoader is an asynchronous access to ShadowRoot which is
+ * [TemplateLoader] is an asynchronous access to ShadowRoot which is
  * loaded asynchronously. It allows a Component to be notified when its
  * ShadowRoot is ready.
  */
diff --git a/lib/core_dom/view_factory.dart b/lib/core_dom/view_factory.dart
index e538175fe..beb810c30 100644
--- a/lib/core_dom/view_factory.dart
+++ b/lib/core_dom/view_factory.dart
@@ -248,7 +248,7 @@ class _AnchorAttrs extends NodeAttrs {
 
   _AnchorAttrs(DirectiveRef this._directiveRef): super(null);
 
-  operator [](name) => name == '.' ? _directiveRef.value : null;
+  DirectiveRef operator [](name) => name == '.' ? _directiveRef.value : null;
 
   void observe(String attributeName, _AttributeChanged notifyFn) {
     notifyFn(attributeName == '.' ? _directiveRef.value : null);

From a03e16b3c35030943f5fa05e367473668be8bf85 Mon Sep 17 00:00:00 2001
From: Victor <victor@suumit.com>
Date: Wed, 19 Mar 2014 18:00:42 +0100
Subject: [PATCH 2/7] style: cleanup

---
 lib/core_dom/view_factory.dart  | 2 +-
 lib/directive/input_select.dart | 8 +++-----
 lib/directive/ng_bind_html.dart | 4 ++--
 lib/directive/ng_repeat.dart    | 1 +
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/lib/core_dom/view_factory.dart b/lib/core_dom/view_factory.dart
index beb810c30..00f6b9cdf 100644
--- a/lib/core_dom/view_factory.dart
+++ b/lib/core_dom/view_factory.dart
@@ -248,7 +248,7 @@ class _AnchorAttrs extends NodeAttrs {
 
   _AnchorAttrs(DirectiveRef this._directiveRef): super(null);
 
-  DirectiveRef operator [](name) => name == '.' ? _directiveRef.value : null;
+  String operator [](name) => name == '.' ? _directiveRef.value : null;
 
   void observe(String attributeName, _AttributeChanged notifyFn) {
     notifyFn(attributeName == '.' ? _directiveRef.value : null);
diff --git a/lib/directive/input_select.dart b/lib/directive/input_select.dart
index 3b4d8e19d..9736040b1 100644
--- a/lib/directive/input_select.dart
+++ b/lib/directive/input_select.dart
@@ -105,9 +105,7 @@ class OptionValueDirective implements NgAttachAware,
   }
 
   attach() {
-    if (_inputSelectDirective != null) {
-      _inputSelectDirective.dirty();
-    }
+    if (_inputSelectDirective != null) _inputSelectDirective.dirty();
   }
 
   detach() {
@@ -151,8 +149,8 @@ class _SingleSelectMode extends _SelectMode {
                     dom.SelectElement select,
                     NgModel model,
                     this._nullOption,
-                    this._unknownOption
-                    ): super(expando, select, model) {
+                    this._unknownOption)
+      : super(expando, select, model) {
   }
 
   onViewChange(event) {
diff --git a/lib/directive/ng_bind_html.dart b/lib/directive/ng_bind_html.dart
index 075f448df..31f47e50e 100644
--- a/lib/directive/ng_bind_html.dart
+++ b/lib/directive/ng_bind_html.dart
@@ -28,6 +28,6 @@ class NgBindHtmlDirective {
    * expression is innerHTML'd according to the rules specified in this class'
    * documentation.
    */
-  set value(value) => element.setInnerHtml(value == null ? '' : value.toString(),
-                                           validator: validator);
+  void set value(value) => element.setInnerHtml(
+      value == null ? '' : value.toString(), validator: validator);
 }
diff --git a/lib/directive/ng_repeat.dart b/lib/directive/ng_repeat.dart
index 209c1731f..046b98aae 100644
--- a/lib/directive/ng_repeat.dart
+++ b/lib/directive/ng_repeat.dart
@@ -165,6 +165,7 @@ class NgRepeatDirective {
       _viewPort.insert(view, insertAfter: previousView);
     };
 
+    // todo(vicb) refactor once GH-774 gets fixed
     if (_rows == null) {
       _rows = new List<_Row>(length);
       for (var i = 0; i < length; i++) {

From 38e43c786963d9cc3407fb4ac75204fe38c1884d Mon Sep 17 00:00:00 2001
From: Victor <victor@suumit.com>
Date: Wed, 19 Mar 2014 18:00:57 +0100
Subject: [PATCH 3/7] feat(ngElement): add support for attributes

---
 lib/core_dom/ng_element.dart       |  63 +++++++++----
 test/_specs.dart                   |  14 ++-
 test/core_dom/ng_element_spec.dart | 142 +++++++++++++++++++++--------
 3 files changed, 162 insertions(+), 57 deletions(-)

diff --git a/lib/core_dom/ng_element.dart b/lib/core_dom/ng_element.dart
index 7e01c48ae..5c5be2e1d 100644
--- a/lib/core_dom/ng_element.dart
+++ b/lib/core_dom/ng_element.dart
@@ -2,38 +2,65 @@ part of angular.core.dom_internal;
 
 @NgInjectableService()
 class NgElement {
+  static const _TO_BE_REMOVED = const Object();
 
   final dom.Element node;
   final Scope _scope;
   final NgAnimate _animate;
-  final _classes = new Map<String, bool>();
 
-  NgElement(this.node, this._scope, NgAnimate this._animate);
+  final _classesToUpdate = <String, bool>{};
+  final _attributesToUpdate = <String, dynamic>{};
 
-  addClass(String className) {
-    if(_classes.isEmpty) {
-      _listenOnWrite();
-    }
-    _classes[className] = true;
+  bool _writeScheduled = false;
+
+  NgElement(this.node, this._scope, this._animate);
+
+  void addClass(String className) {
+    _scheduleDomWrite();
+    _classesToUpdate[className] = true;
   }
 
-  removeClass(String className) {
-    if(_classes.isEmpty) {
-      _listenOnWrite();
-    }
-    _classes[className] = false;
+  void removeClass(String className) {
+    _scheduleDomWrite();
+    _classesToUpdate[className] = false;
+  }
+
+  // todo(vicb) add tests
+  void setAttribute(String attrName, [value = '']) {
+    _scheduleDomWrite();
+    _attributesToUpdate[attrName] = value == null ? '' : value;
   }
 
-  _listenOnWrite() {
-    _scope.rootScope.domWrite(() => flush());
+  void removeAttribute(String attrName) {
+    _scheduleDomWrite();
+    _attributesToUpdate[attrName] = _TO_BE_REMOVED;
   }
 
-  flush() {
-    _classes.forEach((className, status) {
-      status == true
+  _scheduleDomWrite() {
+    if (!_writeScheduled) {
+      _writeScheduled = true;
+      _scope.rootScope.domWrite(() {
+        _writeToDom();
+        _writeScheduled = false;
+      });
+    }
+  }
+
+  _writeToDom() {
+    _classesToUpdate.forEach((String className, bool toBeAdded) {
+      toBeAdded
         ? _animate.addClass(node, className)
         : _animate.removeClass(node, className);
     });
-    _classes.clear();
+    _classesToUpdate.clear();
+
+    _attributesToUpdate.forEach((String attrName, value) {
+      if (value == _TO_BE_REMOVED) {
+        node.attributes.remove(attrName);
+      } else {
+        node.attributes[attrName] = value;
+      }
+    });
+    _attributesToUpdate.clear();
   }
 }
diff --git a/test/_specs.dart b/test/_specs.dart
index 6ff226ab1..b7670e67a 100644
--- a/test/_specs.dart
+++ b/test/_specs.dart
@@ -78,7 +78,15 @@ class Expect {
                  true,
                  reason: 'method invoked once with correct arguments. (Called ${actual.count} times)');
 
-  toHaveClass(cls) => unit.expect(actual.classes.contains(cls), true, reason: ' Expected ${actual} to have css class ${cls}');
+  toHaveClass(cls) => unit.expect(actual.classes.contains(cls), true, reason: 'Expected $actual to have css class "$cls"');
+  toHaveAttribute(name, [value = null]) {
+    unit.expect(actual.attributes.containsKey(name), true,
+        reason: 'Epxected $actual to have attribute $name');
+    if (value != null) {
+      unit.expect(actual.attributes[name], value,
+          reason: 'Epxected $actual attribute "$name" to be "$value"');
+    }
+  }
 
   toEqualSelect(options) {
     var actualOptions = [];
@@ -162,7 +170,9 @@ class NotExpect {
   toHaveBeenCalled() => unit.expect(actual.called, false, reason: 'method called');
   toThrow() => actual();
 
-  toHaveClass(cls) => unit.expect(actual.classes.contains(cls), false, reason: ' Expected ${actual} to not have css class ${cls}');
+  toHaveClass(cls) => unit.expect(actual.classes.contains(cls), false, reason: ' Expected $actual to not have css class "$cls"');
+  toHaveAttribute(name) => unit.expect(actual.attributes.containsKey(name),
+      false, reason: ' Expected $actual to not have attribute "$name"');
   toBe(expected) => unit.expect(actual,
       unit.predicate((actual) => !identical(expected, actual), 'not $expected'));
   toEqual(expected) => unit.expect(actual,
diff --git a/test/core_dom/ng_element_spec.dart b/test/core_dom/ng_element_spec.dart
index d497b06bd..3d5d23515 100644
--- a/test/core_dom/ng_element_spec.dart
+++ b/test/core_dom/ng_element_spec.dart
@@ -6,75 +6,143 @@ import 'dart:html' as dom;
 void main() {
   describe('ngElement', () {
 
-    it('should add classes on domWrite to the element',
-      (TestBed _, NgAnimate animate) {
+    describe('classes', () {
+      it('should add classes to the element on domWrite',
+          (TestBed _, NgAnimate animate) {
+
+        var scope = _.rootScope;
+        var element = e('<div></div>');
+        var ngElement = new NgElement(element, scope, animate);
+
+        ngElement..addClass('one')..addClass('two three');
+
+        ['one', 'two', 'three'].forEach((className) {
+          expect(element).not.toHaveClass(className);
+        });
+
+        scope.apply();
+
+        ['one', 'two', 'three'].forEach((className) {
+          expect(element).toHaveClass(className);
+        });
+      });
+
+      it('should remove classes from the element on domWrite',
+          (TestBed _, NgAnimate animate) {
+
+        var scope = _.rootScope;
+        var element = e('<div class="one two three four"></div>');
+        var ngElement = new NgElement(element, scope, animate);
+
+        ngElement..removeClass('one')
+                 ..removeClass('two')
+                 ..removeClass('three');
+
+        ['one', 'two', 'three', 'four'].forEach((className) {
+          expect(element).toHaveClass(className);
+        });
+
+        scope.apply();
+
+        ['one', 'two', 'three'].forEach((className) {
+          expect(element).not.toHaveClass(className);
+        });
+        expect(element).toHaveClass('four');
+      });
+
+      it('should always apply the last dom operation on the given className',
+          (TestBed _, NgAnimate animate) {
+
+        var scope = _.rootScope;
+        var element = e('<div></div>');
+        var ngElement = new NgElement(element, scope, animate);
+
+        ngElement..addClass('one')
+                 ..addClass('one')
+                 ..removeClass('one');
+
+        expect(element).not.toHaveClass('one');
+
+        scope.apply();
+
+        expect(element).not.toHaveClass('one');
+
+        ngElement..removeClass('one')
+                 ..removeClass('one')
+                 ..addClass('one');
+
+        scope.apply();
+
+        expect(element.classes.contains('one')).toBe(true);
+      });
+    });
+  });
+
+  describe('attributes', () {
+    it('should set attributes on domWrite to the element',
+        (TestBed _, NgAnimate animate) {
 
       var scope = _.rootScope;
-      var element = _.compile('<div></div>');
+      var element = e('<div></div>');
       var ngElement = new NgElement(element, scope, animate);
 
-      ngElement.addClass('one');
-      ngElement.addClass('two three');
+      ngElement.setAttribute('id', 'foo');
+      ngElement.setAttribute('title', 'bar');
 
-      ['one','two','three'].forEach((className) {
-        expect(element.classes.contains(className)).toBe(false);
+      ['id', 'title'].forEach((name) {
+        expect(element).not.toHaveAttribute(name);
       });
 
       scope.apply();
 
-      ['one','two','three'].forEach((className) {
-        expect(element.classes.contains(className)).toBe(true);
-      });
+      expect(element).toHaveAttribute('id', 'foo');
+      expect(element).toHaveAttribute('title', 'bar');
     });
 
-    it('should remove classes on domWrite to the element',
-      (TestBed _, NgAnimate animate) {
+    it('should remove attributes from the element on domWrite ',
+        (TestBed _, NgAnimate animate) {
 
       var scope = _.rootScope;
-      var element = _.compile('<div class="one two three four"></div>');
+      var element = e('<div id="foo" title="bar"></div>');
       var ngElement = new NgElement(element, scope, animate);
 
-      ngElement.removeClass('one');
-      ngElement.removeClass('two');
-      ngElement.removeClass('three');
+      ngElement..removeAttribute('id')
+               ..removeAttribute('title');
 
-      ['one','two','three'].forEach((className) {
-        expect(element.classes.contains(className)).toBe(true);
-      });
-      expect(element.classes.contains('four')).toBe(true);
+      expect(element).toHaveAttribute('id', 'foo');
+      expect(element).toHaveAttribute('title', 'bar');
 
       scope.apply();
 
-      ['one','two','three'].forEach((className) {
-        expect(element.classes.contains(className)).toBe(false);
-      });
-      expect(element.classes.contains('four')).toBe(true);
+      expect(element).not.toHaveAttribute('id');
+      expect(element).not.toHaveAttribute('title');
     });
 
-    it('should always apply the last dom operation on the given className',
-      (TestBed _, NgAnimate animate) {
+    it('should always apply the last operation on the attribute',
+        (TestBed _, NgAnimate animate) {
 
       var scope = _.rootScope;
-      var element = _.compile('<div></div>');
+      var element = e('<div></div>');
       var ngElement = new NgElement(element, scope, animate);
 
-      ngElement.addClass('one');
-      ngElement.addClass('one');
-      ngElement.removeClass('one');
+      ngElement..setAttribute('id', 'foo')
+               ..setAttribute('id', 'foo')
+               ..removeAttribute('id');
 
-      expect(element.classes.contains('one')).toBe(false);
+      expect(element).not.toHaveAttribute('id');
 
       scope.apply();
 
-      expect(element.classes.contains('one')).toBe(false);
+      expect(element).not.toHaveAttribute('id');
+
+      ngElement..removeAttribute('id')
+               ..setAttribute('id', 'foobar')
+               ..setAttribute('id', 'foo');
 
-      element.classes.add('one');
+      scope.apply();
 
-      ngElement.removeClass('one');
-      ngElement.removeClass('one');
-      ngElement.addClass('one');
+      expect(element).toHaveAttribute('id', 'foo');
 
-      expect(element.classes.contains('one')).toBe(true);
     });
   });
 }

From 99ba3030d668fbb05479be6212a2a87774431f07 Mon Sep 17 00:00:00 2001
From: Victor <victor@suumit.com>
Date: Wed, 19 Mar 2014 18:01:12 +0100
Subject: [PATCH 4/7] refactor(ngSrcBoolean): Remove usage of NodeAttrs

---
 lib/directive/ng_src_boolean.dart | 39 ++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/lib/directive/ng_src_boolean.dart b/lib/directive/ng_src_boolean.dart
index f2d57ead6..b1c1fabb4 100644
--- a/lib/directive/ng_src_boolean.dart
+++ b/lib/directive/ng_src_boolean.dart
@@ -5,7 +5,7 @@ part of angular.directive;
  *
  * Using `<button disabled="{{false}}">` does not work since it would result
  * in `<button disabled="false">` rather than `<button>`.
- * Browsers change behavior based on presence/absence of attribute rather the
+ * Browsers change behavior based on presence/absence of the attribute rather
  * its value.
  *
  * For this reason we provide alternate `ng-`attribute directives to
@@ -30,18 +30,25 @@ part of angular.directive;
 @NgDirective(selector: '[ng-required]', map: const {'ng-required': '=>required'})
 @NgDirective(selector: '[ng-selected]', map: const {'ng-selected': '=>selected'})
 class NgBooleanAttributeDirective {
-  final NodeAttrs attrs;
-  NgBooleanAttributeDirective(this.attrs);
+  final NgElement _ngElement;
 
-  _setBooleanAttribute(name, value) => attrs[name] = (toBool(value) ? '' : null);
+  NgBooleanAttributeDirective(this._ngElement);
 
-  set checked(value)   => _setBooleanAttribute('checked',  value);
-  set disabled(value)  => _setBooleanAttribute('disabled', value);
-  set multiple(value)  => _setBooleanAttribute('multiple', value);
-  set open(value)      => _setBooleanAttribute('open',     value);
-  set readonly(value)  => _setBooleanAttribute('readonly', value);
-  set required(value)  => _setBooleanAttribute('required', value);
-  set selected(value)  => _setBooleanAttribute('selected', value);
+  void set checked(on)  => _toggleAttribute('checked',  on);
+  void set disabled(on) => _toggleAttribute('disabled', on);
+  void set multiple(on) => _toggleAttribute('multiple', on);
+  void set open(on)     => _toggleAttribute('open', on);
+  void set readonly(on) => _toggleAttribute('readonly', on);
+  void set required(on) => _toggleAttribute('required', on);
+  void set selected(on) => _toggleAttribute('selected', on);
+
+  void _toggleAttribute(attrName, on) {
+    if (toBool(on)) {
+      _ngElement.setAttribute(attrName);
+    } else {
+      _ngElement.removeAttribute(attrName);
+    }
+  }
 }
 
 /**
@@ -65,12 +72,12 @@ class NgBooleanAttributeDirective {
 @NgDirective(selector: '[ng-src]',    map: const {'ng-src':    '@src'})
 @NgDirective(selector: '[ng-srcset]', map: const {'ng-srcset': '@srcset'})
 class NgSourceDirective {
-  final NodeAttrs attrs;
-  NgSourceDirective(this.attrs);
+  final NgElement _ngElement;
+  NgSourceDirective(this._ngElement);
 
-  set href(value)   => attrs['href']   = value;
-  set src(value)    => attrs['src']    = value;
-  set srcset(value) => attrs['srcset'] = value;
+  void set href(value)   => _ngElement.setAttribute('href', value);
+  void set src(value)    => _ngElement.setAttribute('src', value);
+  void set srcset(value) => _ngElement.setAttribute('srcset', value);
 
 }
 

From e732faa18cea6ad94c53da219965155cb80b6843 Mon Sep 17 00:00:00 2001
From: Victor <victor@suumit.com>
Date: Wed, 19 Mar 2014 19:19:20 +0100
Subject: [PATCH 5/7] refactor(NgPluralize): remove usage of NodeAttrs

---
 lib/directive/ng_pluralize.dart | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/lib/directive/ng_pluralize.dart b/lib/directive/ng_pluralize.dart
index 7335ef5c6..1d25e4074 100644
--- a/lib/directive/ng_pluralize.dart
+++ b/lib/directive/ng_pluralize.dart
@@ -101,6 +101,7 @@ class NgPluralizeDirective {
   Watch _watch;
 
   static final RegExp IS_WHEN = new RegExp(r'^when-(minus-)?.');
+
   static const Map<String, Symbol> SYMBOLS = const {
       'zero'  : #zero,
       'one'   : #one,
@@ -111,11 +112,12 @@ class NgPluralizeDirective {
   };
 
   NgPluralizeDirective(this._scope, this._element, this._interpolate,
-                       this._filters, NodeAttrs attributes) {
-    final whens = attributes['when'] == null
+                       this._filters) {
+    var attrs = _element.attributes;
+    final whens = attrs['when'] == null
         ? <String, String>{}
-        : _scope.eval(attributes['when']);
-    _offset = attributes['offset'] == null ? 0 : int.parse(attributes['offset']);
+        : _scope.eval(attrs['when']);
+    _offset = attrs['offset'] == null ? 0 : int.parse(attrs['offset']);
 
     _element.attributes.keys.where((k) => IS_WHEN.hasMatch(k)).forEach((k) {
       var ruleName = k
@@ -164,7 +166,6 @@ class NgPluralizeDirective {
     }
   }
 
-
   void _setAndWatch(template) {
     if (_watch != null) _watch.remove();
     var expression = _expressionCache.putIfAbsent(template, () =>
@@ -175,4 +176,4 @@ class NgPluralizeDirective {
   void _updateMarkup(text, previousText) {
     if (text != previousText) _element.text = text;
   }
-}
\ No newline at end of file
+}

From 842348a9bef3d1d9867b77e9b9b4c9b90eba4bea Mon Sep 17 00:00:00 2001
From: Victor <victor@suumit.com>
Date: Tue, 1 Apr 2014 17:09:13 +0200
Subject: [PATCH 6/7] refactor(probe): Remove use of NodeAttrs

---
 lib/mock/probe.dart | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/lib/mock/probe.dart b/lib/mock/probe.dart
index 678e3cfcc..a043e13cd 100644
--- a/lib/mock/probe.dart
+++ b/lib/mock/probe.dart
@@ -14,14 +14,15 @@ class Probe implements NgDetachAware {
   final Scope scope;
   final Injector injector;
   final Element element;
-  final NodeAttrs _attrs;
+  String _probeName;
 
-  Probe(this.scope, this.injector, this.element, this._attrs) {
-    scope.rootScope.context[_attrs['probe']] = this;
+  Probe(this.scope, this.injector, this.element) {
+    _probeName = element.attributes['probe'];
+    scope.rootScope.context[_probeName] = this;
   }
 
   void detach() {
-    scope.rootScope.context[_attrs['probe']] = null;
+    scope.rootScope.context[_probeName] = null;
   }
 
   /**

From 8beea2e7aca93c438518399eadc824e8563e0509 Mon Sep 17 00:00:00 2001
From: Victor <victor@suumit.com>
Date: Tue, 1 Apr 2014 20:54:53 +0200
Subject: [PATCH 7/7] refactor(ngclass): use the new change detection

---
 lib/directive/ng_class.dart | 173 +++++++++++++++++++++---------------
 1 file changed, 103 insertions(+), 70 deletions(-)

diff --git a/lib/directive/ng_class.dart b/lib/directive/ng_class.dart
index 996ae17f9..08be9db26 100644
--- a/lib/directive/ng_class.dart
+++ b/lib/directive/ng_class.dart
@@ -67,9 +67,8 @@ part of angular.directive;
     map: const {'ng-class': '@valueExpression'},
     exportExpressionAttrs: const ['ng-class'])
 class NgClassDirective extends _NgClassBase {
-  NgClassDirective(dom.Element element, Scope scope, NodeAttrs attrs,
-                   NgAnimate animate)
-      : super(element, scope, null, attrs, animate);
+  NgClassDirective(NgElement ngElement, Scope scope, NodeAttrs nodeAttrs)
+      : super(ngElement, scope, nodeAttrs);
 }
 
 /**
@@ -103,9 +102,8 @@ class NgClassDirective extends _NgClassBase {
     map: const {'ng-class-odd': '@valueExpression'},
     exportExpressionAttrs: const ['ng-class-odd'])
 class NgClassOddDirective extends _NgClassBase {
-  NgClassOddDirective(dom.Element element, Scope scope, NodeAttrs attrs,
-                      NgAnimate animate)
-      : super(element, scope, 0, attrs, animate);
+  NgClassOddDirective(NgElement ngElement, Scope scope, NodeAttrs nodeAttrs)
+      : super(ngElement, scope, nodeAttrs, 0);
 }
 
 /**
@@ -139,95 +137,130 @@ class NgClassOddDirective extends _NgClassBase {
     map: const {'ng-class-even': '@valueExpression'},
     exportExpressionAttrs: const ['ng-class-even'])
 class NgClassEvenDirective extends _NgClassBase {
-  NgClassEvenDirective(dom.Element element, Scope scope, NodeAttrs attrs,
-                       NgAnimate animate)
-      : super(element, scope, 1, attrs, animate);
+  NgClassEvenDirective(NgElement ngElement, Scope scope, NodeAttrs nodeAttrs)
+      : super(ngElement, scope, nodeAttrs, 1);
 }
 
 abstract class _NgClassBase {
-  final dom.Element element;
-  final Scope scope;
-  final int mode;
-  final NodeAttrs nodeAttrs;
-  final NgAnimate _animate;
-  var previousSet = [];
-  var currentSet = [];
-  Watch _watch;
+  final NgElement _ngElement;
+  final Scope _scope;
+  final int _mode;
+  Watch _watchExpression;
+  Watch _watchPosition;
+  var _previousSet = new Set<String>();
+  var _currentSet = new Set<String>();
+  bool _first = true;
 
-  _NgClassBase(this.element, this.scope, this.mode, this.nodeAttrs,
-               this._animate)
+  _NgClassBase(this._ngElement, this._scope, NodeAttrs nodeAttrs,
+               [this._mode = null])
   {
-    var prevClass;
+    var prevCls;
 
-    nodeAttrs.observe('class', (String newValue) {
-      if (prevClass != newValue) {
-        prevClass = newValue;
-        _handleChange(scope.context[r'$index']);
+    nodeAttrs.observe('class', (String cls) {
+      if (prevCls != cls) {
+        prevCls = cls;
+        _applyChanges(_scope.context[r'$index']);
       }
     });
   }
 
   set valueExpression(expression) {
-    if (_watch != null) _watch.remove();
-    _watch = scope.watch(expression, (current, _) {
-      currentSet = _flatten(current);
-      _handleChange(scope.context[r'$index']);
-    },
-    canChangeModel: false,
-    collection: true);
+    if (_watchExpression != null) _watchExpression.remove();
+    _watchExpression = _scope.watch(expression, (v, _) {
+        _computeChanges(v);
+        _applyChanges(_scope.context[r'$index']);
+      },
+      canChangeModel: false,
+      collection: true);
 
-    if (mode != null) {
-      scope.watch(r'$index', (index, oldIndex) {
-        var mod = index % 2;
-        if (oldIndex == null || mod != oldIndex % 2) {
-          if (mod == mode) {
-            currentSet.forEach((css) => _animate.addClass(element, css));
+    if (_mode != null) {
+      if (_watchPosition != null) _watchPosition.remove();
+      _watchPosition = _scope.watch(r'$index', (idx, previousIdx) {
+        var mod = idx % 2;
+        if (previousIdx == null || mod != previousIdx % 2) {
+          if (mod == _mode) {
+            _currentSet.forEach((cls) => _ngElement.addClass(cls));
           } else {
-            previousSet.forEach((css) => _animate.removeClass(element, css));
+            _previousSet.forEach((cls) => _ngElement.removeClass(cls));
           }
         }
       }, canChangeModel: false);
     }
   }
 
-  _handleChange(index) {
-    if (mode == null || (index != null && index % 2 == mode)) {
-      previousSet.forEach((css) {
-        if (!currentSet.contains(css)) {
-          _animate.removeClass(element, css);
-        } else {
-          element.classes.remove(css);
-        }
+  void _computeChanges(value) {
+    if (value is CollectionChangeRecord) {
+      _computeCollectionChanges(value, _first);
+    } else if (value is MapChangeRecord) {
+      _computeMapChanges(value, _first);
+    } else {
+      if (value is String) {
+        _currentSet..clear()..addAll(value.split(' '));
+      } else if (value == null) {
+        _currentSet.clear();
+      } else {
+        throw 'ng-class expects expression value to be List, Map or String, '
+              'got $value';
+      }
+    }
+
+    _first = false;
+  }
+
+  // todo(vicb) refactor once GH-774 gets fixed
+  void _computeCollectionChanges(CollectionChangeRecord changes, bool first) {
+    if (first) {
+      changes.iterable.forEach((cls) {
+        _currentSet.add(cls);
+      });
+    } else {
+      changes.forEachAddition((AddedItem a) {
+        _currentSet.add(a.item);
+      });
+      changes.forEachRemoval((RemovedItem r) {
+        _currentSet.remove(r.item);
       });
+    }
+  }
 
-      currentSet.forEach((css) {
-        if (!previousSet.contains(css)) {
-          _animate.addClass(element, css);
-        } else {
-          element.classes.add(css);
+  // todo(vicb) refactor once GH-774 gets fixed
+  _computeMapChanges(MapChangeRecord changes, first) {
+    if (first) {
+      changes.map.forEach((cls, active) {
+        if (toBool(active)) _currentSet.add(cls);
+      });
+    } else {
+      changes.forEachChange((ChangedKeyValue kv) {
+        var cls = kv.key;
+        var active = toBool(kv.currentValue);
+        var wasActive = toBool(kv.previousValue);
+        if (active != wasActive) {
+          if (active) {
+            _currentSet.add(cls);
+          } else {
+            _currentSet.remove(cls);
+          }
         }
       });
+      changes.forEachAddition((AddedKeyValue kv) {
+        if (toBool(kv.currentValue)) _currentSet.add(kv.key);
+      });
+      changes.forEachRemoval((RemovedKeyValue kv) {
+        if (toBool(kv.previousValue)) _currentSet.remove(kv.key);
+      });
     }
-
-    previousSet = currentSet;
   }
 
-  static List<String> _flatten(classes) {
-    if (classes == null) return [];
-    if (classes is CollectionChangeRecord) {
-      classes = (classes as CollectionChangeRecord).iterable.toList();
-    }
-    if (classes is List) {
-      return classes
-          .where((String e) => e != null && e.isNotEmpty)
-          .toList(growable: false);
-    }
-    if (classes is MapChangeRecord) classes = (classes as MapChangeRecord).map;
-    if (classes is Map) {
-      return classes.keys.where((key) => toBool(classes[key])).toList();
+  _applyChanges(index) {
+    if (_mode == null || (index != null && index % 2 == _mode)) {
+      _previousSet
+          .where((cls) => cls != null)
+          .forEach((cls) => _ngElement.removeClass(cls));
+      _currentSet
+          .where((cls) => cls != null)
+          .forEach((cls) => _ngElement.addClass(cls));
     }
-    if (classes is String) return classes.split(' ');
-    throw 'ng-class expects expression value to be List, Map or String, '
-          'got $classes';
+
+    _previousSet = _currentSet.toSet();
   }
-}
+}
\ No newline at end of file