remove last of IonicComponent_OLD

ionic/components.js

@@ -3,7 +3,6 @@ export * from 'ionic/components/app/app'
 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/checkbox/checkbox'
 export * from 'ionic/components/content/content'
 export * from 'ionic/components/icon/icon'

ionic/components/aside/aside.js

@@ -1,58 +1,72 @@
-import {EventEmitter, ElementRef, Inject, Parent} from 'angular2/angular2'
+import {EventEmitter, ElementRef} from 'angular2/angular2'
+import {onInit} from 'angular2/src/core/annotations_impl/annotations';
 
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {IonicDirective} from '../../config/component';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import * as types from './extensions/types'
-
+import * as gestures from  './extensions/gestures'
-import * as types from 'ionic/components/aside/extensions/types'
-import * as gestures from  'ionic/components/aside/extensions/gestures'
 import {dom} from 'ionic/util'
-import {IonicComponent_OLD} from 'ionic/config/component'
 
 /**
  * TODO (?) add docs about how to have a root aside and a nested aside, then hide the root one
  */
 
-@Component({
+@IonicDirective(Aside)
-  selector: 'ion-aside',
-  properties: [
-    'content',
-    'side',
-    'dragThreshold'
-  ],
-  events: ['opening']
-})
-@View({
-  template: `<content></content>`
-})
 export class Aside {
-  constructor(
+
-    elementRef: ElementRef
+  static get config() {
-  ) {
+    return {
+      selector: 'ion-aside',
+      properties: [
+        'content',
+        'dragThreshold'
+      ],
+      defaultProperties: {
+        'side': 'left',
+        'type': 'reveal'
+      },
+      delegates: {
+        gesture: [
+          [instance => instance.side == 'top', gestures.TopAsideGesture],
+          [instance => instance.side == 'bottom', gestures.BottomAsideGesture],
+          [instance => instance.side == 'right', gestures.RightAsideGesture],
+          [instance => instance.side == 'left', gestures.LeftAsideGesture],
+        ],
+        type: [
+          [instance => instance.type == 'overlay', types.AsideTypeOverlay],
+          [instance => instance.type == 'reveal', types.AsideTypeReveal],
+          [instance => instance.type == 'push', types.AsideTypePush],
+        ]
+      },
+      events: ['opening']
+    }
+  }
+
+  constructor(elementRef: ElementRef) {
     this.domElement = elementRef.domElement
 
     this.opening = new EventEmitter('opening');
 
-    // FIXME(ajoslin): have to wait for setTimeout for bindings to apply.
+    // TODO: Use Animation Class
-    setTimeout(() => {
-      this.side = this.side || 'left';
-      this.type = this.type || 'reveal';
-
-      this.domElement.setAttribute('side', this.side);
-      this.domElement.setAttribute('type', this.type);
-
-      console.log('Aside content', this.content);
-      this.contentElement = (this.content instanceof Node) ? this.content : this.content.domElement;
-
-      this.config = Aside.config.invoke(this)
-      this.gestureDelegate = this.config.getDelegate('gesture');
-      this.typeDelegate = this.config.getDelegate('type');
-    })
-
     this.domElement.addEventListener('transitionend', ev => {
       this.setChanging(false)
     })
   }
 
+  onInit() {
+    this.side = this.side || 'left';
+    this.type = this.type || 'reveal';
+
+    this.domElement.setAttribute('side', this.side);
+    this.domElement.setAttribute('type', this.type);
+
+    console.log('Aside content', this.content);
+    this.contentElement = (this.content instanceof Node) ? this.content : this.content.domElement;
+
+    Aside.applyConfig(this);
+    this.gestureDelegate = Aside.getDelegate(this, 'gesture');
+    this.typeDelegate = Aside.getDelegate(this, 'type');
+  }
+
   getContentElement() {
     return this.contentElement;
   }
@@ -64,17 +78,20 @@ export class Aside {
   setTransform(transform) {
     this.typeDelegate.setTransform(transform)
   }
+
   setSliding(isSliding) {
     if (isSliding !== this.isSliding) {
       this.typeDelegate.setSliding(isSliding)
     }
   }
+
   setChanging(isChanging) {
     if (isChanging !== this.isChanging) {
       this.isChanging = isChanging
       this.domElement.classList[isChanging ? 'add' : 'remove']('changing');
     }
   }
+
   setOpen(isOpen) {
     if (isOpen !== this.isOpen) {
       this.isOpen = isOpen
@@ -92,37 +109,8 @@ export class Aside {
   open() {
     return this.setOpen(true);
   }
+
   close() {
     return this.setOpen(false);
   }
 }
-
-new IonicComponent_OLD(Aside, {
-  properties: {
-    side: {
-      value: 'left'
-    },
-    type: {
-      defaults: {
-        ios: 'reveal',
-        android: 'overlay',
-        core: 'overlay',
-      }
-    },
-    dragThreshold: {},
-    content: {},
-  },
-  delegates: {
-    gesture: [
-      [instance => instance.side == 'top', gestures.TopAsideGesture],
-      [instance => instance.side == 'bottom', gestures.BottomAsideGesture],
-      [instance => instance.side == 'right', gestures.RightAsideGesture],
-      [instance => instance.side == 'left', gestures.LeftAsideGesture],
-    ],
-    type: [
-      [instance => instance.type == 'overlay', types.AsideTypeOverlay],
-      [instance => instance.type == 'reveal', types.AsideTypeReveal],
-      [instance => instance.type == 'push', types.AsideTypePush],
-    ]
-  }
-})

ionic/components/item/item.js

@@ -2,19 +2,13 @@ import {Renderer, ElementRef} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
+import {ItemPrimaryOptions, ItemSecondaryOptions} from './item-options'
+import {ItemPrimarySwipeButtons, ItemSecondarySwipeButtons} from './item-swipe-buttons'
 import {dom} from 'ionic/util'
-import {IonicComponent_OLD} from 'ionic/config/component'
 
-import {
-  ItemPrimaryOptions, ItemSecondaryOptions
-} from 'ionic/components/item/item-options'
-
-import {
-  ItemPrimarySwipeButtons, ItemSecondarySwipeButtons
-} from 'ionic/components/item/item-swipe-buttons'
 
 @Component({
-  selector: 'ion-item'//,[ion-item]'
+  selector: 'ion-item'
 })
 @View({
   template: `
@@ -45,30 +39,18 @@ import {
   ]
 })
 export class Item {
-  constructor(
+  constructor(elementRef: ElementRef) {
-    elementRef: ElementRef
+    this._isOpen = false;
-  ) {
+    this._isSlideActive = false;
-    this._isOpen = false
+    this._isTransitioning = false;
-    this._isSlideActive = false
+    this._transform = '';
-    this._isTransitioning = false
-    this._transform = ''
 
-    this.domElement = elementRef.domElement
+    this.domElement = elementRef.domElement;
-    this.swipeButtons = {}
+    this.swipeButtons = {};
-    this.optionButtons = {}
+    this.optionButtons = {};
-    Item.config.invoke(this)
   }
 }
 
-new IonicComponent_OLD(Item, {
-  propClasses: ['full']
-})
-
-
-function clsSetter(el, name) {
-  return (isSet) => el.classList[isSet?'add':'remove'](name)
-}
-
 
 class Slideable {
   constructor(slideElement: Element) {

ionic/components/list/list.js

@@ -1,40 +1,37 @@
-import {Renderer, ElementRef} from 'angular2/angular2'
+import {ElementRef} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {onInit} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {IonicComponent_OLD} from 'ionic/config/component'
+import {IonicDirective} from 'ionic/config/component'
 import {ListVirtualScroll} from './virtual'
 
 import * as util from 'ionic/util';
 
 
-@Component({
+@IonicDirective(List)
-  selector: 'ion-list',
-  properties: [
-    'items',
-    'virtual',
-    'content'
-  ]
-})
-@View({
-  template: `<content></content>`
-})
 export class List {
-  constructor(
+
-    elementRef: ElementRef
+  static get config() {
-  ) {
+    return {
+      selector: 'ion-list',
+      properties: [
+        'items',
+        'virtual',
+        'content'
+      ]
+    }
+  }
+
+  constructor(elementRef: ElementRef) {
     this.domElement = elementRef.domElement;
-    this.config = List.config.invoke(this);
+  }
 
-    setTimeout(() => {
+  onInit() {
-
+    if(util.isDefined(this.virtual)) {
-      if(util.isDefined(this.virtual)) {
+      console.log('Content', this.content);
-        console.log('Content', this.content);
+      console.log('Virtual?', this.virtual);
-        console.log('Virtual?', this.virtual);
+      console.log('Items?', this.items.length, 'of \'em');
-        console.log('Items?', this.items.length, 'of \'em');
+      this._initVirtualScrolling();
-        this._initVirtualScrolling();
+    }
-      }
-    })
   }
 
   _initVirtualScrolling() {
@@ -49,6 +46,3 @@ export class List {
     this.itemTemplate = item;
   }
 }
-new IonicComponent_OLD(List, {
-  propClasses: ['inset']
-})

ionic/components/list/list.scss

@@ -27,7 +27,8 @@ $list-margin-bottom:          10px !default;
 
   list-style-type: none;
 
-  &.list-inset {
+  &.list-inset
+  &[inset] {
     margin-top: 0;
     margin-left: -$content-padding;
     margin-right: -$content-padding;

ionic/components/list/test/basic/index.js

@@ -0,0 +1,14 @@
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-view' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

ionic/components/tabs/test/tab-bar-bottom/index.js

@@ -0,0 +1,14 @@
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-view' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

ionic/config/component.js

@@ -74,6 +74,23 @@ function appendModeConfig(ComponentType) {
     }
   };
 
+  if (config.delegates) {
+    ComponentType.getDelegate = (instance, delegateName) => {
+      let cases = config.delegates[delegateName] || [];
+      for (let i = 0; i < cases.length; i++) {
+        let delegateCase = cases[i];
+        if (util.isArray(delegateCase)) {
+          let [ check, DelegateConstructor ] = delegateCase;
+          if (check(instance)) {
+            return new DelegateConstructor(instance);
+          }
+        } else {
+          return new delegateCase(instance);
+        }
+      }
+    };
+  }
+
   config.hostAttributes = config.hostAttributes || {};
   let className = (config.hostAttributes['class'] || '');
   let id = config.classId || config.selector.replace('ion-', '');
@@ -81,104 +98,3 @@ function appendModeConfig(ComponentType) {
 
   return config;
 }
-
-export class IonicComponent_OLD {
-  constructor(ComponentType, {
-    properties,
-    bind,
-    enhanceRawElement,
-    delegates,
-    propClasses
-  }) {
-    // TODO give errors if not providing valid delegates
-    ComponentType.config = this
-    this.componentCssName = util.pascalCaseToDashCase(ComponentType.name)
-
-    this.properties = properties || (properties = {});
-
-    this.bind = bind || (bind = {})
-    for (let attrName in bind) {
-      let binding = bind[attrName]
-      if (util.isObject(binding)) {
-        binding.property || (binding.property = attrName)
-        this._computeDefaultValue(binding)
-        // TODO recompute defaultValue when user possibly adds a binding
-      }
-    }
-
-
-    this.delegates = delegates || (delegates = {})
-    this.propClasses = propClasses || (propClasses = []);
-
-    // Whether to support raw element enhancement (for example, supporting <button>).
-    // We only do this if there is a matching style property on the element
-    this.enhanceRawElement = enhanceRawElement || false;
-
-    // for (let delegateName of delegates) {
-    //   let delegate = delegates[delegateName]
-    // }
-  }
-  _computeDefaultValue(binding = {}) {
-    let defaults = binding.defaults || {}
-    binding._defaultValue = binding.value || defaults[platformMode] || defaults.base;
-  }
-
-  invoke(instance) {
-    const config = this;
-
-    // For each property class, check if it exists on the element and add the
-    // corresponding classname for it, otherwise add it
-    let foundMatchingPropClass = false;
-    for (let propClass of this.propClasses) {
-      if(dom.hasAttribute(instance.domElement, propClass)) {
-        dom.addClass(instance.domElement, `${this.componentCssName}-${propClass}`);
-        foundMatchingPropClass = true;
-      }
-    }
-
-    // TODO: This worked fine for property-only buttons, but breaks with
-    // class, etc.
-    //
-    // If we want to enhance a raw element (for example, a button),
-    // only do it if we also have a matching prop class
-    //if(!foundMatchingPropClass && this.enhanceRawElement) {
-      // Don't enhace this raw element
-      //return;
-    //}
-
-    // Add the base element classes (ex, button and button-ios)
-    dom.addClass(instance.domElement, this.componentCssName, `${this.componentCssName}-${platformMode}`);
-
-    // Check and apply and property classes (properties that should be
-    // converted to class names). For example, <button primary> should
-    // add the class button-primary
-
-    for (let attrName in this.bind) {
-      let binding = this.bind[attrName]
-      let defaultValue = binding._defaultValue
-      if (!instance[binding.property] && defaultValue) {
-        instance[binding.property] = defaultValue
-        instance.domElement.setAttribute(util.pascalCaseToDashCase(attrName), defaultValue)
-      }
-    }
-
-    return {
-      properties: this.properties,
-      getDelegate(delegateName) {
-        let cases = (config.delegates || {})[delegateName] || [];
-        for (let i = 0; i < cases.length; i++) {
-          let delegateCase = cases[i];
-          if (util.isArray(delegateCase)) {
-            let [ check, DelegateConstructor ] = delegateCase;
-            if (check(instance)) {
-              return new DelegateConstructor(instance);
-            }
-          } else {
-            return new delegateCase(instance);
-          }
-        }
-      }
-    }
-  }
-
-}