Skip to content

Commit f2d135d

Browse files
JoshDSommerJoshDSommer
committed
major rework of slides
1 parent 8c501ad commit f2d135d

File tree

4 files changed

+267
-116
lines changed

4 files changed

+267
-116
lines changed

‎nativescript-intro-slides.d.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,33 @@
11
import { AbsoluteLayout } from 'ui/layouts/absolute-layout';
22
import { StackLayout } from 'ui/layouts/stack-layout';
33
import { AddChildFromBuilder } from 'ui/core/view';
4+
import { Button } from 'ui/button';
5+
import { ISlideMap } from './utilities';
6+
import * as AnimationModule from 'ui/animation';
47
export declare class Slide extends StackLayout {
58
}
69
export declare class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
710
private _childSlides;
811
private _loaded;
12+
private currentPanel;
13+
private _pageWidth;
14+
private _btnNext;
15+
private _btnPrevious;
16+
private transitioning;
17+
private direction;
18+
btnNext: Button;
19+
btnPrevious: Button;
20+
pageWidth: number;
921
android: any;
1022
ios: any;
1123
constructor();
1224
constructView(): void;
25+
private setupLeftPanel();
26+
private setupRightPanel();
1327
_addChildFromBuilder: (name: string, value: any) => void;
28+
private applySwipe(pageWidth);
29+
showRightSlide(panelMap: ISlideMap, offset?: number): AnimationModule.AnimationPromise;
30+
showLeftSlide(panelMap: ISlideMap, offset?: number): AnimationModule.AnimationPromise;
1431
private buildFooter();
1532
private setwidthPercent(view, percentage);
1633
private newFooterButton(name);

‎nativescript-intro-slides.ts‎

Lines changed: 194 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,40 @@ import {StackLayout} from 'ui/layouts/stack-layout';
55
import {View, AddChildFromBuilder} from 'ui/core/view';
66
import { Button } from 'ui/button';
77
import {SlideUtilities, ISlideMap} from './utilities';
8+
import {Label} from 'ui/label';
9+
import * as AnimationModule from 'ui/animation';
10+
import * as gestures from 'ui/gestures';
811

912
export class Slide extends StackLayout {
1013

1114
}
12-
15+
enum direction {
16+
none,
17+
left,
18+
right
19+
}
1320
export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
21+
1422
private _childSlides: View[];
1523
private _loaded: boolean;
24+
private currentPanel: ISlideMap;
25+
private _pageWidth: number;
26+
private _btnNext: Button;
27+
private _btnPrevious: Button;
28+
private transitioning: boolean;
29+
private direction: direction = direction.none;
30+
31+
get btnNext() {
32+
return this._btnNext;
33+
}
34+
35+
get btnPrevious() {
36+
return this._btnPrevious;
37+
}
38+
39+
get pageWidth() {
40+
return this._pageWidth;
41+
}
1642

