From 760cfcf9ef3f78f844a894bb02d7471a58b36451 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Tue, 6 Oct 2015 08:40:25 -0500 Subject: [PATCH] docs(demos): tabs, nav, button demos --- demos/component-docs/index.ts | 68 +++++++------ demos/component-docs/main.html | 139 ++++++++++++++++++--------- demos/component-docs/navigation.html | 16 +-- demos/component-docs/tabs.html | 12 +++ demos/component-docs/tabs.ts | 35 +++++++ 5 files changed, 185 insertions(+), 85 deletions(-) create mode 100644 demos/component-docs/tabs.html create mode 100644 demos/component-docs/tabs.ts diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index 45f1342ebd..3308a6985e 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -1,30 +1,54 @@ -import {App, IonicApp, ActionSheet, Animation, NavController, NavParams} from 'ionic/ionic'; -import {IonicView, IonicConfig, Events} from 'ionic/ionic'; +import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic'; +import {Modal, IonicView, IonicConfig, Events} from 'ionic/ionic'; import {NgZone} from 'angular2/angular2'; import {NavigationDetailsPage} from 'navigation'; +import {TabsPage} from 'tabs'; + import * as helpers from 'helpers'; +@IonicView({ + template: '
My Modal
' +}) +class DemoModal extends Modal { + constructor() { + super(); + } +} + + @IonicView({ templateUrl: 'main.html' }) -class MainPage { +export class MainPage { - constructor(app: IonicApp, nav: NavController, actionSheet: ActionSheet, zone: NgZone, params: NavParams, events: Events) { + component: any = { title: 'Action Sheets' }; + + constructor(app: IonicApp, + nav: NavController, + actionSheet: ActionSheet, + zone: NgZone, + params: NavParams, + modal: Modal, + events: Events) + { this.params = params; this.nav = nav; + this.modal = modal; this.actionSheet = actionSheet; - this.navDetailsPage = NavigationDetailsPage; - this.component = { title: 'Action Sheets' }; - this.setupAnimations(); + if (params.data.location) { this.component.title = params.data.location; } + else if (window.location.hash) { this.component.title = window.location.hash; } window.addEventListener('message', (e) => { zone.run(() => { if (e.data) { var data = JSON.parse(e.data); this.component.title = helpers.toTitleCase(data.hash.replace('-', ' ')); + if (this.component.title === 'Tabs') { + this.nav.setRoot(TabsPage); + } } }); }); @@ -70,26 +94,16 @@ class MainPage { this.nav.push(NavigationDetailsPage, {name: item}); } - // ************************** - // Animations - // ************************** - setupAnimations() { - this.animation = new Animation(); - this.animation - .duration(2000) - var ionitronSpin = new Animation(document.querySelector('#ionitron')); - ionitronSpin - .from('transform', 'rotate(0deg)') - .to('transform', 'rotate(360deg)') - - this.animation.add(ionitronSpin); - } - play() { - this.animation.play(); - } - pause() { - this.animation.pause(); + // ************************** + // Modal + // ************************** + openModal() { + this.modal.open(DemoModal, { + enterAnimation: 'my-fade-in', + leaveAnimation: 'my-fade-out', + handle: 'my-awesome-modal' + }); } } @@ -103,4 +117,4 @@ class DemoApp { this.rootPage = MainPage; } -} \ No newline at end of file +} diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html index 6be668ea00..37d5df78ca 100644 --- a/demos/component-docs/main.html +++ b/demos/component-docs/main.html @@ -1,5 +1,4 @@ - {{ component.title }} @@ -9,7 +8,7 @@
@@ -32,6 +31,30 @@
+

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+ +
+

@@ -54,6 +77,54 @@
+
+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+ +
+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+
@@ -175,7 +246,7 @@ - + @@ -208,11 +279,6 @@ Charms - - - Herbology - - @@ -224,18 +290,12 @@ - Cloak of Invisibility + Invisibility Cloak Call Ron -
Sure
- - - - - Study Potions
Maybe later
 @@ -251,35 +311,30 @@
@@ -304,12 +359,8 @@ -
- - - - - +
+ diff --git a/demos/component-docs/navigation.html b/demos/component-docs/navigation.html index a0fa477680..5d734ef310 100644 --- a/demos/component-docs/navigation.html +++ b/demos/component-docs/navigation.html @@ -3,18 +3,6 @@ {{ selection.title }} - - - - - - - {{ selection.title }} - - - - {{ selection.content }} - - - + +{{ selection.content }} \ No newline at end of file diff --git a/demos/component-docs/tabs.html b/demos/component-docs/tabs.html new file mode 100644 index 0000000000..c6566ddd7f --- /dev/null +++ b/demos/component-docs/tabs.html @@ -0,0 +1,12 @@ + + Tabs + + + + + + + + + + diff --git a/demos/component-docs/tabs.ts b/demos/component-docs/tabs.ts new file mode 100644 index 0000000000..357ab55d72 --- /dev/null +++ b/demos/component-docs/tabs.ts @@ -0,0 +1,35 @@ +import {NavController, NavParams} from 'ionic/ionic'; +import {IonicView, ViewController, Events} from 'ionic/ionic'; +import {MainPage} from 'index'; +import * as helpers from 'helpers'; + +@IonicView({ + template: 'Hello 1', +}) +class TabOneCtrl { + constructor(nav: NavController, view: ViewController) { + this.nav = nav; + this.view = view; + } +} + +@IonicView({ + templateUrl: 'tabs.html' +}) +export class TabsPage { + constructor(nav: NavController, params: NavParams, events: Events) { + this.nav = nav; + this.TabOneRoot = TabOneCtrl; + window.onmessage = (e) => { + zone.run(() => { + if (e.data) { + var data = JSON.parse(e.data); + var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' ')); + this.nav.setRoot(MainPage, {location: componentTitle}); + events.publish('page:locationChange', { componentName: componentTitle }); + } + }); + }; + + } +} \ No newline at end of file