From f9086f0ba9ca7163e9a19ef105d4ebe34d45a32a Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 4 Jun 2015 11:51:14 -0500 Subject: [PATCH] better gulp watch --- gulpfile.js | 11 +++- ionic/components/nav/nav-item.js | 20 +++--- ionic/components/nav/nav-pane.js | 13 ++-- ionic/components/tabs/tab.js | 35 +++++----- ionic/tabs.js | 107 +++++++++++++++++++++++++++++++ 5 files changed, 148 insertions(+), 38 deletions(-) create mode 100644 ionic/tabs.js diff --git a/gulpfile.js b/gulpfile.js index 82612d437a..666d08dbbb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -40,12 +40,17 @@ gulp.task('watch', function() { 'polyfills', function() { - watch('ionic/**/*.js', function() { - gulp.start('ionic.copy.js'); + watch('ionic/**/*.js', function(file) { + var splt = file.path.split('/'); + var filename = splt[splt.length - 1]; + + var dest = file.path.replace(__dirname, '../angular-ionic/modules'); + dest = dest.replace(filename, '') + + return gulp.src(file.path).pipe(gulp.dest(dest)); }); watch('ionic/components/*/test/**/*', function() { - gulp.start('ionic.copy.js'); gulp.start('ionic.examples'); }); diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js index 9038113a6e..f24d30e4b4 100644 --- a/ionic/components/nav/nav-item.js +++ b/ionic/components/nav/nav-item.js @@ -11,8 +11,8 @@ import {TabPane, NavPane, NavPaneSection} from './nav'; export class NavItem { - constructor(nav, Component, params = {}) { - this.nav = nav; + constructor(navBase, Component, params = {}) { + this.navBase = navBase; this.Component = Component; this.params = params; this.id = util.nextUid(); @@ -32,7 +32,7 @@ export class NavItem { stage(callback) { // update if it's possible to go back from this nav item - //this.enableBack = !!this.nav.getPrevious(this); + //this.enableBack = !!this.navBase.getPrevious(this); if (this.instance) { // already compiled this view @@ -40,29 +40,29 @@ export class NavItem { } // compile the Component - this.nav.compiler.compileInHost(this.Component).then(componentProtoViewRef => { + this.navBase.compiler.compileInHost(this.Component).then(componentProtoViewRef => { // figure out the sturcture of this Component // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars? let itemStructure = getProtoViewStructure(componentProtoViewRef); // get the appropriate NavPane which this NavItem will fit into - this.nav.getPane(itemStructure, navPane => { + this.navBase.getPane(itemStructure, pane => { // create a new injector just for this NavItem - let injector = this.nav.injector.resolveAndCreateChild([ + let injector = this.navBase.injector.resolveAndCreateChild([ bind(NavBase).toValue(this.navBase), - bind(NavController).toValue(this.nav.navCtrl), + bind(NavController).toValue(this.navBase.navCtrl), bind(NavParams).toValue(new NavParams(this.params)), bind(NavItem).toValue(this) ]); // add the content of the view to the content area - let viewContainer = navPane.contentContainerRef; + let viewContainer = pane.contentContainerRef; let hostViewRef = viewContainer.create(componentProtoViewRef, -1, null, injector); let newLocation = new ElementRef(hostViewRef, 0); - this.instance = this.nav.loader._viewManager.getComponent(newLocation); + this.instance = this.navBase.loader._viewManager.getComponent(newLocation); this.disposals.push(() => { viewContainer.remove( viewContainer.indexOf(hostViewRef) ); @@ -79,7 +79,7 @@ export class NavItem { }; // add only the sections it needs - let navbarViewContainer = navPane.sections.navbar.viewContainerRef; + let navbarViewContainer = pane.sections.navbar.viewContainerRef; if (navbarViewContainer && itemStructure.navbar && this.protos.navbar) { this.navbarView = navbarViewContainer.create(this.protos.navbar, -1, context, injector); diff --git a/ionic/components/nav/nav-pane.js b/ionic/components/nav/nav-pane.js index 0aa9c32530..b619f2b3c9 100644 --- a/ionic/components/nav/nav-pane.js +++ b/ionic/components/nav/nav-pane.js @@ -12,10 +12,10 @@ import {Nav} from './nav'; template: `
- +
`, - directives: [NavPaneSectionAnchor, NavViewAnchor] + directives: [NavPaneSectionAnchor, NavContentAnchor] }) export class NavPane { constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) { @@ -29,9 +29,6 @@ export class NavPane { } -// Used to dynamically create new sections for a NavPane -// This is simply a reference point to create new sections -// Navbar, toolbar, and tabbar sections would be created next to this @Directive({ selector: 'template[nav-section-anchor]' }) @@ -42,12 +39,10 @@ class NavPaneSectionAnchor { } -// Where the content of the NavItem goes next to. All NavPanes have content. -// This is simply a reference point to where content goes @Directive({ - selector: 'template[view-anchor]' + selector: 'template[content-anchor]' }) -class NavViewAnchor { +class NavContentAnchor { constructor(@Parent() navPane: NavPane, viewContainerRef: ViewContainerRef) { navPane.contentContainerRef = viewContainerRef; } diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.js index bad9ca7fe5..8f1e76f44a 100644 --- a/ionic/components/tabs/tab.js +++ b/ionic/components/tabs/tab.js @@ -35,36 +35,43 @@ import {IonicComponent} from 'ionic/config/component'; }) @View({ template: ` - + `, - directives: [TabViewAnchor] + directives: [TabContentAnchor] }) export class Tab { constructor( @Parent() tabs: Tabs, @Optional() parentNavBase: NavBase, - compiler:Compiler, + compiler: Compiler, elementRef: ElementRef, loader: DynamicComponentLoader, - injector: Injector + injector: Injector, + viewContainerRef: ViewContainerRef ) { this.navBase = new NavBase(parentNavBase, compiler, elementRef, loader, injector); - this.domElement = elementRef.domElement; - this.config = Nav.config.invoke(this); + this.viewContainerRef = viewContainerRef; + + this.sections = parentNavBase; + this.navBase.panes['_n'] = this; this.isSelected = false; this.ariaHidden = true; + tabs.addTab(this); this.panelId = 'tab-panel-' + this.id; this.labeledBy = 'tab-button-' + this.id; - console.log('Tab constructor', this.id); + this.domElement = elementRef.domElement; + this.config = Nav.config.invoke(this); + + console.log('Tab constructor', this.id, ' parentNavBase:', parentNavBase); } onInit() { - //this.navBase.initial(this.initial); + this.navBase.initial(this.initial); } select(shouldSelect) { @@ -79,18 +86,14 @@ export class Tab { this.ariaHidden = !shouldSelect; } - setPaneAnchor(elementRef) { - this.navBase.setPaneAnchor(elementRef); - } - } @Directive({ - selector: 'template[view-anchor]' + selector: 'template[content-anchor]' }) -class TabViewAnchor { - constructor(@Parent() tab: Tab, elementRef: ElementRef) { - tab.setPaneAnchor(elementRef); +class TabContentAnchor { + constructor(@Parent() tab: Tab, viewContainerRef: ViewContainerRef) { + tab.contentContainerRef = viewContainerRef; } } diff --git a/ionic/tabs.js b/ionic/tabs.js new file mode 100644 index 0000000000..dd9b431bca --- /dev/null +++ b/ionic/tabs.js @@ -0,0 +1,107 @@ +import {Ancestor, Parent} from 'angular2/src/core/annotations_impl/visibility'; +import {Optional} from 'angular2/src/di/annotations_impl' +import {Directive, Component, onInit} from 'angular2/src/core/annotations_impl/annotations'; +import {View} from 'angular2/src/core/annotations_impl/view'; +import {ElementRef} from 'angular2/src/core/compiler/element_ref'; +import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader'; +import {Injector} from 'angular2/di'; +import {NgFor} from 'angular2/angular2'; +import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref'; + +import {IonicComponent} from '../../config/component'; +import {Tab} from './tab'; +import {TabButton} from './tab-button'; +import {Icon} from '../icon/icon'; +import {Nav, NavPane} from '../nav/nav'; +import {NavBase} from '../nav/nav-base'; +import {NavItem} from '../nav/nav-item'; + + +let tabsId = -1; + +@Component({ + selector: 'ion-tabs', + properties: [ + 'tabBarPlacement', + 'tabBarIcons' + ], + lifecycle: [onInit] +}) +@View({ + template: ` + +
+ +
+ `, + directives: [NgFor, TabButton, Icon] +}) +export class Tabs { + constructor( + elementRef: ElementRef, + @Optional() parentNavBase: NavBase + ) { + this.id = ++tabsId; + this.tabIds = 0; + this.tabs = []; + + this.domElement = elementRef.domElement; + this.config = Tabs.config.invoke(this); + + console.log('Tabs constructor', this.id, ' parentNavBase:', parentNavBase); + } + + onInit() { + if (this.tabs.length > 0) { + this.selectTab(this.tabs[0]); + } + } + + addTab(tab) { + tab.id = this.id + '' + (++this.tabIds); + this.tabs.push(tab); + } + + selectTab(tabToSelect) { + if (typeof tabToSelect === 'number') { + let index = tabToSelect; + tabToSelect = null; + if (index < this.tabs.length) { + tabToSelect = this.tabs[index]; + } + } + if (!tabToSelect || this._selected === tabToSelect) return; + + this.tabs.forEach(tab => { + tab.select( (tab === tabToSelect) ); + }); + + this._selected = tabToSelect; + } + +} +new IonicComponent(Tabs, { + properties: { + tabBarPlacement: { + defaults: { + ios: 'bottom', + android: 'top', + core: 'bottom' + } + }, + tabBarIcons: { + defaults: { + ios: 'top', + android: 'top', + core: 'top' + } + } + } +});