Aside updates

gulpfile.js

@@ -43,6 +43,7 @@ gulp.task('watch', function() {
       });
 
       watch('ionic/components/*/test/**/*', function() {
+        gulp.start('ionic.copy.js');
         gulp.start('ionic.examples');
       });
 

ionic/components/app/test/music/index.js

@@ -0,0 +1,104 @@
+//import {Router} from 'ionic/routing/router'
+import {ElementRef, For, Parent, bootstrap} from 'angular2/angular2'
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {Log} from 'ionic/util'
+
+import {
+  Router, Routable, List, Item, HeaderTemplate, Nav, NavController,
+  Toolbar, Button, Input, Tabs,
+  Tab, Content, Aside
+} from 'ionic/ionic'
+
+
+@Component({selector: 'ion-view'})
+@View({
+  templateUrl: 'pages/app.html',
+  directives: [Content, Button]
+})
+class AppPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+  doLogin() {
+  }
+}
+
+
+/**
+ * Main app entry point
+ */
+@Component({ selector: 'ion-app' })
+@View({
+  directives: [Nav, Aside, List, Item, ParallaxEffect],
+  templateUrl: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    this.firstPage = AppPage
+
+    this.menuOpenAmount = 0;
+
+
+    /*
+    setTimeout(() => {
+      var nav = window.nav;
+
+      var route = Router;//new Router()
+      route.on('/login', (data) => {
+        nav.push(LoginPage);
+
+      })
+
+      route.on('/post/:id', (data) => {
+        console.log('ROUTE: Post page', data)
+        nav.push(PostDetail, data);
+      })
+
+      route.otherwise('/login');
+
+    }, 200);
+    */
+  }
+
+  onMenuOpening(amt) {
+    this.menuOpenAmount = amt;
+  }
+}
+
+@Directive({
+  selector: '[parallax]',
+  properties: {
+    parallax: 'parallax'
+  }
+})
+export class ParallaxEffect {
+  constructor(
+    elementRef: ElementRef
+  ) {
+    this.domElement = elementRef.domElement;
+
+    setTimeout(() => {
+      Object.observe(this, (changes) => {
+        changes.forEach((change) => {
+          if(change.name == 'parallax') {
+            this.parallaxItems();
+          }
+        });
+      });
+    });
+  }
+  parallaxItems() {
+    let list = this.domElement;
+    console.log('Moving items', this.parallax);
+    var x = Math.max(0, (1 - this.parallax) * 40);
+    list.style['opacity'] = Math.min(this.parallax, 1);
+    list.style['transform'] = 'translate3d(' + x + 'px, 0, 0)';
+  }
+}
+
+export function main() {
+  bootstrap(IonicApp);
+}

ionic/components/app/test/music/main.html

@@ -0,0 +1,72 @@
+<ion-view>
+
+  <ion-aside id="menu" side="left" [content]="content" (opening)="onMenuOpening($event, amt)">
+    <ion-list inset [parallax]="menuOpenAmount">
+      <ion-item>
+        Search
+      </ion-item>
+      <ion-item>
+        Browse
+      </ion-item>
+      <ion-item>
+        Activity
+      </ion-item>
+      <ion-item>
+        Radio
+      </ion-item>
+      <ion-item>
+        Your Music
+      </ion-item>
+      <ion-item>
+        Settings
+      </ion-item>
+    </ion-list>
+  </ion-aside>
+
+  <ion-nav #content [initial]="firstPage">
+  </ion-nav>
+
+  <style>
+    ion-view {
+      background-color: black !important;
+    }
+    .toolbar-container {
+      background-color: #202020 !important;
+    }
+    #menu {
+      background: url('http://ionic-io-assets.s3.amazonaws.com/menu.jpg');
+      background-size: cover;
+    }
+    #menu ion-item {
+      background: transparent;
+      min-height: 55px;
+    }
+    #menu ion-item .item-content {
+      background: transparent;
+      color: rgba(255,255,255,0.8);
+      padding: 10px;
+    }
+    #menu ion-item .item-label {
+      font-size: 22px;
+    }
+    .platform-ios #menu .item-content:after {
+      background: none;
+    }
+    .platform-ios #menu .item:first-of-type:before {
+      background: none;
+    }
+    .platform-ios #menu .item:last-of-type:after {
+      background: none;
+    }
+
+    ion-nav {
+      background: black;
+    }
+
+    .nav-item {
+      background: white;
+    }
+
+  </style>
+
+</ion-view>

