add a left sidemenu to tabs example

src/components/aside/aside.scss

@@ -8,7 +8,7 @@ $aside-transition: 0.3s linear transform;
 
   background: #eee;
 
-  &.type-overlay {
+  &[type=overlay] {
     z-index: 10;
   }
 

src/components/aside/extensions/types.js

@@ -27,14 +27,12 @@ const contentManipulator = {
 }
 
 export class AsideType {
-  constructor(aside) {
+  constructor(aside: Aside) {
     this.aside = aside;
 
-    aside.domElement.classList.add(`type-${aside.type}`);
-
     //FIXME(ajoslin): have to wait for for bindings to apply in a component
     setTimeout(() => {
-      this.aside.content.domElement.classList.add('aside-content')
+      aside.content.domElement.classList.add('aside-content')
     })
   }
 }

src/components/aside/gestures/gestures.js

@@ -1,92 +0,0 @@
-import {Aside} from 'ionic2/components/aside/aside';
-//TODO: figure out way to get rid of all the ../../../../
-import {SlideEdgeGesture} from 'ionic2/gestures/slide-edge-gesture';
-
-class AsideGesture extends SlideEdgeGesture {
-  constructor(aside: Aside) {
-    // TODO figure out the sliding element, dont just use the parent
-    let slideElement = aside.domElement.parentNode;
-    super(slideElement, {
-      direction: (aside.side === 'left' || aside.side === 'right') ? 'x' : 'y',
-      edge: aside.side,
-      threshold: 75
-    });
-    this.aside = aside;
-    this.slideElement = slideElement;
-    this.listen();
-  }
-  
-  canStart(ev) {
-    // Only restrict edges if the aside is closed
-    return this.aside.isOpen ? true : super.canStart(ev);
-  }
-
-  // Set CSS, then wait one frame for it to apply before sliding starts
-  onSlideBeforeStart(slide, ev) {
-    this.aside.setSliding(true);
-    this.aside.setChanging(true);
-    return new Promise(resolve => {
-      requestAnimationFrame(resolve);
-    });
-  }
-  onSlide(slide, ev) {
-    this.aside.setTransform('translate3d(' + slide.distance + 'px,0,0)');
-  }
-  onSlideEnd(slide, ev) {
-    this.aside.setTransform('');
-    this.aside.setSliding(false);
-    if (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
-      this.aside.setOpen(!this.aside.isOpen);
-    }
-  }
-
-  getElementStartPos(slide, ev) {
-    return this.aside.isOpen ? slide.max : slide.min;
-  }
-  getSlideBoundaries() {
-    return {
-      min: 0,
-      max: this.aside.domElement.offsetWidth
-    };
-  }
-}
-
-export class LeftAsideGesture extends AsideGesture {}
-
-export class RightAsideGesture extends LeftAsideGesture {
-  getElementStartPos(slide, ev) {
-    return this.aside.isOpen ? slide.min : slide.max;
-  }
-  getSlideBoundaries() {
-    return {
-      min: -this.aside.domElement.offsetWidth,
-      max: 0
-    };
-  }
-
-}
-
-export class TopAsideGesture extends AsideGesture {
-  onSlide(slide, ev) {
-    this.aside.setTransform('translate3d(0,' + slide.distance + 'px,0)');
-  }
-  getSlideBoundaries() {
-    return {
-      min: 0,
-      max: this.aside.domElement.offsetHeight
-    };
-  }
-}
-
-export class BottomAsideGesture extends TopAsideGesture {
-  getElementStartPos(slide, ev) {
-    return this.aside.isOpen ? slide.min : slide.max;
-  }
-  getSlideBoundaries() {
-    return {
-      min: -this.aside.domElement.offsetHeight,
-      max: 0
-    };
-  }
-}
-

src/components/aside/types/types.js

@@ -1,80 +0,0 @@
-import {Aside} from 'ionic2/components/aside/aside';
-
-// TODO use setters instead of direct dom manipulation
-const asideManipulator = {
-  setSliding(sliding) {
-    this.aside.domElement.classList[sliding ? 'add' : 'remove']('no-transition');
-  },
-  setOpen(open) {
-    this.aside.domElement.classList[open ? 'add' : 'remove']('open');
-  },
-  setTransform(t) {
-    this.aside.domElement.style.transform = t;
-  }
-}
-const contentManipulator = {
-  setSliding(sliding) {
-    this.aside.content.domElement.classList[sliding ? 'add' : 'remove']('no-transition');
-  },
-  setOpen(open) {
-    this.aside.content.domElement.classList[open ? 'add' : 'remove'](
-      `aside-open-${this.aside.side}`
-    )
-  },
-  setTransform(t) {
-    this.aside.content.domElement.style.transform = t;
-  }
-}
-
-export class AsideType {
-  constructor(aside) {
-    this.aside = aside;
-
-    aside.domElement.classList.add(`type-${aside.type}`);
-
-    //FIXME(ajoslin): have to wait for for bindings to apply in a component
-    setTimeout(() => {
-      this.aside.content.domElement.classList.add('aside-content')
-    })
-  }
-}
-
-export class AsideTypeOverlay extends AsideType {
-  setSliding(sliding) {
-    asideManipulator.setSliding.call(this, sliding);
-  }
-  setOpen(open) {
-    asideManipulator.setOpen.call(this, open);
-  }
-  setTransform(t) {
-    asideManipulator.setTransform.call(this, t);
-  }
-}
-
-export class AsideTypePush extends AsideType {
-  setSliding(sliding) {
-    asideManipulator.setSliding.call(this, sliding);
-    contentManipulator.setSliding.call(this, sliding);
-  }
-  setOpen(open) {
-    asideManipulator.setOpen.call(this, open);
-    contentManipulator.setOpen.call(this, open);
-  }
-  setTransform(t) {
-    asideManipulator.setTransform.call(this, t);
-    contentManipulator.setTransform.call(this, t);
-  }
-}
-
-export class AsideTypeReveal extends AsideType {
-  setSliding(sliding) {
-    contentManipulator.setSliding.call(this, sliding);
-  }
-  setOpen(sliding) {
-    asideManipulator.setOpen.call(this, sliding);
-    contentManipulator.setOpen.call(this, sliding);
-  }
-  setTransform(t) {
-    contentManipulator.setTransform.call(this, t);
-  }
-}

src/components/tabs/test/advanced/main.html

@@ -0,0 +1,5 @@
+<ion-aside side="left" [content]="viewport">
+  Hello!
+</ion-aside>
+<ion-nav-viewport #viewport [initial]="initial">
+</ion-nav-viewport>

src/components/tabs/test/advanced/main.js

@@ -1,13 +1,13 @@
 import {Component, Template, bootstrap} from 'angular2/angular2'
-import {NavViewport} from 'ionic2/components'
+import {NavViewport, Aside} from 'ionic2/components'
 import {SignInPage} from 'app/pages/sign-in'
 
 @Component({
   selector: '[ion-app]'
 })
 @Template({
-  inline: '<ion-nav-viewport [initial]="initial"></ion-nav-viewport>',
+  url: 'main.html',
-  directives: [NavViewport]
+  directives: [NavViewport, Aside]
 })
 class App {
   constructor() {

src/config/component.js

@@ -38,7 +38,7 @@ export class IonicComponent {
   }
 
   invoke(instance) {
-    let config = this
+    const config = this
     instance.domElement.classList.add(this.componentCssName)
     instance.domElement.classList.add(`${this.componentCssName}-${platformName}`)
 
@@ -53,13 +53,16 @@ export class IonicComponent {
 
     return {
       getDelegate(delegateName) {
-        let cases = (config.delegates || {})[delegateName] || []
+        let cases = (config.delegates || {})[delegateName] || [];
         for (let i = 0; i < cases.length; i++) {
-          let delegateCase = cases[i]
+          let delegateCase = cases[i];
           if (util.isArray(delegateCase)) {
-            if (delegateCase[0](instance)) return new delegateCase[1](instance)
+            let [ check, DelegateConstructor ] = delegateCase;
+            if (check(instance)) {
+              return new DelegateConstructor(instance);
+            }
           } else {
-            return new delegateCase(instance)
+            return new delegateCase(instance);
           }
         }
       }