exclude same page url navigation

Sage-Bionetworks · Oct 23, 2023 · c3f394c · c3f394c
1 parent 8b7dc3b
commit c3f394c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 37 deletions.
diff --git a/apps/openchallenges/app/src/app/app.config.ts b/apps/openchallenges/app/src/app/app.config.ts
@@ -54,7 +54,7 @@ export const appConfig: ApplicationConfig = {
         scrollPositionRestoration: 'enabled',
       }),
       withRouterConfig({
-        onSameUrlNavigation: 'ignore',
+        onSameUrlNavigation: 'reload',
       })
     ),
   ],

diff --git a/libs/shared/typescript/util/src/lib/directives/custom-scroll-restore.directive.ts b/libs/shared/typescript/util/src/lib/directives/custom-scroll-restore.directive.ts
@@ -1,22 +1,15 @@
 import { ViewportScroller } from '@angular/common';
 import { AfterViewInit, Directive, OnInit } from '@angular/core';
-import {
-  Event,
-  NavigationStart,
-  Router,
-  RouterEvent,
-  RoutesRecognized,
-  Scroll,
-} from '@angular/router';
-import { Observable, combineLatest, filter, pairwise, tap } from 'rxjs';
+import { Event, Router, RoutesRecognized, Scroll } from '@angular/router';
+import { combineLatest, filter, pairwise } from 'rxjs';
 
 /**
  * A directive for restoring scroll positions based on the method of navigation.
  * It helps preserve the user's scroll position during various types of navigation actions.
  * - Backward navigation: Scrolls to the previous position.
  * - Anchor navigation: Scrolls to a specified anchor.
- * - Same page navigation: Maintains the current scroll position.
- * - Forward navigation: Scrolls to the top of the page.
+ * - Param navigation: Maintains the current scroll position,
+ * - Forward navigation/Same url navigation: Scrolls to the top of the page.
  */
 
 @Directive({
@@ -42,7 +35,6 @@ export class CustomScrollRestoreDirective implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    // Listen to router events to determine the appropriate scroll restoration method.
     const routesRecognized$ = this.router.events.pipe(
       filter(
         (e: Event): e is RoutesRecognized => e instanceof RoutesRecognized
@@ -54,45 +46,30 @@ export class CustomScrollRestoreDirective implements OnInit, AfterViewInit {
       filter((e: Event): e is Scroll => e instanceof Scroll)
     );
 
+    // listen to router events to determine the appropriate scroll restoration method
     combineLatest([routesRecognized$, scroll$]).subscribe(
       ([routeEvents, scrollEvent]) => {
         const previousUrl = routeEvents[0].urlAfterRedirects;
         const currentUrl = routeEvents[1].urlAfterRedirects;
-
+        const isSamePageUrl = previousUrl === currentUrl;
+        console.log(1);
         if (scrollEvent.position) {
           // backward navigation
           this.viewportScroller.scrollToPosition(scrollEvent.position);
         } else if (scrollEvent.anchor) {
           // anchor navigation
           this.viewportScroller.scrollToAnchor(scrollEvent.anchor);
-        } else if (previousUrl.split('?')[0] === currentUrl.split('?')[0]) {
-          // same page navigation
+        } else if (
+          !isSamePageUrl &&
+          previousUrl.split('?')[0] === currentUrl.split('?')[0]
+        ) {
+          // param navigation excluding exact the same full url
           this.viewportScroller.scrollToPosition([this.scrollX, this.scrollY]);
         } else {
-          // forward navigation - restore scroll position to top
+          // forward navigation / same url navigation - restore scroll position to top
           this.viewportScroller.scrollToPosition([0, 0]);
         }
       }
     );
-
-    // this.router.events
-    //   .pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
-    //   .subscribe((e) => {
-    //     if (e.position) {
-    //       // backward navigation
-    //       this.viewportScroller.scrollToPosition(e.position);
-    //     } else if (e.anchor) {
-    //       // anchor navigation
-    //       this.viewportScroller.scrollToAnchor(e.anchor);
-    //     } else if (
-    //       this.previousUrl.split('?')[0] === e.routerEvent.url.split('?')[0]
-    //     ) {
-    //       // same page navigation
-    //       this.viewportScroller.scrollToPosition([this.scrollX, this.scrollY]);
-    //     } else {
-    //       // forward navigation - restore scroll position to top
-    //       this.viewportScroller.scrollToPosition([0, 0]);
-    //     }
-    //   });
   }
 }