diff --git a/scripts/e2e/index.template.html b/scripts/e2e/index.template.html
index f203cb5ad1..6ac009cd00 100644
--- a/scripts/e2e/index.template.html
+++ b/scripts/e2e/index.template.html
@@ -14,7 +14,7 @@
baseURL: '<%= PREFIX %>/lib',
traceurOptions: <%= JSON.stringify(buildConfig.traceurOptions) %>,
map: {
- 'app': location.pathname.replace(/\/$/,''),
+ 'app': location.pathname.replace(/\/(index.html)?$/,''),
'rx/dist/rx.all': 'rx.all',
}
})
diff --git a/src/components/aside/aside.js b/src/components/aside/aside.js
index b68ea0e1a4..a572a4a215 100644
--- a/src/components/aside/aside.js
+++ b/src/components/aside/aside.js
@@ -1,7 +1,7 @@
import {Component, Template, Inject, Parent, NgElement} from 'angular2/angular2'
import {ComponentConfig} from 'ionic2/config/component-config'
-import * as types from 'ionic2/components/aside/types/types'
-import * as gestures from 'ionic2/components/aside/gestures/gestures';
+import * as types from 'ionic2/components/aside/extensions/types'
+import * as gestures from 'ionic2/components/aside/extensions/gestures';
@Component({
selector: 'ion-aside',
diff --git a/src/components/aside/config.js b/src/components/aside/config.js
index 50db1acfc8..5e05f4d3a4 100644
--- a/src/components/aside/config.js
+++ b/src/components/aside/config.js
@@ -18,3 +18,9 @@ AsideConfig.delegate('type')
.when({type: 'push'}, types.AsideTypePush)
.when({type: 'reveal'}, types.AsideTypeReveal)
+
+AsideConfig.platform('android')
+ .defaults({ type: 'overlay' })
+
+AsideConfig.platform('ios')
+ .defaults({ type: 'reveal' })
diff --git a/src/components/aside/extensions/gestures.js b/src/components/aside/extensions/gestures.js
new file mode 100644
index 0000000000..6d3e44303a
--- /dev/null
+++ b/src/components/aside/extensions/gestures.js
@@ -0,0 +1,92 @@
+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
+ };
+ }
+}
+
diff --git a/src/components/aside/extensions/types.js b/src/components/aside/extensions/types.js
new file mode 100644
index 0000000000..f039bf4eae
--- /dev/null
+++ b/src/components/aside/extensions/types.js
@@ -0,0 +1,80 @@
+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);
+ }
+}