feat(infiniteScroll): add infinite scroll

Closes #5415

ionic/components.core.scss

@@ -16,6 +16,7 @@
 @import
   "components/grid/grid",
   "components/icon/icon",
+  "components/infinite-scroll/infinite-scroll",
   "components/menu/menu",
   "components/modal/modal",
   "components/refresher/refresher",

ionic/components.ts

@@ -7,6 +7,8 @@ export * from './components/button/button'
 export * from './components/checkbox/checkbox'
 export * from './components/content/content'
 export * from './components/icon/icon'
+export * from './components/infinite-scroll/infinite-scroll'
+export * from './components/infinite-scroll/infinite-scroll-content'
 export * from './components/input/input'
 export * from './components/item/item'
 export * from './components/item/item-sliding'

ionic/components/content/content.ts

@@ -35,8 +35,8 @@ import {ScrollTo} from '../../animations/scroll-to';
 })
 export class Content extends Ion {
   private _padding: number = 0;
-  private _onScroll: any;
   private _scrollTo: ScrollTo;
+  private _scLsn: Function;
 
   /**
    * @private
@@ -65,13 +65,11 @@ export class Content extends Ion {
     let self = this;
     self.scrollElement = self._elementRef.nativeElement.children[0];
 
-    self._onScroll = function(ev) {
-      self._app.setScrolling();
-    };
-
     if (self._config.get('tapPolyfill') === true) {
       self._zone.runOutsideAngular(function() {
-        self.scrollElement.addEventListener('scroll', self._onScroll);
+        self._scLsn = self.addScrollListener(function() {
+          self._app.setScrolling();
+        });
       });
     }
   }
@@ -80,8 +78,8 @@ export class Content extends Ion {
    * @private
    */
   ngOnDestroy() {
-    this.scrollElement.removeEventListener('scroll', this._onScroll.bind(this));
-    this.scrollElement = null;
+    this._scLsn && this._scLsn();
+    this.scrollElement = this._scLsn = null;
   }
 
   /**
@@ -298,7 +296,6 @@ export class Content extends Ion {
   }
 
   /**
-   * @private
    * Returns the content and scroll elements' dimensions.
    * @returns {object} dimensions  The content and scroll elements' dimensions
    * {number} dimensions.contentHeight  content offsetHeight
@@ -334,7 +331,7 @@ export class Content extends Ion {
       scrollWidth: _scrollEle.scrollWidth,
       scrollLeft: _scrollEle.scrollLeft,
       scrollRight: _scrollEle.scrollLeft + _scrollEle.scrollWidth,
-    }
+    };
   }
 
   /**

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

@@ -0,0 +1,48 @@
+import {Component, Input} from 'angular2/core'
+import {NgIf} from 'angular2/common';
+
+import {Config} from '../../config/config';
+import {InfiniteScroll} from './infinite-scroll';
+import {Spinner} from '../spinner/spinner';
+
+
+/**
+ * @private
+ */
+@Component({
+  selector: 'ion-infinite-content',
+  template:
+    '<div class="infinite-loading">' +
+      '<div class="infinite-loading-spinner" *ngIf="loadingSpinner">' +
+        '<ion-spinner [name]="loadingSpinner"></ion-spinner>' +
+      '</div>' +
+      '<div class="infinite-loading-text" [innerHTML]="loadingText" *ngIf="loadingText"></div>' +
+    '</div>',
+  directives: [NgIf, Spinner],
+  host: {
+    '[attr.state]': 'inf.state'
+  }
+})
+export class InfiniteScrollContent {
+
+  /**
+   * @input {string} An animated SVG spinner that shows while loading.
+   */
+  @Input() loadingSpinner: string;
+
+  /**
+   * @input {string} Optional text to display while loading.
+   */
+  @Input() loadingText: string;
+
+  constructor(private inf: InfiniteScroll, private _config: Config) {}
+
+  /**
+   * @private
+   */
+  ngOnInit() {
+    if (!this.loadingSpinner) {
+      this.loadingSpinner = this._config.get('infiniteLoadingSpinner', this._config.get('spinner', 'ios'));
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+@import "../../globals.core";
+
+// Infinite Scroll
+// --------------------------------------------------
+
+$infinite-scroll-loading-margin:         0px 0px 32px 0px !default;
+$infinite-scroll-loading-color:          #666 !default;
+$infinite-scroll-loading-text-margin:    4px 32px 0 32px !default;
+
+
+ion-infinite {
+  display: block;
+  width: 100%;
+}
+
+
+// Infinite Scroll Content
+// --------------------------------------------------
+
+ion-infinite-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+}
+
+.infinite-loading {
+  width: 100%;
+  margin: $infinite-scroll-loading-margin;
+}
+
+.infinite-loading-text {
+  margin: $infinite-scroll-loading-text-margin;
+  color: $infinite-scroll-loading-color;
+}
+
+
+// Infinite Scroll Content States
+// --------------------------------------------------
+
+ion-infinite-content[state=disabled] .infinite-loading {
+  display: none;
+}