feat(aside): Android menu

ionic/components/app/z-index.scss

@@ -5,6 +5,7 @@
 
 
 $z-index-aside-overlay:          80 !default;
+$z-index-aside-backdrop:         79 !default;
 $z-index-overlay:                1000 !default;
 $z-index-click-block:            9999 !default;
 

ionic/components/aside/aside.scss

@@ -6,6 +6,7 @@ $aside-width: 304px !default;
 $aside-small-width: $aside-width - 40px !default;
 
 $aside-transition: 0.2s ease transform !default;
+$aside-backdrop-transition: 0.2s ease background-color !default;
 $aside-background: $background-color !default;
 $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
 
@@ -26,6 +27,25 @@ $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
   transform: translate3d(0, 0, 0);
   transition: $aside-transition;
 
+  &.no-transition {
+    ion-aside-backdrop {
+      transition: none;
+    }
+  }
+  
+  ion-aside-backdrop {
+    z-index: $z-index-aside-backdrop;
+    transition: $aside-backdrop-transition;
+    transform: translateX($aside-width);
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    position: fixed;
+    background-color: rgba(0,0,0,0);;
+  }
+
+
   &[type=overlay] {
     z-index: $z-index-aside-overlay;
   }
@@ -45,6 +65,10 @@ $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
     }
     &[type=overlay] {
       transform: translate3d($aside-width,0,0);
+
+      ion-aside-backdrop {
+        background-color: rgba(0,0,0,0.6);
+      }
     }
   }
 

ionic/components/aside/aside.ts

