fix(docs-infra): skip navigation to card if user clicks on anchor (angular#57081)

fix(docs-infra): skip navigation to card if user clicks on anchor

If user clicks on anchor inside member card (Reference) then skip navigation to card section and allow to navigate to anchor link.

Use correct RxJs operator.
Fix DI: destroy ReferenceScrollHandler when navigate outside of reference pages.

fix: scroll to the of the card only after click on card header
fix: remove import of filter operator

PR Close angular#57081

Author: 9kubczas4

adev/src/app/app.config.server.ts

@@ -9,16 +9,9 @@
 import {mergeApplicationConfig, ApplicationConfig} from '@angular/core';
 import {provideServerRendering} from '@angular/platform-server';
 import {appConfig} from './app.config';
-import {
-  ReferenceScrollHandler,
-  ReferenceScrollHandlerNoop,
-} from './features/references/services/reference-scroll-handler.service';
 
 const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering(),
-    {provide: ReferenceScrollHandler, useClass: ReferenceScrollHandlerNoop},
-  ],
+  providers: [provideServerRendering()],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

adev/src/app/app.config.ts

@@ -45,7 +45,6 @@ import {CustomErrorHandler} from './core/services/errors-handling/error-handler'
 import {ExampleContentLoader} from './core/services/example-content-loader.service';
 import {ReuseTutorialsRouteStrategy} from './features/tutorial/tutorials-route-reuse-strategy';
 import {routes} from './routes';
-import {ReferenceScrollHandler} from './features/references/services/reference-scroll-handler.service';
 import {CURRENT_MAJOR_VERSION} from './core/providers/current-version';
 import {AppScroller} from './app-scroller';
 
@@ -106,6 +105,5 @@ export const appConfig: ApplicationConfig = {
       deps: [DOCUMENT],
     },
     {provide: TitleStrategy, useClass: ADevTitleStrategy},
-    ReferenceScrollHandler,
   ],
 };

adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss

@@ -270,6 +270,7 @@
       background-color: var(--octonary-contrast);
       position: relative;
       z-index: 10;
+      cursor: pointer;
       transition:
         background-color 0.3s ease,
         border 0.3s ease;

adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.ts

@@ -44,6 +44,7 @@ import {AppScroller} from '../../../app-scroller';
   imports: [DocViewer, NgIf, NgFor, MatTabsModule, RouterLink],
   templateUrl: './api-reference-details-page.component.html',
   styleUrls: ['./api-reference-details-page.component.scss'],
+  providers: [ReferenceScrollHandler],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class ApiReferenceDetailsPage implements OnInit, AfterViewInit {

adev/src/app/features/references/cli-reference-details-page/cli-reference-details-page.component.ts

@@ -34,6 +34,7 @@ export const CLI_TOC = '.adev-reference-cli-toc';
     './cli-reference-details-page.component.scss',
     '../api-reference-details-page/api-reference-details-page.component.scss',
   ],
+  providers: [ReferenceScrollHandler],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class CliReferenceDetailsPage implements OnInit {

adev/src/app/features/references/services/reference-scroll-handler.service.ts

@@ -6,45 +6,42 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {DOCUMENT} from '@angular/common';
+import {DOCUMENT, isPlatformBrowser} from '@angular/common';
 import {
   DestroyRef,
   EnvironmentInjector,
   Injectable,
   OnDestroy,
+  PLATFORM_ID,
   afterNextRender,
   inject,
   signal,
 } from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {fromEvent} from 'rxjs';
-import {auditTime, skipWhile} from 'rxjs/operators';
+import {auditTime} from 'rxjs/operators';
 import {
   API_REFERENCE_DETAILS_PAGE_MEMBERS_CLASS_NAME,
   API_REFERENCE_MEMBER_CARD_CLASS_NAME,
   API_TAB_ACTIVE_CODE_LINE,
   MEMBER_ID_ATTRIBUTE,
 } from '../constants/api-reference-prerender.constants';
 import {WINDOW} from '@angular/docs';
-import {Router, Scroll} from '@angular/router';
+import {Router} from '@angular/router';
 import {AppScroller} from '../../../app-scroller';
 
 export const SCROLL_EVENT_DELAY = 20;
 export const SCROLL_THRESHOLD = 20;
 
-interface ReferenceScrollHandlerInterface {
-  setupListeners(tocSelector: string): void;
-  updateMembersMarginTop(selectorOfTheElementToAlign: string): void;
-}
-
 @Injectable()
-export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandlerInterface {
+export class ReferenceScrollHandler implements OnDestroy {
   private readonly destroyRef = inject(DestroyRef);
   private readonly document = inject(DOCUMENT);
   private readonly injector = inject(EnvironmentInjector);
   private readonly window = inject(WINDOW);
   private readonly router = inject(Router);
   private readonly appScroller = inject(AppScroller);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
   private readonly cardOffsetTop = new Map<string, number>();
   private resizeObserver: ResizeObserver | null = null;
@@ -56,6 +53,10 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
   }
 
   setupListeners(tocSelector: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
     this.setupCodeToCListeners(tocSelector);
     this.setupMemberCardListeners();
     this.setScrollEventHandlers();
@@ -80,6 +81,10 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
   }
 
   updateMembersMarginTop(selectorOfTheElementToAlign: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
     const elementToAlign = this.document.querySelector<HTMLElement>(selectorOfTheElementToAlign);
 
     if (elementToAlign) {
@@ -113,11 +118,13 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
   private setupMemberCardListeners(): void {
     this.getAllMemberCards().forEach((card) => {
       this.cardOffsetTop.set(card.id, card.offsetTop);
-      fromEvent(card, 'click')
-        .pipe(
-          skipWhile((event) => event.target instanceof HTMLAnchorElement),
-          takeUntilDestroyed(this.destroyRef),
-        )
+      const header = card.querySelector('header');
+
+      if (!header) {
+        return;
+      }
+      fromEvent(header, 'click')
+        .pipe(takeUntilDestroyed(this.destroyRef))
         .subscribe(() => {
           this.router.navigate([], {fragment: card.id, replaceUrl: true});
         });
@@ -247,9 +254,3 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
     return null;
   }
 }
-
-export class ReferenceScrollHandlerNoop implements ReferenceScrollHandlerInterface {
-  membersMarginTopInPx = signal<number>(0);
-  setupListeners(_tocSelector: string): void {}
-  updateMembersMarginTop(_selectorOfTheElementToAlign: string): void {}
-}