Some DOM abstractions

ionic/components.js

@@ -2,7 +2,7 @@
 // export * from 'ionic/components/action-menu/action-menu'
 // export * from 'ionic/components/alert/alert'
 export * from 'ionic/components/aside/aside'
-// export * from 'ionic/components/button/button'
+export * from 'ionic/components/button/button'
 // export * from 'ionic/components/checkbox/checkbox'
 export * from 'ionic/components/content/content'
 // export * from 'ionic/components/icon/icon'

ionic/components/button/test/basic/main.js

@@ -1,5 +1,5 @@
 import {Component, View, bootstrap} from 'angular2/angular2'
-import {Button} from 'ionic/ionic'
+import {Button} from 'ionic/components/button/button'
 
 @Component({ selector: '[ion-app]' })
 @View({

ionic/config/component.js

@@ -1,4 +1,5 @@
 import * as util from 'ionic/util'
+import {dom} from 'ionic/util'
 import {Platform} from 'ionic/platform/platform'
 
 let platformMode = Platform.getMode();
@@ -41,14 +42,14 @@ export class IonicComponent {
 
   invoke(instance) {
     const config = this
-    instance.domElement.classList.add(this.componentCssName)
+
-    instance.domElement.classList.add(`${this.componentCssName}-${platformMode}`)
+    dom.addClasses(instance.domElement, this.componentCssName, `${this.componentCssName}-${platformMode}`);
 
     // For each property class, check if it exists on the element and add the
     // corresponding classname for it
     for (let propClass of this.propClasses) {
-      if(instance.domElement.hasAttribute(propClass)) {
+      if(dom.hasAttribute(instance.domElement, propClass)) {
-        instance.domElement.classList.add(`${this.componentCssName}-${propClass}`)
+        dom.addClass(instance.domElement, `${this.componentCssName}-${propClass}`);
       }
     }
 

ionic/ionic.js

@@ -3,20 +3,21 @@ import {NgElement, ViewContainer} from 'angular2/angular2'
 
 //import {DomRenderedElement} from 'ionic/util/render/dom';
 
+/*
 Object.defineProperties(NgElement.prototype, {
-  /*
   renderElement: {
     get: function() {
       return new DomRenderedElement(this._view.render.delegate.boundElements[this._boundElementIndex]);
     }
   },
-  */
   domElement: {
     get: function() {
+      console.log('GETTING DOM ELEMENT');
       return this._view.render.delegate.boundElements[this._boundElementIndex];
     }
   }
 });
+*/
 
 /*
 Object.defineProperties(ViewContainer.prototype, {

ionic/util/dom.js

@@ -98,3 +98,17 @@ export function windowLoad() {
     }
   });
 }
+
+export function hasAttribute(el: Element, attributeName) {
+  return el.hasAttribute(attributeName);
+}
+
+export function addClass(el: Element, className) {
+  el.classList.add(className);
+}
+
+export function addClasses(el: Element, ...classNames) {
+  for(let c of classNames) {
+    el.classList.add(c);
+  }
+}

ionic/util/render.js

@@ -1,25 +0,0 @@
-/*
-import {RenderedElement} from 'ionic/util/render/element';
-
-export class DomRenderedElement extends RenderedElement {
-  constructor(domElement: Element) {
-    super(domElement)
-  }
-  addClass(className) {
-    this.element.classList.add(classList);
-  }
-  removeClass(className) {
-    this.element.classList.remove(classList);
-  }
-  addClasses(classes) {
-    for(let c of classes) {
-      this.element.classList.add(c);
-    }
-  }
-  removeClasses(classes) {
-    for(let c of classes) {
-      this.element.classList.remove(c);
-    }
-  }
-}
-*/

ionic/util/render/dom.js

@@ -0,0 +1,27 @@
+/**
+ * TODO: Wait until the new ElementRef stuff lands in Angular2.
+import {RenderedElement} from 'ionic/util/render/element';
+
+export class DomRenderedElement extends RenderedElement {
+  constructor(domElement: Element) {
+    super(domElement)
+  }
+
+  addClass(className) {
+    this.element.classList.add(classList);
+  }
+  removeClass(className) {
+    this.element.classList.remove(classList);
+  }
+  addClasses(...classNames) {
+    for(let c of classNames) {
+      this.element.classList.add(c);
+    }
+  }
+  removeClasses(...classNames) {
+    for(let c of classes) {
+      this.element.classList.remove(c);
+    }
+  }
+}
+*/

ionic/util/render/element.js

@@ -1,14 +1,16 @@
-/*
+/**
-class RenderedElement {
+ * TODO: Wait until the new ElementRef stuff lands in Angular2
+export class RenderedElement {
   constructor(element) {
     this.element = element;
-  }
+}
   _notImplemented(fnName) {
     console.error("RenderedElement." + fnName + "addClass is not implemented. Use a concrete class like DomRenderedElement instead.");
   }
   addClass(className)       { this._notImplemented('addClass'); }
   removeClass(className)    { this._notImplemented('removeClass'); }
-  addClasses(className)     { this._notImplemented('addClasses'); }
+  addClasses(...classNames)     { this._notImplemented('addClasses'); }
-  removeClasses(className)  { this._notImplemented('removeClasses'); }
+  removeClasses(...classNames)  { this._notImplemented('removeClasses'); }
 }
-*/
+
+ */