feat(core_dom): introduce NgElement

Author: matsko

lib/core_dom/module.dart

@@ -30,6 +30,7 @@ part 'tagging_view_factory.dart';
 part 'template_cache.dart';
 part 'tree_sanitizer.dart';
 part 'walking_compiler.dart';
+part 'ng_element.dart';
 
 class NgCoreDomModule extends Module {
   NgCoreDomModule() {
@@ -58,6 +59,7 @@ class NgCoreDomModule extends Module {
     type(DirectiveMap);
     type(DirectiveSelectorFactory);
     type(ElementBinderFactory);
+    type(NgElement);
   }
 }
 

lib/core_dom/ng_element.dart

@@ -0,0 +1,38 @@
+part of angular.core.dom;
+
+class NgElement {
+
+  final dom.Element node;
+  final Scope _scope;
+  final NgAnimate _animate;
+  final _classes = new Map<String, bool>();
+
+  NgElement(this.node, this._scope, NgAnimate this._animate);
+
+  addClass(String className) {
+    if(_classes.isEmpty) {
+      _listenOnWrite();
+    }
+    _classes[className] = true;
+  }
+
+  removeClass(String className) {
+    if(_classes.isEmpty) {
+      _listenOnWrite();
+    }
+    _classes[className] = false;
+  }
+
+  _listenOnWrite() {
+    _scope.rootScope.domWrite(() => flush());
+  }
+
+  flush() {
+    _classes.forEach((className, status) {
+      status == true
+        ? _animate.addClass(node, className)
+        : _animate.removeClass(node, className);
+    });
+    _classes.clear();
+  }
+}

test/core_dom/ng_element_spec.dart

@@ -0,0 +1,80 @@
+library ng_element_spec;
+
+import '../_specs.dart';
+import 'dart:html' as dom;
+
+void main() {
+  describe('ngElement', () {
+
+    it('should add classes on domWrite to the element',
+      inject((TestBed _, NgAnimate animate) {
+
+      var scope = _.rootScope;
+      var element = _.compile('<div></div>');
+      var ngElement = new NgElement(element, scope, animate);
+
+      ngElement.addClass('one');
+      ngElement.addClass('two three');
+
+      ['one','two','three'].forEach((className) {
+        expect(element.classes.contains(className)).toBe(false);
+      });
+
+      scope.apply();
+
+      ['one','two','three'].forEach((className) {
+        expect(element.classes.contains(className)).toBe(true);
+      });
+    }));
+
+    it('should remove classes on domWrite to the element',
+      inject((TestBed _, NgAnimate animate) {
+
+      var scope = _.rootScope;
+      var element = _.compile('<div class="one two three four"></div>');
+      var ngElement = new NgElement(element, scope, animate);
+
+      ngElement.removeClass('one');
+      ngElement.removeClass('two');
+      ngElement.removeClass('three');
+
+      ['one','two','three'].forEach((className) {
+        expect(element.classes.contains(className)).toBe(true);
+      });
+      expect(element.classes.contains('four')).toBe(true);
+
+      scope.apply();
+
+      ['one','two','three'].forEach((className) {
+        expect(element.classes.contains(className)).toBe(false);
+      });
+      expect(element.classes.contains('four')).toBe(true);
+    }));
+
+    it('should always apply the last dom operation on the given className',
+      inject((TestBed _, NgAnimate animate) {
+
+      var scope = _.rootScope;
+      var element = _.compile('<div></div>');
+      var ngElement = new NgElement(element, scope, animate);
+
+      ngElement.addClass('one');
+      ngElement.addClass('one');
+      ngElement.removeClass('one');
+
+      expect(element.classes.contains('one')).toBe(false);
+
+      scope.apply();
+
+      expect(element.classes.contains('one')).toBe(false);
+
+      element.classes.add('one');
+
+      ngElement.removeClass('one');
+      ngElement.removeClass('one');
+      ngElement.addClass('one');
+
+      expect(element.classes.contains('one')).toBe(true);
+    }));
+  });
+}