Skip to content

Commit 8bfe2c3

Browse files
author
Zdravko
authored
Merge pull request #277 from NativeScript/update-sidedrawer-demo
chore: update 'sidedrawer' demo for nativescript-ui-sidedrawer v7.0.2
2 parents 9521a80 + dc3b70d commit 8bfe2c3

5 files changed

Lines changed: 174 additions & 14 deletions

File tree

‎sidedrawer/app/navigation/app.component.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<RadSideDrawer>
2-
<GridLayout tkDrawerContent rows="auto, *" class="root-drawer-content">
3-
<StackLayout>
2+
<GridLayout tkDrawerContent rows="auto, *, auto" class="root-drawer-content">
3+
<StackLayout row="0">
44
<Label [text]="currentExample.titleRoot" class="h1 text-center"></Label>
55
</StackLayout>
66
<ListView id="root-drawer-list" row="1" [items]="currentExample.subItems" (itemTap)="onNavigationItemTap($event)" class="root-drawer-content">
@@ -10,6 +10,7 @@
1010
</GridLayout>
1111
</ng-template>
1212
</ListView>
13+
<Button row="2" text="Close Drawer" (tap)="onCloseDrawerTap()"></Button>
1314
</GridLayout>
1415

1516
<page-router-outlet tkMainContent></page-router-outlet>

‎sidedrawer/app/navigation/app.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,11 @@ export class AppComponent implements OnInit {
5252
}
5353
}
5454

