Skip to content

Commit 7261e7c

Browse files
VladimirAmiorkovVladimirAmiorkov
authored
Merge pull request #88 from telerik/amiorkov/release
Merging master into release for new plugin version (3.3.0)
2 parents 9b382e7 + 003f141 commit 7261e7c

27 files changed

+686
-302
lines changed

‎sdkAngular/app/app.module.ngfactory.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/**
2+
* A dynamically generated module when compiled with AoT.
3+
*/
4+
export const AppModuleNgFactory: any;

‎sdkAngular/app/app.routing.ts

+36-8
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,6 @@ let APP_ROUTES: Routes = [
5454
"title": "Selection states"
5555
}
5656
},
57-
{
58-
path: "ListViewLoadOnDemandComponent",
59-
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
60-
data: {
61-
"title": "Load on Demand"
62-
}
63-
},
6457
{
6558
path: "ListViewPullToRefreshComponent",
6659
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
@@ -131,6 +124,34 @@ let APP_ROUTES: Routes = [
131124
"title": "Item separators"
132125
}
133126
},
127+
{
128+
path: "ListViewDynamicSizeAutoComponent",
129+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
130+
data: {
131+
"title": "Auto with Variable Item Size"
132+
}
133+
},
134+
{
135+
path: "ListViewDynamicSizeManualComponent",
136+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
137+
data: {
138+
"title": "Manual with Variable Item Size"
139+
}
140+
},
141+
{
142+
path: "ListViewFixedSizeAutoComponent",
143+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
144+
data: {
145+
"title": "Auto with Fixed Item Size"
146+
}
147+
},
148+
{
149+
path: "ListViewFixedSizeManualComponent",
150+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
151+
data: {
152+
"title": "Manual with Fixed Item Size"
153+
}
154+
},
134155
{
135156
path: "SideDrawerGettingStartedComponent",
136157
loadChildren: './sidedrawer/sidedrawer-examples.module#SideDrawerExamplesModule',
@@ -481,6 +502,13 @@ let APP_ROUTES: Routes = [
481502
"title": "In horizontal direction"
482503
}
483504
},
505+
{
506+
path: "ListViewScrollToIndexInitialComponent",
507+
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
508+
data: {
509+
"title": "Initially scrolled"
510+
}
511+
},
484512
{
485513
path: "ListViewScrollEventsComponent",
486514
loadChildren: './listview/listview-examples.module#ListViewExamplesModule',
@@ -903,4 +931,4 @@ let APP_ROUTES: Routes = [
903931
}
904932
];
905933

906-
export const routing = NativeScriptRouterModule.forRoot(APP_ROUTES);
934+
export const routing = NativeScriptRouterModule.forRoot(APP_ROUTES);

‎sdkAngular/app/listview/listview-examples.module.ts

+11-3
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,17 @@ import { ListViewItemSelectionMultipleComponent } from './item-selection/listvie
1919
import { ListViewItemSelectionProgrammaticComponent } from './item-selection/listview-item-selection-programmatic.component';
2020
import { ListViewItemSelectionComponent } from './item-selection/listview-item-selection.component';
2121
import { ListViewItemSeparatorComponent } from './item-separator/listview-item-separator.component';
22-
import { ListViewLoadOnDemandComponent } from './load-on-demand/listview-load-on-demand.component';
22+
import { ListViewDynamicSizeAutoComponent } from './load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component';
23+
import { ListViewDynamicSizeManualComponent } from './load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component';
24+
import { ListViewFixedSizeAutoComponent } from './load-on-demand/fixed-size-auto/listview-fixed-size-auto.component';
25+
import { ListViewFixedSizeManualComponent } from './load-on-demand/fixed-size-manual/listview-fixed-size-manual.component';
2326
import { ListViewMultipleTemplatesComponent } from './multiple-templates/listview-multiple-templates.component';
2427
import { ListViewObservableArrayComponent } from './observable-array/listview-observable-array.component';
2528
import { ListViewPullToRefreshComponent } from './pull-to-refresh/listview-pull-to-refresh.component';
2629
import { ListViewScrollEventsComponent } from './scroll-events/listview-scroll-events.component';
2730
import { ListViewScrollToIndexHorizontalComponent } from './scroll-to-index/listview-scroll-to-index-horizontal.component';
2831
import { ListViewScrollToIndexVerticalComponent } from './scroll-to-index/listview-scroll-to-index-vertical.component';
32+
import { ListViewScrollToIndexInitialComponent } from './scroll-to-index/listview-scroll-to-index-initial.component';
2933
import { ListViewSelectionStatesComponent } from './selection-states/listview-selection-states.component';
3034
import { ListViewSwipeActionsMultipleComponent } from './swipe-actions/listview-swipe-actions-multiple.component';
3135
import { ListViewSwipeActionsThresholdsComponent } from './swipe-actions/listview-swipe-actions-thresholds.component';
@@ -60,7 +64,10 @@ import { CommonDirectivesModule } from '../navigation/directives/common-directiv
6064
ListViewItemSelectionProgrammaticComponent,
6165
ListViewItemSelectionComponent,
6266
ListViewItemSeparatorComponent,
63-
ListViewLoadOnDemandComponent,
67+
ListViewDynamicSizeAutoComponent,
68+
ListViewDynamicSizeManualComponent,
69+
ListViewFixedSizeAutoComponent,
70+
ListViewFixedSizeManualComponent,
6471
ListViewMultipleTemplatesComponent,
6572
ListViewObservableArrayComponent,
6673
ListViewPullToRefreshComponent,
@@ -71,7 +78,8 @@ import { CommonDirectivesModule } from '../navigation/directives/common-directiv
7178
ListViewSwipeActionsMultipleComponent,
7279
ListViewSwipeActionsThresholdsComponent,
7380
ListViewSwipeActionsComponent,
74-
ListViewSwipeDisableComponent
81+
ListViewSwipeDisableComponent,
82+
ListViewScrollToIndexInitialComponent
7583
]
7684
})
7785
export class ListViewExamplesModule { }

