modal updates

CHANGELOG.md

@@ -1,3 +1,192 @@
+<a name="2.0.0-alpha.46"></a>
+# 2.0.0-alpha.46 (2016-1-4)
+
+
+### Breaking Changes
+
+##### Overlay Refactor
+
+* `<ion-overlay></ion-overlay>` is no longer required within any template
+* `Popup` has been renamed to `Alert`
+* Common API for all overlays: `Alert`, `ActionSheet`, `Modal`, etc.
+* `Alert` is more generic and you can mix and match any number of buttons/inputs
+* `Alert` and `ActionSheet` can take an array of buttons with `handlers`
+* Returning `false` from button handlers prevent the overlay from closing
+* All overlays use `NavController` `present()`, similar to `push()`
+* A `Modal` uses an injected `ViewController` to dismiss itself
+  and optionally pass data to modal's `onDismss()`
+
+##### Alert Refactor
+
+Was:
+
+```
+import {Popup} from 'ionic/ionic';
+
+@Page(...)
+class MyPage {
+  constructor(popup: Popup) {
+    this.popup = popup;
+  }
+  doAlert() {
+    this.popup.alert({
+      title: "New Friend!",
+      template: "Obi wan Kenobi just accepted your friend request!"
+    });
+  }
+}
+```
+
+Now:
+
+```
+import {Alert, NavController} from 'ionic/ionic';
+
+@Page(...)
+class MyPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+  doAlert() {
+    let alert = Alert.create({
+      title: "New Friend!",
+      body: "Obi wan Kenobi just accepted your friend request!",
+      buttons: ['Ok']
+    });
+
+    this.nav.present(alert);
+  }
+}
+```
+
+##### Confirm Refactor
+
+Was:
+
+```
+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!');
+  });
+}
+```
+
+Now:
+
+```
+import {Alert, NavController} from 'ionic/ionic';
+
+@Page(...)
+class MyPage {
+constructor(nav: NavController) {
+  this.nav = nav;
+}
+doConfirm() {
+  let alert = Alert.create({
+    title: "New Friend!",
+    body: "Obi wan Kenobi just accepted your friend request!",
+    buttons: [
+      {
+        text: 'Agree',
+        handler: () => {
+          console.log('Agreed!');
+        }
+      },
+      {
+        text: 'Disagree',
+        handler: () => {
+          console.log('Disagreed :(');
+        }
+      }
+    ]
+  });
+
+  this.nav.present(alert);
+}
+```
+
+##### Prompt Refactor
+
+Was:
+
+```
+import {Popup} from 'ionic/ionic';
+
+@Page(...)
+class MyPage {
+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');
+  });
+```
+
+Now:
+
+```
+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);
+        }
+      },
+      {
+        text: 'Ok',
+        handler: data => {
+          console.log('Submitted', data);
+        }
+      }
+    ]
+  });
+
+  this.nav.present(alert);
+}
+```
+
+
 <a name="2.0.0-alpha.42"></a>
 # 2.0.0-alpha.42 (2015-12-11)
 
@@ -62,7 +251,7 @@
 
 
 1. Update to the latest beta CLI: `npm install -g ionic@beta`
-2. Update `ionic-framework` in your `package.json` and then run `npm install` in the project directory: 
+2. Update `ionic-framework` in your `package.json` and then run `npm install` in the project directory:
 
    ```
    "ionic-framework": "2.0.0-alpha.42",
@@ -76,16 +265,16 @@
   <link ios-href="build/css/app.ios.css" rel="stylesheet">
   <link md-href="build/css/app.md.css" rel="stylesheet">
   ```
