From b0706c125797d1baf74e554a42a7d8aaf3019adf Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Sat, 16 May 2015 04:33:59 +0200
Subject: [PATCH] Aside left working better

---
 ionic/components/aside/aside.js               | 20 ++++++++++++
 ionic/components/aside/aside.scss             | 20 ++++++------
 ionic/components/aside/extensions/gestures.js |  3 +-
 ionic/components/aside/test/basic/index.js    |  4 +--
 ionic/components/aside/test/basic/main.html   | 31 ++++++++++++++-----
 ionic/components/content/content.js           |  3 +-
 ionic/components/item/item-swipe-buttons.js   | 13 ++++----
 ionic/components/item/item.js                 | 10 +++---
 8 files changed, 73 insertions(+), 31 deletions(-)

diff --git a/ionic/components/aside/aside.js b/ionic/components/aside/aside.js
index 1813c551b8..e38c1775d8 100644
--- a/ionic/components/aside/aside.js
+++ b/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)
       })
diff --git a/ionic/components/aside/aside.scss b/ionic/components/aside/aside.scss
index 60d3ea3948..50752c6a8e 100644
--- a/ionic/components/aside/aside.scss
+++ b/ionic/components/aside/aside.scss
@@ -17,18 +17,18 @@ $aside-transition: 0.3s linear transform;
     display: none;
   }
 
-  &[side=left] {
-    width: $aside-width;
-    left: -$aside-width;
-    top: 0;
-    bottom: 0;
+  //&[side=left] {
+  width: $aside-width;
+  left: -$aside-width;
+  top: 0;
+  bottom: 0;
 
-    transform: translate3d(0, 0, 0);
-    &.open,
-    &[type=reveal] {
-      transform: translate3d($aside-width,0,0);
-    }
+  transform: translate3d(0, 0, 0);
+  &.open,
+  &[type=reveal] {
+    transform: translate3d($aside-width,0,0);
   }
+  //}
   &[side=right] {
     width: $aside-width;
     left: 100%;
diff --git a/ionic/components/aside/extensions/gestures.js b/ionic/components/aside/extensions/gestures.js
index f89ca59839..904a458feb 100644
--- a/ionic/components/aside/extensions/gestures.js
+++ b/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) {
diff --git a/ionic/components/aside/test/basic/index.js b/ionic/components/aside/test/basic/index.js
index 4552f6153f..4811d327b4 100644
--- a/ionic/components/aside/test/basic/index.js
+++ b/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 {
diff --git a/ionic/components/aside/test/basic/main.html b/ionic/components/aside/test/basic/main.html
index 73ee8cb84e..ccfa3cc017 100644
--- a/ionic/components/aside/test/basic/main.html
+++ b/ionic/components/aside/test/basic/main.html
@@ -1,19 +1,36 @@
 <ion-view>
-  <ion-aside [content]="content" style="text-align:center;">
-    Left!
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
+  <ion-aside [content]="content" style="background-color: red">
+    <!--
+    <ion-list inset>
+      <div class="list-header">
+        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>
diff --git a/ionic/components/content/content.js b/ionic/components/content/content.js
index c566d2abcb..e061c97dab 100644
--- a/ionic/components/content/content.js
+++ b/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!');
   }
diff --git a/ionic/components/item/item-swipe-buttons.js b/ionic/components/item/item-swipe-buttons.js
index c324b136c0..7fa18e32ea 100644
--- a/ionic/components/item/item-swipe-buttons.js
+++ b/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,
diff --git a/ionic/components/item/item.js b/ionic/components/item/item.js
index 69fc9ad444..3a04430618 100644
--- a/ionic/components/item/item.js
+++ b/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)