Skip to content

Commit 97dd021

Browse files
ADjenkovADjenkov
ADjenkov
authored and
ADjenkov
committed
chore(modal-navigation): add reset root view mechanism
1 parent 6ab1cac commit 97dd021

16 files changed

+273
-38
lines changed

Diff for: ‎e2e/modal-navigation-ng/app/app.module.ts

+38-9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
22
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
33
import { AppRoutingModule } from "./app.routing";
44
import { AppComponent } from "./app.component";
5+
import { TabComponent } from "./tab.component";
6+
import { LayoutComponent } from "./layout.component";
57

68
import { HomeComponent } from "./home/home.component";
79
import { SecondComponent } from "./second/second.component";
@@ -14,28 +16,34 @@ import { ModalViewContentComponent } from "./modal-shared/modal-view-content.com
1416
import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
1517
import { ViewContainerRefService } from "./shared/ViewContainerRefService";
1618

17-
// import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
18-
// import { routerTraceCategory } from "nativescript-angular/trace";
19+
import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
20+
import { routerTraceCategory } from "nativescript-angular/trace";
21+
import { NativeScriptPlatformRef } from "nativescript-angular";
1922

20-
// addCategories(routerTraceCategory);
21-
// traceEnable();
23+
addCategories(routerTraceCategory);
24+
traceEnable();
2225