-  
+
 6. Add core stylesheets (copy from a [starter](https://github.com/driftyco/ionic2-starter-tabs) or [conference app](https://github.com/driftyco/ionic-conference-app)) and remove app.scss:
-  
+
   ```
   app.core.scss
   app.ios.scss
   app.md.scss
   app.variables.scss
   ```
-  
+
 7. Update `app.core.scss` to reflect your Sass files
 8. Add the new gulp packages and gulp file found in the [ionic2-app-base](https://github.com/driftyco/ionic2-app-base) or any of the starters
 9. Add the contents from the [ionic2-app-base](https://github.com/driftyco/ionic2-app-base) ionic.config.js file

ionic/components/action-sheet/action-sheet.ts

@@ -38,15 +38,15 @@ import {Animation} from '../../animations/animation';
    }
 
    setTitle(title) {
-     this._data.title = title;
+     this.data.title = title;
    }
 
    setSubTitle(subTitle) {
-     this._data.subTitle = subTitle;
+     this.data.subTitle = subTitle;
    }
 
    addButton(button) {
-     this._data.buttons.push(button);
+     this.data.buttons.push(button);
    }
 
    static create(data={}) {

ionic/components/alert/alert.ts

@@ -24,23 +24,23 @@ export class Alert extends ViewController {
   }
 
   setTitle(title) {
-    this._data.title = title;
+    this.data.title = title;
   }
 
   setSubTitle(subTitle) {
-    this._data.subTitle = subTitle;
+    this.data.subTitle = subTitle;
   }
 
   setBody(body) {
-    this._data.body = body;
+    this.data.body = body;
   }
 
   addInput(input) {
-    this._data.inputs.push(input);
+    this.data.inputs.push(input);
   }
 
   addButton(button) {
-    this._data.buttons.push(button);
+    this.data.buttons.push(button);
   }
 
   static create(data={}) {

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

@@ -32,8 +32,8 @@ class E2EPage {
     let modal = Modal.create(ModalPassData, { userId: 8675309 });
     this.nav.present(modal);
 
-    modal.data.subscribe(data => {
-      console.log('data', data);
+    modal.onDismiss(data => {
+      console.log('modal data', data);
     });
   }
 
@@ -45,6 +45,10 @@ class E2EPage {
   presentToolbarModal() {
     let modal = Modal.create(ToolbarModal);
     this.nav.present(modal);
+
+    modal.subscribe(data => {
+      console.log('modal data', data);
+    });
   }
 
   presentModalCustomAnimation() {
@@ -86,8 +90,7 @@ class ModalPassData {
   }
 
   submit() {
-    this.viewCtrl.data.emit(this.data);
-    this.viewCtrl.dismiss();
+    this.viewCtrl.dismiss(this.data);
   }
 }
 
@@ -116,6 +119,9 @@ class ToolbarModal {
   }
 
   dismiss() {
+    this.viewCtrl.emit({
+      toolbar: 'data'
+    });
     this.viewCtrl.dismiss();
   }
 

ionic/components/nav/view-controller.ts

@@ -17,20 +17,32 @@ import {NavParams} from './nav-controller';
  *  ```
  */
 export class ViewController {
-  @Output() data: EventEmitter<any> = new EventEmitter();
+  @Output() _emitter: EventEmitter<any> = new EventEmitter();
 
   constructor(componentType, data={}) {
     this.componentType = componentType;
-    this._data = data;
+    this.data = data;
     this.instance = {};
     this.state = 0;
     this._destroys = [];
     this._loaded = false;
-    this._outputData = null;
     this.shouldDestroy = false;
     this.shouldCache = false;
     this.viewType = '';
     this._leavingOpts = null;
+    this._onDismiss = null;
+  }
+
+  subscribe(callback) {
+    this._emitter.subscribe(callback);
+  }
+
+  emit(data) {
+    this._emitter.emit(data);
+  }
+
+  onDismiss(callback) {
+    this._onDismiss = callback;
   }
 
   setNav(navCtrl) {
@@ -42,10 +54,11 @@ export class ViewController {
   }
 
   getNavParams() {
-    return new NavParams(this._data);
+    return new NavParams(this.data);
   }
 
-  dismiss() {
+  dismiss(data) {
+    this._onDismiss && this._onDismiss(data);
     return this._nav.remove(this._nav.indexOf(this), this._leavingOpts);
   }