convert directive to service

Sage-Bionetworks · Oct 23, 2023 · 846c977 · 846c977
1 parent c3f394c
commit 846c977
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 55 deletions.
diff --git a/apps/openchallenges/app/src/app/app.component.ts b/apps/openchallenges/app/src/app/app.component.ts
@@ -14,7 +14,8 @@ import { RouterOutlet } from '@angular/router';
 import { HomeDataService } from '@sagebionetworks/openchallenges/home';
 import { GoogleTagManagerComponent } from './google-tag-manager/google-tag-manager.component';
 import { ConfigService } from '@sagebionetworks/openchallenges/config';
-import { NgIf } from '@angular/common';
+import { NgIf, ViewportScroller } from '@angular/common';
+import { CustomScrollRestorationService } from './custom-scroll-restoration.service';
 
 @Component({
   selector: 'openchallenges-root',
@@ -36,7 +37,9 @@ export class AppComponent implements OnInit, OnDestroy {
   constructor(
     private pageTitleService: PageTitleService,
     private homeDataService: HomeDataService,
-    private configService: ConfigService
+    private configService: ConfigService,
+    private viewportScroller: ViewportScroller,
+    private customScrollRestorationService: CustomScrollRestorationService
   ) {
     this.useGoogleTagManager =
       this.configService.config.googleTagManagerId.length > 0;
@@ -54,6 +57,9 @@ export class AppComponent implements OnInit, OnDestroy {
     this.pageTitleService.setTitle('OpenChallenges');
 
     this.homeDataService.setChallengesPerYear();
+    // overwrite the app's scroll restoration
+    this.viewportScroller.setHistoryScrollRestoration('manual');
+    this.customScrollRestorationService.scrollPositionRestoration();
   }
 
   ngOnDestroy(): void {

diff --git a/apps/openchallenges/app/src/app/app.config.ts b/apps/openchallenges/app/src/app/app.config.ts
@@ -51,10 +51,10 @@ export const appConfig: ApplicationConfig = {
       withEnabledBlockingInitialNavigation(),
       withInMemoryScrolling({
         // anchorScrolling: 'enabled',
-        scrollPositionRestoration: 'enabled',
+        // scrollPositionRestoration: 'enabled',
       }),
       withRouterConfig({
-        onSameUrlNavigation: 'reload',
+        onSameUrlNavigation: 'ignore',
       })
     ),
   ],

diff --git a/...ctives/custom-scroll-restore.directive.ts → .../app/custom-scroll-restoration.service.ts b/...ctives/custom-scroll-restore.directive.ts → .../app/custom-scroll-restoration.service.ts
@@ -1,40 +1,36 @@
 import { ViewportScroller } from '@angular/common';
-import { AfterViewInit, Directive, OnInit } from '@angular/core';
+import { Injectable } from '@angular/core';
 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.
+ * A service 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.
  * - Param navigation: Maintains the current scroll position,
  * - Forward navigation/Same url navigation: Scrolls to the top of the page.
  */
 
-@Directive({
-  selector: '[sageCustomScrollRestore]',
-  standalone: true,
+@Injectable({
+  providedIn: 'root',
 })
-export class CustomScrollRestoreDirective implements OnInit, AfterViewInit {
+export class CustomScrollRestorationService {
   private scrollX = 0;
   private scrollY = 0;
-  private previousUrl!: string;
 
   constructor(
     private router: Router,
     private viewportScroller: ViewportScroller
   ) {}
 
-  ngOnInit(): void {
+  scrollPositionRestoration(): void {
     // Capture the current scroll position
     window.addEventListener('scroll', () => {
       this.scrollX = window.scrollX;
       this.scrollY = window.scrollY;
     });
-  }
 
-  ngAfterViewInit(): void {
     const routesRecognized$ = this.router.events.pipe(
       filter(
         (e: Event): e is RoutesRecognized => e instanceof RoutesRecognized
@@ -52,7 +48,7 @@ export class CustomScrollRestoreDirective implements OnInit, AfterViewInit {
         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);

diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search.component.html b/libs/openchallenges/challenge-search/src/lib/challenge-search.component.html
@@ -1,4 +1,4 @@
-<main sageCustomScrollRestore class="base mat-typography">
+<main class="base mat-typography">
   <section id="search-top">
     <div id="title" class="row">
       <div class="col col-10">
@@ -35,18 +35,18 @@ <h2>Challenges</h2>
   <section id="bottom" class="content">
     <div class="facets">
       <p-panel
-      header="{{ incentivesFilter.label }}"
-      [toggleable]="true"
-      [collapsed]="incentivesFilter.collapsed"
-    >
-      <openchallenges-checkbox-filter
-        [values]="incentivesFilter.values"
-        [selectedValues]="selectedIncentives"
-        (selectionChange)="onIncentivesChange($event)"
-        inputId="{{ incentivesFilter.query }}"
-      />
-    </p-panel>
-    <p-divider></p-divider>
+        header="{{ incentivesFilter.label }}"
+        [toggleable]="true"
+        [collapsed]="incentivesFilter.collapsed"
+      >
+        <openchallenges-checkbox-filter
+          [values]="incentivesFilter.values"
+          [selectedValues]="selectedIncentives"
+          (selectionChange)="onIncentivesChange($event)"
+          inputId="{{ incentivesFilter.query }}"
+        />
+      </p-panel>
+      <p-divider></p-divider>
       <p-panel
         header="{{ statusFilter.label }}"
         [toggleable]="true"
@@ -61,18 +61,18 @@ <h2>Challenges</h2>
       </p-panel>
       <p-divider></p-divider>
       <p-panel
-      header="{{ categoriesFilter.label }}"
-      [toggleable]="true"
-      [collapsed]="categoriesFilter.collapsed"
-    >
-      <openchallenges-checkbox-filter
-        [values]="categoriesFilter.values"
-        [selectedValues]="selectedCategories"
-        (selectionChange)="onCategoriesChange($event)"
-        inputId="{{ categoriesFilter.query }}"
-      />
-    </p-panel>
-    <p-divider></p-divider>
+        header="{{ categoriesFilter.label }}"
+        [toggleable]="true"
+        [collapsed]="categoriesFilter.collapsed"
+      >
+        <openchallenges-checkbox-filter
+          [values]="categoriesFilter.values"
+          [selectedValues]="selectedCategories"
+          (selectionChange)="onCategoriesChange($event)"
+          inputId="{{ categoriesFilter.query }}"
+        />
+      </p-panel>
+      <p-divider></p-divider>
       <!-- <p-panel
         header="{{ inputDataTypesFilter.label }}"
         [toggleable]="true"
@@ -168,7 +168,10 @@ <h2>Challenges</h2>
     <div class="main col">
       <h3>Results ({{ searchResultsCount }})</h3>
       <div class="card-group">
-        <openchallenges-challenge-card *ngFor="let challenge of challenges" [challenge]="challenge"/>
+        <openchallenges-challenge-card
+          *ngFor="let challenge of challenges"
+          [challenge]="challenge"
+        />
       </div>
       <openchallenges-paginator
         [pageNumber]="selectedPageNumber || defaultPageNumber"

diff --git a/libs/openchallenges/challenge/src/lib/challenge.component.html b/libs/openchallenges/challenge/src/lib/challenge.component.html
@@ -1,4 +1,4 @@
-<main sageCustomScrollRestore class="base mat-typography">
+<main class="base mat-typography">
   <ng-container *ngIf="challenge$ | async as challenge">
     <section id="profile-top" class="row">
       <openchallenges-avatar class="profile-pic" [avatar]="challengeAvatar" />

diff --git a/libs/openchallenges/org-profile/src/lib/org-profile.component.html b/libs/openchallenges/org-profile/src/lib/org-profile.component.html
@@ -1,4 +1,4 @@
-<main sageCustomScrollRestore class="base mat-typography">
+<main class="base mat-typography">
   <ng-container *ngIf="organization$ | async as org">
     <section id="profile-top" class="row">
       <openchallenges-avatar
@@ -18,7 +18,7 @@ <h2>
     <section id="profile-stats" class="row">
       <div class="col fill-empty"></div>
       <div class="col">
-        <openchallenges-org-profile-stats [loggedIn]="loggedIn"/>
+        <openchallenges-org-profile-stats [loggedIn]="loggedIn" />
       </div>
     </section>
     <section id="profile-bottom" class="content">
@@ -60,7 +60,10 @@ <h2>
             *ngSwitchCase="tabs['challenges']"
             [organization]="org"
           />
-          <openchallenges-org-profile-members *ngSwitchCase="tabs['members']" [organization]="org"/>
+          <openchallenges-org-profile-members
+            *ngSwitchCase="tabs['members']"
+            [organization]="org"
+          />
         </ng-container>
       </div>
     </section>

diff --git a/libs/openchallenges/org-search/src/lib/org-search.component.html b/libs/openchallenges/org-search/src/lib/org-search.component.html
@@ -1,4 +1,4 @@
-<main sageCustomScrollRestore class="base mat-typography">
+<main class="base mat-typography">
   <section id="search-top">
     <div id="title" class="row">
       <div class="col col-10">

diff --git a/libs/shared/typescript/util/src/lib/directives/custom-scroll-restore.directive.spec.ts.off b/libs/shared/typescript/util/src/lib/directives/custom-scroll-restore.directive.spec.ts.off
diff --git a/libs/shared/typescript/util/src/lib/directives/index.ts b/libs/shared/typescript/util/src/lib/directives/index.ts
@@ -1,3 +1,2 @@
 export * from './app-shell-no-render.directive';
 export * from './app-shell-render.directive';
-export * from './custom-scroll-restore.directive';