‎sdkAngular/app/listview/listview-examples.routing.ts

+11-3
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,17 @@ import { ListViewItemSelectionMultipleComponent } from './item-selection/listvie
1515
import { ListViewItemSelectionProgrammaticComponent } from './item-selection/listview-item-selection-programmatic.component';
1616
import { ListViewItemSelectionComponent } from './item-selection/listview-item-selection.component';
1717
import { ListViewItemSeparatorComponent } from './item-separator/listview-item-separator.component';
18-
import { ListViewLoadOnDemandComponent } from './load-on-demand/listview-load-on-demand.component';
18+
import { ListViewDynamicSizeAutoComponent } from './load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component';
19+
import { ListViewDynamicSizeManualComponent } from './load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component';
20+
import { ListViewFixedSizeAutoComponent } from './load-on-demand/fixed-size-auto/listview-fixed-size-auto.component';
21+
import { ListViewFixedSizeManualComponent } from './load-on-demand/fixed-size-manual/listview-fixed-size-manual.component';
1922
import { ListViewMultipleTemplatesComponent } from './multiple-templates/listview-multiple-templates.component';
2023
import { ListViewObservableArrayComponent } from './observable-array/listview-observable-array.component';
2124
import { ListViewPullToRefreshComponent } from './pull-to-refresh/listview-pull-to-refresh.component';
2225
import { ListViewScrollEventsComponent } from './scroll-events/listview-scroll-events.component';
2326
import { ListViewScrollToIndexHorizontalComponent } from './scroll-to-index/listview-scroll-to-index-horizontal.component';
2427
import { ListViewScrollToIndexVerticalComponent } from './scroll-to-index/listview-scroll-to-index-vertical.component';
28+
import { ListViewScrollToIndexInitialComponent } from './scroll-to-index/listview-scroll-to-index-initial.component';
2529
import { ListViewSelectionStatesComponent } from './selection-states/listview-selection-states.component';
2630
import { ListViewSwipeActionsMultipleComponent } from './swipe-actions/listview-swipe-actions-multiple.component';
2731
import { ListViewSwipeActionsThresholdsComponent } from './swipe-actions/listview-swipe-actions-thresholds.component';
@@ -43,7 +47,10 @@ export const routes: Routes = [
4347
{ path: 'ListViewItemSelectionProgrammaticComponent', component: ListViewItemSelectionProgrammaticComponent },
4448
{ path: 'ListViewItemSelectionComponent', component: ListViewItemSelectionComponent },
4549
{ path: 'ListViewItemSeparatorComponent', component: ListViewItemSeparatorComponent },
46-
{ path: 'ListViewLoadOnDemandComponent', component: ListViewLoadOnDemandComponent },
50+
{ path: 'ListViewDynamicSizeAutoComponent', component: ListViewDynamicSizeAutoComponent },
51+
{ path: 'ListViewDynamicSizeManualComponent', component: ListViewDynamicSizeManualComponent },
52+
{ path: 'ListViewFixedSizeAutoComponent', component: ListViewFixedSizeAutoComponent },
53+
{ path: 'ListViewFixedSizeManualComponent', component: ListViewFixedSizeManualComponent },
4754
{ path: 'ListViewMultipleTemplatesComponent', component: ListViewMultipleTemplatesComponent },
4855
{ path: 'ListViewObservableArrayComponent', component: ListViewObservableArrayComponent },
4956
{ path: 'ListViewPullToRefreshComponent', component: ListViewPullToRefreshComponent },
@@ -54,5 +61,6 @@ export const routes: Routes = [
5461
{ path: 'ListViewSwipeActionsMultipleComponent', component: ListViewSwipeActionsMultipleComponent },
5562
{ path: 'ListViewSwipeActionsThresholdsComponent', component: ListViewSwipeActionsThresholdsComponent },
5663
{ path: 'ListViewSwipeActionsComponent', component: ListViewSwipeActionsComponent },
57-
{ path: 'ListViewSwipeDisableComponent', component: ListViewSwipeDisableComponent }
64+
{ path: 'ListViewSwipeDisableComponent', component: ListViewSwipeDisableComponent },
65+
{ path: 'ListViewScrollToIndexInitialComponent', component: ListViewScrollToIndexInitialComponent }
5866
];

‎sdkAngular/app/listview/load-on-demand/listview-load-on-demand.component.css renamed to ‎sdkAngular/app/listview/load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component.css

File renamed without changes.

‎sdkAngular/app/listview/load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<GridLayout tkExampleTitle tkToggleNavButton>
2+
<RadListView [items]="dataItems" loadOnDemandMode="Auto" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
3+
<ng-template tkListItemTemplate let-item="item">
4+
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
5+
<StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
6+
<Image *tkIfIOS [src]="item.image" stretch="aspectFit" width="100"></Image>
7+
<FrescoDrawee *tkIfAndroid height="100" width="100" [imageUri]="item.image"></FrescoDrawee>
8+
9+
<StackLayout class="labelsStackLayout" orientation="vertical">
10+
<Label class="labelName" [text]="item.name"></Label>
11+
<Label class="labelTitle" [text]="item.title" textWrap="true"></Label>
12+
<Label class="labelText" text="{{item.text}} + {{item.text}} + {{item.text}}" textWrap="true"></Label>
13+
</StackLayout>
14+
</StackLayout>
15+
</StackLayout>
16+
</ng-template>
17+
</RadListView>
18+
</GridLayout>

‎sdkAngular/app/listview/load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
2+
import { ObservableArray } from "tns-core-modules/data/observable-array";
3+
import { DataItem } from "../../dataItem";
4+
import { ListViewLinearLayout, ListViewEventData, RadListView, ListViewLoadOnDemandMode } from "nativescript-pro-ui/listview";
5+
import * as applicationModule from "tns-core-modules/application";
6+
import * as Timer from "tns-core-modules/timer";
7+
var posts = require("../../../listview/posts.json")
8+
9+
@Component({
10+
moduleId: module.id,
11+
selector: "tk-listview-dynamic-size-auto",
12+
templateUrl: "listview-dynamic-size-auto.component.html",
13+
styleUrls: ["listview-dynamic-size-auto.component.css"]
14+
})
15+
16+
export class ListViewDynamicSizeAutoComponent implements OnInit {
17+
private _dataItems: ObservableArray<DataItem>;
18+
private _numberOfAddedItems;
19+
private layout: ListViewLinearLayout;
20+
21+
constructor(private _changeDetectionRef: ChangeDetectorRef) {
22+
}
23+
24+
ngOnInit() {
25+
this.layout = new ListViewLinearLayout();
26+
this.layout.scrollDirection = "Vertical";
27+
this.initDataItems();
28+
this._changeDetectionRef.detectChanges();
29+
}
30+
31+
public get dataItems(): ObservableArray<DataItem> {
32+
return this._dataItems;
33+
}
34+
35+
public onLoadMoreItemsRequested(args: ListViewEventData) {
36+
var that = new WeakRef(this);
37+
Timer.setTimeout(function () {
38+
var listView: RadListView = args.object;
39+
var initialNumberOfItems = that.get()._numberOfAddedItems;
40+
for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
41+
if (i > posts.names.length - 1) {
42+
listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
43+
break;
44+
}
45+
46+
var imageUri = applicationModule.android ? posts.images[i].toLowerCase() : posts.images[i];
47+
that.get()._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + imageUri));
48+
that.get()._numberOfAddedItems++;
49+
}
50+
51+
listView.notifyLoadOnDemandFinished();
52+
}, 1000);
53+
args.returnValue = true;
54+
}
55+
56+
private initDataItems() {
57+
this._dataItems = new ObservableArray<DataItem>();
58+
this._numberOfAddedItems = 0;
59+
for (var i = 0; i < posts.names.length - 15; i++) {
60+
this._numberOfAddedItems++;
61+
if (applicationModule.android) {
62+
this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
63+
}
64+
else {
65+
this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
66+
}
67+
}
68+
}
69+
}