55+
public onCloseDrawerTap() {
56+
const sideDrawer = <RadSideDrawer>app.getRootView();
57+
sideDrawer.closeDrawer();
58+
}
59+
5560
private _toggleItemSelected(view: View, isSelected: boolean): any {
5661
// using css styles from theme
5762
view.className = isSelected ? "sidedrawer-list-item active" : "sidedrawer-list-item";

‎sidedrawer/app/navigation/examples-list/examples-list.component.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
<ActionBar [title]="currentExample.title">
2-
<NavigationButton text="Back" icon="res://ic_arrow_back_black_24dp" (tap)="onNavigationButtonTap()" [visibility]="hasBack ? 'visible' : 'collapsed'"></NavigationButton>
2+
<ActionItem text="Root" (tap)="onNavBtnTap()" [visibility]="hasBack ? 'collapsed' : 'visible'"></ActionItem>
3+
<NavigationButton text="Back" icon="res://ic_arrow_back_black_24dp" (tap)="onNavigationButtonTap()"
4+
[visibility]="hasBack ? 'visible' : 'collapsed'"></NavigationButton>
35
</ActionBar>
4-
<GridLayout>
5-
<ListView [items]="currentExample.subItems" (itemTap)="onNavigationItemTap($event)">
6+
<GridLayout rows="auto, *">
7+
<GridLayout orientation="horizontal" columns="50*, 50*" rows="auto, auto, auto, auto" [visibility]="hasBack ? 'collapsed' : 'visible'">
8+
<Button text="SlideInOnTop" (tap)="onChangeTransition('SlideInOnTopTransition')" row="0" col="0"></Button>
9+
<Button text="Fade" (tap)="onChangeTransition('FadeTransition')" row="0" col="1"></Button>
10+
<Button text="Push" (tap)="onChangeTransition('PushTransition')" row="1" col="0"></Button>
11+
<Button text="Reveal" (tap)="onChangeTransition('RevealTransition')" row="1" col="1"></Button>
12+
<Button text="ReverseSlideOut" (tap)="onChangeTransition('ReverseSlideOutTransition')" row="2" col="0"></Button>
13+
<Button text="ScaleDownPusher" (tap)="onChangeTransition('ScaleDownPusherTransition')" row="2" col="1"></Button>
14+
<Button text="ScaleUp" (tap)="onChangeTransition('ScaleUpTransition')" row="3" col="0"></Button>
15+
<Button text="SlideAlong" (tap)="onChangeTransition('SlideAlongTransition')" row="3" col="1"></Button>
16+
</GridLayout>
17+
<ListView [items]="currentExample.subItems" (itemTap)="onNavigationItemTap($event)" row="1">
618
<ng-template let-item="item">
719
<StackLayout class="itemStackLayout">
820
<Label class="titleLabel" [text]="item.title" textWrap="true"></Label>

‎sidedrawer/app/navigation/examples-list/examples-list.component.ts‎

Lines changed: 147 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
import { Component, OnInit, OnDestroy } from "@angular/core";
1+
import { Component, OnInit, OnDestroy, AfterViewInit } from "@angular/core";
22
import { ExampleItem } from "../exampleItem";
33
import { ExampleItemService } from "../exampleItemService.service";
44
import * as frameModule from "tns-core-modules/ui/frame";
55
import { ActivatedRoute, Router } from '@angular/router';
6+
import { RadSideDrawer, FadeTransition, PushTransition, RevealTransition, ReverseSlideOutTransition, ScaleDownPusherTransition, ScaleUpTransition, SlideAlongTransition, SlideInOnTopTransition } from "nativescript-ui-sidedrawer";
7+
import { getRootView } from "tns-core-modules/application";
8+
import { Page } from "tns-core-modules/ui/page";
69

710
@Component({
811
moduleId: module.id,
912
selector: "tk-examples",
1013
templateUrl: "examples-list.component.html",
1114
styleUrls: ["examples-list.component.css"]
1215
})
13-
export class ExamplesListDepth1Component implements OnInit, OnDestroy {
16+
export class ExamplesListDepth1Component implements OnInit, AfterViewInit, OnDestroy {
1417
private _currentExample: ExampleItem;
1518
private _hasBack: boolean;
1619
private _sub: any;
20+
private _rootDrawer: RadSideDrawer;
1721

18-
constructor(private _router: Router, private _route: ActivatedRoute, private _exampleItemsService: ExampleItemService) {
22+
constructor(private _router: Router, private _route: ActivatedRoute, private _exampleItemsService: ExampleItemService, private page: Page) {
1923

2024
}
2125

@@ -26,12 +30,21 @@ export class ExamplesListDepth1Component implements OnInit, OnDestroy {
2630
this.hasBack = false;
2731
this._currentExample = this._exampleItemsService.getParentExampleItem(0);
2832
});
33+
this.page.on(Page.loadedEvent, this.onPageLoaded.bind(this));
2934
}
3035

3136
ngOnDestroy() {
3237
this._sub.unsubscribe();
3338
}
3439

40+
ngAfterViewInit() {
41+
this._rootDrawer = getRootView() as RadSideDrawer;
42+
}
43+
44+
private onPageLoaded(args) {
45+
this._rootDrawer = getRootView() as RadSideDrawer;
46+
}
47+
3548
public get currentExample(): ExampleItem {
3649
return this._currentExample;
3750
}
@@ -58,6 +71,45 @@ export class ExamplesListDepth1Component implements OnInit, OnDestroy {
5871
}
5972
}
6073

74+
public onChangeTransition(transition: string) {
75+
switch (transition) {
76+
case "SlideInOnTopTransition":
77+
this._rootDrawer.drawerTransition = new SlideInOnTopTransition();
78+
break;
79+
case "FadeTransition":
80+
this._rootDrawer.drawerTransition = new FadeTransition();
81+
break;
82+
case "PushTransition":
83+
this._rootDrawer.drawerTransition = new PushTransition();
84+
break;
85+
case "RevealTransition":
86+
this._rootDrawer.drawerTransition = new RevealTransition();
87+
break;
88+
case "ReverseSlideOutTransition":
89+
this._rootDrawer.drawerTransition = new ReverseSlideOutTransition();
90+
break;
91+
case "ScaleDownPusherTransition":
92+
this._rootDrawer.drawerTransition = new ScaleDownPusherTransition();
93+
break;
94+
case "ScaleUpTransition":
95+
this._rootDrawer.drawerTransition = new ScaleUpTransition();
96+
break;
97+
case "SlideAlongTransition":
98+
this._rootDrawer.drawerTransition = new SlideAlongTransition();
99+
break;
100+
default:
101+
break;
102+
}
103+
104+
console.log("Changed drawer transition to", transition);
105+
}
106+
107+
public onNavBtnTap() {
108+
if (this._rootDrawer) {
109+
this._rootDrawer.toggleDrawerState();
110+
}
111+
}
112+
61113
public onNavigationButtonTap() {
62114
frameModule.topmost().goBack();
63115
}
@@ -70,10 +122,11 @@ export class ExamplesListDepth1Component implements OnInit, OnDestroy {
70122
templateUrl: "examples-list.component.html",
71123
styleUrls: ["examples-list.component.css"]
72124
})
73-
export class ExamplesListDepth2Component implements OnInit, OnDestroy {
125+
export class ExamplesListDepth2Component implements OnInit, AfterViewInit, OnDestroy {
74126
private _currentExample: ExampleItem;
75127
private _hasBack: boolean;
76128
private _sub: any;
129+
private _rootDrawer: RadSideDrawer;
77130

78131
constructor(private _router: Router, private _route: ActivatedRoute, private _exampleItemsService: ExampleItemService) {
79132

@@ -89,6 +142,10 @@ export class ExamplesListDepth2Component implements OnInit, OnDestroy {
89142

90143
}
91144

145+
ngAfterViewInit() {
146+
this._rootDrawer = getRootView() as RadSideDrawer;
147+
}
148+
92149
ngOnDestroy() {
93150
this._sub.unsubscribe();
94151
}
@@ -122,6 +179,46 @@ export class ExamplesListDepth2Component implements OnInit, OnDestroy {
122179
public onNavigationButtonTap() {
123180
frameModule.topmost().goBack();
124181
}
182+
183+
184+
public onChangeTransition(transition: string) {
185+
switch (transition) {
186+
case "SlideInOnTopTransition":
187+
this._rootDrawer.drawerTransition = new SlideInOnTopTransition();
188+
break;
189+
case "FadeTransition":
190+
this._rootDrawer.drawerTransition = new FadeTransition();
191+
break;
192+
case "PushTransition":
193+
this._rootDrawer.drawerTransition = new PushTransition();
194+
break;
195+
case "RevealTransition":
196+
this._rootDrawer.drawerTransition = new RevealTransition();
197+
break;
198+
case "ReverseSlideOutTransition":
199+
this._rootDrawer.drawerTransition = new ReverseSlideOutTransition();
200+
break;
201+
case "ScaleDownPusherTransition":
202+
this._rootDrawer.drawerTransition = new ScaleDownPusherTransition();
203+
break;
204+
case "ScaleUpTransition":
205+
this._rootDrawer.drawerTransition = new ScaleUpTransition();
206+
break;
207+
case "SlideAlongTransition":
208+
this._rootDrawer.drawerTransition = new SlideAlongTransition();
209+
break;
210+
default:
211+
break;
212+
}
213+
214+
console.log("Changed drawer transition to", transition);
215+
}
216+
217+
public onNavBtnTap() {
218+
if (this._rootDrawer) {
219+
this._rootDrawer.toggleDrawerState();
220+
}
221+
}
125222
}
126223

127224
@Component({
@@ -130,10 +227,11 @@ export class ExamplesListDepth2Component implements OnInit, OnDestroy {
130227
templateUrl: "examples-list.component.html",
131228
styleUrls: ["examples-list.component.css"]
132229
})
133-
export class ExamplesListDepth3Component implements OnInit, OnDestroy {
230+
export class ExamplesListDepth3Component implements OnInit, AfterViewInit, OnDestroy {
134231
private _currentExample: ExampleItem;
135232
private _hasBack: boolean;
136233
private _sub: any;
234+
private _rootDrawer: RadSideDrawer;
137235

138236
constructor(private _router: Router, private _route: ActivatedRoute, private _exampleItemsService: ExampleItemService) {
139237

@@ -149,6 +247,10 @@ export class ExamplesListDepth3Component implements OnInit, OnDestroy {
149247

150248
}
151249

250+
ngAfterViewInit() {
251+
this._rootDrawer = getRootView() as RadSideDrawer;
252+
}
253+
152254
ngOnDestroy() {
153255
this._sub.unsubscribe();
154256
}
@@ -178,6 +280,46 @@ export class ExamplesListDepth3Component implements OnInit, OnDestroy {
178280
public onNavigationButtonTap() {
179281
frameModule.topmost().goBack();
180282
}
283+
284+
285+
public onChangeTransition(transition: string) {
286+
switch (transition) {
287+
case "SlideInOnTopTransition":
288+
this._rootDrawer.drawerTransition = new SlideInOnTopTransition();
289+
break;
290+
case "FadeTransition":
291+
this._rootDrawer.drawerTransition = new FadeTransition();
292+
break;
293+
case "PushTransition":
294+
this._rootDrawer.drawerTransition = new PushTransition();
295+
break;
296+
case "RevealTransition":
297+
this._rootDrawer.drawerTransition = new RevealTransition();
298+
break;
299+
case "ReverseSlideOutTransition":
300+
this._rootDrawer.drawerTransition = new ReverseSlideOutTransition();
301+
break;
302+
case "ScaleDownPusherTransition":
303+
this._rootDrawer.drawerTransition = new ScaleDownPusherTransition();
304+
break;
305+
case "ScaleUpTransition":
306+
this._rootDrawer.drawerTransition = new ScaleUpTransition();
307+
break;
308+
case "SlideAlongTransition":
309+
this._rootDrawer.drawerTransition = new SlideAlongTransition();
310+
break;
311+
default:
312+
break;
313+
}
314+
315+
console.log("Changed drawer transition to", transition);
316+
}
317+
318+
public onNavBtnTap() {
319+
if (this._rootDrawer) {
320+
this._rootDrawer.toggleDrawerState();
321+
}
322+
}
181323
}
182324

183325
export const ExamplesListDepthComponents = [ExamplesListDepth1Component, ExamplesListDepth2Component, ExamplesListDepth3Component];

‎sidedrawer/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@
3838
"karma-mocha": "^1.3.0",
3939
"karma-nativescript-launcher": "^0.4.0",
4040
"markdown-snippet-injector": "^0.2.4",
41-
"mocha": "^3.3.0",
41+
"mocha": "5.2.0",
4242
"mocha-junit-reporter": "1.18.0",
43-
"mocha-multi": "1.1.0",
43+
"mocha-multi-reporters": "^1.1.0",
4444
"mochawesome": "3.1.1",
4545
"nativescript-css-loader": "~0.26.0",
46-
"nativescript-dev-appium": "~6.0.0",
46+
"nativescript-dev-appium": "^6.0.0",
4747
"nativescript-dev-webpack": "^1.0.0",
48-
"tns-platform-declarations": "^6.1.0",
48+
"tns-platform-declarations": "^6.1.1",
4949
"tslint": "~5.11.0",
5050
"typescript": "~3.5.3"
5151
}

0 commit comments

Comments
 (0)