From c447282ce5b5f95f874c1a2ead9a0c1923cedb0e Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 2 Jul 2015 16:50:43 -0500 Subject: [PATCH] feat(scroll): ion-scroll --- ionic/components.js | 1 + ionic/components/app/structure.scss | 18 -------- ionic/components/content/content.js | 2 +- ionic/components/content/content.scss | 16 +++++++ ionic/components/scroll/scroll.js | 43 ++++++++++++++++++ ionic/components/scroll/scroll.scss | 25 ++++++++++ .../scroll/test/basic/eight_horns.png | Bin 0 -> 2493 bytes ionic/components/scroll/test/basic/index.js | 21 +++++++++ ionic/components/scroll/test/basic/main.html | 37 +++++++++++++++ ionic/config/annotations.js | 4 +- ionic/ionic.scss | 1 + 11 files changed, 147 insertions(+), 21 deletions(-) create mode 100644 ionic/components/scroll/scroll.js create mode 100644 ionic/components/scroll/scroll.scss create mode 100644 ionic/components/scroll/test/basic/eight_horns.png create mode 100644 ionic/components/scroll/test/basic/index.js create mode 100644 ionic/components/scroll/test/basic/main.html diff --git a/ionic/components.js b/ionic/components.js index 7a9d7f4aad..1ed6bf3ba6 100644 --- a/ionic/components.js +++ b/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' diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index f96c40a5f8..7594a8a8c7 100644 --- a/ionic/components/app/structure.scss +++ b/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; -} diff --git a/ionic/components/content/content.js b/ionic/components/content/content.js index a931333f74..ef6f8aeacb 100644 --- a/ionic/components/content/content.js +++ b/ionic/components/content/content.js @@ -11,7 +11,7 @@ import {Ion} from '../ion'; @View({ template: `
` }) -export class Content extends Ion{ +export class Content extends Ion { constructor(elementRef: ElementRef) { super(elementRef); diff --git a/ionic/components/content/content.scss b/ionic/components/content/content.scss index 9290195d97..817bb02b83 100644 --- a/ionic/components/content/content.scss +++ b/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; + } + } diff --git a/ionic/components/scroll/scroll.js b/ionic/components/scroll/scroll.js new file mode 100644 index 0000000000..c6896b4287 --- /dev/null +++ b/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: `
` +}) +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); + } + } +} diff --git a/ionic/components/scroll/scroll.scss b/ionic/components/scroll/scroll.scss new file mode 100644 index 0000000000..527d97d5c7 --- /dev/null +++ b/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; + + } + +} diff --git a/ionic/components/scroll/test/basic/eight_horns.png b/ionic/components/scroll/test/basic/eight_horns.png new file mode 100644 index 0000000000000000000000000000000000000000..103fa9cce794bab2b3ae6341fd99499d750a5f41 GIT binary patch literal 2493 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 literal 0 HcmV?d00001 diff --git a/ionic/components/scroll/test/basic/index.js b/ionic/components/scroll/test/basic/index.js new file mode 100644 index 0000000000..265d76f100 --- /dev/null +++ b/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); +} diff --git a/ionic/components/scroll/test/basic/main.html b/ionic/components/scroll/test/basic/main.html new file mode 100644 index 0000000000..167abf62bd --- /dev/null +++ b/ionic/components/scroll/test/basic/main.html @@ -0,0 +1,37 @@ + + + Scroll + + + + +

Horizontal

+ +
+ + +

Vertical

+ +
+ + +

Both

+ +
+ + + + + + diff --git a/ionic/config/annotations.js b/ionic/config/annotations.js index 380e6bbfda..b4a930b8ef 100644 --- a/ionic/config/annotations.js +++ b/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, diff --git a/ionic/ionic.scss b/ionic/ionic.scss index 1284de8f2c..62be7c5db9 100644 --- a/ionic/ionic.scss +++ b/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",