feat(scroll): enable scroll to top

pokedextracker · May 3, 2016 · cd2956c · cd2956c
1 parent 89b2293
commit cd2956c
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 8 deletions.
diff --git a/app/components/dex.ts b/app/components/dex.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter } from 'angular2/core';
+import { Component, ElementRef, EventEmitter } from 'angular2/core';
 
 import { BoxComponent }    from './box';
 import { Capture }         from '../classes/capture';
@@ -10,19 +10,27 @@ const HTML = require('../views/dex.html');
 
 @Component({
   directives: [HeaderComponent, BoxComponent],
-  events: ['activeChange', 'collapsedChange'],
-  inputs: ['captures', 'user'],
+  events: ['activeChange', 'collapsedChange', 'scrollUp'],
+  inputs: ['captures', 'showScroll', 'user'],
   pipes: [GroupPipe],
+  providers: [ElementRef],
   selector: 'dex',
   template: HTML
 })
 export class DexComponent {
 
   public captures: Capture[];
+  public _el: ElementRef;
   public region: string = 'national';
+  public showScroll: boolean;
   public user: User;
 
   public activeChange = new EventEmitter<Capture>();
   public collapsedChange = new EventEmitter<boolean>();
+  public scrollUp = new EventEmitter<void>();
+
+  constructor (_el: ElementRef) {
+    this._el = _el;
+  }
 
 }
diff --git a/app/components/tracker.ts b/app/components/tracker.ts
@@ -15,7 +15,8 @@ import { UserService }       from '../services/user';
 
 const HTML = require('../views/tracker.html');
 
-const MOBILE_WIDTH = 1100;
+const MOBILE_WIDTH          = 1100;
+const SHOW_SCROLL_THRESHOLD = 400;
 
 @Component({
   directives: [DexComponent, InfoComponent, NavComponent, NotFoundComponent],
@@ -30,6 +31,7 @@ export class TrackerComponent implements OnInit {
   public loading: boolean = true;
   public collapsed: boolean = false;
   public _session: SessionService;
+  public showScroll: boolean = false;
   public user: User;
 
   private _capture: CaptureService;
@@ -66,4 +68,19 @@ export class TrackerComponent implements OnInit {
     .catch((err) => this.loading = false);
   }
 
+  public scroll (dex: DexComponent) {
+    const el: HTMLElement = dex._el.nativeElement;
+    if (!this.showScroll && el.scrollTop >= SHOW_SCROLL_THRESHOLD) {
+      this.showScroll = true;
+    } else if (this.showScroll && el.scrollTop < SHOW_SCROLL_THRESHOLD) {
+      this.showScroll = false;
+    }
+  }
+
+  public scrollUp (dex: DexComponent) {
+    const el: HTMLElement = dex._el.nativeElement;
+    el.scrollTop = 0;
+    this.showScroll = false;
+  }
+
 }
diff --git a/app/styles/tracker.scss b/app/styles/tracker.scss
@@ -240,14 +240,15 @@ dex {
   padding: 100px 0;
 
   .scroll-up {
-    @include transition(all .1s ease-out);
+    @include transition(all .5s ease-out);
     @include flexbox();
     @include align-items(center);
     @include justify-content(center);
 
+    opacity: 0;
     position: fixed;
     left: 10px;
-    bottom: 10px;
+    bottom: -100px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
@@ -262,6 +263,11 @@ dex {
       cursor: pointer;
       background-color: $brand-secondary-dark;
     }
+
+    &.visible {
+      bottom: 10px;
+      opacity: 1;
+    }
   }
 }
 

diff --git a/app/views/dex.html b/app/views/dex.html
@@ -1,3 +1,3 @@
-<div class="scroll-up"><i class="fa fa-long-arrow-up"></i></div>
+<div class="scroll-up" [class.visible]="showScroll" (click)="scrollUp.emit()"><i class="fa fa-long-arrow-up"></i></div>
 <header [captures]="captures" [(region)]="region" [user]="user"></header>
 <box *ngFor="#group of captures | group : 30" (activeChange)="activeChange.emit($event)" (collapsedChange)="collapsedChange.emit($event)" [captures]="group" [region]="region" [user]="user"></box>
diff --git a/app/views/tracker.html b/app/views/tracker.html
@@ -1,7 +1,7 @@
 <div *ngIf="loading" class="loading">Loading...</div>
 <nav *ngIf="!loading && user" [user]="user"></nav>
 <div *ngIf="!loading && user" class="tracker">
-  <dex *ngIf="!loading" (activeChange)="active = $event" (collapsedChange)="collapsed = $event" [captures]="captures" [user]="user"></dex>
+  <dex #dex (scroll)="scroll(dex)" *ngIf="!loading" (activeChange)="active = $event" (collapsedChange)="collapsed = $event" (scrollUp)="scrollUp(dex)" [captures]="captures" [showScroll]="showScroll" [user]="user"></dex>
   <info [(collapsed)]="collapsed" [class.collapsed]="collapsed" [active]="active"></info>
 </div>
 <not-found *ngIf="!loading && !user"></not-found>