docs(demos): navigation demo

demos/component-docs/helpers.ts

@@ -0,0 +1,3 @@
+export function toTitleCase(str) {
+  return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
+}

demos/component-docs/index.ts

@@ -1,34 +1,42 @@
-import {App, ActionSheet, Animation} from 'ionic/ionic';
+import {App, IonicApp, ActionSheet, Animation, NavController, NavParams} from 'ionic/ionic';
+import {IonicView, IonicConfig, Events} from 'ionic/ionic';
 import {NgZone} from 'angular2/angular2';
+import {NavigationDetailsPage} from 'navigation';
+import * as helpers from 'helpers';
 
-function toTitleCase(str) {
-  return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
-}
 
-@App({
+@IonicView({
   templateUrl: 'main.html'
 })
-class DemoApp {
+class MainPage {
 
-  component: any;
-  actionSheet: any;
-
-  constructor(actionSheet: ActionSheet, zone: NgZone) {
+  constructor(app: IonicApp, nav: NavController, actionSheet: ActionSheet, zone: NgZone, params: NavParams, events: Events) {
+    this.params = params;
+    this.nav = nav;
     this.actionSheet = actionSheet;
-    this.component = {
-        title: 'Tabs',
-    };
-    window.onmessage = (e) => {
+
+    this.navDetailsPage = NavigationDetailsPage;
+    this.component = { title: 'Tabs' };
+
+    this.setupAnimations();
+
+    window.addEventListener('message', (e) => {
       zone.run(() => {
         if (e.data) {
           var data = JSON.parse(e.data);
-          this.component.title = toTitleCase(data.hash.replace('-', ' '));
+          this.component.title = helpers.toTitleCase(data.hash.replace('-', ' '));
         }
       });
-    };
-    this.setupAnimations();
+    });
+
+    events.subscribe('page:locationChange', (data) => {
+      this.component.title = data[0].componentName;
+    });
   }
 
+  // **************************
+  // Action Sheets
+  // **************************
   openMenu() {
     this.actionSheet.open({
       buttons: [
@@ -55,6 +63,16 @@ class DemoApp {
     });
   }
 
+  // **************************
+  // Navigation
+  // **************************
+  openNavDetailsPage(item) {
+    this.nav.push(NavigationDetailsPage, {name: item});
+  }
+
+  // **************************
+  // Animations
+  // **************************
   setupAnimations() {
     this.animation = new Animation();
     this.animation
@@ -67,14 +85,22 @@ class DemoApp {
 
     this.animation.add(ionitronSpin);
   }
-
   play() {
     this.animation.play();
   }
-
   pause() {
     this.animation.pause();
   }
 
+}
+
+@App({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'  
+})
+class DemoApp {
+
+  constructor() {
+    this.rootPage = MainPage;
+  }
 
 }

demos/component-docs/main.html

@@ -1,5 +1,9 @@
 
-<ion-toolbar><ion-title>{{ component.title }}</ion-title></ion-toolbar>
+
+<ion-navbar *navbar class="show-navbar">
+  <ion-title>{{ component.title }}</ion-title>
+</ion-navbar>
+
 
 <ion-content class="has-header components-demo">
 
@@ -234,8 +238,38 @@
     <section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }">
    TODO
   </section>
+
   <section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
-   TODO
+    <ion-card>
+      <ion-card-header primary>
+        Tap for more info...
+      </ion-card-header>
+
+      <ion-card-content>
+
+        <a ion-item href="#" (click)="openNavDetailsPage('Angular')">
+          <icon ion-social-angular item-left></icon>
+          Angular
+        </a>
+
+        <a ion-item href="#" (click)="openNavDetailsPage('CSS3')">
+          <icon ion-social-css3 item-left></icon>
+          CSS3
+        </a>
+
+        <button ion-item (click)="openNavDetailsPage('HTML5')">
+          <icon ion-social-html5 item-left></icon>
+          HTML5
+        </button>
+
+        <button ion-item (click)="openNavDetailsPage('Sass')">
+          <icon ion-social-sass item-left></icon>
+          Sass
+        </button>
+      </ion-card-content>
+
+    </ion-card> 
+
   </section>
   
   <section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">

demos/component-docs/navigation.html

@@ -0,0 +1,20 @@
+
+<ion-navbar *navbar>
+  <ion-title>{{ selection.title }}</ion-title>
+</ion-navbar>
+
+<ion-content>
+
+<ion-card>
+
+  <ion-card-header primary>
+    <icon [name]="selection.icon" item-left></icon>
+    {{ selection.title }}
+  </ion-card-header>
+
+  <ion-card-content>
+    {{ selection.content }}
+  </ion-card-content>
+
+</ion-card> 
+</ion-content>

demos/component-docs/navigation.ts

@@ -0,0 +1,38 @@
+import {NavController, NavParams} from 'ionic/ionic';
+import {IonicView, Events} from 'ionic/ionic';
+import * as helpers from 'helpers';
+
+@IonicView({
+  templateUrl: 'navigation.html'
+})
+export class NavigationDetailsPage {
+  constructor(nav: NavController, params: NavParams, events: Events) {
+    this.nav = nav;
+    this.selection = { title: params.data.name };
+    var navData = {
+        'Angular': "A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.",
+        'CSS3': "The latest version of cascading stylesheets - the styling language of the web!",
+        'HTML5': "The latest version of the web's markup language.",
+        'Sass': "Syntactically Awesome Stylesheets - a mature, stable, and powerful professional grade CSS extension."
+    };
+    var navIcons = {
+        'Angular': 'ion-social-angular',
+        'CSS3': 'ion-social-css3',
+        'HTML5': 'ion-social-html5',
+        'Sass': 'ion-social-sass'
+    };
+    this.selection['content'] = navData[this.selection.title];
+    this.selection['icon'] = navIcons[this.selection.title];
+    window.onmessage = (e) => {
+      zone.run(() => {
+        if (e.data) {
+          var data = JSON.parse(e.data);
+          var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' '));
+          events.publish('page:locationChange', { componentName: componentTitle });
+          this.nav.pop();
+        }
+      });
+    };
+
+  }
+}

gulpfile.js

@@ -57,8 +57,7 @@ gulp.task('build', function(done) {
   runSequence(
     'bundle',
     'e2e',
-    'demos',
-    'copy.docs-demo',
+    'demos:all',
     'sass',
     'fonts',
     done
@@ -100,7 +99,7 @@ gulp.task('watch', function(done) {
       );
 
       watch('demos/**/*', function() {
-        gulp.start('demos');
+        gulp.start('demos:all');
       });
 
       watch('ionic/components/*/test/**/*', function(file) {
@@ -394,11 +393,11 @@ gulp.task('demos', function(){
   }
 })
 
-gulp.task('copy.docs-demo', function () {
+gulp.task('demos:all', ['demos'], function() {
    return gulp
     .src('dist/demos/component-docs/*')
     .pipe(gulp.dest('dist/ionic-site/docs/v2/components/demo/')) 
-})
+});
 
 gulp.task('publish', function(done) {
   var version = flags.version;