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 @@ + + + + + + Search + + + Browse + + + Activity + + + Radio + + + Your Music + + + Settings + + + + + + + + + + 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; } }