ionic/components/app/test/music/pages/app.html

@@ -0,0 +1,3 @@
+<div>
+  <h3>Music</h3>
+</div>

ionic/components/aside/aside.js

@@ -1,4 +1,4 @@
-import {ElementRef, Inject, Parent, EventEmitter} from 'angular2/angular2'
+import {EventEmitter, ElementRef, Inject, Parent} from 'angular2/angular2'
 
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
@@ -18,7 +18,8 @@ import {IonicComponent} from 'ionic/config/component'
     content: 'content',
     side: 'side',
     dragThreshold: 'dragThreshold'
-  }
+  },
+  events: ['opening']
 })
 @View({
   template: `<content></content>`
@@ -29,10 +30,17 @@ export class Aside {
   ) {
     this.domElement = elementRef.domElement
 
+    this.opening = new EventEmitter('opening');
+
     // FIXME(ajoslin): have to wait for setTimeout for bindings to apply.
     setTimeout(() => {
       this.side = this.side || 'left';
-      this.type = this.type || 'push';
+      this.type = this.type || 'reveal';
+
+      this.domElement.setAttribute('side', this.side);
+      this.domElement.setAttribute('type', this.type);
+
+      console.log('Aisde content', this.content);
 
       this.config = Aside.config.invoke(this)
       this.gestureDelegate = this.config.getDelegate('gesture');
@@ -48,12 +56,8 @@ export class Aside {
     return this.content.domElement;
   }
 
-  setOpenX(x) {
-    this.openX = x;
-  }
-
-  setOpenY(y) {
-    this.openY = y;
+  setOpenAmt(v) {
+    this.opening.next(v);
   }
 
   setTransform(transform) {
@@ -75,9 +79,8 @@ export class Aside {
       this.isOpen = isOpen
       this.setChanging(true)
 
-      // TODO: Abstract this away
-      // Set 100% X
-      //this.x = this.gestureDelegate.getSlideBoundaries().max;
+      // Set full or closed amount
+      this.setOpenAmt(isOpen ? 1 : 0);
 
       return dom.rafPromise().then(() => {
         this.typeDelegate.setOpen(isOpen)

ionic/components/aside/aside.scss

@@ -26,7 +26,8 @@ $aside-transition: 0.3s linear transform;
   transform: translate3d(0, 0, 0);
   &.open,
   &[type=reveal] {
-    transform: translate3d($aside-width,0,0);
+    left: 0;
+    //transform: translate3d($aside-width,0,0);
   }
   //}
   &[side=right] {

ionic/components/aside/extensions/gestures.js

@@ -30,7 +30,7 @@ class AsideGesture extends SlideEdgeGesture {
     });
   }
   onSlide(slide, ev) {
-    this.aside.setOpenX(slide.distance);
+    this.aside.setOpenAmt(slide.distance / slide.max);
     this.aside.setTransform('translate3d(' + slide.distance + 'px,0,0)');
   }
   onSlideEnd(slide, ev) {

ionic/components/aside/extensions/types.js

@@ -69,7 +69,6 @@ export class AsideTypeReveal extends AsideType {
     contentManipulator.setSliding.call(this, sliding);
   }
   setOpen(sliding) {
-    asideManipulator.setOpen.call(this, sliding);
     contentManipulator.setOpen.call(this, sliding);
   }
   setTransform(t) {

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

@@ -26,7 +26,9 @@
     <h2 style="color: white">HELLO</h2>
   </ion-content>
 
+  <!--
   <ion-aside side="right" [content]="content" style="background-color: green">
     <h2 style="color: white">RIGHT</h2>
   </ion-aside>
+  -->
 </ion-view>

ionic/components/nav/nav.js

@@ -28,8 +28,9 @@ import {ToolbarContainer} from '../toolbar/toolbar-container';
   directives: [HeaderAnchor, ContentAnchor, ToolbarContainer]
 })
 export class Nav extends NavBase {
-  constructor(loader: DynamicComponentLoader, injector: Injector) {
+  constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
     super(loader, injector);
+    this.domElement = elementRef.domElement;
   }
 }