Aside left working better

ionic/components/aside/aside.js

@@ -27,6 +27,9 @@ export class Aside {
 
     // FIXME(ajoslin): have to wait for setTimeout for bindings to apply.
     setTimeout(() => {
+      this.side = this.side || 'left';
+      this.type = this.type || 'push';
+
       this.config = Aside.config.invoke(this)
       this.gestureDelegate = this.config.getDelegate('gesture');
       this.typeDelegate = this.config.getDelegate('type');
@@ -37,6 +40,18 @@ export class Aside {
     })
   }
 
+  getContentElement() {
+    return this.content.domElement;
+  }
+
+  setOpenX(x) {
+    this.openX = x;
+  }
+
+  setOpenY(y) {
+    this.openY = y;
+  }
+
   setTransform(transform) {
     this.typeDelegate.setTransform(transform)
   }
@@ -55,6 +70,11 @@ export class Aside {
     if (isOpen !== this.isOpen) {
       this.isOpen = isOpen
       this.setChanging(true)
+
+      // TODO: Abstract this away
+      // Set 100% X
+      //this.x = this.gestureDelegate.getSlideBoundaries().max;
+
       return dom.rafPromise().then(() => {
         this.typeDelegate.setOpen(isOpen)
       })

ionic/components/aside/aside.scss

@@ -17,18 +17,18 @@ $aside-transition: 0.3s linear transform;
     display: none;
   }
 
-  &[side=left] {
+  //&[side=left] {
-    width: $aside-width;
+  width: $aside-width;
-    left: -$aside-width;
+  left: -$aside-width;
-    top: 0;
+  top: 0;
-    bottom: 0;
+  bottom: 0;
 
-    transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
-    &.open,
+  &.open,
-    &[type=reveal] {
+  &[type=reveal] {
-      transform: translate3d($aside-width,0,0);
+    transform: translate3d($aside-width,0,0);
-    }
   }
+  //}
   &[side=right] {
     width: $aside-width;
     left: 100%;

ionic/components/aside/extensions/gestures.js

@@ -5,7 +5,7 @@ import {SlideEdgeGesture} from 'ionic/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;
+    let slideElement = aside.getContentElement();
     super(slideElement, {
       direction: (aside.side === 'left' || aside.side === 'right') ? 'x' : 'y',
       edge: aside.side,
@@ -30,6 +30,7 @@ class AsideGesture extends SlideEdgeGesture {
     });
   }
   onSlide(slide, ev) {
+    this.aside.setOpenX(slide.distance);
     this.aside.setTransform('translate3d(' + slide.distance + 'px,0,0)');
   }
   onSlideEnd(slide, ev) {

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

@@ -2,14 +2,14 @@ import {bootstrap} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Aside} from 'ionic/components/aside/aside';
+import {Aside, List, Item, Content, Button} from 'ionic/ionic';
 
 
 @Component({
   selector: 'ion-app'
 })
 @View({
-  directives: [Aside, Content],
+  directives: [Aside, Content, List, Item],
   templateUrl: 'main.html'
 })
 class IonicApp {

ionic/components/aside/test/basic/main.html

@@ -1,19 +1,36 @@
 <ion-view>
-  <ion-aside [content]="content" style="text-align:center;">
+  <ion-aside [content]="content" style="background-color: red">
-    Left!
+    <!--
-    <p>...</p>
+    <ion-list inset>
-    <p>...</p>
+      <div class="list-header">
-    <p>...</p>
+        Menu
+      </div>
+      <ion-item>
+        About
+      </ion-item>
+      <ion-item>
+        Specials
+      </ion-item>
+      <ion-item>
+        Beer
+      </ion-item>
+      <ion-item>
+        Potatoes
+      </ion-item>
+    </ion-list>
+  -->
   </ion-aside>
 
   <ion-content #content>
-    HELLO, content!
+
   </ion-content>
 
-  <ion-aside side="right" [content]="content" style="text-align:center;">
+  <!--
+  <ion-aside side="right" [content]="content" style="background-color: green">
     Right!
     <p>...</p>
     <p>...</p>
     <p>...</p>
   </ion-aside>
+-->
 </ion-view>

ionic/components/content/content.js

@@ -16,7 +16,8 @@ import {View} from 'angular2/src/core/annotations_impl/view';
     </div>`
 })
 export class Content {
-  constructor() {
+  constructor(elementRef: ElementRef) {
+    this.domElement = elementRef.domElement;
     //this.contentClass = true;
     console.log('Content!');
   }

ionic/components/item/item-swipe-buttons.js

@@ -1,17 +1,18 @@
-import {Parent, NgElement, Decorator} from 'angular2/angular2'
+import {ElementRef, Parent} from 'angular2/angular2'
+import {Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {Item} from 'ionic/components/item/item'
 import {SlideGesture} from 'ionic/gestures/slide-gesture'
 
-@Decorator({
+@Directive({
   selector: 'ion-primary-swipe-buttons'
 })
 export class ItemPrimarySwipeButtons {
   constructor(
-    @NgElement() element: NgElement,
+    elementRef: ElementRef,
     @Parent() item: Item
   ) {
     item.primarySwipeButtons = this
-    this.domElement = element.domElement
+    this.domElement = elementRef.domElement
     this.parentItem = item
     this.gesture = new ItemSlideGesture(this)
     this.gesture.listen()
@@ -27,7 +28,7 @@ export class ItemPrimarySwipeButtons {
   }
 }
 
-@Decorator({
+@Directive({
   selector: 'ion-secondary-swipe-buttons'
 })
 export class ItemSecondarySwipeButtons {
@@ -38,7 +39,7 @@ class ItemSlideGesture extends SlideGesture {
     super(buttons.parentItem.domElement)
     this.buttons = buttons
   }
-  
+
   getSlideBoundaries() {
     return {
       min: -this.buttons.domElement.offsetWidth,

ionic/components/item/item.js

@@ -1,4 +1,6 @@
-import {NgElement, Component, View} from 'angular2/angular2'
+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 {dom} from 'ionic/util'
 import {IonicComponent} from 'ionic/config/component'
@@ -12,7 +14,7 @@ import {
 } from 'ionic/components/item/item-swipe-buttons'
 
 @Component({
-  selector: 'ion-item,[ion-item]'
+  selector: 'ion-item'//,[ion-item]'
 })
 @View({
   template: `
@@ -40,14 +42,14 @@ import {
 })
 export class Item {
   constructor(
-    @NgElement() ele:NgElement
+    elementRef: ElementRef
   ) {
     this._isOpen = false
     this._isSlideActive = false
     this._isTransitioning = false
     this._transform = ''
 
-    this.domElement = ele.domElement
+    this.domElement = elementRef.domElement
     this.swipeButtons = {}
     this.optionButtons = {}
     Item.config.invoke(this)