From ec1aa92b66e1243a3a0ee01448209da01d66e1b8 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 21 Jul 2015 17:00:42 -0500 Subject: [PATCH] Popups working --- ionic/components/overlay/overlay.ts | 4 + ionic/components/popup/popup.ts | 188 +++++++++++++++------------- 2 files changed, 106 insertions(+), 86 deletions(-) diff --git a/ionic/components/overlay/overlay.ts b/ionic/components/overlay/overlay.ts index 37f6449b47..a3b18028a0 100644 --- a/ionic/components/overlay/overlay.ts +++ b/ionic/components/overlay/overlay.ts @@ -99,6 +99,10 @@ export class OverlayRef { app.overlays.push(this); } + getElementRef() { + return this._elementRef; + } + _open(opts={}) { return new Promise(resolve => { let animationName = (opts && opts.animation) || this._opts.enterAnimation; diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index d164d52194..08471257d7 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -1,4 +1,5 @@ -import {Component, View, Injectable, CSSClass, NgIf, NgFor, onInit} from 'angular2/angular2'; +import {formDirectives, NgControl, NgControlGroup, + Component, View, Injectable, CSSClass, NgIf, NgFor, onInit} from 'angular2/angular2'; import {Overlay} from '../overlay/overlay'; import {Animation} from '../../animations/animation'; @@ -24,87 +25,93 @@ export class Popup extends Overlay { alert(context={}, opts={}) { if(typeof context === 'string') { - let button = { - text: 'OK', - onTap: (event, popupRef) => { - // Allow it to close - //resolve(); - } - }; context = { - cancel: () => { - //reject(); - }, - title: context, - buttons: [ - button - ] - }; + title: context + } } + let button = { + text: 'OK', + onTap: (event, popupRef) => { + // Allow it to close + //resolve(); + } + }; + context = util.extend({ + cancel: () => { + //reject(); + }, + buttons: [ + button + ] + }, context); return this.popup(context, opts); } confirm(context={}, opts={}) { - return new Promise((resolve, reject)=> { - if(typeof context === 'string') { - let okButton = { - text: 'OK', - onTap: (event, popupRef) => { - // Allow it to close - resolve(true); - } - } - let cancelButton = { - text: 'Cancel', - onTap: (event, popupRef) => { - // Allow it to close - reject(); - } - } - context = { - cancel: () => { - reject(); - }, - title: context, - buttons: [ - cancelButton, okButton - ] - } + if(typeof context === 'string') { + context = { + title: context } - this.popup(context, opts); - }); + } + let okButton = { + text: 'OK', + onTap: (event, popupRef) => { + // Allow it to close + } + } + let cancelButton = { + text: 'Cancel', + isCancel: true, + onTap: (event, popupRef) => { + // Allow it to close + } + } + context = util.extend({ + cancel: () => { + }, + buttons: [ + cancelButton, okButton + ] + }, context); + return this.popup(context, opts); } prompt(context={}, opts={}) { - return new Promise((resolve, reject)=> { - if(typeof context === 'string') { - let okButton = { - text: 'Ok', - onTap: (event, popupRef) => { - // Allow it to close - } - } - let cancelButton = { - text: 'Cancel', - onTap: (event, popupRef) => { - // Allow it to close - reject(); - } - } - context = { - cancel: () => { - reject(); - }, - title: context, - buttons: [ - cancelButton, okButton - ] - } - } - this.popup(context, opts); - }); + if(typeof context === 'string') { + context = { + title: context + }; + } + let okButton = { + text: 'Ok', + onTap: (event, popupRef) => { + // Allow it to close + } + } + + let cancelButton = { + text: 'Cancel', + isCancel: true, + onTap: (event, popupRef) => { + // Allow it to close + } + } + + context = util.extend({ + showPrompt: true, + promptPlaceholder: '', + cancel: () => { + }, + buttons: [ + cancelButton, okButton + ] + }, context); + + console.log('Context', context); + + return this.popup(context, opts); } get(handle) { @@ -131,49 +138,58 @@ const OVERLAY_TYPE = 'popup'; '' + '' + '' + '' + '' + '', - directives: [CSSClass, NgIf, NgFor] + directives: [formDirectives, CSSClass, NgIf, NgFor] }) class StandardPopup { constructor(popup: Popup) { this.popup = popup; - } onInit() { - console.log(this.promiseResolve); + console.log('INIT'); + setTimeout(() => { + this.element = this.overlayRef.getElementRef().nativeElement; + this.promptInput = this.element.querySelector('input'); + if(this.promptInput) { + this.promptInput.value = ''; + } + }); } buttonTapped(button, event) { - let retVal = button.onTap && button.onTap(event, this); + let promptValue = this.promptInput && this.promptInput.value; - // If the event.preventDefault() called, don't close + let retVal = button.onTap && button.onTap(event, this, { + promptValue: promptValue + }); + + // If the event.preventDefault() wasn't called, close if(!event.defaultPrevented) { + // If this is a cancel button, reject the promise + if(button.isCancel) { + this.promiseReject(); + } else { + // Resolve with the prompt value + this.promiseResolve(promptValue); + } return this.overlayRef.close(); } + } _cancel(event) { this.cancel && this.cancel(event); if(!event.defaultPrevented) { - this.promiseReject.resolve(); + this.promiseReject(); return this.overlayRef.close(); } } - - /* - _buttonClicked(index) { - let shouldClose = this.buttonClicked(index); - if (shouldClose === true) { - return this.overlayRef.close(); - } - } - */ - } class PopupAnimation extends Animation {