Scroll to top on heading click (#29)

AbsaOSS · Dec 10, 2024 · 14fd82a · 14fd82a
1 parent a7b1b5b
commit 14fd82a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 1 deletion.
diff --git a/...cps-mdoc-viewer/src/lib/components/table-contents/directive/active-link.directive.spec.ts b/...cps-mdoc-viewer/src/lib/components/table-contents/directive/active-link.directive.spec.ts
@@ -29,6 +29,9 @@ import { By } from '@angular/platform-browser';
   template: `
     <div class="navbar">navbar</div>
     <div [appActiveLink]="itemLinks">
+      <a href="#" class="scroll-to-top">
+        <h4>Documents</h4>
+      </a>
       <ul class="list-unstyled">
         <li><a href="#section1">Section 1</a></li>
         <li><a href="#section2">Section 2</a></li>
@@ -77,6 +80,7 @@ describe('ActiveLinkDirective', () => {
     const spy = jest.spyOn(directive, 'handleItemClick');
     tick();
     fixture.detectChanges();
+
     const section1Link: HTMLAnchorElement = fixture.nativeElement.querySelector(
       'a[href="#section1"]'
     );
@@ -87,4 +91,17 @@ describe('ActiveLinkDirective', () => {
       top: 0
     });
   }));
+
+  it('should properly set up scroll to top click event handlers', fakeAsync(() => {
+    directive.appActiveLink = testComponent.itemLinks;
+    tick();
+    fixture.detectChanges();
+    const scrollToTopLink: HTMLAnchorElement =
+      fixture.nativeElement.querySelector('a.scroll-to-top');
+    scrollToTopLink.click();
+    expect(globalThis.window.scrollTo).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      top: 0
+    });
+  }));
 });
diff --git a/...ects/cps-mdoc-viewer/src/lib/components/table-contents/directive/active-link.directive.ts b/...ects/cps-mdoc-viewer/src/lib/components/table-contents/directive/active-link.directive.ts
@@ -89,6 +89,25 @@ export class ActiveLinkDirective implements OnDestroy {
 
   setupClickListeners() {
     this.subscriptions.forEach((sub) => sub.unsubscribe());
+
+    // Handle scroll-to-top anchor
+    const scrollTopAnchor: HTMLAnchorElement =
+      this.elementRef.nativeElement.querySelector('.scroll-to-top');
+
+    if (scrollTopAnchor) {
+      this.subscriptions.push(
+        fromEvent(scrollTopAnchor, 'click')
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((e) => {
+            e.preventDefault();
+            window.scrollTo({
+              top: 0,
+              behavior: 'smooth'
+            });
+          })
+      );
+    }
+
     this.listItems?.forEach((item) => {
       const click$ = fromEvent(item, 'click').pipe(takeUntil(this.destroy$));
       this.subscriptions.push(

diff --git a/projects/cps-mdoc-viewer/src/lib/components/table-contents/table-contents.component.html b/projects/cps-mdoc-viewer/src/lib/components/table-contents/table-contents.component.html
@@ -3,7 +3,9 @@
   [appActiveLink]="(tableContents$ | async) ?? []">
   <div class="p-4">
     @if (tableContents$ | async; as tableContents) {
-      <h4 class="mb-4">{{ tableContents[0].title }}</h4>
+      <a href="#" class="scroll-to-top">
+        <h4 class="mb-4">{{ tableContents[0].title }}</h4>
+      </a>
       <div class="mb-0">
         <ul class="list-unstyled">
           @for (item of tableContents; track $index) {

diff --git a/projects/cps-mdoc-viewer/src/lib/components/table-contents/table-contents.component.scss b/projects/cps-mdoc-viewer/src/lib/components/table-contents/table-contents.component.scss
@@ -6,6 +6,15 @@ $padding-left-multiplier: 1.1rem;
 $line-height: 1.5;
 
 :host {
+  a.scroll-to-top {
+    text-decoration: none;
+    color: $primary-color;
+
+    &:hover {
+      color: $secondary-color;
+    }
+  }
+
   .contents-table {
     top: 4rem;
     // Navbar height is 66px + 10px offset = 76px