‎sdkAngular/app/listview/load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.itemTemplateStackLayout {
2+
padding: 5 10 5 10;
3+
background-color: #7fff7f;
4+
}
5+
6+
.innerOtemTemplateStackLayout {
7+
padding: 10;
8+
background-color: #65a565;
9+
}
10+
11+
.labelsStackLayout {
12+
margin-left: 15;
13+
}
14+
15+
.labelName {
16+
font-size: 20;
17+
margin-bottom: 8;
18+
}
19+
20+
.labelTitle {
21+
font-size: 14;
22+
font-weight: bold;
23+
}
24+
25+
.labelText {
26+
font-size: 12;
27+
color: white;
28+
}
29+
30+
.loadOnDemandItemGridLayout {
31+
background-color: #7fff7f;
32+
color: black;
33+
}

‎sdkAngular/app/listview/load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<GridLayout tkExampleTitle tkToggleNavButton>
2+
<RadListView [items]="dataItems" loadOnDemandMode="Manual" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
3+
<ng-template tkListItemTemplate let-item="item">
4+
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
5+
<StackLayout class="innerOtemTemplateStackLayout" orientation="horizontal">
6+
<Image *tkIfIOS [src]="item.image" stretch="aspectFit" width="100"></Image>
7+
<FrescoDrawee *tkIfAndroid height="100" width="100" [imageUri]="item.image"></FrescoDrawee>
8+
9+
<StackLayout class="labelsStackLayout" orientation="vertical">
10+
<Label class="labelName" [text]="item.name"></Label>
11+
<Label class="labelTitle" [text]="item.title" textWrap="true"></Label>
12+
<Label class="labelText" text="{{item.text}} + {{item.text}} + {{item.text}}" textWrap="true"></Label>
13+
</StackLayout>
14+
</StackLayout>
15+
</StackLayout>
16+
</ng-template>
17+
18+
<div *tkIfIOS>
19+
<GridLayout *tkListLoadOnDemandTemplate class="loadOnDemandItemGridLayout">
20+
<Label text="Load More" horizontalAlignment="center" verticalAlignment="center"></Label>
21+
</GridLayout>
22+
</div>
23+
</RadListView>
24+
</GridLayout>

