chore(): fix overlay demos/tests

CHANGELOG.md

@@ -72,21 +72,22 @@ import {Popup} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(popup: Popup) {
-  this.popup = popup;
-}
-doConfirm() {
-  this.popup.confirm({
-    title: "Use this lightsaber?",
-    subTitle: "You can't exchange lightsabers",
-    template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
-    cancelText: "Disagree",
-    okText: "Agree"
-  }).then((result, ev) => {
-    console.log('Confirmed!', result);
-  }, () => {
-    console.error('Not confirmed!');
-  });
+  constructor(popup: Popup) {
+    this.popup = popup;
+  }
+  doConfirm() {
+    this.popup.confirm({
+      title: "Use this lightsaber?",
+      subTitle: "You can't exchange lightsabers",
+      template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
+      cancelText: "Disagree",
+      okText: "Agree"
+    }).then((result, ev) => {
+      console.log('Confirmed!', result);
+    }, () => {
+      console.error('Not confirmed!');
+    });
+  }
 }
 ```
 
@@ -97,31 +98,32 @@ import {Alert, NavController} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(nav: NavController) {
-  this.nav = nav;
-}
-doConfirm() {
-  let alert = Alert.create({
-    title: "Use this lightsaber?",
-    subTitle: "You can't exchange lightsabers",
-    body: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
-    buttons: [
-      {
-        text: 'Disagree',
-        handler: () => {
-          console.log('Disagreed :(');
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+  doConfirm() {
+    let alert = Alert.create({
+      title: "Use this lightsaber?",
+      subTitle: "You can't exchange lightsabers",
+      body: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
+      buttons: [
+        {
+          text: 'Disagree',
+          handler: () => {
+            console.log('Disagreed :(');
+          }
+        },
+        {
+          text: 'Agree',
+          handler: () => {
+            console.log('Agreed!');
+          }
         }
-      },
-      {
-        text: 'Agree',
-        handler: () => {
-          console.log('Agreed!');
-        }
-      }
-    ]
-  });
+      ]
+    });
 
-  this.nav.present(alert);
+    this.nav.present(alert);
+  }
 }
 ```
 
@@ -134,21 +136,23 @@ import {Popup} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(popup: Popup) {
-  this.popup = popup;
+  constructor(popup: Popup) {
+    this.popup = popup;
+  }
+  doPrompt() {
+    this.popup.prompt({
+      title: "New Album",
+      template: "Enter a name for this new album you're so keen on adding",
+      inputPlaceholder: "Album Name",
+      okText: "Save",
+      okType: "secondary"
+    }).then((name) => {
+      console.log('Name entered:', name);
+    }, () => {
+      console.error('Prompt closed');
+    });
+  }
 }
