diff --git a/gulpfile.js b/gulpfile.js index e565a233fc..760f9e28b8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -98,16 +98,16 @@ gulp.task('e2e', ['ionic-js', 'sass'], function() { .pipe(rename(function(file) { file.dirname = file.dirname.replace(path.sep + 'test' + path.sep, path.sep) })) - .pipe(gulpif(/main.html$/, processMainHtml())) + .pipe(gulpif(/main.js$/, processMain())) .pipe(gulpif(/e2e.js$/, createPlatformTests())) .pipe(gulp.dest(buildConfig.dist + '/e2e')) - function processMainHtml() { + function processMain() { return through2.obj(function(file, enc, next) { this.push(new VinylFile({ base: file.base, contents: new Buffer(indexContents), - path: file.path.replace(/main.html$/, 'index.html'), + path: file.path.replace(/main.js$/, 'index.html'), })) next(null, file) }) diff --git a/src/components.js b/src/components.js index 69912a0541..5aa7726f0e 100644 --- a/src/components.js +++ b/src/components.js @@ -10,5 +10,6 @@ export * from 'ionic2/components/list/list' export * from 'ionic2/components/nav-view/nav-view' export * from 'ionic2/components/nav-viewport/nav-viewport' export * from 'ionic2/components/tabs/tabs' +export * from 'ionic2/components/tabs/tab' export * from 'ionic2/components/toolbar/toolbar' export * from 'ionic2/components/view/view' diff --git a/src/components/nav-view/nav-view.js b/src/components/nav-view/nav-view.js index 67e2228949..1a89bb127e 100644 --- a/src/components/nav-view/nav-view.js +++ b/src/components/nav-view/nav-view.js @@ -1,5 +1,6 @@ -import {DynamicComponent, Parent, NgElement} from 'angular2/angular2' -import {NavViewport} from 'ionic2/components' +import {DynamicComponent, Ancestor, NgElement} from 'angular2/angular2' +import {Optional} from 'angular2/src/di/annotations' +import {NavViewport, Tabs} from 'ionic2/components' import {PrivateComponentLoader} from 'angular2/src/core/compiler/private_component_loader' import {PrivateComponentLocation} from 'angular2/src/core/compiler/private_component_location' @@ -13,12 +14,15 @@ export class NavView { constructor( loader: PrivateComponentLoader, location: PrivateComponentLocation, - @Parent() viewport: NavViewport, - @NgElement() element: NgElement + @NgElement() element: NgElement, + + // FIXME: this is temporary until ng2 lets us inject tabs as a NavViewport + @Optional() @Ancestor() viewportNav: NavViewport, + @Optional() @Ancestor() viewportTabs: Tabs ) { this.loader = loader this.location = location - this.viewport = viewport + this.viewport = viewportTabs || viewportNav this.domElement = element.domElement } diff --git a/src/components/nav-view/nav-view.scss b/src/components/nav-view/nav-view.scss index f264fd7ffc..c32fb15afb 100644 --- a/src/components/nav-view/nav-view.scss +++ b/src/components/nav-view/nav-view.scss @@ -1,3 +1,9 @@ +.nav-viewport { + flex: 1; + position: relative; + display: flex; +} + .nav-view { position: absolute; top: 0; diff --git a/src/components/nav-viewport/nav-viewport.js b/src/components/nav-viewport/nav-viewport.js index eead0660d7..959785066b 100644 --- a/src/components/nav-viewport/nav-viewport.js +++ b/src/components/nav-viewport/nav-viewport.js @@ -1,33 +1,41 @@ -import {Component, Template, For} from 'angular2/angular2' +import {Component, Template, For, NgElement} from 'angular2/angular2' import {ComponentConfig} from 'ionic2/config/component-config' import {NavView} from 'ionic2/components/nav-view/nav-view' -import {array as arrayUtil, dom as domUtil} from 'ionic2/util' +import {array as arrayUtil, dom as domUtil, isFunction} from 'ionic2/util' @Component({ selector: 'ion-nav-viewport', bind: { - initialComponent: 'initialComponent' + initial: 'initial' }, }) @Template({ inline: ` -
+
`, directives: [NavView, For] }) export class NavViewport { - constructor() { - // stack is our public stack of items. This is synchronous and says an item + constructor( + element: NgElement + ) { + this.domElement = element.domElement + this.domElement.classList.add('nav-viewport') + // stack is our sane stack of items. This is synchronous and says an item // is removed even if it's still animating out. - this.stack = [] + this._stack = [] - // _ngForLoopArray is our loop that actually adds/removes components. It doesn't + // _ngForLoopArray is actually adds/removes components from the dom. It won't // remove a component until it's done animating out. this._ngForLoopArray = [] } - set initialComponent(Class) { + getRawNavStack() { + return this._ngForLoopArray + } + + set initial(Class) { if (!this.initialized) { this.initialized = true this.push(Class) @@ -40,18 +48,25 @@ export class NavViewport { * @param view the new view * @param shouldAnimate whether to animate */ + // TODO don't push same component twice if one is already pushing // TODO only animate if state hasn't changed // TODO make sure the timing is together // TODO allow starting an animation in the middle (eg gestures). Leave // most of this up to the animation's implementation. - push(Class, opts = {}) { - let item = new NavItem(Class, opts) - this.stack.push(item) - this._ngForLoopArray.push(item) - return item.waitForSetup().then(() => { - let current = this.getPrevious(item) - current && current.leaveReverse() - return item.enter() + push(Class: Function, { sync = this._stack.length === 0 } = {}) { + let pushedItem = new NavItem(Class) + this._stack.push(pushedItem) + this._ngForLoopArray.push(pushedItem) + + return pushedItem.waitForSetup().then(() => { + let current = this.getPrevious(pushedItem) + if (sync) { + current && current.leaveSync() + pushedItem.enterSync() + } else { + current && current.leaveReverse() + return pushedItem.enter() + } }) } @@ -60,18 +75,23 @@ export class NavViewport { * * @param shouldAnimate whether to animate */ - pop() { - let current = this.stack.pop() - let previous = this.stack[this.stack.length - 1] - previous.enterReverse() - return current.leave().then(() => { - // The animation is done, remove it from the dom + pop({ sync = false } = {}) { + let current = this._stack.pop() + let previous = this._stack[this._stack.length - 1] + if (sync) { + previous && previous.enterSync() + return Promise.resolve(remove()) + } else { + previous && previous.enterReverse() + return current.leave().then(remove) + } + function remove() { arrayUtil.remove(this._ngForLoopArray, current) - }) + } } getPrevious(item) { - return this.stack[ this.stack.indexOf(item) - 1 ] + return this._stack[ this._stack.indexOf(item) - 1 ] } // Animate a new view *in* @@ -125,6 +145,14 @@ class NavItem { }) }) } + enterSync() { + this.setAnimation(null) + return this.setShown(true) + } + leaveSync() { + this.setAnimation(null) + return this.setShown(false) + } enter() { return this._animate({ isShown: true, animation: 'enter' }) } diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js index 67deab129a..a0ba40b642 100644 --- a/src/components/tabs/tab.js +++ b/src/components/tabs/tab.js @@ -1,19 +1,48 @@ -import {NgElement, Component, Template, Parent} from 'angular2/angular2'; +import { + NgElement, + Component, + Template, + Ancestor, + PropertySetter, + For +} from 'angular2/angular2'; +import {NavViewport, NavView, Tabs} from 'ionic2/components' +import {IonicComponent} from 'ionic2/config/component' @Component({ selector: 'ion-tab', bind: { - tabTitle: 'tab-title' + title: 'tab-title', + initial: 'initial' } }) @Template({ inline: ` -
- -
- ` +
+
+ `, + directives: [For, NavView] }) -export class Tab { +export class Tab extends NavViewport { + constructor( + element: NgElement, + @Ancestor() tabs: Tabs, + @PropertySetter('class.hide') setHidden: Function + ) { + super(element) + this.config = Tab.config.invoke(this) + this.setHidden = setHidden + this.setSelected(false) + tabs.addTab(this) + } + + setSelected(isSelected) { + this.isSelected = !!isSelected + this.setHidden(!this.isSelected) + } } + +new IonicComponent(Tab, { +}) diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index 54b3911c85..ee1c005f8f 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -1,40 +1,66 @@ -import {NgElement, Component, Template, Foreach, Parent} from 'angular2/angular2' -import {NavViewport} from 'ionic2/components' +import {NgElement, Component, Template, Parent, For} from 'angular2/angular2' import {IonicComponent} from 'ionic2/config/component' @Component({ selector: 'ion-tabs', bind: { placement: 'placement' - }, + } }) @Template({ inline: `
- - Tab 1 - - - Tab 2 - - - Tab 3 + + {{tab.title}}
+ `, - directives: [] + directives: [For] }) -export class Tabs extends NavViewport { +export class Tabs { constructor( element: NgElement ) { - super() this.domElement = element.domElement this.domElement.classList.add('pane') this.config = Tabs.config.invoke(this) + + this.tabs = [] } + + addTab(tab) { + this.tabs.push(tab) + if (this.tabs.length == 1) { + this.select(tab) + } + } + + onClickTabItem(ev, tab) { + ev.preventDefault() + if (this.selectedTab !== tab) { + this.select(tab) + } else if (tab._stack.length >= 2) { + while (tab._stack.length > 2) { + tab.pop({ sync: true }) // pop with no animation + } + tab.pop() //pop last one with animation + } + } + + select(tab) { + this.tabs.forEach(otherTab => { + otherTab.setSelected(false) + }) + tab.setSelected(true) + this.selectedTab = tab + } + } new IonicComponent(Tabs, { diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index 9227b6699b..9169ab1fc8 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -20,3 +20,7 @@ min-width: 100px; text-align: center; } + +.tab-bar-item.active { + color: red; +} diff --git a/src/components/tabs/test/advanced/main.js b/src/components/tabs/test/advanced/main.js new file mode 100644 index 0000000000..badc0d32f6 --- /dev/null +++ b/src/components/tabs/test/advanced/main.js @@ -0,0 +1,17 @@ +import {Component, Template, bootstrap} from 'angular2/angular2' +import {NavViewport} from 'ionic2/components' +import {SignInPage} from 'app/pages/sign-in' + +@Component({ + selector: '[ion-app]' +}) +@Template({ + inline: '', + directives: [NavViewport] +}) +class App { + constructor() { + this.initial = SignInPage + } +} +bootstrap(App) diff --git a/src/components/tabs/test/advanced/pages/sign-in.html b/src/components/tabs/test/advanced/pages/sign-in.html new file mode 100644 index 0000000000..1eff7b0db9 --- /dev/null +++ b/src/components/tabs/test/advanced/pages/sign-in.html @@ -0,0 +1,5 @@ + + + diff --git a/src/components/tabs/test/advanced/pages/sign-in.js b/src/components/tabs/test/advanced/pages/sign-in.js new file mode 100644 index 0000000000..f4cb94ef8f --- /dev/null +++ b/src/components/tabs/test/advanced/pages/sign-in.js @@ -0,0 +1,21 @@ +import {Component, Template, Parent} from 'angular2/angular2' +import {View, NavViewport} from 'ionic2/components' +import {TabsPage} from 'app/pages/tabs' + +@Component({ + selector: 'sign-in-page' +}) +@Template({ + url: 'pages/sign-in.html', + directives: [View] +}) +export class SignInPage { + constructor( + @Parent() viewport: NavViewport + ) { + this.viewport = viewport + } + signIn() { + this.viewport.push(TabsPage) + } +} diff --git a/src/components/tabs/test/advanced/pages/tabs.html b/src/components/tabs/test/advanced/pages/tabs.html new file mode 100644 index 0000000000..3acd3f0b84 --- /dev/null +++ b/src/components/tabs/test/advanced/pages/tabs.html @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/tabs/test/advanced/pages/tabs.js b/src/components/tabs/test/advanced/pages/tabs.js new file mode 100644 index 0000000000..dc657b9b7b --- /dev/null +++ b/src/components/tabs/test/advanced/pages/tabs.js @@ -0,0 +1,73 @@ +import {Component, Template, Parent} from 'angular2/angular2' +import {View, Tabs, Tab} from 'ionic2/components' +import {NavViewport} from 'ionic2/components' + +@Component({ + selector: 'tabs-page' +}) +@Template({ + url: 'pages/tabs.html', + directives: [Tabs, Tab] +}) +export class TabsPage { + constructor() { + this.tab1Initial = Tab1Page1 + this.tab2Initial = Tab2Page1 + } +} + + +// +// tab 1 +// +@Component({ selector: 't1p1' }) +@Template({ + inline: 'Tab 1 Page 1.

', + directives: [View] +}) +class Tab1Page1 { + constructor(@Parent() tab: Tab) { + this.tab = tab + } + next() { + this.tab.push(Tab1Page2) + } +} + +@Component({ selector: 't1p2' }) +@Template({ + inline: 'Tab 1
Page 2.

', + directives: [View] +}) +class Tab1Page2 { + constructor(@Parent() tab: Tab) { this.tab = tab } + pop() { this.tab.pop() } +} + + +// +// tab 2 +// +@Component({ selector: 't2p1' }) +@Template({ + inline: '

Tab 2 Page 1. ', + directives: [View] +}) +class Tab2Page1 { + constructor(@Parent() tab: Tab) { + this.tab = tab + } + next() { + this.tab.push(Tab2Page2) + } +} + +@Component({ selector: 't2p2' }) +@Template({ + inline: '

Tab 2
Page 2. ', + directives: [View] +}) +class Tab2Page2 { + constructor(@Parent() tab: Tab) { this.tab = tab } + pop() { this.tab.pop() } +} diff --git a/src/components/tabs/test/basic/main.html b/src/components/tabs/test/basic/main.html index a01364b5bb..8732460089 100644 --- a/src/components/tabs/test/basic/main.html +++ b/src/components/tabs/test/basic/main.html @@ -3,8 +3,11 @@ - - Tab 1 Content + + Tab 1 Content
. + + + .
Tab 2 Content diff --git a/src/components/tabs/test/basic/main.js b/src/components/tabs/test/basic/main.js index 337d466152..7e020f891a 100644 --- a/src/components/tabs/test/basic/main.js +++ b/src/components/tabs/test/basic/main.js @@ -1,13 +1,12 @@ import {bootstrap} from 'angular2/core'; import {Component, Template} from 'angular2/angular2'; -import {View} from 'ionic2/components/view/view'; -import {Tabs} from 'ionic2/components/tabs/tabs'; +import {View, Tabs, Tab} from 'ionic2/components'; @Component({ selector: '[ion-app]' }) @Template({ url: 'main.html', - directives: [View, Tabs] + directives: [View, Tabs, Tab] }) class IonicApp { constructor() { diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js index 19aa605c24..36d8ae37fc 100644 --- a/src/components/toolbar/toolbar.js +++ b/src/components/toolbar/toolbar.js @@ -1,5 +1,7 @@ -import {NgElement, Component, Template} from 'angular2/angular2' +import {NgElement, Component, Template, Ancestor} from 'angular2/angular2' +import {Optional} from 'angular2/src/di/annotations' import {BackButton} from 'ionic2/components/toolbar/back-button' +import {Tabs, NavViewport, NavView} from 'ionic2/components' import {ComponentConfig} from 'ionic2/config/component-config' import {raf} from 'ionic2/util/dom' @@ -32,7 +34,10 @@ export let ToolbarConfig = new ComponentConfig('toolbar') directives: [BackButton] }) export class Toolbar { - constructor(@NgElement() ngEle:NgElement, configFactory: ToolbarConfig) { + constructor( + @NgElement() ngEle:NgElement, + configFactory: ToolbarConfig + ) { this.domElement = ngEle.domElement this.config = configFactory.create(this); @@ -76,4 +81,10 @@ export class Toolbar { }) } + back() { + if (this.viewport && this.viewport._stack.length) { + this.viewport.pop() + } + } + } diff --git a/src/components/view/view.js b/src/components/view/view.js index 67cb600b93..a1e51ba1f8 100644 --- a/src/components/view/view.js +++ b/src/components/view/view.js @@ -1,7 +1,10 @@ -import {NgElement, Component, Template, Parent} from 'angular2/angular2' +import {NgElement, Component, Template, Parent, Ancestor} from 'angular2/angular2' import {Toolbar} from 'ionic2/components/toolbar/toolbar' import {ComponentConfig} from 'ionic2/config/component-config' +import {Tabs, NavViewport, NavView} from 'ionic2/components' +import {Optional} from 'angular2/src/di/annotations' + export let ViewConfig = new ComponentConfig('view') @Component({