chore: cleanup

apps/ui/app/modal-view/login-page.ts

@@ -0,0 +1,40 @@
+import { Page, ShownModallyData, EventData, fromObject, Dialogs } from '@nativescript/core';
+
+export function onShowingModally(args: ShownModallyData) {
+	console.log('login-page.onShowingModally, context: ' + args.context);
+	const page = <Page>args.object;
+
+	page.bindingContext = fromObject({
+		username: 'username',
+		password: 'password',
+		context: args.context,
+		onLoginButtonTap: function () {
+			console.log('login-page.onLoginButtonTap');
+			args.closeCallback(this.username, this.password);
+		},
+		showAlert: function () {
+			Dialogs.alert('showing alert!');
+			args.closeCallback();
+		},
+		openNestedModal: function () {
+			page.showModal('modal-view/nested-modal', {
+				context: 'First',
+				closeCallback: () => {
+					console.log('login-page.openNestedModal');
+				},
+			});
+		},
+	});
+}
+
+export function onShownModally(args: ShownModallyData) {
+	console.log('login-page.onShownModally, context: ' + args.context);
+}
+
+export function onLoaded(args: EventData) {
+	console.log('login-page.onLoaded');
+}
+
+export function onUnloaded() {
+	console.log('login-page.onUnloaded');
+}

apps/ui/app/modal-view/login-page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+  showingModally="onShowingModally"
+  shownModally="onShownModally"
+  loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red">
+  <StackLayout backgroundColor="PaleGreen" margin="10">
+    <Label text="{{ context }}"/>
+    <TextField hint="username" text="{{ username }}"/>
+    <TextField hint="password" text="{{ password }}" secure="true"/>
+    <Button text="Login" tap="{{ onLoginButtonTap }}"/>
+    <Button text="Show Alert" tap="{{ showAlert }}"/>
+    <Button text="Open Nested Modal" tap="{{ openNestedModal }}"/>
+  </StackLayout>
+</Page>

apps/ui/app/modal-view/modal-view-page.ts

@@ -0,0 +1,69 @@
+import { Page } from '@nativescript/core/ui/page';
+import { Label } from '@nativescript/core/ui/label';
+
+function createCloseCallback(label: Label, context?: string): (username: string, password: string) => void {
+	return function (username: string, password: string) {
+		let result = username + '/' + password;
+		result = context ? context + '/' + result : result;
+		console.log(result);
+		label.text = result;
+	};
+}
+
+function openModal(page: Page, label: Label, context: string) {
+	page.showModal('modal-view/login-page', {
+		context,
+		closeCallback: createCloseCallback(label, context),
+		fullscreen: false,
+	});
+}
+
+export function onTap(args) {
+	const page = <Page>args.object.page;
+	const label = page.getViewById<Label>('label');
+	var fullscreen = (<any>args.object).text.indexOf('(full-screen)') !== -1;
+
+	page.showModal('modal-view/login-page', {
+		context: 'context',
+		closeCallback: createCloseCallback(label),
+		fullscreen,
+	});
+}
+
+export function onTapStretched(args) {
+	const page = <Page>args.object.page;
+	const label = page.getViewById<Label>('label');
+
+	page.showModal('modal-view/login-page', {
+		context: 'context',
+		closeCallback: createCloseCallback(label),
+		fullscreen: false,
+		animated: false,
+		stretched: true,
+	});
+}
+
+export function onTapSecondModalInCB(args) {
+	const page = <Page>args.object.page;
+	const label = page.getViewById<Label>('label');
+	page.showModal('modal-view/login-page', {
+		context: 'First',
+		closeCallback: (username: string, password: string) => {
+			const result = 'First/' + username + '/' + password;
+			console.log(result);
+			label.text = result;
+
+			// Open second modal in the close callback of the first one.
+			openModal(page, label, 'Second');
+		},
+	});
+}
+
+export function onTapSecondModalInTimer(args) {
+	const page = <Page>args.object.page;
+	const label = page.getViewById<Label>('label');
+	openModal(page, label, 'First');
+
+	// Open second modal 1s after the first one.
+	setTimeout(() => openModal(page, label, 'Second'), 1000);
+}

apps/ui/app/modal-view/modal-view-page.xml

@@ -0,0 +1,12 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" backgroundColor="white">
+  <StackLayout backgroundColor="PaleGreen">
+    <Button text="Login (pop-up)" tap="onTap" />
+    <Button text="Login (full-screen)" tap="onTap" />
+    <Button text="Login (pop-up-stretched)" tap="onTapStretched" />
+
+    <Button text="Login (second modal in cb)" tap="onTapSecondModalInCB" />
+    <Button text="Login (second modal in timer)" tap="onTapSecondModalInTimer" />
+
+    <Label id="label" text="Anonymous"/>
+  </StackLayout>
+</Page>

apps/ui/app/modal-view/nested-modal.ts

@@ -0,0 +1,25 @@
+import { Page, ShownModallyData, EventData, fromObject, Dialogs } from '@nativescript/core';
+
+export function onShowingModally(args: ShownModallyData) {
+	console.log('nested-modal.onShowingModally, context: ' + args.context);
+	const page = <Page>args.object;
+
+	page.bindingContext = fromObject({
+		context: args.context,
+		onTap: function () {
+			Dialogs.alert('it works!');
+		},
+	});
+}
+
+export function onShownModally(args: ShownModallyData) {
+	console.log('nested-modal.onShownModally, context: ' + args.context);
+}
+
+export function onLoaded(args: EventData) {
+	console.log('nested-modal.onLoaded');
+}
+
+export function onUnloaded() {
+	console.log('nested-modal.onUnloaded');
+}

apps/ui/app/modal-view/nested-modal.xml

@@ -0,0 +1,9 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+  showingModally="onShowingModally"
+  shownModally="onShownModally"
+  loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red">
+  <StackLayout backgroundColor="PaleGreen" margin="10">
+    <Label text="{{ context }}"/>
+    <Button text="Show Alert" tap="{{ onTap }}"/>
+  </StackLayout>
+</Page>