diff --git a/CHANGELOG.md b/CHANGELOG.md index 091d30a898..083af32a21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,192 @@ + +# 2.0.0-alpha.46 (2016-1-4) + + +### Breaking Changes + +##### Overlay Refactor + +* `` 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); +} +``` + + # 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 @@ ``` - + 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 diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index d2709f24dc..f6605babf8 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/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={}) { diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts index e124a4ce5a..5a66237311 100644 --- a/ionic/components/alert/alert.ts +++ b/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={}) { diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts index 6140dba8df..365667d879 100644 --- a/ionic/components/modal/test/basic/index.ts +++ b/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(); } diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index fee7c1019e..34aefa93b4 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -17,20 +17,32 @@ import {NavParams} from './nav-controller'; * ``` */ export class ViewController { - @Output() data: EventEmitter = new EventEmitter(); + @Output() _emitter: EventEmitter = 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); }