1743
get android(): any {
1844
return;
@@ -30,45 +56,86 @@ export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
3056
constructView(): void {
3157

3258
this._loaded = false;
59+
this.transitioning = false;
3360
this._childSlides = [];
3461

35-
const pageWidth = Platform.screen.mainScreen.widthDIPs;
62+
this._pageWidth = Platform.screen.mainScreen.widthDIPs;
3663
const pageHeight = Platform.screen.mainScreen.heightDIPs;
3764

3865
this.on(AbsoluteLayout.loadedEvent, (data: any) => {
3966
if (!this._loaded) {
4067
this._loaded = true;
4168

4269
let footer = this.buildFooter();
43-
this.addChild(footer);
4470

45-
let btnPrevious = <Button>footer.getViewById('btn-info-previous');
46-
let btnNext = <Button>footer.getViewById('btn-info-next');
71+
this._btnPrevious = <Button>footer.getViewById('btn-info-previous');
72+
this._btnNext = <Button>footer.getViewById('btn-info-next');
4773

74+
let info = <Label>footer.getViewById('info');
4875
let slides: StackLayout[] = [];
76+
4977
this.eachLayoutChild((view: View) => {
5078
if (view instanceof StackLayout) {
51-
if (slides.length !== 0) {
52-
AbsoluteLayout.setLeft(<any>view, pageWidth);
53-
}
54-
view.width = pageWidth;
79+
AbsoluteLayout.setLeft(view, this.pageWidth);
80+
view.width = this.pageWidth;
5581
(<any>view).height = '100%'; //get around compiler
5682
slides.push(view);
5783
}
5884
});
85+
this.currentPanel = SlideUtilities.buildSlideMap(slides);
5986

60-
let panelMap1 = SlideUtilities.buildSlideMap(slides);
87+
this.btnNext.on('tap', () => {
88+
this.transitioning = true;
89+
this.showRightSlide(this.currentPanel).then(() => {
90+
console.log('right button done');
91+
this.setupRightPanel();
92+
93+
});
94+
});
95+
this.btnPrevious.on('tap', () => {
96+
this.transitioning = true;
97+
this.showLeftSlide(this.currentPanel).then(() => {
98+
this.setupLeftPanel();
99+
});
100+
});
101+
// this.addChild(footer);
61102

62-
panelMap1.panel.width = pageWidth;
63103
if (isNaN(footer.height)) {
64104
footer.height = 76; //footer min height
65105
}
66106
AbsoluteLayout.setTop(footer, (pageHeight - footer.height));
67-
SlideUtilities.applySwipe(this, pageWidth, panelMap1, btnPrevious, btnNext);
107+
this.currentPanel.panel.translateX = -this.pageWidth;
108+
this.btnPrevious.visibility = 'collapse';
109+
this.applySwipe(this.pageWidth);
68110
}
69111
});
70112

71113
}
114+
private setupLeftPanel() {
115+
this.direction = direction.none;
116+
this.transitioning = false;
117+
this.btnNext.visibility = 'visible';
118+
this.btnPrevious.visibility = 'visible';
119+
this.currentPanel.panel.off('touch,pan');
120+
this.currentPanel = this.currentPanel.left;
121+
this.applySwipe(this.pageWidth);
122+
if (this.currentPanel.left == null) {
123+
this.btnPrevious.visibility = 'collapse';
124+
}
125+
}
126+
127+
private setupRightPanel() {
128+
this.direction = direction.none;
129+
this.transitioning = false;
130+
this.btnNext.visibility = 'visible';
131+
this.btnPrevious.visibility = 'visible';
132+
this.currentPanel.panel.off('touch,pan');
133+
this.currentPanel = this.currentPanel.right;
134+
this.applySwipe(this.pageWidth);
135+
if (this.currentPanel.right == null) {
136+
this.btnNext.visibility = 'collapse';
137+
}
138+
}
72139

73140
_addChildFromBuilder = (name: string, value: any) => {
74141
if (value instanceof View) {
@@ -79,6 +146,121 @@ export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
79146
}
80147
};
81148

149+
private applySwipe(pageWidth: number) {
150+
let previousDelta = -1; //hack to get around ios firing pan event after release
151+
152+
this.currentPanel.panel.on('pan, touch', (args: any): void => {
153+
if ((<gestures.TouchGestureEventData>args).action === gestures.TouchAction.up) {
154+
if (this.transitioning == false) {
155+
this.transitioning = true;
156+
console.log('leaving screen....');
157+
158+
159+
// let transition = new Array();
160+
// transition.push({
161+
// target: this.currentPanel.right.panel,
162+
// translate: { x: this.pageWidth, y: 0 },
163+
// duration: 150,
164+
// });
165+
// transition.push({
166+
// target: this.currentPanel.panel,
167+
// translate: { x: -this.pageWidth, y: 0 },
168+
// duration: 150,
169+
// });
170+
171+
// let animationSet = new AnimationModule.Animation(transition, false);
172+
// animationSet.play().then(() => {
173+
// return;
174+
// });
175+
176+
this.currentPanel.panel.translateX = -this.pageWidth;
177+
if (this.currentPanel.right != null) {
178+
this.currentPanel.right.panel.translateX = -this.pageWidth;
179+
this.currentPanel.right.panel.translateX = this.pageWidth;
180+
}
181+
this.transitioning = false;
182+
183+
}
184+
} else if (args.eventName = 'pan') {
185+
if (!this.transitioning && previousDelta !== args.deltaX && args.deltaX != null && args.deltaX < -5) {
186+
if (this.currentPanel.right != null) {
187+
188+
console.log('panning l - r....' + this.currentPanel.right);
189+
this.direction = direction.left;
190+
//start sliding panes to the left
191+
this.currentPanel.panel.translateX = args.deltaX - this.pageWidth;
192+
this.currentPanel.right.panel.translateX = args.deltaX;
193+
194+
if (args.deltaX < ((pageWidth / 3) * -1)) {
195+
this.transitioning = true;
196+
this.showRightSlide(this.currentPanel, args.deltaX).then(() => {
197+
this.setupRightPanel();
198+
});;
199+
}
200+
}
201+
}
202+
203+
if (!this.transitioning && previousDelta !== args.deltaX && args.deltaX != null && args.deltaX > 5) {
204+
if (this.currentPanel.left != null) {
205+
console.log('panning r - l....' + this.currentPanel.left);
206+
this.direction = direction.right;
207+
this.currentPanel.panel.translateX = args.deltaX - this.pageWidth;
208+
this.currentPanel.left.panel.translateX = -(this.pageWidth * 2) + args.deltaX;
209+
if (args.deltaX > pageWidth / 3) { ///swiping left to right.
210+
this.transitioning = true;
211+
this.showLeftSlide(this.currentPanel, args.deltaX).then(() => {
212+
this.setupLeftPanel();
213+
});
214+
}
215+
}
216+
}
217+
if (args.deltaX !== 0) {
218+
previousDelta = args.deltaX;
219+
}
220+
221+
}
222+
});
223+
}
224+
225+
public showRightSlide(panelMap: ISlideMap, offset: number = 0): AnimationModule.AnimationPromise {
226+
let transition = new Array();
227+
transition.push({
228+
target: panelMap.right.panel,
229+
translate: { x: -this.pageWidth, y: 0 },
230+
duration: 300,
231+
});
232+
transition.push({
233+
target: panelMap.panel,
234+
translate: { x: -this.pageWidth * 2, y: 0 },
235+
duration: 300,
236+
});
237+
238+
let animationSet = new AnimationModule.Animation(transition, false);
239+
240+
return animationSet.play();
241+
// panelMap.panel.off('pan');
242+
// this.applySwipe(info, wrapper, pageWidth, panelMap.right, this.btnPrevious, btnNext);
243+
}
244+
245+
public showLeftSlide(panelMap: ISlideMap, offset: number = 0): AnimationModule.AnimationPromise {
246+
let transition = new Array();
247+
transition.push({
248+
target: panelMap.left.panel,
249+
translate: { x: -this.pageWidth, y: 0 },
250+
duration: 500,
251+
});
252+
transition.push({
253+
target: panelMap.panel,
254+
translate: { x: 0, y: 0 },
255+
duration: 500,
256+
});
257+
258+
let animationSet = new AnimationModule.Animation(transition, false);
259+
260+
261+
return animationSet.play();
262+
263+
}
82264

83265
private buildFooter(): AbsoluteLayout {
84266
let footer = new AbsoluteLayout();
@@ -109,7 +291,6 @@ export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
109291

110292
private setwidthPercent(view: View, percentage: number) {
111293
(<any>view).width = percentage + '%';
112-
113294
}
114295

115296
private newFooterButton(name: string): Button {

‎utilities.d.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { Button } from 'ui/button';
21
import { StackLayout } from 'ui/layouts/stack-layout';
3-
import { AbsoluteLayout } from 'ui/layouts/absolute-layout';
42
export interface ISlideMap {
53
panel: StackLayout;
64
left?: ISlideMap;
@@ -9,7 +7,4 @@ export interface ISlideMap {
97
export declare class SlideUtilities {
108
private static direction;
119
static buildSlideMap(views: StackLayout[]): ISlideMap;
12-
static applySwipe(wrapper: AbsoluteLayout, pageWidth: number, panelMap: ISlideMap, btnPrevious: Button, btnNext: Button): void;
13-
static showRightSlide(panelMap: ISlideMap, wrapper: any, pageWidth: any, btnPrevious: Button, btnNext: Button): void;
14-
static showLeftSlide(panelMap: ISlideMap, wrapper: any, pageWidth: any, btnPrevious: Button, btnNext: Button): void;
1510
}

0 commit comments

Comments
 (0)