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'
+ }
+ }
+ }
+});