chore(demo): fix smooth scrolling for anchor links (#1400)

taiga-family · Jul 22, 2024 · 59ba22b · 59ba22b
1 parent dce3a7b
commit 59ba22b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -1,8 +1,13 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ViewportScroller} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {TuiDocMain} from '@taiga-ui/addon-doc';
+import {ResizeObserverService} from '@ng-web-apis/resize-observer';
+import {TUI_DOC_PAGE_LOADED, TuiDocMain} from '@taiga-ui/addon-doc';
+import {tuiInjectElement} from '@taiga-ui/cdk';
 import {TuiLink} from '@taiga-ui/core';
+import {debounceTime, map, startWith} from 'rxjs';
 
 @Component({
     standalone: true,
@@ -11,7 +16,41 @@ import {TuiLink} from '@taiga-ui/core';
     templateUrl: './app.component.html',
     styleUrls: ['./app.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        ResizeObserverService,
+        {
+            provide: TUI_DOC_PAGE_LOADED,
+            useFactory: () => {
+                const host = tuiInjectElement();
+
+                return inject(ResizeObserverService).pipe(
+                    startWith(null),
+                    debounceTime(0), // Synchronous scrollIntoView (after click) does not work https://stackoverflow.com/a/56971002
+                    map(() => {
+                        const exampleElements = Array.from(
+                            host.querySelectorAll('tui-doc-example'),
+                        );
+
+                        const codeElements = Array.from(
+                            host.querySelectorAll('tui-doc-code'),
+                        );
+
+                        return (
+                            exampleElements.every((el) =>
+                                el.querySelector('.t-example'),
+                            ) && codeElements.every((el) => el.querySelector('.t-code'))
+                        );
+                    }),
+                    takeUntilDestroyed(),
+                );
+            },
+        },
+    ],
 })
 export class App {
     protected readonly stackblitzStarterPath = `/${DemoPath.Stackblitz}`;
+
+    constructor() {
+        inject(ViewportScroller).setOffset([0, 64]);
+    }
 }
diff --git a/projects/demo/src/app/app.style.less b/projects/demo/src/app/app.style.less
@@ -1,6 +1,7 @@
 @import '@taiga-ui/core/styles/taiga-ui-local.less';
 
 :host {
+    display: block;
     font: var(--tui-font-text-m);
     color: var(--tui-text-primary);
 }

diff --git a/projects/demo/src/styles.less b/projects/demo/src/styles.less
@@ -1,10 +1,17 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+
 body {
     margin: 0;
 }
 
 html,
 body {
+    .scroll-behavior();
     height: 100%;
+
+    @media (prefers-reduced-motion) {
+        scroll-behavior: auto;
+    }
 }
 
 html {