@@ -1,4 +1,4 @@
-import {View, EventEmitter, ElementRef} from 'angular2/angular2';
+import {forwardRef, Component, Host, View, EventEmitter, ElementRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -23,8 +23,8 @@ import {dom} from 'ionic/util'
   },
   delegates: {
     gesture: [
-      [instance => instance.side == 'top', gestures.TopAsideGesture],
-      [instance => instance.side == 'bottom', gestures.BottomAsideGesture],
+      //[instance => instance.side == 'top', gestures.TopAsideGesture],
+      //[instance => instance.side == 'bottom', gestures.BottomAsideGesture],
       [instance => instance.side == 'right', gestures.RightAsideGesture],
       [instance => instance.side == 'left', gestures.LeftAsideGesture],
     ],
@@ -37,7 +37,8 @@ import {dom} from 'ionic/util'
   events: ['opening']
 })
 @View({
-  template: '<ng-content></ng-content>'
+  template: '<ng-content></ng-content><ion-aside-backdrop></ion-aside-backdrop>',
+  directives: [forwardRef(() => AsideBackdrop)]
 })
 export class Aside extends Ion {
 
@@ -68,6 +69,10 @@ export class Aside extends Ion {
     this.opening.next(v);
   }
 
+  setDoneTransforming(willOpen) {
+    this.typeDelegate.setDoneTransforming(willOpen);
+  }
+
   setTransform(transform) {
     this.typeDelegate.setTransform(transform)
   }
@@ -86,8 +91,6 @@ export class Aside extends Ion {
   }
 
   setOpen(isOpen) {
-    console.log('SET OPEN', isOpen);
-    console.trace();
     if (isOpen !== this.isOpen) {
       this.isOpen = isOpen
       this.setChanging(true)
@@ -114,3 +117,38 @@ export class Aside extends Ion {
   }
 
 }
+
+
+@Component({
+  selector: 'ion-aside-backdrop',
+  host: {
+    '[style.width]': 'width',
+    '[style.height]': 'height',
+    '[style.backgroundColor]': 'backgroundColor',
+    '(click)': 'clicked($event)'
+  }
+})
+
+@View({
+  template: ''
+})
+export class AsideBackdrop extends Ion {
+  constructor(elementRef: ElementRef, ionicConfig: IonicConfig, @Host() aside: Aside) {
+    super(elementRef, ionicConfig);
+
+    aside.backdrop = this;
+
+    this.aside = aside;
+
+    this.backgroundColor = 'rgba(0,0,0,0)';
+  }
+  onInit() {
+    let ww = window.innerWidth;
+    let wh = window.innerHeight;
+    this.width = ww + 'px';
+    this.height = wh + 'px';
+  }
+  clicked(event) {
+    this.aside.close();
+  }
+}

ionic/components/aside/extensions/gestures.ts

@@ -25,13 +25,17 @@ class AsideTargetGesture extends SlideEdgeGesture {
   }
   onSlide(slide, ev) {
     this.aside.setOpenAmt(slide.distance / slide.max);
-    this.aside.setTransform('translate3d(' + slide.distance + 'px,0,0)');
+    this.aside.setTransform(slide.distance);
   }
   onSlideEnd(slide, ev) {
-    this.aside.setTransform('');
     this.aside.setSliding(false);
     if (Math.abs(ev.gesture.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
+
       this.aside.setOpen(!this.aside.isOpen);
+      this.aside.setDoneTransforming(!this.aside.isOpen);
+
+    } else {
+      this.aside.setDoneTransforming(this.aside.isOpen);
     }
   }
 
@@ -78,13 +82,15 @@ class AsideGesture extends SlideEdgeGesture {
   }
   onSlide(slide, ev) {
     this.aside.setOpenAmt(slide.distance / slide.max);
-    this.aside.setTransform('translate3d(' + slide.distance + 'px,0,0)');
+    this.aside.setTransform(slide.distance);
   }
   onSlideEnd(slide, ev) {
-    this.aside.setTransform('');
     this.aside.setSliding(false);
     if (Math.abs(ev.gesture.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
       this.aside.setOpen(!this.aside.isOpen);
+      this.aside.setDoneTransforming(!this.aside.isOpen);
+    } else {
+      this.aside.setDoneTransforming(false);
     }
   }
 
@@ -114,9 +120,11 @@ export class RightAsideGesture extends LeftAsideGesture {
 
 }
 
+/*
+ Not supported right now
 export class TopAsideGesture extends AsideGesture {
   onSlide(slide, ev) {
-    this.aside.setTransform('translate3d(0,' + slide.distance + 'px,0)');
+    this.aside.setTransform(slide.distance);
   }
   getSlideBoundaries() {
     return {
@@ -137,3 +145,4 @@ export class BottomAsideGesture extends TopAsideGesture {
     };
   }
 }
+*/

ionic/components/aside/extensions/types.ts

@@ -10,7 +10,11 @@ const asideManipulator = {
     this.aside.getNativeElement().classList[open ? 'add' : 'remove']('open');
   },
   setTransform(t) {
-    this.aside.getNativeElement().style[CSS.transform] = t;
+    if(t === null) {
+      this.aside.getNativeElement().style[CSS.transform] = '';
+    } else {
+      this.aside.getNativeElement().style[CSS.transform] = 'translate3d(' + t + 'px,0,0)';
+    }
   }
 }
 const contentManipulator = {
@@ -23,7 +27,29 @@ const contentManipulator = {
     )
   },
   setTransform(t) {
-    this.aside.contentElement.style[CSS.transform] = t;
+    if(t === null) {
+      this.aside.contentElement.style[CSS.transform] = '';
+    } else {
+      this.aside.contentElement.style[CSS.transform] = 'translate3d(' + t + 'px,0,0)';
+    }
+  }
+}
+
+const backdropManipulator = {
+  setSliding(sliding) {
+    this.aside.backdrop.isTransitioning = sliding;
+    //.classList[sliding ? 'add' : 'remove']('no-transition');
+  },
+  setOpen(open) {
+    let amt = open ? 0.6 : 0;
+    this.aside.backdrop.backgroundColor = 'rgba(0,0,0,' + amt + ')';
+  },
+  setTransform(t) {
+    if(t === null) {
+      t = this.aside.width();
+    }
+    let fade = 0.6 * t / this.aside.width();
+    this.aside.backdrop.backgroundColor = 'rgba(0,0,0,' + fade + ')';
   }
 }
 
@@ -31,7 +57,6 @@ export class AsideType {
   constructor(aside: Aside) {
     this.aside = aside;
 
-    //FIXME(ajoslin): have to wait for for bindings to apply in a component
     setTimeout(() => {
       aside.contentElement.classList.add('aside-content')
     })
@@ -41,12 +66,21 @@ export class AsideType {
 export class AsideTypeOverlay extends AsideType {
   setSliding(sliding) {
     asideManipulator.setSliding.call(this, sliding);
+    backdropManipulator.setSliding.call(this, sliding);
   }
   setOpen(open) {
     asideManipulator.setOpen.call(this, open);
+    backdropManipulator.setOpen.call(this, open);
   }
   setTransform(t) {
     asideManipulator.setTransform.call(this, t);
+    backdropManipulator.setTransform.call(this, t);
+  }
+  setDoneTransforming(willOpen) {
+    asideManipulator.setTransform.call(this, null);
+    backdropManipulator.setTransform.call(this, null);
+    asideManipulator.setOpen.call(this, willOpen);
+    backdropManipulator.setOpen.call(this, willOpen);
   }
 }
 
@@ -63,6 +97,12 @@ export class AsideTypePush extends AsideType {
     asideManipulator.setTransform.call(this, t);
     contentManipulator.setTransform.call(this, t);
   }
+  setDoneTransforming(willOpen) {
+    asideManipulator.setOpen.call(this, willOpen);
+    asideManipulator.setTransform.call(this, null);
+    contentManipulator.setOpen.call(this, willOpen);
+    contentManipulator.setTransform.call(this, null);
+  }
 }
 
 export class AsideTypeReveal extends AsideType {
@@ -75,4 +115,8 @@ export class AsideTypeReveal extends AsideType {
   setTransform(t) {
     contentManipulator.setTransform.call(this, t);
   }
+  setDoneTransforming(willOpen) {
+    contentManipulator.setOpen.call(this, willOpen);
+    contentManipulator.setTransform.call(this, null);
+  }
 }