Add restore scroll position on user-dropdown anchors links and scroll to top on activ...

[github/Chocobozzz/PeerTube.git] / client / src / app / menu / menu.component.ts

diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 3d6cbda24a991492c791e2f3c61a9be102b7308f..f9a0a9f571ec0e7e69676d0b3b343910158923dc 100644 (file)
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -2,7 +2,8 @@ import { HotkeysService } from 'angular2-hotkeys'
 import * as debug from 'debug'
 import { switchMap } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
-import { AuthService, AuthStatus, AuthUser, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
+import { Router } from '@angular/router'
+import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
 import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
@@ -43,8 +44,10 @@ export class MenuComponent implements OnInit {
     private serverService: ServerService,
     private redirectService: RedirectService,
     private hotkeysService: HotkeysService,
-    private screenService: ScreenService
-    ) { }
+    private screenService: ScreenService,
+    private menuService: MenuService,
+    private router: Router
+  ) { }
 
   get isInMobileView () {
     return this.screenService.isInMobileView()
@@ -192,6 +195,30 @@ export class MenuComponent implements OnInit {
     return this.languages.find(lang => lang.id === localeId).label
   }
 
+  onSameUrlRestoreScrollPosition (link: HTMLAnchorElement) {
+    const linkURL = link.getAttribute('href')
+    const linkHash = link.getAttribute('fragment')
+
+    // On same url without fragment restore top scroll position
+    if (!linkHash && this.router.url.includes(linkURL)) {
+      window.scrollTo({
+        left: 0,
+        top: 0,
+        behavior: 'smooth'
+      })
+    }
+
+    // On same url with fragment restore anchor scroll position
+    if (linkHash && this.router.url === linkURL) {
+      const anchor = document.getElementById(link.getAttribute('fragment'))
+      anchor.scrollIntoView({ behavior: 'smooth', inline: 'nearest' })
+    }
+
+    if (this.screenService.isInSmallView()) {
+      this.menuService.toggleMenu()
+    }
+  }
+
   private buildUserLanguages () {
     if (!this.user) {
       this.videoLanguages = []