diff --git a/src/components/aside/aside.scss b/src/components/aside/aside.scss
index b7a2b9ac8a..7c36d574e7 100644
--- a/src/components/aside/aside.scss
+++ b/src/components/aside/aside.scss
@@ -8,7 +8,7 @@ $aside-transition: 0.3s linear transform;
background: #eee;
- &.type-overlay {
+ &[type=overlay] {
z-index: 10;
}
diff --git a/src/components/aside/extensions/types.js b/src/components/aside/extensions/types.js
index f039bf4eae..e5b8f281ae 100644
--- a/src/components/aside/extensions/types.js
+++ b/src/components/aside/extensions/types.js
@@ -27,14 +27,12 @@ const contentManipulator = {
}
export class AsideType {
- constructor(aside) {
+ constructor(aside: 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')
+ aside.content.domElement.classList.add('aside-content')
})
}
}
diff --git a/src/components/aside/gestures/gestures.js b/src/components/aside/gestures/gestures.js
deleted file mode 100644
index 6d3e44303a..0000000000
--- a/src/components/aside/gestures/gestures.js
+++ /dev/null
@@ -1,92 +0,0 @@
-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/types/types.js b/src/components/aside/types/types.js
deleted file mode 100644
index f039bf4eae..0000000000
--- a/src/components/aside/types/types.js
+++ /dev/null
@@ -1,80 +0,0 @@
-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);
- }
-}
diff --git a/src/components/tabs/test/advanced/main.html b/src/components/tabs/test/advanced/main.html
new file mode 100644
index 0000000000..4757597ce9
--- /dev/null
+++ b/src/components/tabs/test/advanced/main.html
@@ -0,0 +1,5 @@
+
+ Hello!
+
+
+
diff --git a/src/components/tabs/test/advanced/main.js b/src/components/tabs/test/advanced/main.js
index badc0d32f6..ce0fca7ab8 100644
--- a/src/components/tabs/test/advanced/main.js
+++ b/src/components/tabs/test/advanced/main.js
@@ -1,13 +1,13 @@
import {Component, Template, bootstrap} from 'angular2/angular2'
-import {NavViewport} from 'ionic2/components'
+import {NavViewport, Aside} from 'ionic2/components'
import {SignInPage} from 'app/pages/sign-in'
@Component({
selector: '[ion-app]'
})
@Template({
- inline: '',
- directives: [NavViewport]
+ url: 'main.html',
+ directives: [NavViewport, Aside]
})
class App {
constructor() {
diff --git a/src/config/component.js b/src/config/component.js
index c6e10c3c7d..091271c31c 100644
--- a/src/config/component.js
+++ b/src/config/component.js
@@ -38,7 +38,7 @@ export class IonicComponent {
}
invoke(instance) {
- let config = this
+ const config = this
instance.domElement.classList.add(this.componentCssName)
instance.domElement.classList.add(`${this.componentCssName}-${platformName}`)
@@ -53,13 +53,16 @@ export class IonicComponent {
return {
getDelegate(delegateName) {
- let cases = (config.delegates || {})[delegateName] || []
+ let cases = (config.delegates || {})[delegateName] || [];
for (let i = 0; i < cases.length; i++) {
- let delegateCase = cases[i]
+ let delegateCase = cases[i];
if (util.isArray(delegateCase)) {
- if (delegateCase[0](instance)) return new delegateCase[1](instance)
+ let [ check, DelegateConstructor ] = delegateCase;
+ if (check(instance)) {
+ return new DelegateConstructor(instance);
+ }
} else {
- return new delegateCase(instance)
+ return new delegateCase(instance);
}
}
}