From 89f131b2dec28af00b315f80f8b26fe239dd06db Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Wed, 30 Sep 2015 13:35:12 -0500 Subject: [PATCH] Scroll to top --- ionic/components/content/content.ts | 20 ++++++++++++++++++-- ionic/components/nav/view-controller.ts | 8 ++++++++ ionic/components/tabs/tab.ts | 7 +++++-- ionic/components/tabs/tabs.ts | 9 +++++++++ 4 files changed, 40 insertions(+), 4 deletions(-) diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 96ebaed27e..a9ba0d6b34 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -1,9 +1,11 @@ -import {Component, View, ElementRef} from 'angular2/angular2'; +import {Component, View, ElementRef, Optional, Host} from 'angular2/angular2'; import {Ion} from '../ion'; import {IonicConfig} from '../../config/config'; import {IonicPlatform} from '../../platform/platform'; import {IonicComponent} from '../../config/decorators'; +import {ViewController} from '../nav/view-controller'; +import {Tab} from '../tabs/tab'; import {ScrollTo} from '../../animations/scroll-to'; @@ -38,10 +40,14 @@ export class Content extends Ion { * @param {ElementRef} elementRef A reference to the component's DOM element. * @param {IonicConfig} config The config object to change content's default settings. */ - constructor(elementRef: ElementRef, config: IonicConfig, platform: IonicPlatform) { + constructor(elementRef: ElementRef, config: IonicConfig, platform: IonicPlatform, @Optional() viewCtrl: ViewController) { super(elementRef, config); this.scrollPadding = 0; this.platform = platform; + + if(viewCtrl) { + viewCtrl.setContent(this); + } } /** @@ -107,6 +113,16 @@ export class Content extends Ion { return this._scrollTo.start(x, y, duration, tolerance); } + scrollToTop() { + if (this._scrollTo) { + this._scrollTo.dispose(); + } + + this._scrollTo = new ScrollTo(this.scrollElement); + + return this._scrollTo.start(0, 0, 300, 0); + } + /** * Returns the content and scroll elements' dimensions. * @returns {Object} dimensions The content and scroll elements' dimensions diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index ea13d2cd2d..9842cd61b7 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -23,6 +23,14 @@ export class ViewController { this.templateRefs = {}; } + setContent(content) { + this._content = content; + } + + getContent() { + return this._content; + } + /** * TODO * @param {TODO} name TODO diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index 22b29d168d..4cdd9f2db9 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -1,8 +1,10 @@ -import {Directive, Component, View, Host, ElementRef, forwardRef, Injector, NgZone} from 'angular2/angular2'; +import {Directive, Component, View, Host, ElementRef, forwardRef, + Injector, NgZone, Query, ViewQuery, QueryList} from 'angular2/angular2'; import {NavController} from '../nav/nav-controller'; import {ViewController} from '../nav/view-controller'; import {Tabs} from './tabs'; +import {Content} from '../content/content'; /** @@ -47,7 +49,7 @@ export class Tab extends NavController { @Host() tabs: Tabs, elementRef: ElementRef, injector: Injector, - zone: NgZone + zone: NgZone, ) { // A Tab is both a container of many views, and is a view itself. // A Tab is one ViewController within it's Host Tabs (which extends NavController) @@ -141,6 +143,7 @@ class TabPaneAnchor { * @param {ElementRef} elementRef TODO */ constructor(@Host() tab: Tab, elementRef: ElementRef) { + tab.anchorElementRef(elementRef); } } diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 58b6255efb..720128a4b7 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -166,6 +166,15 @@ export class Tabs extends NavController { // Pop to the root view tab.popToRoot(); } + /* + TODO: Uncomment to enable root scroll to top + else { + let content = tab.views[0] && tab.views[0].getContent(); + if(content) { + content.scrollToTop(); + } + } + */ } get tabs() {