2326
@NgModule({
24-
bootstrap: [
25-
AppComponent
26-
],
27+
// bootstrap: [
28+
// AppComponent
29+
// ],
2730
imports: [
2831
NativeScriptModule,
2932
AppRoutingModule
3033
],
3134
entryComponents: [
35+
AppComponent,
36+
TabComponent,
37+
LayoutComponent,
3238
ModalRouterComponent,
3339
NestedModalComponent,
34-
ModalComponent,
40+
ModalComponent,
3541
ModalViewComponent
3642
],
3743
declarations: [
3844
AppComponent,
45+
TabComponent,
46+
LayoutComponent,
3947
HomeComponent,
4048
SecondComponent,
4149
ModalComponent,
@@ -56,4 +64,25 @@ import { ViewContainerRefService } from "./shared/ViewContainerRefService";
5664
/*
5765
Pass your application module to the bootstrapModule function located in main.ts to start your app
5866
*/
59-
export class AppModule { }
67+
68+
export class AppModule {
69+
private static appRef: any;
70+
public static platformRef: NativeScriptPlatformRef;
71+
public static root: string = "page-router";
72+
73+
ngDoBootstrap(app) {
74+
AppModule.appRef = app;
75+
AppModule.bootstrapRootComponent();
76+
}
77+
78+
static bootstrapRootComponent() {
79+
const options = {
80+
'page-router': AppComponent,
81+
'tab': TabComponent,
82+
'layout': LayoutComponent
83+
};
84+
85+
const component = options[AppModule.root];
86+
AppModule.appRef.bootstrap(component);
87+
}
88+
}

Diff for: ‎e2e/modal-navigation-ng/app/app.routing.ts

+60-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NgModule } from "@angular/core";
22
import { NativeScriptRouterModule } from "nativescript-angular/router";
3-
import { Routes } from "@angular/router";
3+
import { Routes, Router } from "@angular/router";
44

55
import { HomeComponent } from "./home/home.component";
66
import { SecondComponent } from "./second/second.component";
@@ -10,6 +10,8 @@ import { NestedModalComponent } from "./modal-nested/modal-nested.component";
1010
import { ModalViewContentComponent } from "./modal-shared/modal-view-content.component";
1111
import { ModalSharedSecondComponent } from "./modal-shared/modal-shared-second.component";
1212

13+
import { AppModule } from "./app.module";
14+
1315
const routes: Routes = [
1416
{ path: "", redirectTo: "/home", pathMatch: "full" },
1517
{
@@ -38,8 +40,64 @@ const routes: Routes = [
3840
}
3941
];
4042

43+
const routesTab: Routes = [
44+
{ path: "", redirectTo: "/home(secondOutlet:second)", pathMatch: "full" },
45+
{
46+
path: "home", component: HomeComponent, children: [
47+
{
48+
path: "modal", component: ModalComponent, children: [
49+
{ path: "nested-frame-modal", component: NestedModalComponent }]
50+
},
51+
{
52+
path: "modal-second", component: ModalSecondComponent
53+
}
54+
]
55+
},
56+
{
57+
path: "second", component: SecondComponent, children: [
58+
{
59+
path: "modal", component: ModalComponent, children: [
60+
{ path: "nested-frame-modal", component: NestedModalComponent }]
61+
},
62+
{
63+
path: "modal-second", component: ModalSecondComponent
64+
}
65+
]
66+
},
67+
{
68+
path: "second", outlet: "secondOutlet", component: SecondComponent, children: [
69+
{
70+
path: "modal", component: ModalComponent, children: [
71+
{ path: "nested-frame-modal", component: NestedModalComponent }]
72+
},
73+
{
74+
path: "modal-second", component: ModalSecondComponent
75+
}
76+
]
77+
}
78+
];
79+
80+
const routesLayout: Routes = [
81+
{
82+
path: "modal", component: ModalComponent, children: [
83+
{ path: "nested-frame-modal", component: NestedModalComponent }]
84+
},
85+
{ path: "modal-second", component: ModalSecondComponent }
86+
]
87+
88+
4189
@NgModule({
4290
imports: [NativeScriptRouterModule.forRoot(routes)],
4391
exports: [NativeScriptRouterModule]
4492
})
45-
export class AppRoutingModule { }
93+
export class AppRoutingModule {
94+
constructor(private router: Router) {
95+
if (AppModule.root === "page-router") {
96+
this.router.resetConfig(routes);
97+
} else if (AppModule.root === "layout") {
98+
this.router.resetConfig(routesLayout);
99+
} else {
100+
this.router.resetConfig(routesTab);
101+
}
102+
}
103+
}

Diff for: ‎e2e/modal-navigation-ng/app/home/home.component.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@
77
<Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
88
<Button text="Navigate To Second Page" (tap)="onNavigateSecond()"></Button>
99
<Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
10-
<Button text="Reset Tab Root View"></Button>
11-
<Button text="Reset Layout Root View"></Button>
10+
<Button text="Reset Tab Root View" (tap)="onTabRootViewReset()"></Button>
11+
<Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset()"></Button>
12+
<Button text="Show Dialog" (tap)="onShowDialog()"></Button>
13+
1214
<Button text="show shared modal" (tap)="onRootModalTap()"></Button>
1315
<Button text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']"></Button>
1416
<Label text="home component" verticalAlignment="bottom"></Label>

Diff for: ‎e2e/modal-navigation-ng/app/home/home.component.ts

+34-7
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { ViewContainerRefService } from "../shared/ViewContainerRefService";
77
import { ModalRouterComponent } from "../modal/modal-router/modal-router.component";
88
import { ModalComponent } from "../modal/modal.component";
99
import { ModalViewComponent } from "../modal-shared/modal-view.component";
10+
import { confirm } from "ui/dialogs";
11+
12+
import { AppModule } from "../app.module";
1013

1114
@Component({
1215
moduleId: module.id,
@@ -15,12 +18,12 @@ import { ModalViewComponent } from "../modal-shared/modal-view.component";
1518
})
1619
export class HomeComponent {
1720
constructor(
18-
private modal: ModalDialogService,
19-
private vcRef: ViewContainerRef,
21+
private modal: ModalDialogService,
22+
private vcRef: ViewContainerRef,
2023
private viewContainerRefService: ViewContainerRefService,
2124
private routerExtension: RouterExtensions) { }
2225

23-
onModalNoFrame(args: EventData) {
26+
onModalNoFrame() {
2427
const options: ModalDialogOptions = {
2528
context: {
2629
navigationVisibility: false
@@ -34,7 +37,7 @@ export class HomeComponent {
3437
});
3538
}
3639

37-
onModalFrame(args: EventData) {
40+
onModalFrame() {
3841
const options: ModalDialogOptions = {
3942
context: {
4043
navigationVisibility: true,
@@ -49,12 +52,23 @@ export class HomeComponent {
4952
});
5053
}
5154

52-
onNavigateSecond(args: EventData) {
55+
onNavigateSecond() {
5356
this.routerExtension.navigate(["second"]);
5457
}
5558

56-
onFrameRootViewReset(args: EventData) {
57-
59+
onFrameRootViewReset() {
60+
AppModule.root = "page-router";
61+
AppModule.platformRef._livesync();
62+
}
63+
64+
onTabRootViewReset() {
65+
AppModule.root = "tab";
66+
AppModule.platformRef._livesync();
67+
}
68+
69+
onLayoutRootViewReset() {
70+
AppModule.root = "layout";
71+
AppModule.platformRef._livesync();
5872
}
5973

6074
onRootModalTap(): void {
@@ -69,4 +83,17 @@ export class HomeComponent {
6983
console.log(result);
7084
});
7185
}
86+
87+
onShowDialog() {
88+
let options = {
89+
title: "Dialog",
90+
message: "Message",
91+
okButtonText: "Yes",
92+
cancelButtonText: "No"
93+
}
94+
95+
confirm(options).then((result: boolean) => {
96+
console.log(result);
97+
})
98+
}
7299
}

Diff for: ‎e2e/modal-navigation-ng/app/layout.component.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<StackLayout>
2+
<Label text="Home" horizontalAlignment="center"></Label>
3+
<Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
4+
<Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
5+
<Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
6+
<Button text="Reset Tab Root View" (tap)="onTabRootViewReset()"></Button>
7+
<Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset()"></Button>
8+
<Button text="Show Dialog" (tap)="onShowDialog()"></Button>
9+
</StackLayout>

Diff for: ‎e2e/modal-navigation-ng/app/layout.component.ts

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { Component, ViewContainerRef } from "@angular/core";
2+
import { Router, NavigationEnd } from "@angular/router";
3+
import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
4+
import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
5+
import { ModalComponent } from "./modal/modal.component";
6+
import { ModalViewComponent } from "./modal-shared/modal-view.component";
7+
import { ModalRouterComponent } from "./modal/modal-router/modal-router.component";
8+
import { confirm } from "ui/dialogs";
9+
10+
import { AppModule } from "./app.module";
11+
12+
import { ViewContainerRefService } from "./shared/ViewContainerRefService";
13+
14+
@Component({
15+
selector: "ns-layout",
16+
templateUrl: "layout.component.html",
17+
})
18+
19+
export class LayoutComponent {
20+
constructor(
21+
private modal: ModalDialogService,
22+
private router: Router,
23+
private location: NSLocationStrategy,
24+
private vcRef: ViewContainerRef,
25+
private _viewContainerRefService: ViewContainerRefService) {
26+
router.events.subscribe(e => {
27+
if (e instanceof NavigationEnd) {
28+
console.log("[ROUTER]: " + e.toString());
29+
console.log(location.toString());
30+
}
31+
});
32+
33+
this._viewContainerRefService.root = this.vcRef;
34+
}
35+
36+
onModalNoFrame() {
37+
const options: ModalDialogOptions = {
38+
context: {
39+
navigationVisibility: false
40+
},
41+
fullscreen: true,
42+
viewContainerRef: this.vcRef
43+
};
44+
45+
this.modal.showModal(ModalComponent, options).then((res: string) => {
46+
console.log("moda-no-frame closed");
47+
});
48+
}
49+
50+
onModalFrame() {
51+
const options: ModalDialogOptions = {
52+
context: {
53+
navigationVisibility: true,
54+
modalRoute: "modal"
55+
},
56+
fullscreen: true,
57+
viewContainerRef: this.vcRef
58+
};
59+
60+
this.modal.showModal(ModalRouterComponent, options).then((res: string) => {
61+
console.log("moda-frame closed");
62+
});
63+
}
64+
65+
onFrameRootViewReset() {
66+
AppModule.root = "page-router";
67+
AppModule.platformRef._livesync();
68+
}
69+
70+
onTabRootViewReset() {
71+
AppModule.root = "tab";
72+
AppModule.platformRef._livesync();
73+
}
74+
75+
onLayoutRootViewReset() {
76+
AppModule.root = "layout";
77+
AppModule.platformRef._livesync();
78+
}
79+
80+
onShowDialog() {
81+
let options = {
82+
title: "Dialog",
83+
message: "Message",
84+
okButtonText: "Yes",
85+
cancelButtonText: "No"
86+
}
87+
88+
confirm(options).then((result: boolean) => {
89+
console.log(result);
90+
})
91+
}
92+
}

Diff for: ‎e2e/modal-navigation-ng/app/main.aot.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
// this import should be first in order to load some required settings (like globals and reflect-metadata)
22
import { platformNativeScript } from "nativescript-angular/platform-static";
3-
3+
import { AppModule } from "./app.module";
4+
import { NativeScriptPlatformRef } from "nativescript-angular";
45
// "./app.module.ngfactory" is a dynamically generated module when compiled with AoT.
56
import { AppModuleNgFactory } from "./app.module.ngfactory";
67

7-
platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);
8+
AppModule.platformRef = <NativeScriptPlatformRef>platformNativeScript();
9+
AppModule.platformRef.bootstrapModuleFactory(AppModuleNgFactory);

Diff for: ‎e2e/modal-navigation-ng/app/main.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
33

44
import { AppModule } from "./app.module";
5+
import { NativeScriptPlatformRef } from "nativescript-angular";
56

6-
// A traditional NativeScript application starts by initializing global objects, setting up global CSS rules, creating, and navigating to the main page.
7-
// Angular applications need to take care of their own initialization: modules, components, directives, routes, DI providers.
8-
// A NativeScript Angular app needs to make both paradigms work together, so we provide a wrapper platform object, platformNativeScriptDynamic,
9-
// that sets up a NativeScript application and can bootstrap the Angular framework.
10-
platformNativeScriptDynamic().bootstrapModule(AppModule);
7+
AppModule.platformRef = <NativeScriptPlatformRef>platformNativeScriptDynamic();
8+
AppModule.platformRef.bootstrapModule(AppModule);

Diff for: ‎e2e/modal-navigation-ng/app/modal-second/modal-second.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55

66
<GridLayout #rootLayout rows="auto, auto" (loaded)="onLoaded($event)">
77
<Button text="Go Back" (tap)="goBack()"></Button>
8-
<Button row="1" text="Close Modal Nested" (tap)="close(rootLayout)"></Button>
8+
<Button row="1" text="Close Modal" (tap)="close(rootLayout)"></Button>
99
</GridLayout>

0 commit comments

Comments
 (0)