Skip to content

Commit f162716

Browse files
TheOriginalJoshTheOriginalJosh
committed
Merge pull request #7 from TheOriginalJosh/slide-updates
Slide updates
2 parents 41dc42e + 61c7056 commit f162716

File tree

5 files changed

+113
-92
lines changed

5 files changed

+113
-92
lines changed

‎README.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ the `SlideContainer` class also has public `nextSlide` and `previousSlide` funct
6464

6565
the `<Slides:SlideContainer>` element also has a property called `loop` which is a boolean value and if set to true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.
6666

67-
the `<Slides:SlideContainer>` element also has a property called `interval` which is a integer value and the value is in milliseconds. The suggested use case would be for a Image Carousel or something of that nature which can change the image for every fixed intervals. In unloaded function call page.getViewById("your_id").stopSlideshow() to unregister it (your_id is the id given to `<Slides:SlideContainer>`).
67+
the `<Slides:SlideContainer>` element also has a property called `interval` which is a integer value and the value is in milliseconds. The suggested use case would be for a Image Carousel or something of that nature which can change the image for every fixed intervals. In unloaded function call `page.getViewById("your_id").stopSlideshow()` to unregister it (your_id is the id given to `<Slides:SlideContainer>`), it can be restarted with `startSlidShow`.
6868

6969
#### Android Optional Attribute
7070
- `AndroidTransparentStatusBar`: boolean - If true, the Android status bar will be transparent on devices that support it. Typically this is API >=21 (Lollipop).
@@ -118,8 +118,13 @@ to
118118
_please note this will change the panning gesture for your entire project._
119119

120120

