From fd0fde4890fde748bdb4de9388f23d25570d2f68 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 5 Jun 2015 09:17:45 -0500 Subject: [PATCH] the tab who loved me --- gulpfile.js | 10 +++++--- ionic/components/nav/nav-base.js | 42 ++++++++++++++++++++------------ ionic/components/nav/nav-item.js | 16 +++++++++--- ionic/components/tabs/tab.js | 18 +++++++++++--- ionic/components/tabs/tabs.js | 12 ++++++--- 5 files changed, 69 insertions(+), 29 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index f58159684f..2b3db80d82 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -139,7 +139,7 @@ gulp.task('bundle.deps', function() { return builder.loadConfig('config.js').then(function(){ // add ionic and angular2 build paths, since config.js is loaded at runtime from // tests we don't want to put them there - builder.config({ + builder.config({ baseURL: 'file:' + process.cwd(), paths : { "ionic/*": "dist/js/es6/ionic/*.js", @@ -157,7 +157,7 @@ gulp.task('examples', function() { var buildTest = lazypipe() .pipe(traceur, traceurOptions) //.pipe(babel, babelOptions) Let SystemJS load index.js at runtime, saves build time - + // Get each test folder with gulp.src return gulp.src('ionic/components/*/test/*/**/*') .pipe(cache('examples', { optimizeMemory: true })) @@ -169,7 +169,7 @@ gulp.task('examples', function() { .pipe(gulp.dest('dist/examples/')) function createIndexHTML() { - var indexContents = _.template( + var indexContents = _.template( fs.readFileSync('scripts/e2e/ionic.template.html') )({ buildConfig: buildConfig @@ -400,6 +400,10 @@ function doubleCheckDistFiles() { if (!fs.existsSync('../angular-ionic/dist/js/dev/es5/fonts')) { gulp.start('old.fonts'); } + + if (!fs.existsSync('../angular-ionic/dist/js/dev/es5/polyfills')) { + gulp.start('old.polyfills'); + } } gulp.task('old.clean', function(done) { diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js index 3215cd8872..6a322ed45c 100644 --- a/ionic/components/nav/nav-base.js +++ b/ionic/components/nav/nav-base.js @@ -27,8 +27,6 @@ export class NavBase { injector: Injector ) { - console.log('NavBase, parent NavBase:', parentNavBase); - this.compiler = compiler; this.elementRef = elementRef; this.domElement = elementRef.domElement; @@ -45,11 +43,8 @@ export class NavBase { this.childIds = -1; } - initial(initial) { - console.log('initial') - if (initial) { - this.push(initial); - } + initial(ComponentClass) { + this.push(ComponentClass); } setPaneAnchor(elementRef) { @@ -198,10 +193,12 @@ export class NavBase { } select(enteringItem, opts = {}) { - if (!enteringItem || this.isTransitioning()) { + if (!enteringItem || !enteringItem.instance || this.isTransitioning()) { return; } + enteringItem.instance.loadInitial(); + opts.animation = 'none'; let leavingItem = this.getActive() || new NavItem(); @@ -442,15 +439,24 @@ export class NavBase { return null; } - findByInstance(instance) { - for (let i = 0, ii = this.items.length; i < ii; i++) { - if (this.items[i].instance === instance) { - return this.items[i]; + getByInstance(instance) { + if (instance) { + for (let i = 0, ii = this.items.length; i < ii; i++) { + if (this.items[i].instance === instance) { + return this.items[i]; + } } } return null; } + getByIndex(index) { + if (index < this.items.length && index > -1) { + return this.items[index]; + } + return null; + } + getPrevious(item) { if (item) { return this.items[ this.items.indexOf(item) - 1 ]; @@ -493,10 +499,6 @@ export class NavBase { return this.items.length; } - isActive(item) { - return (item && item.state === ACTIVE_STATE); - } - clear() { let pops = []; for (let item of this.items) { @@ -517,6 +519,14 @@ export class NavBase { return instances } + isActive(item) { + return (item && item.state === ACTIVE_STATE); + } + + isStagedEntering(item) { + return (item && item.state === STAGED_ENTERING_STATE); + } + width() { return this.domElement.offsetWidth; } diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js index 14aaf1140a..2494872829 100644 --- a/ionic/components/nav/nav-item.js +++ b/ionic/components/nav/nav-item.js @@ -63,15 +63,14 @@ export class NavItem { let hostViewRef = viewContainer.create(componentProtoViewRef, -1, null, injector); let newLocation = new ElementRef(hostViewRef, 0); - this.instance = this.navBase.loader._viewManager.getComponent(newLocation); + + this.setInstance( this.navBase.loader._viewManager.getComponent(newLocation) ); + this.setViewElement( hostViewRef._view.render._view.rootNodes[0] ); this.disposals.push(() => { viewContainer.remove( viewContainer.indexOf(hostViewRef) ); }); - this.viewEle = hostViewRef._view.render._view.rootNodes[0]; - this.viewEle.classList.add('nav-item'); - let context = { boundElementIndex: 0, parentView: { @@ -97,6 +96,15 @@ export class NavItem { }); } + setInstance(instance) { + this.instance = instance; + } + + setViewElement(viewEle) { + this.viewEle = viewEle; + viewEle && viewEle.classList.add('nav-item'); + } + cache() { this.didCache(); } diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js index fdbcec13d1..5f22376b87 100644 --- a/ionic/components/tabs/tab.js +++ b/ionic/components/tabs/tab.js @@ -1,5 +1,5 @@ import {Parent} from 'angular2/src/core/annotations_impl/visibility'; -import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations'; +import {Directive, Component, onInit} from 'angular2/src/core/annotations_impl/annotations'; import {Optional} from 'angular2/src/di/annotations_impl' import {View} from 'angular2/src/core/annotations_impl/view'; import {ElementRef} from 'angular2/src/core/compiler/element_ref'; @@ -55,7 +55,8 @@ export class Tab { this.parentNavBase = parentNavBase; this.item = new NavItem(parentNavBase); - this.item.instance = this + this.item.setInstance(this); + this.item.setViewElement(elementRef.domElement); tabs.add(this.item); this.panelId = 'tab-panel-' + this.item.id; @@ -70,8 +71,19 @@ export class Tab { this.domElement = elementRef.domElement; this.config = Nav.config.invoke(this); + } - console.log('Tab constructor', this.item.id, ' parentNavBase:', parentNavBase); + onInit() { + if ( this.parentNavBase.isActive(this.item) || this.parentNavBase.isStagedEntering(this.item) ) { + this.loadInitial(); + } + } + + loadInitial() { + if (this.initial && !this._loaded) { + this.navBase.initial(this.initial); + this._loaded = true; + } } get isSelected() { diff --git a/ionic/components/tabs/tabs.js b/ionic/components/tabs/tabs.js index 2ac1e9fc1e..2028a9ad8f 100644 --- a/ionic/components/tabs/tabs.js +++ b/ionic/components/tabs/tabs.js @@ -59,7 +59,7 @@ export class Tabs { this.navBase.add(tabItem); if (this.navBase.length() === 1) { - this.select(tabItem.instance); + this.select(0); } } @@ -67,8 +67,14 @@ export class Tabs { return this.navBase.instances(); } - select(tabInstance) { - this.navBase.select( this.navBase.findByInstance(tabInstance) ); + select(tab) { + let item = null; + if (typeof tab === 'number') { + item = this.navBase.getByIndex(tab); + } else { + item = this.navBase.getByInstance(tab) + } + this.navBase.select(item); } }