Merge pull request #310 from NativeScript/modal-pages

Modal pages

application/application.ios.ts

@@ -31,7 +31,7 @@ class Window extends UIWindow {
     }
 
     public layoutSubviews(): void {
-        utils.ios._layoutRootView(this._content);
+        utils.ios._layoutRootView(this._content, UIScreen.mainScreen().bounds);
     }
 }
 

apps/modal-views-demo/app.ts

@@ -1,3 +1,9 @@
 import application = require("application");
 application.mainModule = "main-page";
+import trace = require("trace");
+trace.enable();
+trace.setCategories(trace.categories.concat(
+    trace.categories.Layout,
+    "LayoutRootView.iOS"
+    ));
 application.start();

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

@@ -1,7 +1,7 @@
-<Page xmlns="http://www.nativescript.org/tns.xsd" shownModally="onShownModally" loaded="onLoaded" unloaded="onUnloaded">
+<Page xmlns="http://www.nativescript.org/tns.xsd" shownModally="onShownModally" loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red">
-  <StackLayout>
+  <StackLayout backgroundColor="PaleGreen">
-    <TextField hint="username" id="username"/>
+    <TextField hint="username" id="username" text="username"/>
-    <TextField hint="password" id="password" secure="true"/>
+    <TextField hint="password" id="password" text="password" secure="true"/>
     <Button text="Login" tap="onLoginButtonTap"/>
   </StackLayout>
 </Page>

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

@@ -11,8 +11,9 @@ export function pageLoaded(args: observable.EventData) {
 }
 
 export function onTap(args: observable.EventData) {
-    page.showModal("./modal-views-demo/login-page", "some custom context", function(username: string, password: string) {
+    var fullscreen = (<any>args.object).text.indexOf("(full-screen)") !== -1;
+    page.showModal("./modal-views-demo/login-page", "some custom context", function (username: string, password: string) {
         console.log(username + "/" + password);
         label.text = username + "/" + password;
-    });
+    }, fullscreen);
 }

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

@@ -1,6 +1,7 @@
-<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded" id="_mainPage">
+<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded" id="_mainPage" backgroundColor="Red">
-  <StackLayout>
+  <StackLayout backgroundColor="PaleGreen">
-    <Button text="Login" tap="onTap" />
+    <Button text="Login (small)" tap="onTap" />
+    <Button text="Login (full-screen)" tap="onTap" />
     <Label id="label" text="Anonymous"/>
   </StackLayout>
 </Page>

ui/page/page-common.ts

@@ -133,12 +133,12 @@ export class Page extends contentView.ContentView implements dts.Page, view.AddA
         this._navigationContext = undefined;
     }
 
-    public showModal(moduleName: string, context: any, closeCallback: Function) {
+    public showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean) {
         var page = frameCommon.resolvePageFromEntry({ moduleName: moduleName });
-        (<Page>page)._showNativeModalView(this, context, closeCallback);
+        (<Page>page)._showNativeModalView(this, context, closeCallback, fullscreen);
     }
 
-    protected _showNativeModalView(parent: Page, context: any, closeCallback: Function) {
+    protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
         //
     }
 

ui/page/page.android.ts

