Merge pull request #864 from NativeScript/Dialog_Fixes

Dialog fixes

apps/modal-views-demo/main-page.ts

@@ -16,4 +16,8 @@ export function onTap(args: observable.EventData) {
         console.log(username + "/" + password);
         label.text = username + "/" + password;
     }, fullscreen);
+}
+
+export function onCloseModal(args: observable.EventData) {
+    page.closeModal();
 }

apps/modal-views-demo/main-page.xml

@@ -3,5 +3,6 @@
     <Button text="Login (small)" tap="onTap" />
     <Button text="Login (full-screen)" tap="onTap" />
     <Label id="label" text="Anonymous"/>
+    <Button text="Close Modal" tap="onCloseModal" />
   </StackLayout>
 </Page>

ui/page/page-common.ts

@@ -33,6 +33,8 @@ export class Page extends contentView.ContentView implements dts.Page {
     public static navigatedFromEvent = "navigatedFrom";
     public static shownModallyEvent = "shownModally";
 
+    protected _closeModalCallback: Function;
+
     private _navigationContext: any;
 
     private _cssApplied: boolean;
@@ -189,6 +191,12 @@ export class Page extends contentView.ContentView implements dts.Page {
         (<Page>page)._showNativeModalView(this, context, closeCallback, fullscreen);
     }
 
+    public closeModal() {
+        if (this._closeModalCallback) {
+            this._closeModalCallback.apply(undefined, arguments);
+        }
+    }
+
     public _addChildFromBuilder(name: string, value: any) {
         if (value instanceof actionBar.ActionBar) {
             this.actionBar = value;
@@ -199,7 +207,16 @@ export class Page extends contentView.ContentView implements dts.Page {
     }
 
     protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
-        //
+        var that = this;
+        this._closeModalCallback = function () {
+            if (that._closeModalCallback) {
+                that._closeModalCallback = null;
+                that._hideNativeModalView(parent);
+                if (typeof closeCallback === "function") {
+                    closeCallback.apply(undefined, arguments);
+                }
+            }
+        };
     }
 
     protected _hideNativeModalView(parent: Page) {
@@ -207,19 +224,11 @@ export class Page extends contentView.ContentView implements dts.Page {
     }
 
     protected _raiseShownModallyEvent(parent: Page, context: any, closeCallback: Function) {
-        var that = this;
-        var closeProxy = function () {
-            that._hideNativeModalView(parent);
-            if (closeCallback){
-                closeCallback.apply(undefined, arguments);
-            }
-        };
-
         this.notify({
             eventName: Page.shownModallyEvent,
             object: this,
             context: context,
-            closeCallback: closeProxy
+            closeCallback: this._closeModalCallback
         });
     }
 

ui/page/page.android.ts

@@ -12,12 +12,14 @@ global.moduleMerge(pageCommon, exports);
 class DialogFragmentClass extends android.app.DialogFragment {
     private _owner: Page;
     private _fullscreen: boolean;
+    private _dismissCallback: Function;
 
-    constructor(owner: Page, fullscreen?: boolean) {
+    constructor(owner: Page, fullscreen?: boolean, dismissCallback?: Function) {
         super();
 
         this._owner = owner;
         this._fullscreen = fullscreen;
+        this._dismissCallback = dismissCallback;
         return global.__native(this);
     }
 
@@ -29,11 +31,18 @@ class DialogFragmentClass extends android.app.DialogFragment {
         window.setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(android.graphics.Color.TRANSPARENT));
 
         if (this._fullscreen) {
-        window.setLayout(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT);
+            window.setLayout(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT);
         }
         
         return dialog;
     }
+
+    public onDismiss() {
+        if (typeof this._dismissCallback === "function") {
+            this._dismissCallback();
+        }
+    }
+
 };
 
 export class Page extends pageCommon.Page {
@@ -56,7 +65,11 @@ export class Page extends pageCommon.Page {
     public _createUI() {
         this._grid = new org.nativescript.widgets.GridLayout(this._context);
         this._grid.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.auto));
-        this._grid.addRow(new org.nativescript.widgets.ItemSpec(1, org.nativescript.widgets.GridUnitType.star));
+        var gridUnitType = org.nativescript.widgets.GridUnitType.star
+        if (this._closeModalCallback) {
+            gridUnitType = org.nativescript.widgets.GridUnitType.auto;
+        }
+        this._grid.addRow(new org.nativescript.widgets.ItemSpec(1, gridUnitType));
     }
 
     public _addViewToNativeVisualTree(child: view.View, atIndex?: number): boolean {
@@ -96,6 +109,7 @@ export class Page extends pageCommon.Page {
     private _dialogFragment: DialogFragmentClass;
     /* tslint:enable */
     protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
+        super._showNativeModalView(parent, context, closeCallback, fullscreen);
         if (!this.backgroundColor) {
             this.backgroundColor = new color.Color("White");
         }
@@ -104,7 +118,10 @@ export class Page extends pageCommon.Page {
         this._isAddedToNativeVisualTree = true;
         this.onLoaded();
 
-        this._dialogFragment = new DialogFragmentClass(this, fullscreen);
+        var that = this;
+        this._dialogFragment = new DialogFragmentClass(this, fullscreen, function() {
+            that.closeModal();
+        });
         this._dialogFragment.show(parent.frame.android.activity.getFragmentManager(), "dialog");        
         
         super._raiseShownModallyEvent(parent, context, closeCallback);

ui/page/page.d.ts

@@ -157,6 +157,11 @@ declare module "ui/page" {
          */
         showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean);
 
+        /**
+         * Closes the current modal dialog that this page is showing.
+         */
+        closeModal();
+        
         //@private
 
         /**

ui/page/page.ios.ts

@@ -130,6 +130,7 @@ export class Page extends pageCommon.Page {
     }
 
     protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
+        super._showNativeModalView(parent, context, closeCallback, fullscreen);
         this._isModal = true;
 
         if (!parent.ios.view.window) {