diff --git a/demos/modal/app.html b/demos/modal/app.html new file mode 100644 index 0000000000..5f6bb33d68 --- /dev/null +++ b/demos/modal/app.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/demos/modal/index.ts b/demos/modal/index.ts index cf5ab019b2..1a7dc97174 100644 --- a/demos/modal/index.ts +++ b/demos/modal/index.ts @@ -3,35 +3,32 @@ import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ion @App({ + templateUrl: 'app.html' +}) +class ApiDemoApp { + + constructor() { + this.rootPage = ModalFirstPage; + } +} + +@Page({ templateUrl: 'main.html' }) -class MyAppCmp { - - constructor(modal: Modal, app: IonicApp, config: Config, platform: Platform) { +export class ModalFirstPage { + constructor(modal: Modal) { this.modal = modal; - - console.log('platforms', platform.platforms()); - console.log('mode', config.get('mode')); - - console.log('core', platform.is('core')) - console.log('cordova', platform.is('cordova')) - console.log('mobile', platform.is('mobile')) - console.log('ipad', platform.is('ipad')) - console.log('iphone', platform.is('iphone')) - console.log('phablet', platform.is('phablet')) - console.log('tablet', platform.is('tablet')) - console.log('ios', platform.is('ios')) - console.log('android', platform.is('android')) - console.log('windows phone', platform.is('windowsphone')) - - platform.ready().then(() => { - console.log('platform.ready') - }); - + this.myParam = ''; } - openModal() { - this.modal.open(ContactModal, { + openBasicModal() { + this.modal.open(ModalContentPage); + } + openModalWithParams() { + this.modal.open(ModalContentPage, { 'myParam': this.myParam }); + } + openCustomAnimationModal() { + this.modal.open(ModalContentPage, {}, { enterAnimation: 'my-fade-in', leaveAnimation: 'my-fade-out', handle: 'my-awesome-modal' @@ -40,154 +37,76 @@ class MyAppCmp { } @Page({ - template: '' + templateUrl: "modal-content.html" }) -export class ContactModal { - constructor() { - console.log('ContactModal constructor') - this.rootView = ModalFirstPage; - } - onViewLoaded() { - console.log('ContactModal onViewLoaded'); - } - onViewWillEnter() { - console.log('ContactModal onViewWillEnter'); - } - onViewDidEnter() { - console.log('ContactModal onViewDidEnter'); - } - onViewWillLeave() { - console.log('ContactModal onViewWillLeave'); - } - onViewDidLeave() { - console.log('ContactModal onViewDidLeave'); - } - onViewWillUnload() { - console.log('ContactModal onViewWillUnload'); - } - onViewDidUnload() { - console.log('ContactModal onViewDidUnload'); - } -} +export class ModalContentPage { + constructor( + nav: NavController, + modal: Modal, + actionSheet: ActionSheet, + params: NavParams + ) { + this.nav = nav; + this.modal = modal; + this.actionSheet = actionSheet; + this.myParam = params.get('myParam'); + } - -@Page({ - template: ` - First Page Header - -

- -

-

- -

-

- -

- - - - ` -}) -export class ModalFirstPage { - constructor( - nav: NavController, - modal: Modal, - actionSheet: ActionSheet - ) { - this.nav = nav; - this.modal = modal; - this.actionSheet = actionSheet; - } - - push() { - this.nav.push(ModalSecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' }); - } - - closeModal() { - let modal = this.modal.get(); - modal.close(); - } - - closeByHandleModal() { - debugger; - let modal = this.modal.get('my-awesome-modal'); - modal.close(); - } - - openActionSheet() { - this.actionSheet.open({ - 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; + closeModal() { + let modal = this.modal.get(); + if (modal) { + modal.close(); } - }).then(actionSheetRef => { - this.actionSheetRef = actionSheetRef; - }); - } -} - - -@Page({ - template: ` - Second Page Header - -

- -

- - - - ` -}) -export class ModalSecondPage { - constructor( - nav: NavController, - params: NavParams - ) { - this.nav = nav; - this.params = params; - - console.log('Second page params:', params); - } + } + openActionSheet() { + this.actionSheet.open({ + 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; + }); + } } class FadeIn extends Animation { - constructor(element) { - super(element); + constructor(enteringView, leavingView) { + super(enteringView.pageRef()); this .easing('ease') - .duration(450) - .fadeIn(); + .duration(1000) + .fromTo('translateY', '0%', '0%') + .fadeIn() + .before.addClass('show-page'); } } - Animation.register('my-fade-in', FadeIn); class FadeOut extends Animation { - constructor(element) { - super(element); + constructor(enteringView, leavingView) { + super(leavingView.pageRef()); this .easing('ease') - .duration(250) - .fadeOut(); + .duration(500) + .fadeOut() + .before.addClass('show-page'); } } - Animation.register('my-fade-out', FadeOut); diff --git a/demos/modal/main.html b/demos/modal/main.html index 4bd4fe9ff6..6a0e8bd348 100644 --- a/demos/modal/main.html +++ b/demos/modal/main.html @@ -3,7 +3,21 @@ - + + + + + + + + + + + + + Params + + + + - - diff --git a/demos/modal/modal-content.html b/demos/modal/modal-content.html new file mode 100644 index 0000000000..74fdea736d --- /dev/null +++ b/demos/modal/modal-content.html @@ -0,0 +1,8 @@ + + Modals + + + +
Parameters entered: {{myParam}}
+ + diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 39f345eb3e..863783f333 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -22,6 +22,7 @@ import {Toolbar} from '../toolbar/toolbar'; * @property [fab-bottom] - position a fab button towards the bottom * @description * Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes. + * @demo /docs/v2/demos/buttons/ * @see {@link /docs/v2/components#buttons Button Component Docs} */ diff --git a/ionic/components/modal/modal.ts b/ionic/components/modal/modal.ts index 604966fe81..83f611447f 100644 --- a/ionic/components/modal/modal.ts +++ b/ionic/components/modal/modal.ts @@ -33,6 +33,7 @@ import {extend} from 'ionic/util'; * * } * ``` + * @demo /docs/v2/demos/modal/ * @see {@link /docs/v2/components#modals Modal Component Docs} */ @Injectable()