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

…roll

update API docs & rename endLoading function to complete.

references #5415

ionic/components/infinite-scroll/infinite-scroll-content.ts

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

ionic/components/infinite-scroll/infinite-scroll.scss

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

ionic/components/infinite-scroll/infinite-scroll.ts

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

ionic/components/infinite-scroll/test/basic/index.ts

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

ionic/components/infinite-scroll/test/basic/main.html

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