scroll to top functionnal

src/app/components/stream/stream.component.html

@@ -2,9 +2,9 @@
   <div class="stream-column__stream-header">
     <a href title="return to top" (click)="goToTop()"><h1>{{ streamElement.name.toUpperCase() }}</h1></a>
   </div>
-  <div class="stream-toots" data-simplebar>
+  <div class="stream-toots flexcroll" #statusstream> <!-- data-simplebar  -->
     <div *ngFor="let status of statuses">
-      <app-status [status]="status"></app-status>
+      <app-status [status]="status" ></app-status>
     </div>
   </div>
 </div>

src/app/components/stream/stream.component.scss

@@ -29,3 +29,22 @@
   width: 320px;
   overflow: auto;
 }
+
+.flexcroll {
+    scrollbar-face-color: #08090d;
+    scrollbar-shadow-color: #08090d;
+    scrollbar-highlight-color: #08090d;
+    scrollbar-3dlight-color: #08090d;
+    scrollbar-darkshadow-color: #08090d;
+    scrollbar-track-color: #08090d;
+    scrollbar-arrow-color: #08090d;
+    &::-webkit-scrollbar {
+        width: 7px;
+    }
+    &::-webkit-scrollbar-thumb {
+        -webkit-border-radius: 0px;
+        border-radius: 0px;
+        background: #08090d;
+        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
+    }
+}

src/app/components/stream/stream.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core";
 import { AccountWrapper } from "../../models/account.models";
 import { StreamElement, StreamTypeEnum } from "../../states/streams.state";
 import { StreamingService, StreamingWrapper, EventEnum, StatusUpdate } from "../../services/streaming.service";
@@ -45,7 +45,13 @@ export class StreamComponent implements OnInit {
     ngOnInit() {
     }
 
+    @ViewChild('statusstream') public statustream: ElementRef;
     goToTop(): boolean {
+        const stream = this.statustream.nativeElement as HTMLElement;        
+        stream.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
         return false;
     }
 
@@ -68,9 +74,7 @@ export class StreamComponent implements OnInit {
         this.websocketStreaming.statusUpdateSubjet.subscribe((update: StatusUpdate) => {
             if (update) {
                 if (update.type === EventEnum.update) {
-                    console.log(update.status);
                     if (!this.statuses.find(x => x.id == update.status.id)) {
-                        console.log('added');
                         this.statuses.unshift(update.status);
                     }
                 }

src/app/services/mastodon.service.ts

@@ -57,12 +57,12 @@ export class MastodonService {
         return this.trimChar(this.trimChar(route, '?'), '&');
     }
 
-    private escapeRegExp = function(strToEscape) {
+    private escapeRegExp(strToEscape) {
         // Escape special characters for use in a regular expression
         return strToEscape.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
     };
     
-    private trimChar = function(origString, charToTrim) {
+    private trimChar(origString, charToTrim) {
         charToTrim = this.escapeRegExp(charToTrim);
         var regEx = new RegExp("^[" + charToTrim + "]+|[" + charToTrim + "]+$", "g");
         return origString.replace(regEx, "");