-doPrompt() {
-  this.popup.prompt({
-    title: "New Album",
-    template: "Enter a name for this new album you're so keen on adding",
-    inputPlaceholder: "Album Name",
-    okText: "Save",
-    okType: "secondary"
-  }).then((name) => {
-    console.log('Name entered:', name);
-  }, () => {
-    console.error('Prompt closed');
-  });
 ```
 
 Now:
@@ -158,36 +162,37 @@ import {Alert, NavController} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(nav: NavController) {
-  this.nav = nav;
-}
-doConfirm() {
-  let alert = Alert.create({
-    title: "New Album",
-    body: "Enter a name for this new album you're so keen on adding",
-    inputs: [
-      {
-        name: 'album',
-        placeholder: 'Album Name'
-      }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        handler: data => {
-          console.log('Canceled!', data);
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+  doConfirm() {
+    let alert = Alert.create({
+      title: "New Album",
+      body: "Enter a name for this new album you're so keen on adding",
+      inputs: [
+        {
+          name: 'album',
+          placeholder: 'Album Name'
         }
-      },
-      {
-        text: 'Ok',
-        handler: data => {
-          console.log('Submitted', data);
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          handler: data => {
+            console.log('Canceled!', data);
+          }
+        },
+        {
+          text: 'Ok',
+          handler: data => {
+            console.log('Submitted', data);
+          }
         }
-      }
-    ]
-  });
+      ]
+    });
 
-  this.nav.present(alert);
+    this.nav.present(alert);
+  }
 }
 ```
 
@@ -200,33 +205,96 @@ import {ActionSheet} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(actionSheet: ActionSheet) {
-  this.actionSheet = actionSheet;
-}
-doActionMenu() {
-  this.actionSheet.open({
-    buttons: [
-      { text: 'Archive' }
-    ],
-    titleText: 'Modify your album',
-    cancelText: 'Cancel',
-    cancel: function() {
-      console.log('Canceled clicked');
-    },
-    destructiveText: 'Delete',
-    destructiveButtonClicked: () => {
-      console.log('Delete clicked');
-    },
-    buttonClicked: function(index) {
-      if (index == 0) {
-        console.log('Archive clicked');
+  constructor(actionSheet: ActionSheet) {
+    this.actionSheet = actionSheet;
+  }
+  doActionSheet() {
+    this.actionSheet.open({
+      buttons: [
+        { text: 'Archive' }
+      ],
+      titleText: 'Modify your album',
+      cancelText: 'Cancel',
+      cancel: function() {
+        console.log('Canceled clicked');
+      },
+      destructiveText: 'Delete',
+      destructiveButtonClicked: () => {
+        console.log('Delete clicked');
+      },
+      buttonClicked: function(index) {
+        if (index == 0) {
+          console.log('Archive clicked');
+        }
+        return true;
       }
-      return true;
-    }
 
-  }).then(actionSheetRef => {
-    this.actionSheetRef = actionSheetRef;
-  });
+    }).then(actionSheetRef => {
+      this.actionSheetRef = actionSheetRef;
+    });
+  }
+}
+```
+
+Now:
+
+```
+import {ActionSheet, NavController} from 'ionic/ionic';
+
+@Page(...)
+class MyPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+  doActionSheet(ev) {
+    let actionSheet = ActionSheet.create({
+      title: 'Modify your album',
+      buttons: [
+        {
+          text: 'Delete',
+          style: 'destructive',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        },
+        {
+          text: 'Archive',
+          handler: () => {
+            console.log('Archive clicked');
+          }
+        },
+        {
+          text: 'Cancel',
+          style: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        },
+      ]
+    });
+
+    this.nav.present(actionSheet);
+  }
+}
+```
+
+##### Modal Refactor
+
+Was:
+
+```
+import {Modal} from 'ionic/ionic';
+
+@Page(...)
+class MyApp {
+
+ constructor(modal: Modal) {
+   this.modal = modal;
+ }
+
+ openContactModal() {
+   this.modal.open(EditUser, { userId: 8675309 });
+ }
 
 }
 ```
@@ -234,41 +302,17 @@ doActionMenu() {
 Now:
 
 ```
-import {Alert, NavController} from 'ionic/ionic';
+import {Modal, NavController} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(nav: NavController) {
-  this.nav = nav;
-}
-doActionMenu(ev) {
-  let actionSheet = ActionSheet.create({
-    title: 'Modify your album',
-    buttons: [
-      {
-        text: 'Delete',
-        style: 'destructive',
-        handler: () => {
-          console.log('Delete clicked');
-        }
-      },
-      {
-        text: 'Archive',
-        handler: () => {
-          console.log('Archive clicked');
-        }
-      },
-      {
-        text: 'Cancel',
-        style: 'cancel',
-        handler: () => {
-          console.log('Cancel clicked');
-        }
-      },
-    ]
-  });
-
-  this.nav.present(actionSheet);
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+  presentModal() {
+    let modal = Modal.create(EditUser, { userId: 8675309 });
+    this.nav.present(modal);
+  }
 }
 ```
 

ionic/components/item/test/sliding/index.ts

@@ -1,11 +1,11 @@
-import {App, IonicApp, Popup} from 'ionic/ionic';
+import {App, Page, IonicApp, Alert, NavController} from 'ionic/ionic';
 
 
-@App({
+@Page({
   templateUrl: 'main.html'
 })
-class E2EApp {
-  constructor(private app: IonicApp, private popup: Popup) {
+class E2EPage {
+  constructor(private app: IonicApp, private nav: NavController) {
     this.items = [];
     for (let x = 0; x < 20; x++) {
       this.items.push(x);
@@ -21,32 +21,54 @@ class E2EApp {
   didClick(item) {
     console.log('Clicked, ion-item');
 
-    this.popup.alert({
-      title: 'Clicked ion-item!'
+    let alert = Alert.create({
+      title: 'Clicked ion-item!',
+      buttons: ['Ok']
     });
+    this.nav.present(alert);
   }
 
   archive(item) {
     console.log('Archive, ion-item-options button', item);
 
-    this.popup.alert({
-      title: 'Archived!'
-    }).then(() => {
-      item.close();
+    let alert = Alert.create({
+      title: 'Archived!',
+      buttons: [{
+        text: 'Ok',
+        handler: () => {
+          item.close();
+        }
+      }]
     });
+    this.nav.present(alert);
   }
 
   del(item) {
     console.log('Delete ion-item-options button', item);
 
-    this.popup.alert({
-      title: 'Deleted!'
-    }).then(() => {
-      item.close();
+    let alert = Alert.create({
+      title: 'Deleted!',
+      buttons: [{
+        text: 'Ok',
+        handler: () => {
+          item.close();
+        }
+      }]
     });
+    this.nav.present(alert);
   }
 
   reload() {
     window.location.reload();
   }
 }
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}

ionic/components/menu/test/basic/index.ts

@@ -1,18 +1,21 @@
-import {App, IonicApp, Page, NavController, Popup} from 'ionic/ionic';
+import {App, IonicApp, Page, NavController, Alert} from 'ionic/ionic';
 
 
-@Page({templateUrl: 'page1.html'})
+@Page({
+  templateUrl: 'page1.html'
+})
 class Page1 {
-  constructor(popup: Popup) {
-    this.popup = popup;
+  constructor(nav: NavController) {
+    this.nav = nav;
   }
-  openPopup() {
-    this.popup.alert({
+  presentAlert() {
+    let alert = Alert.create({
       title: "New Friend!",
-      template: "Your friend, Obi wan Kenobi, just accepted your friend request!",
-      cssClass: 'my-alert'
+      body: "Your friend, Obi wan Kenobi, just accepted your friend request!",
+      cssClass: 'my-alert',
+      buttons: ['Ok']
     });
-    console.log('openPopup');
+    this.nav.present(alert);
   }
 }
 

ionic/components/menu/test/basic/page1.html

@@ -48,7 +48,7 @@
   </ion-card>
 
   <p>
-    <button (click)="openPopup()">Open popup</button>
+    <button (click)="presentAlert()">Open alert</button>
   </p>
 
 </ion-content>

ionic/components/modal/test/basic/index.ts

@@ -198,28 +198,32 @@ class ModalFirstPage {
   }
 
   openActionSheet() {
-    this.actionSheet.open({
+    let actionSheet = ActionSheet.create({
       buttons: [
-        { text: 'Share This' },
-        { text: 'Move' }
-      ],
-      destructiveText: 'Delete',
-      titleText: 'Modify your album',
-      cancelText: 'Cancel',
-      cancel: function() {
-        console.log('Canceled');
-      },
-      destructiveButtonClicked: () => {
-        console.log('Destructive clicked');
-      },
-      buttonClicked: function(index) {
-        console.log('Button clicked', index);
-        if(index == 1) { return false; }
-        return true;
-      }
-    }).then(actionSheetRef => {
-      this.actionSheetRef = actionSheetRef;
+        {
+          text: 'Destructive',
+          style: 'destructive',
+          handler: () => {
+            console.log('Destructive clicked');
+          }
+        },
+        {
+          text: 'Archive',
+          handler: () => {
+            console.log('Archive clicked');
+          }
+        },
+        {
+          text: 'Cancel',
+          style: 'cancel',
+          handler: () => {
+            console.log('cancel this clicked');
+          }
+        }
+      ]
     });
+
+    this.nav.present(actionSheet);
   }
 }
 

ionic/components/nav/nav-router.ts

@@ -82,7 +82,7 @@ export class NavRouter extends RouterOutlet {
     if (pathRecognizer) {
 
       // generate a componentInstruction from the view's PathRecognizer and params
-      let componentInstruction = pathRecognizer.generate(viewCtrl.params.data);
+      let componentInstruction = pathRecognizer.generate(viewCtrl.data);
 
       // create a ResolvedInstruction from the componentInstruction
       let instruction = new ResolvedInstruction(componentInstruction, null);

ionic/components/tabs/tab.ts

@@ -52,8 +52,9 @@ import {Tabs} from './tabs';
  * }
  * ```
  *
- * In other cases, you may not want to navigate to a new component, but just call a method.
- * You can use the `(select)` event to call a method on your class.
+ * In other cases, you may not want to navigate to a new component, but just
+ * call a method. You can use the `(select)` event to call a method on your
+ * class. Below is an example of presenting a modal from one of the tabs.
  *
  * ```html
  * <ion-tabs preloadTabs="false">
@@ -63,15 +64,15 @@ import {Tabs} from './tabs';
  *
  * ```ts
  * export class Tabs {
- *   constructor(modal: Modal){
- *     this.modal = modal;
+ *   constructor(nav: NavController){
+ *     this.nav = nav;
  *   }
  *   chat() {
- *      this.modal.open(ChatPage);
+ *     let modal = Modal.create(ChatPage);
+ *     this.nav.present(modal);
  *   }
  * }
  * ```
- * In this case, when we tap on the tab, we'll open a modal instead of loading a new component.
  *
  *
  * @property {any} [root] - set the root page for this tab

ionic/components/tabs/test/advanced/index.ts

@@ -1,6 +1,6 @@
 import {RouteConfig, Location} from 'angular2/router';
 
-import {App, Page, NavController, Modal} from 'ionic/ionic';
+import {App, Page, NavController, Modal, ViewController} from 'ionic/ionic';
 
 
 @Page({
@@ -42,18 +42,22 @@ class SignIn {
       <ion-title>Chat Modal</ion-title>
     </ion-toolbar>
     <ion-content padding>
-      <p><button (click)="close()">Close Modal</button></p>
+      <p><button (click)="viewCtrl.dismiss()">Close Modal</button></p>
     </ion-content>
   `
 })
-class ChatPage {}
+class ChatPage {
+  constructor(viewCtrl: ViewController) {
+    this.viewCtrl = viewCtrl;
+  }
+}
 
 
 @Page({
   templateUrl: './tabs.html'
 })
 class TabsPage {
-  constructor(private modal: Modal) {
+  constructor(private nav: NavController) {
     this.tab1Root = Tab1Page1
     this.tab2Root = Tab2Page1
     this.tab3Root = Tab3Page1
@@ -61,7 +65,8 @@ class TabsPage {
 
   chat() {
     console.log('Chat clicked!');
-    this.modal.open(ChatPage);
+    let modal = Modal.create(ChatPage);
+    this.nav.present(modal);
   }
 
   onTabChange() {