Skip to content

Commit 47b06be

Browse files
TheOriginalJoshTheOriginalJosh
authored
Merge pull request #41 from sitefinitysteve/master
Improved Events
2 parents 046ed88 + 99cec31 commit 47b06be

15 files changed

+473
-53
lines changed

‎README.md‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,13 @@ add as many ``<Slides:Slide>`` as you want.
8686

8787
- **disablePan : boolean** - If true panning is disabled. So that you can call nextSlide()/previousSlide() functions to change the slide. If slides is used to get details about users like email, phone number, username etc. in this case you don't want users to move from one slide to another slide without filling details.
8888

89+
- **pagerOffset : string** - Margin-top for the pager. Number or percentage, default 88%.
90+
8991
#### Events
9092
- **start** - Start pan
9193
- **changed** - Transition complete
92-
- **cancelled** - User didn't complete the transition
94+
- **cancelled** - User didn't complete the transition, or at start\end with no slides
95+
- **finished** - Last slide has come into view
9396

9497
#### Angular 2 compatibility
9598
To use the slides with Angular2 and the `registerElement` from `nativescript-angular` you will want to set the `SlideContainer`'s property of `angular` to `true`. Then in your angular component in the `ngAfterViewInit`. you will want to have an instance of your slide container to call the function `constructView()`.
@@ -110,6 +113,41 @@ To use the slides with Angular2 and the `registerElement` from `nativescript-ang
110113

111114
* There apears to be a bug with the loop resulting in bad transitions going right to left.
112115

116+
#### How To: Load slides dynamically
117+
You want to hook into the loaded event of the view and then create your view elements.
118+
119+
[Demo Code](https://github.com/TheOriginalJosh/nativescript-slides/blob/master/demo/app/dynamic-page.xml)
120+
``` xml
121+
<Slides:SlideContainer loaded="onSlideContainerLoaded"
122+
```
123+
``` ts
124+
import * as slides from 'nativescript-slides/nativescript-slides'
125+
126+
export function onSlideContainerLoaded(args) {
127+
let slideContainer = <slides.SlideContainer>args.object;
128+
129+
//Construct the slides
130+
slideContainer.addChild(getSlide("Page 1", "slide-1"));
131+
slideContainer.addChild(getSlide("Page 2", "slide-2"));
132+
slideContainer.addChild(getSlide("Page 3", "slide-3"));
133+
slideContainer.addChild(getSlide("Page 4", "slide-4"));
134+
slideContainer.addChild(getSlide("Page 5", "slide-5"));
135+
136+
}
137+
138+
function getSlide(labelText: string, className: string) {
139+
let slide = new slides.Slide();
140+
slide.className = className;
141+
let label = new labelModule.Label();
142+
label.text = labelText;
143+
slide.addChild(label)
144+
145+
return slide;
146+
}
147+
148+
149+
```
150+
113151
#### Smoother panning on Android (For {N} v2.0.0 and below __only__).
114152

115153
To achieve a much smoother drag on android simply go into the gestures.android.js file in the tns-core-modules here

‎demo/app/app.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,24 @@
1616
background-color: #FFC107;
1717
}
1818

19+
.slide-6{
20+
background-color: #448AFF;
21+
}
22+
23+
.slide-7{
24+
background-color: #F44336;
25+
}
26+
.slide-8{
27+
background-color: #8BC34A;
28+
}
29+
30+
.slide-9{
31+
background-color: #9C27B0;
32+
}
33+
.slide-10{
34+
background-color: #FFC107;
35+
}
36+
1937
Label{
2038
text-align: center;
2139
width: 100%;
@@ -24,3 +42,21 @@ Label{
2442
color: #FFF;
2543
}
2644

45+
.subtext {
46+
font-size: 20;
47+
}
48+
49+
.nav {
50+
margin-top: 20;
51+
horizontal-align: center;
52+
}
53+
54+
.next {
55+
color: #fff;
56+
margin-left: 20;
57+
}
58+
59+
.prev {
60+
color: #fff;
61+
margin-right: 20;
62+
}

‎demo/app/app.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
import * as application from 'application';
2-
application.start({ moduleName: 'main-page' });
2+
3+
application.start({ moduleName: 'loader' });

‎demo/app/loader.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Page {
2+
background-color: #FFF;
3+
}
4+
5+
.commands{
6+
margin: 40;
7+
}
8+
9+
.counter{
10+
horizontal-align: center;
11+
color: #666;
12+
}
13+
14+
Button{
15+
color: #FFF;
16+
background-color: #0c60ee;
17+
padding: 20 10;
18+
margin-bottom: 20;
19+
border-radius: 10;
20+
}

‎demo/app/loader.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {Observable, EventData} from 'data/observable';
2+
import * as pages from 'ui/page';
3+
import * as frameModule from 'ui/frame'
4+
5+
var page;
6+
7+
8+
// Event handler for Page "loaded" event attached in main-page.xml
9+
export function pageLoaded(args: EventData) {
10+
// Get the event sender
11+
page = <pages.Page>args.object;
12+
13+
}
14+
15+
export function onLoadMain(args){
16+
var navigationEntry = {
17+
moduleName: "./views/main-page",
18+
animated: false
19+
};
20+
21+
frameModule.topmost().navigate(navigationEntry);
22+
}
23+
24+
export function onLoadDynamic(args){
25+
var navigationEntry = {
26+
moduleName: "./views/dynamic-page",
27+
animated: false
28+
};
29+
30+
frameModule.topmost().navigate(navigationEntry);
31+
}
32+
33+
export function onLoadCarousel(args) {
34+
var navigationEntry = {
35+
moduleName: "./views/carousel-page",
36+
animated: false
37+
};
38+
39+
frameModule.topmost().navigate(navigationEntry);
40+
}

‎demo/app/loader.xml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
2+
<Page.actionBar>
3+
<ActionBar title="Demo Loader" icon="">
4+
</ActionBar>
5+
</Page.actionBar>
6+
<StackLayout class="commands">
7+
<Button text="Main Demo" tap="onLoadMain" />
8+
<Button text="Dynamic Slides" tap="onLoadDynamic" />
9+
<Button text="Carousel" tap="onLoadCarousel" />
10+
</StackLayout>
11+
</Page>

‎demo/app/views/carousel-page.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as observable from 'data/observable';
2+
import * as pages from 'ui/page';
3+
import * as slides from 'nativescript-slides/nativescript-slides'
4+
import * as frameModule from 'ui/frame'
5+
6+
var slideContainer;
7+
8+
// Event handler for Page "loaded" event attached in main-page.xml
9+
export function pageLoaded(args: observable.EventData) {
10+
// Get the event sender
11+
var page = <pages.Page>args.object;
12+
page.actionBarHidden = true;
13+
let slideContainer = <slides.SlideContainer>page.getViewById("slides");
14+
slideContainer.startSlideshow();
15+
}
16+
17+
export function onNavHome() {
18+
var navigationEntry = {
19+
moduleName: "loader",
20+
animated: false,
21+
clearHistory: true
22+
};
23+
24+
frameModule.topmost().navigate(navigationEntry);
25+
}
26+
27+
export function onStart(args){
28+
var data = args.eventData;
29+
console.log("Start: " + JSON.stringify(data));
30+
}
31+
32+
export function onChanged(args){
33+
var data = args.eventData;
34+
console.log("Changed: " + JSON.stringify(data));
35+
}
36+
37+
export function onCancelled(args){
38+
var data = args.eventData;
39+
console.log("Cancelled: " + JSON.stringify(data));
40+
}
41+
42+
export function onFinished(args){
43+
console.log("Finished slides");
44+
}

‎demo/app/main-page.xml‎ renamed to ‎demo/app/views/carousel-page.xml‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" loaded="pageLoaded">
22

33
<GridLayout rows="* auto">
4-
<Slides:SlideContainer id="slides" row="0" pageIndicators="true" androidTranslucentStatusBar="true" start="onStart" cancelled="onCancelled" changed="onChanged">
4+
<Slides:SlideContainer id="slides" row="0" pageIndicators="true" androidTranslucentStatusBar="true" disablePan="true" interval="2000"
5+
start="onStart" cancelled="onCancelled" changed="onChanged" finished="onFinished">
56
<Slides:Slide class="slide-1">
67
<Label text="This is Panel 1" />
8+
<Label text="...wait for it" textWrap="true" class="subtext" />
79
</Slides:Slide>
810
<Slides:Slide class="slide-2">
911
<Label text="This is Panel 2" />
12+
<Label text="Yeah that happened by itself" textWrap="true" class="subtext" />
1013
</Slides:Slide>
1114
<Slides:Slide class="slide-3">
1215
<Label text="This is Panel 3" />
16+
<Label text="You can't even stop it" textWrap="true" class="subtext" />
1317
</Slides:Slide>
1418
<Slides:Slide class="slide-4">
1519
<Label text="This is Panel 4" />
1620
</Slides:Slide>
1721
<Slides:Slide class="slide-5">
1822
<Label text="This is Panel 5" />
23+
<Button text="Home" class="next" tap="onNavHome" />
1924
</Slides:Slide>
2025
</Slides:SlideContainer>
21-
22-
2326
</GridLayout>
2427
</Page>

‎demo/app/views/dynamic-page.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import * as observable from 'data/observable';
2+
import * as pages from 'ui/page';
3+
import * as colorModule from 'color';
4+
import * as stackModule from 'ui/layouts/stack-layout'
5+
import * as labelModule from 'ui/label'
6+
import * as buttonModule from 'ui/button'
7+
import * as gridModule from 'ui/layouts/grid-layout'
8+
import * as frameModule from 'ui/frame'
9+
import * as slides from 'nativescript-slides/nativescript-slides'
10+
11+
let slideCount : number = 6;
12+
13+
// Event handler for Page "loaded" event attached in main-page.xml
14+
export function navigatedTo(args: observable.EventData) {
15+
var page = <pages.Page>args.object;
16+
page.actionBarHidden = true;
17+
}
18+
19+
export function onSlideContainerLoaded(args) {
20+
let slideContainer = <slides.SlideContainer>args.object;
21+
22+
//Construct the slides
23+
for(var i=1; i < slideCount; i++){
24+
slideContainer.addChild(getSlide("Page " + i, "slide-" + i));
25+
}
26+
27+
var lastSlide = getSlide("Page " + i, "slide-" + i);
28+
29+
var homeButton = new buttonModule.Button();
30+
homeButton.text = "Home";
31+
homeButton.color = new colorModule.Color("#FFF");
32+
33+
homeButton.on("tap", ()=>{
34+
var navigationEntry = {
35+
moduleName: "loader",
36+
animated: false,
37+
clearHistory: true
38+
};
39+
40+
frameModule.topmost().navigate(navigationEntry);
41+
});
42+
43+
lastSlide.addChild(homeButton);
44+
slideContainer.addChild(lastSlide);
45+
}
46+
47+
function getSlide(labelText: string, className: string) {
48+
let slide = new slides.Slide();
49+
slide.className = className;
50+
51+
let label = new labelModule.Label();
52+
label.text = labelText;
53+
slide.addChild(label);
54+
55+
let label1 = new labelModule.Label();
56+
label1.text = "Look ma, no XML!";
57+
label1.className = "subtext";
58+
slide.addChild(label1);
59+
60+
return slide;
61+
}
62+
63+
64+
export function onStart(args){
65+
var data = args.eventData;
66+
console.log("Start: " + JSON.stringify(data));
67+
}
68+
69+
export function onChanged(args){
70+
var data = args.eventData;
71+
console.log("Changed: " + JSON.stringify(data));
72+
}
73+
74+
export function onCancelled(args){
75+
var data = args.eventData;
76+
console.log("Cancelled: " + JSON.stringify(data));
77+
}
78+
79+
export function onFinished(args){
80+
console.log("Finished slides");
81+
}

‎demo/app/views/dynamic-page.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" navigatedTo="navigatedTo">
2+
3+
<GridLayout rows="* auto">
4+
<Slides:SlideContainer id="slides" row="0" pageIndicators="true" androidTranslucentStatusBar="true" loaded="onSlideContainerLoaded"
5+
start="onStart" cancelled="onCancelled" changed="onChanged" finished="onFinished">
6+
7+
</Slides:SlideContainer>
8+
</GridLayout>
9+
</Page>

0 commit comments

Comments
 (0)