From 1b90cde45e25494d97d3cd666a8a8bfc18c728d6 Mon Sep 17 00:00:00 2001
From: Florian Hartwich <hardi@noarch.de>
Date: Thu, 29 Mar 2018 17:01:24 +0200
Subject: [PATCH] Add scroll to top button (CC-10)

---
 static/src/app/app.component.css  | 20 ++++++++++++++++++++
 static/src/app/app.component.html |  3 +++
 static/src/app/app.component.ts   | 26 ++++++++++++++++++++++++--
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/static/src/app/app.component.css b/static/src/app/app.component.css
index 7bb12bc..cf1b8b8 100644
--- a/static/src/app/app.component.css
+++ b/static/src/app/app.component.css
@@ -38,6 +38,26 @@ li {
   color: #7e7d64;
 }
 
+#scrollTopBtn {
+  position: fixed; /* Fixed/sticky position */
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  border: none;
+  outline: none;
+  background-color: #101010;
+  color: white;
+  font-weight: bolder;
+  cursor: pointer;
+  padding: 7px 25px 10px 25px;
+  border-radius: 20px;
+  font-size: 22px;
+}
+
+#scrollTopBtn:hover {
+  background-color: rgba(25, 142, 25, 1);
+}
+
 .unprocessed {
   -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
   -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html
index 6d4433a..045a2a6 100644
--- a/static/src/app/app.component.html
+++ b/static/src/app/app.component.html
@@ -86,7 +86,10 @@
     </div>
   </nav>
 
+  <button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Scroll to top">△</button>
+
 </div>
+
 <div>
   <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
   <div id="left">
diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts
index 4e520f0..33ea4b1 100644
--- a/static/src/app/app.component.ts
+++ b/static/src/app/app.component.ts
@@ -1,9 +1,10 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, HostListener, Inject, OnInit} from '@angular/core';
 import {NavigationEnd, NavigationStart, Router} from '@angular/router';
 import {LoginService} from './services/app-user-service/login-service';
 import {PromotionService} from './services/army-management/promotion.service';
 import {AwardingService} from './services/army-management/awarding.service';
 import {RouteConfig} from './app.config';
+import {DOCUMENT} from "@angular/common";
 
 declare function require(url: string);
 
@@ -18,22 +19,38 @@ export class AppComponent implements OnInit {
 
   loading = false;
 
+  scrollTopVisible = false;
+
+  scrollBtnVisibleVal = 100;
+
   version = 'v' + require('./../../../package.json').version;
 
   constructor(public loginService: LoginService,
               private promotionService: PromotionService,
               private awardingService: AwardingService,
-              private router: Router) {
+              private router: Router,
+              @Inject(DOCUMENT) private document) {
     router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
         this.loading = true;
       }
       if (event instanceof NavigationEnd) {
         this.loading = false;
+        // scroll to top on route from army overview to user detail and back
+        if (router.url.includes('overview')) {
+          this.scrollToTop()
+        }
       }
     });
   }
 
+  @HostListener("window:scroll", [])
+  onWindowScroll() {
+    this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
+      || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
+  }
+
+
   ngOnInit() {
     if (this.loginService.hasPermission(2)) {
       const fraction = this.loginService.getCurrentUser().squad.fraction;
@@ -48,5 +65,10 @@ export class AppComponent implements OnInit {
     return false;
   }
 
+  scrollToTop() {
+    this.document.body.scrollTop = 0; // For Safari
+    this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+  }
+
 }