121-
###Special thanks to:
122-
Thanks to [Nathan Walker](https://github.com/NathanWalker) for setting up the {N} plugin seed that I used to help get this plugin up and running. More info can be found about it here:
121+
###Thanks to these awesome contributors!
122+
123+
[Brad Martin](https://github.com/bradmartin)
124+
125+
[Obsessive Inc/Abhijith Reddy](https://github.com/Obsessive)
126+
127+
And thanks to [Nathan Walker](https://github.com/NathanWalker) for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here:
123128
https://github.com/NathanWalker/nativescript-plugin-seed
124129

125130
##License

‎nativescript-slides.d.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ export interface ISlideMap {
88
right?: ISlideMap;
99
}
1010
export declare class SlideContainer extends AbsoluteLayout {
11-
private _loaded;
1211
private currentPanel;
13-
private _pageWidth;
1412
private transitioning;
1513
private direction;
14+
private _loaded;
15+
private _pageWidth;
1616
private _loop;
17+
private _interval;
1718
private _AndroidTransparentStatusBar;
1819
private timer_reference;
19-
private _interval;
2020
interval: number;
2121
loop: boolean;
2222
AndroidTransparentStatusBar: boolean;
@@ -25,7 +25,10 @@ export declare class SlideContainer extends AbsoluteLayout {
2525
ios: any;
2626
constructor();
2727
constructView(): void;
28+
private carousel(isenabled, time);
29+
private rebindSlideShow();
2830
stopSlideshow(): void;
31+
startSlideshow(): void;
2932
nextSlide(): void;
3033
previousSlide(): void;
3134
private setupLeftPanel();
@@ -37,5 +40,4 @@ export declare class SlideContainer extends AbsoluteLayout {
3740
private setwidthPercent(view, percentage);
3841
private newFooterButton(name);
3942
private buildSlideMap(views);
40-
private carousel(isenabled, time);
4143
}

‎nativescript-slides.ts‎

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,21 @@ export interface ISlideMap {
2323
}
2424

2525
export class SlideContainer extends AbsoluteLayout {
26-
private _loaded: boolean;
2726
private currentPanel: ISlideMap;
28-
private _pageWidth: number;
2927
private transitioning: boolean;
3028
private direction: direction = direction.none;
29+
private _loaded: boolean;
30+
private _pageWidth: number;
3131
private _loop: boolean;
3232
private _interval: number;
3333
private _AndroidTransparentStatusBar: boolean;
34-
private _loop: boolean
35-
private _AndroidTransparentStatusBar: boolean;
34+
private timer_reference: number;
3635

3736
get interval() {
3837
return this._interval;
3938
}
4039

41-
set interval(value: boolean) {
40+
set interval(value: number) {
4241
this._interval = value;
4342
}
4443

@@ -70,7 +69,6 @@ export class SlideContainer extends AbsoluteLayout {
7069
return;
7170
}
7271

73-
7472
constructor() {
7573
super();
7674
this.constructView();
@@ -86,7 +84,9 @@ export class SlideContainer extends AbsoluteLayout {
8684

8785
this._pageWidth = Platform.screen.mainScreen.widthDIPs;
8886

89-
87+
if (this._interval == null) {
88+
this._interval = 0;
89+
}
9090

9191
this.on(AbsoluteLayout.loadedEvent, (data: any) => {
9292
if (!this._loaded) {
@@ -100,8 +100,6 @@ export class SlideContainer extends AbsoluteLayout {
100100
window.setStatusBarColor(0x000000);
101101
}
102102

103-
104-
105103
let slides: StackLayout[] = [];
106104

107105
this.eachLayoutChild((view: View) => {
@@ -112,6 +110,7 @@ export class SlideContainer extends AbsoluteLayout {
112110
slides.push(view);
113111
}
114112
});
113+
115114
this.currentPanel = this.buildSlideMap(slides);
116115
this.currentPanel.panel.translateX = -this.pageWidth;
117116
this.applySwipe(this.pageWidth);
@@ -127,54 +126,70 @@ export class SlideContainer extends AbsoluteLayout {
127126
this.applySwipe(this.pageWidth);
128127
this.currentPanel.panel.translateX = -this.pageWidth;
129128
});
130-
131129
}
132130
});
133-
134131
}
135132

136-
private carousel(isenabled: boolean,time: number) {
133+
private carousel(isenabled: boolean, time: number) {
137134
if (isenabled) {
138135
this.timer_reference = setInterval(() => {
139136
this.nextSlide();
140-
},time);
141-
}else {
137+
}, time);
138+
} else {
142139
clearTimeout(this.timer_reference);
143140
}
144141
}
145-
public stopSlideshow() {
146-
this.carousel(false,0);
142+
private rebindSlideShow(): void {
143+
if (this.timer_reference != null) {
144+
this.stopSlideshow();
145+
this.startSlideshow();
146+
}
147+
}
148+
149+
public stopSlideshow(): void {
150+
this.carousel(false, 0);
151+
}
152+
153+
public startSlideshow(): void {
154+
if (this.interval !== 0) {
155+
this.carousel(true, this.interval);
156+
}
147157
}
148-
public nextSlide() {
158+
159+
public nextSlide(): void {
160+
this.direction = direction.left;
149161
this.transitioning = true;
150162
this.showRightSlide(this.currentPanel).then(() => {
151163
this.setupRightPanel();
152164
});
153165
}
154-
public previousSlide() {
166+
public previousSlide(): void {
167+
this.direction = direction.right;
155168
this.transitioning = true;
156169
this.showLeftSlide(this.currentPanel).then(() => {
157170
this.setupLeftPanel();
158171
});
159172
}
160173

161-
private setupLeftPanel() {
174+
private setupLeftPanel(): void {
162175
this.direction = direction.none;
163176
this.transitioning = false;
164177
this.currentPanel.panel.off('pan');
165178
this.currentPanel = this.currentPanel.left;
166179
this.applySwipe(this.pageWidth);
180+
this.rebindSlideShow();
167181
}
168182

169-
private setupRightPanel() {
183+
private setupRightPanel(): void {
170184
this.direction = direction.none;
171185
this.transitioning = false;
172186
this.currentPanel.panel.off('pan');
173187
this.currentPanel = this.currentPanel.right;
174188
this.applySwipe(this.pageWidth);
189+
this.rebindSlideShow();
175190
}
176191

177-
private applySwipe(pageWidth: number) {
192+
private applySwipe(pageWidth: number): void {
178193
let previousDelta = -1; //hack to get around ios firing pan event after release
179194

180195
this.currentPanel.panel.on('pan', (args: gestures.PanGestureEventData): void => {
@@ -259,7 +274,6 @@ export class SlideContainer extends AbsoluteLayout {
259274
translate: { x: -this.pageWidth * 2, y: 0 },
260275
duration: 300,
261276
});
262-
263277
let animationSet = new AnimationModule.Animation(transition, false);
264278

265279
return animationSet.play();
@@ -277,10 +291,8 @@ export class SlideContainer extends AbsoluteLayout {
277291
translate: { x: 0, y: 0 },
278292
duration: 300,
279293
});
280-
281294
let animationSet = new AnimationModule.Animation(transition, false);
282295

283-
284296
return animationSet.play();
285297

286298
}
@@ -342,9 +354,7 @@ export class SlideContainer extends AbsoluteLayout {
342354
slideMap[0].left = slideMap[slideMap.length - 1];
343355
slideMap[slideMap.length - 1].right = slideMap[0];
344356
}
345-
if (this.interval !== 0) {
346-
this.carousel(true,this.interval);
347-
}
357+
this.startSlideshow();
348358
return slideMap[0];
349359
}
350360
}

‎package.json‎

100755100644
Lines changed: 61 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,67 @@
11
{
2-
"name": "nativescript-slides",
3-
"version": "1.0.2",
4-
"description": "NativeScript Slides plugin.",
5-
"main": "nativescript-slides.js",
6-
"nativescript": {
7-
"platforms": {
8-
"android": "2.0.0",
9-
"ios": "2.0.0"
10-
}
11-
},
12-
"scripts": {
13-
"build": "tsc",
14-
"demo.ios": "npm run preparedemo && cd demo && tns emulate ios",
15-
"demo.android": "npm run preparedemo && cd demo && tns run android",
16-
"preparedemo": "npm run build && cd demo && tns plugin remove nativescript-slides && tns plugin add .. && tns install",
17-
"setup": "npm install && cd demo && npm install && cd .. && npm run build && cd demo && tns plugin add .. && cd ..",
18-
"livesync.ios":"cd demo && tns livesync ios --watch",
19-
"livesync.android":"cd demo && tns livesync android --watch",
20-
"ios": "xcproj --project platforms/ios/YourApp.xcodeproj touch; xcproj --project platforms/ios/Pods/Pods.xcodeproj touch; tns livesync ios --emulator --watch"
21-
},
22-
"repository": {
23-
"type": "git",
24-
"url": "https://github.com/TheOriginalJosh/nativescript-slides.git"
25-
},
26-
"keywords": [
27-
"NativeScript",
28-
"JavaScript",
29-
"Android",
30-
"iOS",
31-
"TypeScript",
32-
"swipe slides",
33-
"Slides",
34-
"Carousel"
35-
],
36-
"author": {
37-
"name": "Josh Sommer",
38-
"email": "joshdsommer@gmail.com"
39-
},
40-
"contributors": [
41-
{
42-
"name": "Brad Martin",
43-
"email": "bradwaynemartin@gmail.com",
44-
"url": "https://github.com/bradmartin"
45-
},
46-
{
2+
"name": "nativescript-slides",
3+
"version": "1.0.2",
4+
"description": "NativeScript Slides plugin.",
5+
"main": "nativescript-slides.js",
6+
"nativescript": {
7+
"platforms": {
8+
"android": "2.0.0",
9+
"ios": "2.0.0"
10+
}
11+
},
12+
"scripts": {
13+
"build": "tsc",
14+
"demo.ios": "npm run preparedemo && cd demo && tns emulate ios",
15+
"demo.android": "npm run preparedemo && cd demo && tns run android",
16+
"preparedemo": "npm run build && cd demo && tns plugin remove nativescript-slides && tns plugin add .. && tns install",
17+
"setup": "npm install && cd demo && npm install && cd .. && npm run build && cd demo && tns plugin add .. && cd ..",
18+
"livesync.ios": "cd demo && tns livesync ios --watch",
19+
"livesync.android": "cd demo && tns livesync android --watch",
20+
"ios": "xcproj --project platforms/ios/YourApp.xcodeproj touch; xcproj --project platforms/ios/Pods/Pods.xcodeproj touch; tns livesync ios --emulator --watch"
21+
},
22+
"repository": {
23+
"type": "git",
24+
"url": "https://github.com/TheOriginalJosh/nativescript-slides.git"
25+
},
26+
"keywords": [
27+
"NativeScript",
28+
"JavaScript",
29+
"Android",
30+
"iOS",
31+
"TypeScript",
32+
"swipe slides",
33+
"Slides",
34+
"Carousel"
35+
],
36+
"author": {
37+
"name": "Josh Sommer",
38+
"email": "joshdsommer@gmail.com"
39+
},
40+
"contributors": [
41+
{
42+
"name": "Brad Martin",
43+
"email": "bradwaynemartin@gmail.com",
44+
"url": "https://github.com/bradmartin"
45+
},
46+
{
4747
"name": "Obsessive Inc/Abhijith Reddy",
4848
"email": "mabhijith95a10@gmail.com",
4949
"url": "https://github.com/Obsessive"
5050
}
51-
],
52-
"bugs": {
53-
"url": "https://github.com/TheOriginalJosh/nativescript-slides/issues"
54-
},
55-
"license": {
56-
"type": "MIT",
57-
"url": "https://github.com/TheOriginalJosh/nativescript-slides/blob/master/LICENSE"
58-
},
59-
"homepage": "https://github.com/TheOriginalJosh/nativescript-slides",
60-
"readmeFilename": "README.md",
61-
"devDependencies": {
62-
"typescript": "^1.8.7"
63-
}
51+
],
52+
"bugs": {
53+
"url": "https://github.com/TheOriginalJosh/nativescript-slides/issues"
54+
},
55+
"license": {
56+
"type": "MIT",
57+
"url": "https://github.com/TheOriginalJosh/nativescript-slides/blob/master/LICENSE"
58+
},
59+
"homepage": "https://github.com/TheOriginalJosh/nativescript-slides",
60+
"readmeFilename": "README.md",
61+
"devDependencies": {
62+
"typescript": "^1.8.7"
63+
},
64+
"dependencies": {
65+
"tns-platform-declarations": "^2.0.0"
66+
}
6467
}

‎tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
},
1010
"files": [
1111
"demo/node_modules/tns-core-modules/tns-core-modules.d.ts",
12+
"node_modules/tns-platform-declarations/android17.d.ts",
1213
"nativescript-slides.ts"
1314
],
1415
"compileOnSave": false

0 commit comments

Comments
 (0)