added button to scroll back to top of feed issue #24
This commit is contained in:
parent
84f09636c9
commit
680a3a0a2c
2 changed files with 30 additions and 3 deletions
|
@ -96,4 +96,10 @@
|
||||||
</button>
|
</button>
|
||||||
</ion-fab>
|
</ion-fab>
|
||||||
|
|
||||||
|
<ion-fab *ngIf="showScrollBtn" left bottom>
|
||||||
|
<button ion-fab color="light" (click)="scrollToTop()">
|
||||||
|
<ion-icon name="arrow-dropup"></ion-icon>
|
||||||
|
</button>
|
||||||
|
</ion-fab>
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
|
||||||
import { ViewController, NavController, NavParams, ModalController } from 'ionic-angular';
|
import { ViewController, NavController, NavParams, ModalController, Content } from 'ionic-angular';
|
||||||
import { ThreadPage } from '../thread/thread';
|
import { ThreadPage } from '../thread/thread';
|
||||||
|
|
||||||
import * as pnut from 'pnut-butter';
|
import * as pnut from 'pnut-butter';
|
||||||
|
@ -16,6 +16,8 @@ import * as pnut from 'pnut-butter';
|
||||||
})
|
})
|
||||||
export class StreamPage {
|
export class StreamPage {
|
||||||
|
|
||||||
|
@ViewChild(Content) content: Content;
|
||||||
|
|
||||||
title: string;
|
title: string;
|
||||||
posts: Array<Object> = [];
|
posts: Array<Object> = [];
|
||||||
since_id: string;
|
since_id: string;
|
||||||
|
@ -23,9 +25,12 @@ export class StreamPage {
|
||||||
fetcher: any;
|
fetcher: any;
|
||||||
fcaller: any;
|
fcaller: any;
|
||||||
myUsername: string;
|
myUsername: string;
|
||||||
|
showScrollBtn: boolean = false;
|
||||||
|
|
||||||
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
|
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController,
|
||||||
|
private changeDetectorRef: ChangeDetectorRef) {
|
||||||
// console.log(JSON.stringify(navParams));
|
// console.log(JSON.stringify(navParams));
|
||||||
|
|
||||||
switch (navParams.data.stream) {
|
switch (navParams.data.stream) {
|
||||||
case 'global':
|
case 'global':
|
||||||
this.title = 'Global';
|
this.title = 'Global';
|
||||||
|
@ -55,6 +60,18 @@ export class StreamPage {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.content.ionScroll.subscribe((event) => {
|
||||||
|
// console.log('scrolling ', event);
|
||||||
|
if (event.scrollTop > 0) {
|
||||||
|
this.showScrollBtn = true;
|
||||||
|
} else {
|
||||||
|
this.showScrollBtn = false;
|
||||||
|
}
|
||||||
|
this.changeDetectorRef.detectChanges();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
fetchOlderPosts(infiniteScroll) {
|
fetchOlderPosts(infiniteScroll) {
|
||||||
let params = {include_raw: 1, include_reposted_by:1, before_id: this.before_id, count: 40};
|
let params = {include_raw: 1, include_reposted_by:1, before_id: this.before_id, count: 40};
|
||||||
if (this.title === 'Mentions') {
|
if (this.title === 'Mentions') {
|
||||||
|
@ -231,6 +248,10 @@ export class StreamPage {
|
||||||
newPostModal.present();
|
newPostModal.present();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
scrollToTop() {
|
||||||
|
this.content.scrollToTop();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
|
Reference in a new issue