diff --git a/apps/app/modaltest/app.css b/apps/app/modaltest/app.css
new file mode 100644
index 000000000..84c63cd1d
--- /dev/null
+++ b/apps/app/modaltest/app.css
@@ -0,0 +1,3 @@
+Button {
+ background-color: red
+}
\ No newline at end of file
diff --git a/apps/app/modaltest/main-page.xml b/apps/app/modaltest/main-page.xml
new file mode 100644
index 000000000..ef80210c1
--- /dev/null
+++ b/apps/app/modaltest/main-page.xml
@@ -0,0 +1,19 @@
+
+
+
+
+ -->
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/app/modaltest/modal-frame.1.xml b/apps/app/modaltest/modal-frame.1.xml
new file mode 100644
index 000000000..39f23da4a
--- /dev/null
+++ b/apps/app/modaltest/modal-frame.1.xml
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/app/modaltest/modal-frame.xml b/apps/app/modaltest/modal-frame.xml
new file mode 100644
index 000000000..c505323de
--- /dev/null
+++ b/apps/app/modaltest/modal-frame.xml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/app/modaltest/modal-tab.33.xml b/apps/app/modaltest/modal-tab.33.xml
new file mode 100644
index 000000000..879f43090
--- /dev/null
+++ b/apps/app/modaltest/modal-tab.33.xml
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/app/modaltest/modal-tab.css b/apps/app/modaltest/modal-tab.css
new file mode 100644
index 000000000..6807afe57
--- /dev/null
+++ b/apps/app/modaltest/modal-tab.css
@@ -0,0 +1,3 @@
+Button {
+ background-color: white
+}
\ No newline at end of file
diff --git a/apps/app/modaltest/modal-tab.xml b/apps/app/modaltest/modal-tab.xml
new file mode 100644
index 000000000..ca07236f8
--- /dev/null
+++ b/apps/app/modaltest/modal-tab.xml
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/app/modaltest/page.2.xml b/apps/app/modaltest/page.2.xml
new file mode 100644
index 000000000..92ea67ee1
--- /dev/null
+++ b/apps/app/modaltest/page.2.xml
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/app/modaltest/textview.xml b/apps/app/modaltest/textview.xml
new file mode 100644
index 000000000..c337fcca9
--- /dev/null
+++ b/apps/app/modaltest/textview.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tns-core-modules/application/application.ios.ts b/tns-core-modules/application/application.ios.ts
index 443e74350..4fb251b9a 100644
--- a/tns-core-modules/application/application.ios.ts
+++ b/tns-core-modules/application/application.ios.ts
@@ -16,8 +16,8 @@ export * from "./application-common";
// TODO: Remove this and get it from global to decouple builder for angular
import { createViewFromEntry } from "../ui/builder";
-import { ios as iosView, ViewBase } from "../ui/core/view";
-import { Frame, View, NavigationEntry } from "../ui/frame";
+import { ios as iosView, View } from "../ui/core/view";
+import { Frame, NavigationEntry } from "../ui/frame";
import { ios } from "../ui/utils";
import * as utils from "../utils/utils";
import { profile } from "../profiling";
@@ -51,7 +51,7 @@ class IOSApplication implements IOSApplicationDefinition {
private _currentOrientation = utils.ios.getter(UIDevice, UIDevice.currentDevice).orientation;
private _window: UIWindow;
private _observers: Array;
- private _rootView: ViewBase;
+ private _rootView: View;
constructor() {
this._observers = new Array();
@@ -114,18 +114,7 @@ class IOSApplication implements IOSApplicationDefinition {
notify(args);
notify({ eventName: "loadAppCss", object: this, cssFile: getCssFileName() });
- const rootView = createRootView(args.root);
- this._rootView = rootView;
- const controller = getViewController(rootView);
- this._window.rootViewController = controller;
- if (createRootFrame) {
- // Don't setup as styleScopeHost
- rootView._setupUI({});
- } else {
- // setup view as styleScopeHost
- rootView._setupAsRootView({});
- }
- this._window.makeKeyAndVisible();
+ this.setWindowContent(args.root);
}
@profile
@@ -193,12 +182,44 @@ class IOSApplication implements IOSApplicationDefinition {
});
}
}
+
+ public _onLivesync(): void {
+ // If view can't handle livesync set window controller.
+ if (!this._rootView._onLivesync()) {
+ this.setWindowContent();
+ }
+ }
+
+ public setWindowContent(view?: View): void {
+ const rootView = createRootView(view);
+ this._rootView = rootView;
+ const controller = getViewController(rootView);
+
+ if (createRootFrame) {
+ // Don't setup as styleScopeHost
+ rootView._setupUI({});
+ } else {
+ // setup view as styleScopeHost
+ rootView._setupAsRootView({});
+ }
+
+ const haveController = this._window.rootViewController !== null;
+ this._window.rootViewController = controller;
+ if (!haveController) {
+ this._window.makeKeyAndVisible();
+ }
+ }
}
const iosApp = new IOSApplication();
exports.ios = iosApp;
setApplication(iosApp);
+// attach on global, so it can be overwritten in NativeScript Angular
+(global).__onLiveSyncCore = function () {
+ iosApp._onLivesync();
+}
+
let mainEntry: NavigationEntry;
function createRootView(v?: View) {
let rootView = v;
diff --git a/tns-core-modules/ui/core/view-base/view-base.d.ts b/tns-core-modules/ui/core/view-base/view-base.d.ts
index 53baf154a..10f9393c0 100644
--- a/tns-core-modules/ui/core/view-base/view-base.d.ts
+++ b/tns-core-modules/ui/core/view-base/view-base.d.ts
@@ -1,7 +1,6 @@
/**
* @module "ui/core/view-base"
*/ /** */
-
import { Property, CssProperty, CssAnimationProperty, InheritedProperty, Style } from "../properties";
import { BindingOptions, Observable } from "../bindable";
@@ -110,6 +109,37 @@ export abstract class ViewBase extends Observable {
_suspendedUpdates: { [propertyName: string]: Property | CssProperty | CssAnimationProperty };
//@endprivate
+ /**
+ * Shows the View contained in moduleName as a modal view.
+ * @param moduleName - The name of the module to load starting from the application root.
+ * @param context - Any context you want to pass to the modally shown view.
+ * This same context will be available in the arguments of the shownModally event handler.
+ * @param closeCallback - A function that will be called when the view 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, fullscreen?: boolean, animated?: boolean): ViewBase;
+
+ /**
+ * Shows the view passed as parameter as a modal view.
+ * @param view - View instance to be shown modally.
+ * @param context - Any context you want to pass to the modally shown view. This same context will be available in the arguments of the shownModally event handler.
+ * @param closeCallback - A function that will be called when the view is closed. Any arguments provided when calling ShownModallyData.closeCallback will be available here.
+ * @param fullscreen - An optional parameter specifying whether to show the modal view in full-screen mode.
+ */
+ showModal(view: ViewBase, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean): ViewBase;
+
+ /**
+ * Deprecated. Showing view as modal is deprecated.
+ * Use showModal method with arguments.
+ */
+ showModal(): ViewBase;
+
+ /**
+ * Closes the current modal view that this page is showing.
+ */
+ closeModal(): void;
+
public effectiveMinWidth: number;
public effectiveMinHeight: number;
public effectiveWidth: number;
@@ -139,7 +169,7 @@ export abstract class ViewBase extends Observable {
public ios: any;
public android: any;
-
+
/**
* returns the native UIViewController.
*/
@@ -337,7 +367,7 @@ export abstract class ViewBase extends Observable {
*/
public _isPaddingRelative: boolean;
public _styleScope: any;
-
+
/**
* @private
*/
@@ -365,12 +395,12 @@ export abstract class ViewBase extends Observable {
* @private
*/
_inheritStyleScope(styleScope: any /* StyleScope */): void;
-
+
/**
* @private
*/
callLoaded(): void;
-
+
/**
* @private
*/
diff --git a/tns-core-modules/ui/core/view-base/view-base.ts b/tns-core-modules/ui/core/view-base/view-base.ts
index 11e940d3e..8269a8d02 100644
--- a/tns-core-modules/ui/core/view-base/view-base.ts
+++ b/tns-core-modules/ui/core/view-base/view-base.ts
@@ -944,6 +944,18 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
});
}
}
+
+ public showModal(): ViewBase {
+ const parent = this.parent;
+ return parent && parent.showModal();
+ }
+
+ public closeModal(): void {
+ const parent = this.parent;
+ if (parent) {
+ parent.closeModal();
+ }
+ }
}
ViewBase.prototype.isCollapsed = false;
diff --git a/tns-core-modules/ui/core/view/view-common.ts b/tns-core-modules/ui/core/view/view-common.ts
index 309e41f77..6751e13bb 100644
--- a/tns-core-modules/ui/core/view/view-common.ts
+++ b/tns-core-modules/ui/core/view/view-common.ts
@@ -50,14 +50,17 @@ export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator
};
}
+export const _rootModalViews = new Array();
+
export abstract class ViewCommon extends ViewBase implements ViewDefinition {
public static shownModallyEvent = "shownModally";
public static showingModallyEvent = "showingModally";
protected _closeModalCallback: Function;
+ public _modalParent: ViewCommon;
private _modalContext: any;
- public _modal: ViewCommon;
+ private _modal: ViewCommon;
private _measuredWidth: number;
private _measuredHeight: number;
@@ -188,6 +191,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
}
}
+ _onLivesync(): boolean {
+ _rootModalViews.forEach(v => v.closeModal());
+ _rootModalViews.length = 0;
+ return false;
+ }
+
public _onBackPressed(): boolean {
return false;
}
@@ -215,8 +224,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
}
public closeModal() {
- if (this._closeModalCallback) {
- this._closeModalCallback.apply(undefined, arguments);
+ let closeCallback = this._closeModalCallback;
+ if (closeCallback) {
+ closeCallback.apply(undefined, arguments);
+ } else {
+ let parent = this.parent;
+ if (parent) {
+ parent.closeModal();
+ }
}
}
@@ -225,14 +240,21 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
}
protected _showNativeModalView(parent: ViewCommon, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean) {
+ _rootModalViews.push(this);
+
parent._modal = this;
+ this._modalParent = parent;
this._modalContext = context;
const that = this;
this._closeModalCallback = function () {
if (that._closeModalCallback) {
- that._closeModalCallback = null;
- that._modalContext = null;
+ const modalIndex = _rootModalViews.indexOf(that);
+ _rootModalViews.splice(modalIndex);
that._hideNativeModalView(parent);
+ that._modalParent = null
+ that._modalContext = null;
+ that._closeModalCallback = null;
+ parent._modal = null;
if (typeof closeCallback === "function") {
closeCallback.apply(undefined, arguments);
}
@@ -938,7 +960,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
_onAttachedToWindow(): void {
//
}
-
+
_onDetachedFromWindow(): void {
//
}
diff --git a/tns-core-modules/ui/core/view/view.android.ts b/tns-core-modules/ui/core/view/view.android.ts
index cd4637fb8..7584e2e9b 100644
--- a/tns-core-modules/ui/core/view/view.android.ts
+++ b/tns-core-modules/ui/core/view/view.android.ts
@@ -489,7 +489,6 @@ export class View extends ViewCommon {
}
this._dialogFragment = null;
- parent._modal = undefined;
super._hideNativeModalView(parent);
}
diff --git a/tns-core-modules/ui/core/view/view.d.ts b/tns-core-modules/ui/core/view/view.d.ts
index 91bc5e39b..303914cb7 100644
--- a/tns-core-modules/ui/core/view/view.d.ts
+++ b/tns-core-modules/ui/core/view/view.d.ts
@@ -481,14 +481,14 @@ export abstract class View extends ViewBase {
on(event: "shownModally", callback: (args: ShownModallyData) => void, thisArg?: any);
/**
- * Shows the View contained in moduleName as a modal view.
- * @param moduleName - The name of the module to load starting from the application root.
- * @param context - Any context you want to pass to the modally shown view.
- * This same context will be available in the arguments of the shownModally event handler.
- * @param closeCallback - A function that will be called when the view 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.
- */
+ * Shows the View contained in moduleName as a modal view.
+ * @param moduleName - The name of the module to load starting from the application root.
+ * @param context - Any context you want to pass to the modally shown view.
+ * This same context will be available in the arguments of the shownModally event handler.
+ * @param closeCallback - A function that will be called when the view 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, fullscreen?: boolean, animated?: boolean): View;
/**
@@ -546,6 +546,26 @@ export abstract class View extends ViewBase {
*/
public getActualSize(): Size;
+ /**
+ * @private
+ * A valid css string which will be applied for all nested UI components (based on css rules).
+ */
+ css: string;
+
+ /**
+ * @private
+ * Adds a new values to current css.
+ * @param cssString - A valid css which will be added to current css.
+ */
+ addCss(cssString: string): void;
+
+ /**
+ * @private
+ * Adds the content of the file to the current css.
+ * @param cssFileName - A valid file name (from the application root) which contains a valid css.
+ */
+ addCssFile(cssFileName: string): void;
+
// Lifecycle events
_getNativeViewsCount(): number;
@@ -554,10 +574,6 @@ export abstract class View extends ViewBase {
public eachChildView(callback: (view: View) => boolean): void;
//@private
- /**
- * @private
- */
- _modal: View;
/**
* @private
*/
@@ -630,6 +646,10 @@ export abstract class View extends ViewBase {
* @private
*/
_removeAnimation(animation: Animation): boolean;
+ /**
+ * @private
+ */
+ _onLivesync(): boolean;
/**
* @private
*/
@@ -639,26 +659,6 @@ export abstract class View extends ViewBase {
*/
_getFragmentManager(): any; /* android.app.FragmentManager */
- /**
- * @private
- * A valid css string which will be applied for all nested UI components (based on css rules).
- */
- css: string;
-
- /**
- * @private
- * Adds a new values to current css.
- * @param cssString - A valid css which will be added to current css.
- */
- addCss(cssString: string): void;
-
- /**
- * @private
- * Adds the content of the file to the current css.
- * @param cssFileName - A valid file name (from the application root) which contains a valid css.
- */
- addCssFile(cssFileName: string): void;
-
/**
* Updates styleScope or create new styleScope.
* @param cssFileName
@@ -666,12 +666,12 @@ export abstract class View extends ViewBase {
* @param css
*/
_updateStyleScope(cssFileName?: string, cssString?: string, css?: string): void;
-
+
/**
* Called in android when native view is attached to window.
*/
_onAttachedToWindow(): void;
-
+
/**
* Called in android when native view is dettached from window.
*/
diff --git a/tns-core-modules/ui/core/view/view.ios.ts b/tns-core-modules/ui/core/view/view.ios.ts
index 4da715592..2550d56fd 100644
--- a/tns-core-modules/ui/core/view/view.ios.ts
+++ b/tns-core-modules/ui/core/view/view.ios.ts
@@ -43,8 +43,6 @@ export class View extends ViewCommon {
*/
_nativeBackgroundState: "unset" | "invalid" | "drawn";
- public _modalParent: View;
-
get isLayoutRequired(): boolean {
return (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED;
}
@@ -303,8 +301,20 @@ export class View extends ViewCommon {
return this._suspendCATransaction || this._suspendNativeUpdatesCount;
}
+ private getParentWithViewController(parent: View): View {
+ let view = parent;
+ let controller = view.viewController;
+ while (!controller) {
+ view = view.parent as View;
+ controller = view.viewController;
+ }
+
+ return view;
+ }
protected _showNativeModalView(parent: View, context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean) {
- super._showNativeModalView(parent, context, closeCallback, fullscreen);
+ let parentWithController = this.getParentWithViewController(parent);
+
+ super._showNativeModalView(parentWithController, context, closeCallback, fullscreen);
let controller = this.viewController;
if (!controller) {
controller = ios.UILayoutViewController.initWithOwner(new WeakRef(this));
@@ -312,9 +322,8 @@ export class View extends ViewCommon {
}
this._setupAsRootView({});
- this._modalParent = parent;
- const parentController = parent.viewController;
+ const parentController = parentWithController.viewController;
if (!parentController.view.window) {
throw new Error("Parent page is not part of the window hierarchy. Close the current modal page before showing another one!");
}
@@ -343,9 +352,9 @@ export class View extends ViewCommon {
protected _hideNativeModalView(parent: View) {
const parentController = parent.viewController;
const animated = (this.viewController).animated;
- parentController.dismissModalViewControllerAnimated(animated);
super._hideNativeModalView(parent);
+ parentController.dismissModalViewControllerAnimated(animated);
}
[isEnabledProperty.getDefault](): boolean {
diff --git a/tns-core-modules/ui/frame/frame-common.ts b/tns-core-modules/ui/frame/frame-common.ts
index 4b7ecfa9a..f1027ef12 100644
--- a/tns-core-modules/ui/frame/frame-common.ts
+++ b/tns-core-modules/ui/frame/frame-common.ts
@@ -526,6 +526,33 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
return result;
}
+
+ public _onLivesync(): boolean {
+ super._onLivesync();
+
+ const currentEntry = this._currentEntry.entry;
+ const newEntry: NavigationEntry = {
+ animated: false,
+ clearHistory: true,
+ context: currentEntry.context,
+ create: currentEntry.create,
+ moduleName: currentEntry.moduleName,
+ backstackVisible: currentEntry.backstackVisible
+ }
+
+ // If create returns the same page instance we can't recreate it.
+ // Instead of navigation set activity content.
+ // This could happen if current page was set in XML as a Page instance.
+ if (newEntry.create) {
+ const page = newEntry.create();
+ if (page === this.currentPage) {
+ return false;
+ }
+ }
+
+ this.navigate(newEntry);
+ return true;
+ }
}
export function topmost(): FrameBase {
diff --git a/tns-core-modules/ui/frame/frame.android.ts b/tns-core-modules/ui/frame/frame.android.ts
index 5967d68b1..90f916b5d 100644
--- a/tns-core-modules/ui/frame/frame.android.ts
+++ b/tns-core-modules/ui/frame/frame.android.ts
@@ -73,8 +73,12 @@ function getAttachListener(): android.view.View.OnAttachStateChangeListener {
}
export function reloadPage(): void {
- // Delete previously cached root view in order to recreate it.
- resetActivityContent(application.android.foregroundActivity);
+ const app = application.android;
+ const rootView: View = (app).rootView;
+ if (!rootView || !rootView._onLivesync()) {
+ // Delete previously cached root view in order to recreate it.
+ resetActivityContent(application.android.foregroundActivity);
+ }
}
// attach on global, so it can be overwritten in NativeScript Angular
diff --git a/tns-core-modules/ui/frame/frame.ios.ts b/tns-core-modules/ui/frame/frame.ios.ts
index 0a9039e90..02ef54436 100644
--- a/tns-core-modules/ui/frame/frame.ios.ts
+++ b/tns-core-modules/ui/frame/frame.ios.ts
@@ -20,30 +20,6 @@ const DELEGATE = "_delegate";
let navDepth = -1;
-export function reloadPage(): void {
- const frame = topmost();
- if (frame) {
- if (frame.currentPage && frame.currentPage.modal) {
- frame.currentPage.modal.closeModal();
- }
-
- const currentEntry = frame._currentEntry.entry;
- const newEntry: NavigationEntry = {
- animated: false,
- clearHistory: true,
- context: currentEntry.context,
- create: currentEntry.create,
- moduleName: currentEntry.moduleName,
- backstackVisible: currentEntry.backstackVisible
- }
-
- frame.navigate(newEntry);
- }
-}
-
-// attach on global, so it can be overwritten in NativeScript Angular
-(global).__onLiveSyncCore = reloadPage;
-
export class Frame extends FrameBase {
public viewController: UINavigationControllerImpl;
public _animatedDelegate = UINavigationControllerAnimatedDelegate.new();
diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts
index 620efba61..77141eb34 100644
--- a/tns-core-modules/ui/page/page.ios.ts
+++ b/tns-core-modules/ui/page/page.ios.ts
@@ -90,12 +90,6 @@ class UIViewControllerImpl extends UIViewController {
owner.onNavigatingTo(newEntry.entry.context, isBack, newEntry.entry.bindingContext);
}
- // Add page to frame if showing modal page.
- // TODO: This needs refactoring.
- if (modalParent) {
- modalParent._addView(owner);
- }
-
if (frame) {
if (!owner.parent) {
owner._frame = frame;
@@ -206,47 +200,10 @@ class UIViewControllerImpl extends UIViewController {
return;
}
- const modalParent = page._modalParent;
- page._modalParent = undefined;
-
- // Clear up after modal page has closed.
- if (modalParent) {
- modalParent._modal = undefined;
- modalParent._removeView(page);
- }
-
- // Manually pop backStack when Back button is pressed or navigating back with edge swipe.
- // Don't pop if we are hiding modally shown page.
- // const frame = page.frame;
- // We are not modal page, have frame with backstack and navigation queue is empty and currentPage is closed
- // then pop our backstack.
- // If we are in frame wich is in tab and tab.selectedControler is not the frame
- // skip navigation.
- // const tab = this.tabBarController;
- // const fireNavigationEvents = !tab
- // || tab.selectedViewController === this.navigationController;
-
- // Remove from parent if page was in frame and we navigated back or
- // navigate forward but current entry is not backstack visible.
- // Showing page modally will not pass isBack check so currentPage won't be removed from Frame.
- // const isBack = isBackNavigationFrom(this, page);
- // if (frame && page.frame === frame &&
- // (isBack || !frame._isCurrentEntryBackstackVisible)) {
- // // Remove parent when navigating back.
- // frame._removeBackstackEntries([_removeBackstackEntries])
- // frame._removeView(page);
- // page._frame = null;
- // }
-
// Forward navigation does not remove page from frame so we raise unloaded manually.
if (page.isLoaded) {
page.callUnloaded();
}
-
- // if (!modalParent && fireNavigationEvents) {
- // // Last raise onNavigatedFrom event if we are not modally shown.
- // page.onNavigatedFrom(isBack);
- // }
}
public viewWillLayoutSubviews(): void {