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

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

87 строк3 KB

Matthieu Riegler

docs(docs-infra): remove explicit OnPush

25 мар 2026, 22:58

25 мар 2026, 22:581938054

/*!
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

import {DOCUMENT, isPlatformBrowser} from '@angular/common';
import {Component, effect, inject, input, PLATFORM_ID, Renderer2} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {DocContent, DocViewer} from '@angular/docs';
import {ActivatedRoute} from '@angular/router';
import {API_SECTION_CLASS_NAME} from '../constants/api-reference-prerender.constants';
import {ReferenceScrollHandler} from '../services/reference-scroll-handler.service';

const HIGHLIGHTED_CARD_CLASS = 'docs-highlighted-card';

@Component({
  selector: 'adev-reference-page',
  imports: [DocViewer],
  templateUrl: './api-reference-details-page.component.html',
  styleUrls: ['./api-reference-details-page.component.scss'],
  providers: [ReferenceScrollHandler],
})
export default class ApiReferenceDetailsPage {
  private readonly referenceScrollHandler = inject(ReferenceScrollHandler);
  private readonly route = inject(ActivatedRoute);
  private readonly document = inject(DOCUMENT);
  private readonly renderer = inject(Renderer2);
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  private highlightedElement: HTMLElement | null = null;

  readonly docContent = input<DocContent | undefined>();
  readonly urlFragment = toSignal(this.route.fragment);

  constructor() {
    effect(() => this.highlightCard());
  }

  onContentLoaded() {
    if (this.isBrowser) {
      this.referenceScrollHandler.setupListeners(API_SECTION_CLASS_NAME);
      this.scrollToSectionLegacy();
      this.highlightCard();
    }
  }

  /** Handle legacy URLs with a `tab` query param from the old tab layout  */
  private scrollToSectionLegacy() {
    const params = this.route.snapshot.queryParams;
    const tab = params['tab'] as string | undefined;

    if (tab) {
      const section = this.document.getElementById(tab);

      if (section) {
        // `scrollIntoView` is ignored even, if the element exists.
        // It seems that it's related to: https://issues.chromium.org/issues/40715316
        // Hence, the usage of `setTimeout`.
        setTimeout(() => {
          section.scrollIntoView({behavior: 'smooth'});
        }, 100);
      }
    }
  }

  /** Highlight the member card that corresponds to the URL fragment.  */
  private highlightCard() {
    if (this.highlightedElement) {
      this.renderer.removeClass(this.highlightedElement, HIGHLIGHTED_CARD_CLASS);
      this.highlightedElement = null;
    }

    const fragment = this.urlFragment();

    if (fragment) {
      const element = this.document.getElementById(fragment);

      if (element) {
        this.renderer.addClass(element, HIGHLIGHTED_CARD_CLASS);
      }
      this.highlightedElement = element;
    }
  }
}