diff --git a/demos/infinite-scroll/index.ts b/demos/infinite-scroll/index.ts new file mode 100644 index 0000000000..dc45f02012 --- /dev/null +++ b/demos/infinite-scroll/index.ts @@ -0,0 +1,30 @@ +import {App, InfiniteScroll} from 'ionic-angular'; +import {MockProvider} from './mock-provider'; + + +@App({ + templateUrl: 'main.html', + providers: [MockProvider] +}) +class ApiDemoApp { + items: string[]; + + constructor(private mockProvider: MockProvider) { + this.items = mockProvider.getData(); + } + + doInfinite(infiniteScroll: InfiniteScroll) { + this.mockProvider.getAsyncData().then((newData) => { + for (var i = 0; i < newData.length; i++) { + this.items.push( newData[i] ); + } + + infiniteScroll.complete(); + + if (this.items.length > 90) { + infiniteScroll.enable(false); + } + }); + } + +} diff --git a/demos/infinite-scroll/main.html b/demos/infinite-scroll/main.html new file mode 100644 index 0000000000..2e4dea0ff3 --- /dev/null +++ b/demos/infinite-scroll/main.html @@ -0,0 +1,20 @@ + + Infinite Scroll + + + + + + + {{ item }} + + + + + + + + + diff --git a/demos/infinite-scroll/mock-provider.ts b/demos/infinite-scroll/mock-provider.ts new file mode 100644 index 0000000000..515a6d2172 --- /dev/null +++ b/demos/infinite-scroll/mock-provider.ts @@ -0,0 +1,61 @@ +import {Injectable} from 'angular2/core'; + +/** + * Mock Data Access Object + **/ +@Injectable() +export class MockProvider { + + getData() { + // return mock data synchronously + let data = []; + for (var i = 0; i < 3; i++) { + data.push( this._getRandomData() ); + } + return data; + } + + getAsyncData() { + // async receive mock data + return new Promise(resolve => { + + setTimeout(() => { + resolve(this.getData()); + }, 1000); + + }); + } + + private _getRandomData() { + let i = Math.floor( Math.random() * this._data.length ); + return this._data[i]; + } + + private _data = [ + 'Fast Times at Ridgemont High', + 'Peggy Sue Got Married', + 'Raising Arizona', + 'Moonstruck', + 'Fire Birds', + 'Honeymoon in Vegas', + 'Amos & Andrew', + 'It Could Happen to You', + 'Trapped in Paradise', + 'Leaving Las Vegas', + 'The Rock', + 'Con Air', + 'Face/Off', + 'City of Angels', + 'Gone in Sixty Seconds', + 'The Family Man', + 'Windtalkers', + 'Matchstick Men', + 'National Treasure', + 'Ghost Rider', + 'Grindhouse', + 'Next', + 'Kick-Ass', + 'Drive Angry', + ]; + +} diff --git a/ionic/components/infinite-scroll/infinite-scroll.ts b/ionic/components/infinite-scroll/infinite-scroll.ts index 272726f334..058fced460 100644 --- a/ionic/components/infinite-scroll/infinite-scroll.ts +++ b/ionic/components/infinite-scroll/infinite-scroll.ts @@ -88,6 +88,8 @@ import {Content} from '../content/content'; * developers to create their own infinite scroll content components. * You could replace our default content with custom SVG or CSS animations. * + * @demo /docs/v2/demos/infinite-scroll/ + * */ @Directive({ selector: 'ion-infinite-scroll'