‎sdkAngular/app/listview/load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
2+
import { ObservableArray } from "tns-core-modules/data/observable-array";
3+
import { DataItem } from "../../dataItem";
4+
import { ListViewLinearLayout, ListViewEventData, RadListView, ListViewLoadOnDemandMode } from "nativescript-pro-ui/listview";
5+
import * as applicationModule from "tns-core-modules/application";
6+
import * as Timer from "tns-core-modules/timer";
7+
var posts = require("../../../listview/posts.json")
8+
9+
@Component({
10+
moduleId: module.id,
11+
selector: "tk-listview-dynamic-size-manual",
12+
templateUrl: "listview-dynamic-size-manual.component.html",
13+
styleUrls: ["listview-dynamic-size-manual.component.css"]
14+
})
15+
16+
export class ListViewDynamicSizeManualComponent implements OnInit {
17+
private _dataItems: ObservableArray<DataItem>;
18+
private _numberOfAddedItems;
19+
private layout: ListViewLinearLayout;
20+
21+
constructor(private _changeDetectionRef: ChangeDetectorRef) {
22+
}
23+
24+
ngOnInit() {
25+
this.layout = new ListViewLinearLayout();
26+
this.layout.scrollDirection = "Vertical";
27+
this.initDataItems();
28+
this._changeDetectionRef.detectChanges();
29+
}
30+
31+
public get dataItems(): ObservableArray<DataItem> {
32+
return this._dataItems;
33+
}
34+
35+
public onLoadMoreItemsRequested(args: ListViewEventData) {
36+
var that = new WeakRef(this);
37+
Timer.setTimeout(function () {
38+
var listView: RadListView = args.object;
39+
var initialNumberOfItems = that.get()._numberOfAddedItems;
40+
for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
41+
if (i > posts.names.length - 1) {
42+
listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
43+
break;
44+
}
45+
46+
var imageUri = applicationModule.android ? posts.images[i].toLowerCase() : posts.images[i];
47+
that.get()._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + imageUri));
48+
that.get()._numberOfAddedItems++;
49+
}
50+
51+
listView.notifyLoadOnDemandFinished();
52+
}, 1000);
53+
args.returnValue = true;
54+
}
55+
56+
private initDataItems() {
57+
this._dataItems = new ObservableArray<DataItem>();
58+
this._numberOfAddedItems = 0;
59+
for (var i = 0; i < posts.names.length - 15; i++) {
60+
this._numberOfAddedItems++;
61+
if (applicationModule.android) {
62+
this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
63+
}
64+
else {
65+
this._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
66+
}
67+
}
68+
}
69+
}

0 commit comments

Comments
 (0)