javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(infinite-scroll): rename the elements to include the word scroll

Browse Source 
update API docs & rename endLoading function to complete.

references #5415
This commit is contained in:
Brandy Carney
2016-02-29 15:49:39 -05:00
parent 1bb51c2e26
commit 29d3bb1fcb
5 changed files with 41 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/infinite-scroll/infinite-scroll-content.ts
View File

@ -10,7 +10,7 @@ import {Spinner} from '../spinner/spinner';
* @private * @private
*/ */
@Component({ @Component({
selector: 'ion-infinite-content', selector: 'ion-infinite-scroll-content',
template: template:
'<div class="infinite-loading">' + '<div class="infinite-loading">' +
'<div class="infinite-loading-spinner" *ngIf="loadingSpinner">' + '<div class="infinite-loading-spinner" *ngIf="loadingSpinner">' +

6
ionic/components/infinite-scroll/infinite-scroll.scss
View File

@ -8,7 +8,7 @@ $infinite-scroll-loading-color: #666 !default;
$infinite-scroll-loading-text-margin: 4px 32px 0 32px !default; $infinite-scroll-loading-text-margin: 4px 32px 0 32px !default;
ion-infinite { ion-infinite-scroll {
display: block; display: block;
width: 100%; width: 100%;
} }
@ -17,7 +17,7 @@ ion-infinite {
// Infinite Scroll Content // Infinite Scroll Content
// -------------------------------------------------- // --------------------------------------------------
ion-infinite-content { ion-infinite-scroll-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -39,6 +39,6 @@ ion-infinite-content {
// Infinite Scroll Content States // Infinite Scroll Content States
// -------------------------------------------------- // --------------------------------------------------
ion-infinite-content[state=disabled] .infinite-loading { ion-infinite-scroll-content[state=disabled] .infinite-loading {
display: none; display: none;
} }

65
ionic/components/infinite-scroll/infinite-scroll.ts
View File

@ -6,13 +6,13 @@ import {Content} from '../content/content';
/** /**
* @name InfiniteScroll * @name InfiniteScroll
* @description * @description
* The infinite scroll allows you to call a method whenever the user * The Infinite Scroll allows you to perform an action when the user
* gets to the bottom of the page or near the bottom of the page. * scrolls a specified distance from the bottom of the page.
* *
* The expression you add to the `infinite` output event is called when * The expression assigned to the `infinite` event is called when
* the user scrolls greater than distance away from the bottom of the * the user scrolls to the specified distance. When this expression
* content. Once your `infinite` handler is done loading new data, it * has finished its tasks, it should call the `complete()` method
* should call the `endLoading()` method on the infinite scroll instance. * on the infinite scroll instance.
* *
* @usage * @usage
* ```html * ```html
@ -22,9 +22,9 @@ import {Content} from '../content/content';
* <ion-item *ngFor="#i of items">{{i}}</ion-item> * <ion-item *ngFor="#i of items">{{i}}</ion-item>
* </ion-list> * </ion-list>
* *
* <ion-infinite (infinite)="doInfinite($event)"> * <ion-infinite-scroll (infinite)="doInfinite($event)">
* <ion-infinite-content></ion-infinite-content> * <ion-infinite-scroll-content></ion-infinite-scroll-content>
* </ion-infinite> * </ion-infinite-scroll>
* *
* </ion-content> * </ion-content>
* ``` * ```
@ -49,7 +49,7 @@ import {Content} from '../content/content';
* } * }
* *
* console.log('Async operation has ended'); * console.log('Async operation has ended');
* infiniteScroll.endLoading(); * infiniteScroll.complete();
* }, 500); * }, 500);
* } * }
* *
@ -59,20 +59,20 @@ import {Content} from '../content/content';
* *
* ## Infinite Scroll Content * ## Infinite Scroll Content
* *
* By default, Ionic provides the infinite scroll spinner that looks * By default, Ionic uses the infinite scroll spinner that looks
* best for the platform the user is on. However, you can change the * best for the platform the user is on. However, you can change the
* default spinner, along with adding text by adding properties to * default spinner or add text by adding properties to the
* the child `ion-infinite-content` component. * `ion-infinite-scroll-content` component.
* *
* ```html * ```html
* <ion-content> * <ion-content>
* *
* <ion-infinite (infinite)="doInfinite($event)"> * <ion-infinite-scroll (infinite)="doInfinite($event)">
* <ion-infinite-content * <ion-infinite-scroll-content
* loadingSpinner="bubbles" * loadingSpinner="bubbles"
* loadingText="Loading more data..."> * loadingText="Loading more data...">
* </ion-infinite-content> * </ion-infinite-scroll-content>
* </ion-infinite> * </ion-infinite-scroll>
* *
* </ion-content> * </ion-content>
* ``` * ```
@ -80,18 +80,17 @@ import {Content} from '../content/content';
* *
* ## Further Customizing Infinite Scroll Content * ## Further Customizing Infinite Scroll Content
* *
* The `ion-infinite` component holds the infinite scroll logic, and it * The `ion-infinite-scroll` component holds the infinite scroll logic.
* requires a child infinite scroll content component for its display. * It requires a child component in order to display the content.
* The `ion-infinite-content` component is Ionic's default that shows * Ionic uses `ion-infinite-scroll-content` by default. This component
* the actual display of the infinite scroll and changes its look depending * displays the infinite scroll and changes the look depending
* on the infinite scroll's state. With this separation, it also allows * on the infinite scroll's state. Separating these components allows
* developers to create their own infinite scroll content components. * developers to create their own infinite scroll content components.
* Ideas include having some cool SVG or CSS animations that are * You could replace our default content with custom SVG or CSS animations.
* customized to your app and animates to your liking.
* *
*/ */
@Directive({ @Directive({
selector: 'ion-infinite' selector: 'ion-infinite-scroll'
}) })
export class InfiniteScroll { export class InfiniteScroll {
private _lastCheck: number = 0; private _lastCheck: number = 0;
@ -107,11 +106,11 @@ export class InfiniteScroll {
/** /**
* @input {string} The threshold distance from the bottom * @input {string} The threshold distance from the bottom
* of the content to call the `infinite` output event when scrolled. * of the content to call the `infinite` output event when scrolled.
* The threshold input value can be either a percent, or * The threshold value can be either a percent, or
* in pixels. For example, use the value of `10%` for the `infinite` * in pixels. For example, use the value of `10%` for the `infinite`
* output event to get called when the scroll has 10% of the scroll * output event to get called when the user has scrolled 10%
* left until it reaches the bottom. Use the value `100px` when the * from the bottom of the page. Use the value `100px` when the
* scroll is within 100 pixels from the bottom of the content. * scroll is within 100 pixels from the bottom of the page.
* Default is `15%`. * Default is `15%`.
*/ */
@Input() @Input()
@ -132,8 +131,8 @@ export class InfiniteScroll {
/** /**
* @output {event} The expression to call when the scroll reaches * @output {event} The expression to call when the scroll reaches
* the threshold input distance. From within your infinite handler, * the threshold distance. From within your infinite handler,
* you must call the infinite scroll's `endLoading()` method when * you must call the infinite scroll's `complete()` method when
* your async operation has completed. * your async operation has completed.
*/ */
@Output() infinite: EventEmitter<InfiniteScroll> = new EventEmitter(); @Output() infinite: EventEmitter<InfiniteScroll> = new EventEmitter();
@ -194,7 +193,7 @@ export class InfiniteScroll {
} }
/** /**
* Call `endLoading()` within the `infinite` output event handler when * Call `complete()` within the `infinite` output event handler when
* your async operation has completed. For example, the `loading` * your async operation has completed. For example, the `loading`
* state is while the app is performing an asynchronous operation, * state is while the app is performing an asynchronous operation,
* such as receiving more data from an AJAX request to add more items * such as receiving more data from an AJAX request to add more items
@ -203,7 +202,7 @@ export class InfiniteScroll {
* This method will change the infinite scroll's state from `loading` * This method will change the infinite scroll's state from `loading`
* to `enabled`. * to `enabled`.
*/ */
endLoading() { complete() {
this.state = STATE_ENABLED; this.state = STATE_ENABLED;
} }

2
ionic/components/infinite-scroll/test/basic/index.ts
View File

@ -22,7 +22,7 @@ class E2EApp {
} }
console.log('Finished receiving data, async operation complete'); console.log('Finished receiving data, async operation complete');
infiniteScroll.endLoading(); infiniteScroll.complete();
if (this.items.length > 90) { if (this.items.length > 90) {
infiniteScroll.enable(false); infiniteScroll.enable(false);

8
ionic/components/infinite-scroll/test/basic/main.html
View File

@ -8,11 +8,11 @@
</ion-item> </ion-item>
</ion-list> </ion-list>
<ion-infinite (infinite)="doInfinite($event)" threshold="100px"> <ion-infinite-scroll (infinite)="doInfinite($event)" threshold="100px">
<ion-infinite-content <ion-infinite-scroll-content
loadingSpinner="bubbles" loadingSpinner="bubbles"
loadingText="Loading more data..."> loadingText="Loading more data...">
</ion-infinite-content> </ion-infinite-scroll-content>
</ion-infinite> </ion-infinite-scroll>
</ion-content> </ion-content>