feat(scroll): ion-scroll

ionic/components.js

@@ -19,6 +19,7 @@ export * from 'ionic/components/nav/nav-push'
 export * from 'ionic/components/nav-bar/nav-bar'
 export * from 'ionic/components/slides/slides'
 export * from 'ionic/components/radio/radio'
+export * from 'ionic/components/scroll/scroll'
 export * from 'ionic/components/scroll/pull-to-refresh'
 export * from 'ionic/components/search-bar/search-bar'
 // export * from 'ionic/components/split-view/split-view'

ionic/components/app/structure.scss

@@ -121,21 +121,3 @@ ion-toolbar {
   min-height: 4.4rem;
   background: white;
 }
-
-ion-content {
-  position: relative;
-  display: block;
-  flex: 1;
-}
-
-.scroll-content {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
-  will-change: scroll-position;
-}

ionic/components/content/content.js

@@ -11,7 +11,7 @@ import {Ion} from '../ion';
 @View({
   template: `<div class="scroll-content"><content></content></div>`
 })
-export class Content extends Ion{
+export class Content extends Ion {
   constructor(elementRef: ElementRef) {
     super(elementRef);
 

ionic/components/content/content.scss

@@ -11,5 +11,21 @@ $content-background-color:                   #fff !default;
 }
 
 ion-content {
+  position: relative;
+  display: block;
+  flex: 1;
   background-color: $content-background-color;
+
+  .scroll-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    will-change: scroll-position;
+  }
+
 }

ionic/components/scroll/scroll.js

@@ -0,0 +1,43 @@
+import {ElementRef} from 'angular2/angular2'
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {Ion} from '../ion';
+
+
+/**
+ * ion-scroll is a non-flexboxed scroll area that can
+ * scroll horizontally or vertically.
+ */
+@Component({
+  selector: 'ion-scroll',
+  properties: [
+    'scrollX', 'scrollY'
+  ],
+  host: {
+    '[class.scroll-x]': 'scrollX',
+    '[class.scroll-y]': 'scrollY'
+  }
+})
+@View({
+  template: `<div class="scroll-content"><content></content></div>`
+})
+export class Scroll extends Ion {
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
+
+    setTimeout(() => {
+      this.scrollElement = elementRef.nativeElement.children[0];
+    });
+  }
+
+  addScrollEventListener(handler) {
+    if(!this.scrollElement) { return; }
+
+    this.scrollElement.addEventListener('scroll', handler);
+
+    return () => {
+      this.scrollElement.removeEventListener('scroll', handler);
+    }
+  }
+}

ionic/components/scroll/scroll.scss

@@ -0,0 +1,25 @@
+ion-scroll {
+  position: relative;
+  display: block;
+  background-color: $content-background-color;
+  &.scroll-x .scroll-content {
+    overflow-x: auto;
+  }
+  &.scroll-y .scroll-content {
+    overflow-y: auto;
+  }
+
+  .scroll-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    will-change: scroll-position;
+
+  }
+
+}

ionic/components/scroll/test/basic/index.js

@@ -0,0 +1,21 @@
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+  doRefresh() {
+    console.log('DOREFRESH')
+  }
+}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

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

@@ -0,0 +1,37 @@
+<ion-view nav-title="Pull to refresh">
+  <ion-toolbar>
+    <ion-title>Scroll</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+
+    <h2>Horizontal</h2>
+    <ion-scroll scroll-x="true" style="height: 200px">
+      <div style="height: 200px; width: 2500px; background: url('eight_horns.png') repeat"></div>
+    </ion-scroll>
+
+    <h2>Vertical</h2>
+    <ion-scroll scroll-y="true" style="width: 200px; height: 500px">
+      <div style="height: 2500px; width: 200px; background: url('eight_horns.png') repeat"></div>
+    </ion-scroll>
+
+    <h2>Both</h2>
+    <ion-scroll scroll-x="true" scroll-y="true" style="width: 100%; height: 500px">
+      <div style="height: 2500px; width: 2500px; background: url('eight_horns.png') repeat"></div>
+    </ion-scroll>
+
+  </ion-content>
+
+</ion-view>
+<style>
+  f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px; }
+  #counter {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px;
+    background-color: rgba(0,0,0,0.4);
+    z-index: 5;
+  }
+</style>

ionic/config/annotations.js

@@ -4,7 +4,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import * as util from 'ionic/util';
 import {IonicConfig} from './config';
 import {
-  Aside, Content, Refresher,
+  Aside, Content, Scroll, Refresher,
   Slides, Slide, SlidePager,
   Tabs, Tab,
   List, Item,
@@ -24,7 +24,7 @@ export class IonicView extends View {
       coreDirectives,
 
       // Content
-      Aside, Content, Refresher,
+      Aside, Content, Scroll, Refresher,
       List, Item,
       Slides, Slide, SlidePager,
       Tabs, Tab,

ionic/ionic.scss

@@ -41,6 +41,7 @@
   "components/nav-bar/nav-bar",
   "components/slides/slides",
   "components/radio/radio",
+  "components/scroll/scroll",
   "components/scroll/pull-to-refresh",
   "components/search-bar/search-bar",
   "components/segment/segment",