@@ -8,11 +8,13 @@ require("utils/module-merge").merge(pageCommon, exports);
 
 class DialogFragmentClass extends android.app.DialogFragment {
     private _owner: Page;
+    private _fullscreen: boolean;
 
-    constructor(owner: Page) {
+    constructor(owner: Page, fullscreen?: boolean) {
         super();
 
         this._owner = owner;
+        this._fullscreen = fullscreen;
         return global.__native(this);
     }
 
@@ -22,7 +24,10 @@ class DialogFragmentClass extends android.app.DialogFragment {
         dialog.setContentView(this._owner._nativeView);
         var window = dialog.getWindow();
         window.setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(android.graphics.Color.TRANSPARENT));
-        window.setLayout(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT);
+
+        if (this._fullscreen) {
+            window.setLayout(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT);
+        }
         
         return dialog;
     }
@@ -61,7 +66,7 @@ export class Page extends pageCommon.Page {
     /* tslint:disable */
     private _dialogFragment: DialogFragmentClass;
     /* tslint:enable */
-    protected _showNativeModalView(parent: Page, context: any, closeCallback: Function) {
+    protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
         if (!this.backgroundColor) {
             this.backgroundColor = new color.Color("White");
         }
@@ -70,7 +75,7 @@ export class Page extends pageCommon.Page {
         this._isAddedToNativeVisualTree = true;
         this.onLoaded();
 
-        this._dialogFragment = new DialogFragmentClass(this);
+        this._dialogFragment = new DialogFragmentClass(this, fullscreen);
         this._dialogFragment.show(parent.frame.android.activity.getFragmentManager(), "dialog");        
         
         super._raiseShownModallyEvent(parent, context, closeCallback);

ui/page/page.d.ts

@@ -143,8 +143,9 @@ declare module "ui/page" {
          * @param moduleName - The name of the page module to load starting from the application root.
          * @param context - Any context you want to pass to the modally shown page. This same context will be available in the arguments of the Page.shownModally event handler.
          * @param closeCallback - A function that will be called when the page is closed. Any arguments provided when calling ShownModallyData.closeCallback will be available here.
+         * @param fullscreen - An optional parameter specifying whether to show the modal page in full-screen mode.
          */
-        showModal(moduleName: string, context: any, closeCallback: Function);
+        showModal(moduleName: string, context: any, closeCallback: Function, fullscreen?: boolean);
 
         _addArrayFromBuilder(name: string, value: Array<any>): void;
 

ui/page/page.ios.ts

@@ -23,8 +23,9 @@ class UIViewControllerImpl extends UIViewController {
 
     public didRotateFromInterfaceOrientation(fromInterfaceOrientation: number) {
         trace.write(this._owner + " didRotateFromInterfaceOrientation(" + fromInterfaceOrientation+ ")", trace.categories.ViewHierarchy);
-        if (this._owner._isModal) {
+        if ((<any>this._owner)._isModal) {
-            utils.ios._layoutRootView(this._owner);
+            var parentBounds = (<any>this._owner)._UIModalPresentationFormSheet ? (<UIView>this._owner._nativeView).superview.bounds : UIScreen.mainScreen().bounds;
+            utils.ios._layoutRootView(this._owner, parentBounds);
         }
     }
 
@@ -57,7 +58,6 @@ class UIViewControllerImpl extends UIViewController {
 export class Page extends pageCommon.Page {
     private _ios: UIViewController;
     public _enableLoadedEvents: boolean;
-    public _isModal = false;
 
     constructor(options?: definition.Options) {
         super(options);
@@ -147,19 +147,33 @@ export class Page extends pageCommon.Page {
         navigationItem.setRightBarButtonItemsAnimated(array, true);
     }
 
-    protected _showNativeModalView(parent: Page, context: any, closeCallback: Function) {
+    protected _showNativeModalView(parent: Page, context: any, closeCallback: Function, fullscreen?: boolean) {
-        this._isModal = true;
+        (<any>this)._isModal = true;
-        utils.ios._layoutRootView(this);
+
+        if (fullscreen) {
+            this._ios.modalPresentationStyle = UIModalPresentationStyle.UIModalPresentationFullScreen;
+            utils.ios._layoutRootView(this, UIScreen.mainScreen().bounds);
+        }
+        else {
+            this._ios.modalPresentationStyle = UIModalPresentationStyle.UIModalPresentationFormSheet;
+            (<any>this)._UIModalPresentationFormSheet = true;
+        }
 
         var that = this;
         parent.ios.presentViewControllerAnimatedCompletion(this._ios, false, function completion() {
+            if (!fullscreen) {
+                // We can measure and layout the modal page after we know its parent's dimensions.
+                utils.ios._layoutRootView(that, that._nativeView.superview.bounds);
+            }
+
             that._raiseShownModallyEvent(parent, context, closeCallback);
         });
     }
 
     protected _hideNativeModalView(parent: Page) {
         parent._ios.dismissModalViewControllerAnimated(false);
-        this._isModal = false;
+        (<any>this)._isModal = false;
+        (<any>this)._UIModalPresentationFormSheet = false;
     }
 }
 

utils/utils.d.ts

@@ -122,7 +122,7 @@
          */
         export var MajorVersion: number;
 
-        export function _layoutRootView(rootView: view.View): void;
+        export function _layoutRootView(rootView: view.View, parentBounds: CGRect): void;
     }
     /**
      * An utility function that copies properties from source object to target object.

utils/utils.ios.ts

@@ -1,6 +1,7 @@
 import common = require("utils/utils-common");
 import colorModule = require("color");
 import view = require("ui/core/view");
+//import trace = require("trace");
 
 // merge the exports of the common file with the exports of this file
 declare var exports;
@@ -79,46 +80,68 @@ export module ios {
 
     export var MajorVersion = NSString.stringWithString(UIDevice.currentDevice().systemVersion).intValue;
 
-    export function _layoutRootView(rootView: view.View) {
+    export function _layoutRootView(rootView: view.View, parentBounds: CGRect) {
-        if (!rootView) {
+        if (!rootView || !parentBounds) {
             return;
         }
 
-        var statusFrame = UIApplication.sharedApplication().statusBarFrame;
-        var statusBarHeight = 0;
-
-        try {
-            statusBarHeight = Math.min(statusFrame.size.width, statusFrame.size.height);
-        } catch (ex) {
-            console.log("exception: " + ex);
-        }
-
         var landscape = isLandscape();
-
         var iOSMajorVersion = MajorVersion;
-        // in iOS 8 when in landscape statusbar is hidden.
+        var size = parentBounds.size;
-        if (landscape && iOSMajorVersion > 7) {
-            statusBarHeight = 0;
-        }
-
-        var deviceFrame = UIScreen.mainScreen().bounds;
-        var size = deviceFrame.size;
         var width = size.width;
         var height = size.height;
 
-        // in iOS 7 when in landscape we switch width with height because on device they don't change even when rotated.
+        //trace.write("--------------------------------------------", "LayoutRootView.iOS");
-        if (iOSMajorVersion < 8 && landscape) {
+        //trace.write("| Layout Root View", "LayoutRootView.iOS");
+        //trace.write("| rootView: " + rootView, "LayoutRootView.iOS");
+        //trace.write("| parentBounds: " + NSStringFromCGRect(parentBounds), "LayoutRootView.iOS");
+        //trace.write("| UIScreen.mainScreen().bounds: " + NSStringFromCGRect(UIScreen.mainScreen().bounds), "LayoutRootView.iOS");
+        //trace.write("| _isModal: " + (<any>rootView)._isModal, "LayoutRootView.iOS");
+        //trace.write("| _UIModalPresentationFormSheet: " + (<any>rootView)._UIModalPresentationFormSheet, "LayoutRootView.iOS");
+        //trace.write("| landscape: " + landscape, "LayoutRootView.iOS");
+        //trace.write("| iOSMajorVersion: " + iOSMajorVersion, "LayoutRootView.iOS");
+        var superview = (<UIView>rootView._nativeView).superview;
+        //trace.write("| superview: " + superview, "LayoutRootView.iOS");
+        var superViewRotationRadians;
+        if (superview) {
+            superViewRotationRadians = atan2f(superview.transform.b, superview.transform.a);
+            //trace.write("| superViewRotationRadians: " + superViewRotationRadians + " rad.", "LayoutRootView.iOS");
+            //trace.write("| superview.bounds: " + NSStringFromCGRect(superview.bounds), "LayoutRootView.iOS");
+        }
+
+        if (iOSMajorVersion < 8 && landscape && !superViewRotationRadians) {
+            // in iOS 7 when in landscape we switch width with height because on device they don't change even when rotated.
+            //trace.write("| >>> Detected iOS 7 device in landscape mode and superview is not rotated. Manually swapping width and height...", "LayoutRootView.iOS");
             width = size.height;
             height = size.width;
         }
 
-        var origin = deviceFrame.origin;
+        var statusBarHeight;
+        if (UIApplication.sharedApplication().statusBarHidden || ((<any>rootView)._UIModalPresentationFormSheet && !CGSizeEqualToSize(parentBounds.size, UIScreen.mainScreen().bounds.size))) {
+            statusBarHeight = 0;
+        }
+        else {
+            // Status bar section
+            var statusFrame = UIApplication.sharedApplication().statusBarFrame;
+            try {
+                statusBarHeight = Math.min(statusFrame.size.width, statusFrame.size.height);
+            } catch (ex) {
+                console.log("exception: " + ex);
+            }
+        }
+        //trace.write("| UIApplication.sharedApplication().statusBarHidden: " + UIApplication.sharedApplication().statusBarHidden, "LayoutRootView.iOS");
+        //trace.write("| statusBarHeight: " + statusBarHeight, "LayoutRootView.iOS");
+
+        var origin = parentBounds.origin;
         var left = origin.x;
         var top = origin.y + statusBarHeight;
 
         var widthSpec = layout.makeMeasureSpec(width, common.layout.EXACTLY);
         var heightSpec = layout.makeMeasureSpec(height - statusBarHeight, common.layout.EXACTLY);
 
+        //trace.write("| >>> Will measure and layout with {{" + left + ", " + top + "}{" + width + ", " + height + "}}", "LayoutRootView.iOS");
+        //trace.write("--------------------------------------------", "LayoutRootView.iOS");
+
         rootView.measure(widthSpec, heightSpec);
         rootView.layout(left, top, width, height);
     }