diff --git a/gulpfile.js b/gulpfile.js
index 80113c5b70..19bc2daa01 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -43,6 +43,7 @@ gulp.task('watch', function() {
});
watch('ionic/components/*/test/**/*', function() {
+ gulp.start('ionic.copy.js');
gulp.start('ionic.examples');
});
diff --git a/ionic/components/app/test/music/index.js b/ionic/components/app/test/music/index.js
new file mode 100644
index 0000000000..def8750016
--- /dev/null
+++ b/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);
+}
diff --git a/ionic/components/app/test/music/main.html b/ionic/components/app/test/music/main.html
new file mode 100644
index 0000000000..e3ef67ab87
--- /dev/null
+++ b/ionic/components/app/test/music/main.html
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/ionic/components/app/test/music/menu.jpg b/ionic/components/app/test/music/menu.jpg
new file mode 100644
index 0000000000..74f17215fe
Binary files /dev/null and b/ionic/components/app/test/music/menu.jpg differ
diff --git a/ionic/components/app/test/music/menu.png b/ionic/components/app/test/music/menu.png
new file mode 100644
index 0000000000..f381dc2763
Binary files /dev/null and b/ionic/components/app/test/music/menu.png differ
diff --git a/ionic/components/app/test/music/pages/app.html b/ionic/components/app/test/music/pages/app.html
new file mode 100644
index 0000000000..e56b75e06b
--- /dev/null
+++ b/ionic/components/app/test/music/pages/app.html
@@ -0,0 +1,3 @@
+
+
Music
+
diff --git a/ionic/components/aside/aside.js b/ionic/components/aside/aside.js
index ab3dafdf31..f780945c08 100644
--- a/ionic/components/aside/aside.js
+++ b/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: ``
@@ -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)
diff --git a/ionic/components/aside/aside.scss b/ionic/components/aside/aside.scss
index 50752c6a8e..50523da0ab 100644
--- a/ionic/components/aside/aside.scss
+++ b/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] {
diff --git a/ionic/components/aside/extensions/gestures.js b/ionic/components/aside/extensions/gestures.js
index 904a458feb..2bcbb949e1 100644
--- a/ionic/components/aside/extensions/gestures.js
+++ b/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) {
diff --git a/ionic/components/aside/extensions/types.js b/ionic/components/aside/extensions/types.js
index fb3147e18a..e90096c7d0 100644
--- a/ionic/components/aside/extensions/types.js
+++ b/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) {
diff --git a/ionic/components/aside/test/basic/main.html b/ionic/components/aside/test/basic/main.html
index aa05f8f46f..d19ab47263 100644
--- a/ionic/components/aside/test/basic/main.html
+++ b/ionic/components/aside/test/basic/main.html
@@ -26,7 +26,9 @@
HELLO
+
diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js
index 4d3d3d8cd4..8ef0664b17 100644
--- a/ionic/components/nav/nav.js
+++ b/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;
}
}