Beautiful Go to Top button :)

dashboard/src/app/album.component.css

@@ -0,0 +1,32 @@
+/* Thank to https://codyhouse.co/gem/back-to-top/ */
+
+.btn-top {
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+  /* image replacement properties */
+  /*overflow: hidden;*/
+  /*text-indent: 100%;*/
+  /*white-space: nowrap;*/
+  /*background: rgba(232, 98, 86, 0.8);*/
+  /*background: #ff9000;*/
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
+  -moz-transition: opacity .3s 0s, visibility 0s .3s;
+  transition: opacity .3s 0s, visibility 0s .3s;
+}
+.btn-top.btn-top-is-visible, .no-touch .btn-top:hover {
+  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
+  -moz-transition: opacity .3s 0s, visibility 0s 0s;
+  transition: opacity .3s 0s, visibility 0s 0s;
+}
+.btn-top.btn-top-is-visible {
+  /* the button becomes visible */
+  visibility: visible;
+  opacity: 1;
+}

dashboard/src/app/album.component.html

@@ -8,13 +8,15 @@
     <span *ngIf="album && (songs.length != album['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
 </div>
 
+<!-- TODO Album Details-->
+
 <!--<ul class="heroes">
     <li *ngFor="let song of songs | sortBy : 'Track Number'" >
         {{("0" + song['Track Number']).slice(-2)}}. {{song.Name}} ({{song.Artist}}) [{{song.Album}}]
     </li>
 </ul>-->
 
-<table class="table table-striped">
+<table class="table table-striped" (window:scroll)="onScroll($event)">
 <thead>
     <tr>
         <th></th>
@@ -37,10 +39,12 @@
 </tbody>
 </table>
 
-<button type="button" *ngIf="more" class="btn btn-default" aria-label="More" (click)="loadSongs()" (window:scroll)="onScroll($event)">
+<button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
     <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
 </button>
 
-<button type="button" *ngIf="songs.length > 99" class="btn btn-default" aria-label="Top" (click)="scrollTop()">
+<!-- Go to Top Button-->
-    <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> Top
+<button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
+    aria-label="Top" (click)="scrollTop()">
+    <span class="glyphicon glyphicon-menu-up" style="color:white" aria-hidden="true"></span>
 </button>

dashboard/src/app/album.component.ts

@@ -8,8 +8,8 @@ import { Album } from './object/album';
 
 @Component({
   selector: 'album-component',
-  templateUrl: './album.component.html'
+  templateUrl: './album.component.html',
-//   styleUrls: [ './album.component.css' ]
+  styleUrls: [ './album.component.css' ]
 })
 
 export class AlbumComponent implements OnInit {
@@ -22,7 +22,8 @@ export class AlbumComponent implements OnInit {
   albumName = "";
   songs: Array<Song> = [];
   album: Album = new Album(); // If album not found, will be replaced by 'undefined'
-  more: boolean = false;
+  moreDataAvailable: boolean = false;
+  atBottom: boolean = false;
 
   ngOnInit(): void {
     this.route.params
@@ -40,8 +41,9 @@ export class AlbumComponent implements OnInit {
   loadSongs(): void {
     this.elsService.getAlbumSongs(this.albumName, this.songs.length).subscribe(
       data => {
-        this.more = data.length == ElsService.DEFAULT_SIZE
+        this.moreDataAvailable = data.length == ElsService.DEFAULT_SIZE
-        // Init dashboard for first load, then add elements
+
+        // Erase song array with result for first load, then add elements one by one
         // instead use concat => concat will sort table at each load, very consuming! and not user friendly
         if (this.songs.length == 0) {
           this.songs = data;
@@ -58,9 +60,25 @@ export class AlbumComponent implements OnInit {
     window.scrollTo(0,0);
   }
 
+  /**
+   * Handle scroll:
+   * - load data if at bottom of screen (if needed)
+   * - hide/show "go to top" button
+   *
+   * @param event scroll event
+   */
   onScroll(event: any) {
-    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+    if (this.moreDataAvailable &&
+          (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
         this.loadSongs();
     }
+
+    if (window.scrollY > window.innerHeight) {
+      this.atBottom = true;
+    }
+
+    if (window.scrollY == 0) {
+      this.atBottom = false;
+    }
   }
 }