Demo update

triniwiz · Feb 20, 2018 · 558f1b2 · 558f1b2
1 parent 1973be4
commit 558f1b2
Show file tree

Hide file tree

Showing 11 changed files with 422 additions and 20 deletions.
diff --git a/demo-ng/app/app.module.ts b/demo-ng/app/app.module.ts
@@ -10,6 +10,7 @@ import { AppComponent } from './app.component';
 import { TestComponent } from './test/test.component';
 import { DummyComponent } from './dummy.component';
 import { TestMultiComponent } from './test-multi/test-multi.component';
+import { TestListComponent } from './test-list/test-list.component';
 
 @NgModule({
   bootstrap: [AppComponent],
@@ -23,6 +24,7 @@ import { TestMultiComponent } from './test-multi/test-multi.component';
     AppComponent,
     TestComponent,
     TestMultiComponent,
+    TestListComponent,
     DummyComponent
   ],
   providers: [],

diff --git a/demo-ng/app/app.routing.ts b/demo-ng/app/app.routing.ts
@@ -5,12 +5,14 @@ import { Routes } from "@angular/router";
 import { TestComponent } from "./test/test.component";
 import { TestMultiComponent } from './test-multi/test-multi.component';
 import { DummyComponent } from "./dummy.component";
+import { TestListComponent } from "./test-list/test-list.component";
 
 const routes: Routes = [
   { path: '', redirectTo: '/test', pathMatch: 'full' },
   { path: 'test', component: TestComponent },
   { path: 'multi', component: TestMultiComponent },
-  { path: 'dummy', component: DummyComponent }
+  { path: 'dummy', component: DummyComponent },
+  { path: 'list', component: TestListComponent },
 ];
 
 @NgModule({

diff --git a/demo-ng/app/test-list/test-list.component.css b/demo-ng/app/test-list/test-list.component.css
@@ -0,0 +1,11 @@
+.pager-item{
+
+}
+.pager-item Label{
+font-size: 20;
+}
+
+.pager-item Image{
+border-radius: 50%;
+border-width: 1;
+}
diff --git a/demo-ng/app/test-list/test-list.component.html b/demo-ng/app/test-list/test-list.component.html
@@ -0,0 +1,34 @@
+<ActionBar title="My NG Demo" class="action-bar">
+</ActionBar>
+<GridLayout rows="auto,*,auto" columns="*" class="page">
+
+    <Button text="Single Template" [nsRouterLink]="['/test']" class="btn btn-primary"></Button>
+    <Pager row="1" [items]="items | async"  #pager [selectedIndex]="currentPagerIndex"
+        (selectedIndexChange)="onIndexChanged($event)" class="pager" backgroundColor="lightsteelblue">
+        <ng-template let-i="index" let-item="item">
+            <Gridlayout rows="auto,*">
+                <GridLayout class="pager-item" rows="auto,auto,*" columns="*">
+                    <Label text="Even"></Label>
+                    <Label row="1" [text]="item.title"></Label>
+                    <Image loaded="loadedImage" row="2" [src]="item.image"></Image>
+                </GridLayout>
+                    <ListView row="1" [items]="item.items">
+                        <ng-template let-o="index" let-child="item">
+                            <GridLayout class="pager-item" rows="auto,auto,*" columns="*">
+                                <Label text="Even"></Label>
+                                <Label row="1" [text]="child.title"></Label>
+                                <Image loaded="loadedImage" row="2" [src]="child.image"></Image>
+                            </GridLayout>
+                        </ng-template>
+                    </ListView>
+            </Gridlayout>
+        </ng-template>
+    </Pager>
+
+
+    <DockLayout row="2" orientation="horizontal" stretchLastChild="true" class="bg-primary">
+        <Button dock="left" text="Prev" (tap)="prevPage()" class="btn btn-primary"></Button>
+        <Button dock="right" text="Next" (tap)="nextPage()" class="btn btn-primary"></Button>
+        <Button text="nav" [nsRouterLink]="['/dummy']" class="btn btn-primary"></Button>
+    </DockLayout>
+</GridLayout>
diff --git a/demo-ng/app/test-list/test-list.component.ts b/demo-ng/app/test-list/test-list.component.ts
@@ -0,0 +1,176 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Component({
+  selector: 'ns-test-list',
+  moduleId: module.id,
+  templateUrl: './test-list.component.html',
+  styleUrls: ['test-list.component.css']
+})
+export class TestListComponent implements OnInit {
+  numItems;
+  currentPagerIndex = 5;
+  latestReceivedIndex = 0;
+  items: any;
+  private _items = [
+    {
+      title: 'Slide 1',
+      image: '~/images/Hulk_(comics_character).png'
+    },
+    {
+      title: 'Slide 2',
+      image:
+        'https://s-media-cache-ak0.pinimg.com/originals/4c/92/cc/4c92cc1dfbde6a6a40fe799f56fa9294.jpg'
+    },
+    {
+      title: 'Slide 3',
+      image:
+        'https://images.unsplash.com/photo-1487715433499-93acdc0bd7c3?auto=format&fit=crop&w=2228&q=80'
+    },
+    {
+      title: 'Slide 4',
+      image:
+        'http://img15.deviantart.net/60ea/i/2012/310/e/4/shazam_by_maiolo-d5k6fr5.jpg'
+    },
+    {
+      title: 'Slide 5',
+      image: 'https://i.annihil.us/u/prod/marvel/i/mg/d/f0/558982863130d.jpg'
+    },
+    {
+      title: 'Slide 6',
+      image:
+        'https://images.unsplash.com/photo-1466872732082-8966b5959296?auto=format&fit=crop&w=2100&q=80'
+    },
+    {
+      title: 'Slide 7',
+      image:
+        'https://images.unsplash.com/photo-1464061884326-64f6ebd57f83?auto=format&fit=crop&w=2100&q=80'
+    },
+    {
+      title: 'Slide 8',
+      image: 'http://cartoonbros.com/wp-content/uploads/2016/05/Batman-4.jpg'
+    },
+    {
+      title: 'Slide 9',
+      image:
+        'http://otakukart.com/animeblog/wp-content/uploads/2016/04/Kurama-Naruto.png'
+    },
+    {
+      title: 'Slide 10',
+      image:
+        'https://images.unsplash.com/photo-1474861644511-0f2775ae97cc?auto=format&fit=crop&w=2391&q=80'
+    }
+  ];
+  @ViewChild('pager') pager: any;
+  // tslint:disable-next-line:semicolon
+  public templateSelector = (item: any, index: number, items: any) => {
+    return index % 2 === 0 ? 'even' : 'odd';
+  }
+
+  constructor() {
+    this.items = new BehaviorSubject([
+      {
+        title: 'Slide 1',
+        image: '~/images/Hulk_(comics_character).png',
+        items: this._items
+      },
+      {
+        title: 'Slide 2',
+        image:
+          'https://s-media-cache-ak0.pinimg.com/originals/4c/92/cc/4c92cc1dfbde6a6a40fe799f56fa9294.jpg',
+        items: this._items
+      },
+      {
+        title: 'Slide 3',
+        image:
+          'https://images.unsplash.com/photo-1487715433499-93acdc0bd7c3?auto=format&fit=crop&w=2228&q=80',
+        items: this._items
+      },
+      {
+        title: 'Slide 4',
+        image:
+          'http://img15.deviantart.net/60ea/i/2012/310/e/4/shazam_by_maiolo-d5k6fr5.jpg',
+        items: this._items
+      },
+      {
+        title: 'Slide 5',
+        image: 'https://i.annihil.us/u/prod/marvel/i/mg/d/f0/558982863130d.jpg',
+        items: this._items
+      },
+      {
+        title: 'Slide 6',
+        image:
+          'https://images.unsplash.com/photo-1466872732082-8966b5959296?auto=format&fit=crop&w=2100&q=80',
+        items: this._items
+      },
+      {
+        title: 'Slide 7',
+        image:
+          'https://images.unsplash.com/photo-1464061884326-64f6ebd57f83?auto=format&fit=crop&w=2100&q=80',
+        items: this._items
+      },
+      {
+        title: 'Slide 8',
+        image: 'http://cartoonbros.com/wp-content/uploads/2016/05/Batman-4.jpg',
+        items: this._items
+      },
+      {
+        title: 'Slide 9',
+        image:
+          'http://otakukart.com/animeblog/wp-content/uploads/2016/04/Kurama-Naruto.png',
+        items: this._items
+      },
+      {
+        title: 'Slide 10',
+        image:
+          'https://images.unsplash.com/photo-1474861644511-0f2775ae97cc?auto=format&fit=crop&w=2391&q=80',
+        items: this._items
+      }
+    ]);
+    this.numItems = this.items.value.length;
+  }
+  ngOnInit(): void {
+    // setTimeout(() => {
+    //   let newItems = (<BehaviorSubject<any>>this.items).value;
+    //   newItems.push({
+    //     title: 'Slide 11',
+    //     image: '~/images/Hulk_(comics_character).png'
+    //   });
+    //   this.items.next(newItems);
+    //   this.numItems = this.items.value.length;
+    // }, 1000);
+  }
+
+  loadedImage($event) {
+    console.log(`loaded image ${JSON.stringify($event)}`);
+  }
+
+  prevPage() {
+    // this.debugObj(this.pager);
+    const newIndex = Math.max(0, this.currentPagerIndex - 1);
+    this.currentPagerIndex = newIndex;
+    this.latestReceivedIndex = newIndex;
+  }
+
+  nextPage() {
+    const newIndex = Math.min(this.numItems - 1, this.currentPagerIndex + 1);
+    this.currentPagerIndex = newIndex;
+    this.latestReceivedIndex = newIndex;
+  }
+
+  onIndexChanged($event) {
+    debugObj($event);
+    this.latestReceivedIndex = $event.newIndex;
+  }
+
+  pageChanged(index: number) {
+    console.log(`pageChanged ${JSON.stringify(index)}`);
+    debugObj(index);
+  }
+}
+
+function debugObj(obj: any) {
+  for (const key of Object.keys(obj)) {
+    console.log(`${key} = ${obj[key]}`);
+  }
+}
diff --git a/demo-ng/app/test/test.component.html b/demo-ng/app/test/test.component.html
@@ -1,9 +1,9 @@
 <ActionBar title="My NG Demo" class="action-bar">
 </ActionBar>
-<GridLayout rows="auto,*, auto" columns="*" class="page">
+<GridLayout rows="auto,auto,*, auto" columns="*" class="page">
     <Button text="Multi Template" [nsRouterLink]="['/multi']" class="btn btn-primary"></Button>
-
-    <Pager row="1" [items]="items | async" #pager selectedIndex="5" (selectedIndexChange)="onIndexChanged($event)" class="pager"
+    <Button row="1" text="Pager With List" [nsRouterLink]="['/list']" class="btn btn-primary"></Button>
+    <Pager row="2" [items]="items | async" #pager selectedIndex="5" (selectedIndexChange)="onIndexChanged($event)" class="pager"
         backgroundColor="lightsteelblue">
         <ng-template let-i="index" let-item="item">
             <GridLayout class="pager-item" rows="auto, *" columns="*" backgroundColor="red">
@@ -13,7 +13,7 @@
         </ng-template>
     </Pager>
 
-    <DockLayout row="2" orientation="horizontal" stretchLastChild="true" class="bg-primary">
+    <DockLayout row="3" orientation="horizontal" stretchLastChild="true" class="bg-primary">
         <Button dock="left" text="Prev" (tap)="prevPage()" class="btn btn-primary"></Button>
         <Button dock="right" text="Next" (tap)="nextPage()" class="btn btn-primary"></Button>
         <Button text="nav" [nsRouterLink]="['/dummy']" class="btn btn-primary"></Button>

diff --git a/demo/app/list-page.ts b/demo/app/list-page.ts
@@ -0,0 +1,85 @@
+import {
+  EventData,
+  PropertyChangeData
+} from 'tns-core-modules/data/observable';
+import { Page, NavigatedData } from 'tns-core-modules/ui/page';
+import { HelloWorldModel } from './main-view-model';
+import { Pager } from 'nativescript-pager';
+import { Button } from 'tns-core-modules/ui/button';
+import { Image } from 'tns-core-modules/ui/image';
+import { topmost } from 'tns-core-modules/ui/frame';
+import * as app from 'tns-core-modules/application';
+let page: Page;
+let vm = new HelloWorldModel();
+// Event handler for Page "navigatingTo" event attached in main-page.xml
+export function navigatingTo(args: NavigatedData) {
+  // Get the event sender
+  page = <Page>args.object;
+  if (!args.isBackNavigation) {
+    page.bindingContext = vm;
+  }
+  setTimeout(() => {
+    const pager: Pager = <Pager>page.getViewById('pager');
+    pager.refresh(false);
+  }, 5000);
+}
+export function pageLoaded() {}
+
+export function toggleSwipe() {
+  const pager: Pager = <Pager>page.getViewById('pager');
+  pager.disableSwipe = !pager.disableSwipe;
+}
+
+export function goToPagerWithList(event) {
+  topmost().navigate('list-page');
+}
+
+export function prevPage() {
+  const pager: Pager = <Pager>page.getViewById('pager');
+  --pager.selectedIndex;
+}
+
+export function nextPage() {
+  const pager: Pager = <Pager>page.getViewById('pager');
+  ++pager.selectedIndex;
+}
+
+export function firstPage() {
+  const pager: Pager = <Pager>page.getViewById('pager');
+  pager.selectedIndex = 0;
+}
+
+export function lastPage() {
+  const pager: Pager = <Pager>page.getViewById('pager');
+  pager.selectedIndex = pager.items.length - 1;
+}
+
+export function loadedImage($event: any) {
+  const image: Image = $event.object;
+  // console.log(
+  //   `onLoaded: ${image}, size: ${JSON.stringify(image.getActualSize())}}`
+  // );
+}
+
+export function itemTemplateSelector(
+  item: any,
+  index: number,
+  items: Array<any>
+) {
+  return index % 2 === 0 ? 'even' : 'odd';
+}
+
+export function selectedIndexChange(event: any) {
+  const selectedIndex = event.object.get('selectedIndex');
+  // vm.set('index', event.object.get('selectedIndex'));
+
+  if ((selectedIndex + 2) % 3 === 0) {
+    vm.items.push({
+      title: 'Slide ' + (vm.items.length + 1),
+      image: 'https://source.unsplash.com/random'
+    });
+  }
+}
+export function navigate() {
+  topmost().navigate('dummy-page');
+}
diff --git a/demo/app/list-page.xml b/demo/app/list-page.xml
@@ -0,0 +1,28 @@
+<Page
+    xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" loaded="pageLoaded"
+    xmlns:c="nativescript-pager">
+    <GridLayout rows="auto,auto ,auto,auto, *, auto" columns="*" id="sl">
+        <Label text="Pager With List"/>
+        <c:Pager selectedIndexChange="selectedIndexChange" selectedIndex="5" items="{{items}}" row="4" id="pager" pagesCount="10" showNativePageIndicator="false" backgroundColor="lightsteelblue">
+            <Pager.itemTemplate>
+                <GridLayout rows="auto,*">
+                    <GridLayout height="40%" rows="auto,auto,*" columns="*">
+                        <Label text="Even"/>
+                        <Label row="1" text="{{title}}"/>
+                        <Image loaded="loadedImage" row="2" src="{{image}}"/>
+                    </GridLayout>
+                    <ListView items="{{items}}" row="1">
+                        <ListView.itemTemplate>
+                            <GridLayout rows="auto,auto,*" columns="*">
+                                <Label text="Even"/>
+                                <Label row="1" text="{{title}}"/>
+                                <Image loaded="loadedImage" row="2" src="{{image}}"/>
+                            </GridLayout>
+                        </ListView.itemTemplate>
+                    </ListView>
+                </GridLayout>
+            </Pager.itemTemplate>
+        </c:Pager>
+        <Button text="Nav" row="5" tap="navigate"/>
+    </GridLayout>
+</Page>