From 615cd7eaeb8a0cbbd1bb53b3e0e02045d6d88223 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Mon, 4 May 2015 13:14:55 -0500 Subject: [PATCH] Some DOM abstractions --- ionic/components.js | 2 +- ionic/components/button/test/basic/main.js | 2 +- ionic/config/component.js | 9 ++++---- ionic/ionic.js | 5 ++-- ionic/util/dom.js | 14 +++++++++++ ionic/util/render.js | 25 -------------------- ionic/util/render/dom.js | 27 ++++++++++++++++++++++ ionic/util/render/element.js | 14 ++++++----- 8 files changed, 59 insertions(+), 39 deletions(-) delete mode 100644 ionic/util/render.js diff --git a/ionic/components.js b/ionic/components.js index f0be698d79..383d62ea7e 100644 --- a/ionic/components.js +++ b/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' diff --git a/ionic/components/button/test/basic/main.js b/ionic/components/button/test/basic/main.js index 246377113e..fccc6cccec 100644 --- a/ionic/components/button/test/basic/main.js +++ b/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({ diff --git a/ionic/config/component.js b/ionic/config/component.js index 20754a2c6d..b5b188896b 100644 --- a/ionic/config/component.js +++ b/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)) { - instance.domElement.classList.add(`${this.componentCssName}-${propClass}`) + if(dom.hasAttribute(instance.domElement, propClass)) { + dom.addClass(instance.domElement, `${this.componentCssName}-${propClass}`); } } diff --git a/ionic/ionic.js b/ionic/ionic.js index 7dd12d7fb7..6af086f261 100644 --- a/ionic/ionic.js +++ b/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, { diff --git a/ionic/util/dom.js b/ionic/util/dom.js index 4802be59e8..2e3ad5168a 100644 --- a/ionic/util/dom.js +++ b/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); + } +} diff --git a/ionic/util/render.js b/ionic/util/render.js deleted file mode 100644 index 4b66e6d6e6..0000000000 --- a/ionic/util/render.js +++ /dev/null @@ -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); - } - } -} -*/ diff --git a/ionic/util/render/dom.js b/ionic/util/render/dom.js index e69de29bb2..a2cacf40a3 100644 --- a/ionic/util/render/dom.js +++ b/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); + } + } +} +*/ diff --git a/ionic/util/render/element.js b/ionic/util/render/element.js index 68f95a6384..a997b21405 100644 --- a/ionic/util/render/element.js +++ b/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'); } - removeClasses(className) { this._notImplemented('removeClasses'); } + addClasses(...classNames) { this._notImplemented('addClasses'); } + removeClasses(...classNames) { this._notImplemented('removeClasses'); } } -*/ + + */