From b8a48314c17dc0fc9f89b2b9578856ae9c353320 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Mon, 1 Apr 2024 18:53:38 +0900
Subject: [PATCH] Fix api-docs anchor link vertical alignment

---
 frontend/src/app/app-routing.module.ts        |  2 +-
 .../docs/api-docs/api-docs-nav.component.html |  2 +-
 .../docs/api-docs/api-docs-nav.component.scss |  1 +
 .../docs/api-docs/api-docs-nav.component.ts   |  5 ++--
 .../app/docs/api-docs/api-docs.component.html |  4 +--
 .../app/docs/api-docs/api-docs.component.scss |  1 +
 .../app/docs/api-docs/api-docs.component.ts   | 26 ++++++++-----------
 7 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 1fe196090..4bef1a76f 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -270,7 +270,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabledBlocking',
     scrollPositionRestoration: 'enabled',
-    anchorScrolling: 'enabled',
+    anchorScrolling: 'disabled',
     preloadingStrategy: AppPreloadingStrategy
   })],
 })
diff --git a/frontend/src/app/docs/api-docs/api-docs-nav.component.html b/frontend/src/app/docs/api-docs/api-docs-nav.component.html
index 7ec57714d..13b7cbe80 100644
--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.html
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.html
@@ -4,5 +4,5 @@
 </div>
 <div *ngFor="let item of tabData">
   <p *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 ) && ( !item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ))">{{ item.title }}</p>
-  <a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 ) && ( !item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ) || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('auditOnly') && item.options.auditOnly && auditEnabled ) )" [routerLink]="['./']" fragment="{{ item.fragment }}" (click)="navLinkClick($event)">{{ item.title }}</a>
+  <a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 ) && ( !item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ) || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('auditOnly') && item.options.auditOnly && auditEnabled ) )" (click)="navLinkClick($event, item.fragment)">{{ item.title }}</a>
 </div>
diff --git a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
index 550d1c936..9db2f56e9 100644
--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
@@ -10,6 +10,7 @@ a {
   text-decoration: none;
   display: block;
   margin: 5px 0;
+  cursor: pointer;
 }
 
 #enterprise-cta-desktop {
diff --git a/frontend/src/app/docs/api-docs/api-docs-nav.component.ts b/frontend/src/app/docs/api-docs/api-docs-nav.component.ts
index 6e804de46..1abc506e5 100644
--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.ts
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.ts
@@ -33,8 +33,9 @@ export class ApiDocsNavComponent implements OnInit {
     }
   }
 
-  navLinkClick(event) {
-    this.navLinkClickEvent.emit(event);
+  navLinkClick(event, fragment) {
+    event.preventDefault();
+    this.navLinkClickEvent.emit({event: event, fragment: fragment});
   }
 
 }
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.html b/frontend/src/app/docs/api-docs/api-docs.component.html
index 89165c90e..aef36603e 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.html
+++ b/frontend/src/app/docs/api-docs/api-docs.component.html
@@ -19,7 +19,7 @@
           <div *ngIf="!item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ) || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('auditOnly') && item.options.auditOnly && auditEnabled )">
             <h3 *ngIf="item.type === 'category'">{{ item.title }}</h3>
             <div *ngIf="item.type !== 'category'" class="endpoint-container" id="{{ item.fragment }}">
-              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a>
+              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick({event: $event, fragment: item.fragment})"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a>
               <div class="endpoint-content">
                 <ng-container *ngTemplateOutlet="dict[item.fragment]" class="endpoint"></ng-container>
               </div>
@@ -54,7 +54,7 @@
           <div *ngIf="!item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance )">
             <h3 *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</h3>
             <div *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" class="endpoint-container" id="{{ item.fragment }}">
-              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
+              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick({event: $event, fragment: item.fragment})">{{ item.title }} <span>{{ item.category }}</span></a>
               <div class="endpoint-content">
                 <div class="endpoint">
                   <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss
index ed7b79636..a139288e7 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs.component.scss
@@ -204,6 +204,7 @@ h3 {
   margin: 20px 0 20px 0;
   font-size: 24px;
   position: relative;
+  cursor: pointer;
 }
 .endpoint-container .section-header:hover {
   text-decoration: none;
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.ts b/frontend/src/app/docs/api-docs/api-docs.component.ts
index 3f5ce75e5..3198d80c6 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.ts
+++ b/frontend/src/app/docs/api-docs/api-docs.component.ts
@@ -56,7 +56,10 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
       if( this.route.snapshot.fragment ) {
         this.openEndpointContainer( this.route.snapshot.fragment );
         if (document.getElementById( this.route.snapshot.fragment )) {
-          document.getElementById( this.route.snapshot.fragment ).scrollIntoView();
+          let vOffset = ( window.innerWidth <= 992 ) ? 100 : 60;
+          window.scrollTo({
+            top: document.getElementById( this.route.snapshot.fragment ).offsetTop - vOffset
+          });
         }
       }
       window.addEventListener('scroll', that.onDocScroll, { passive: true });
@@ -124,20 +127,13 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
     this.desktopDocsNavPosition = ( window.pageYOffset > 115 ) ? "fixed" : "relative";
   }
 
-  anchorLinkClick( event: any ) {
-    let targetId = "";
-    if( event.target.nodeName === "A" ) {
-      targetId = event.target.hash.substring(1);
-    } else {
-      let element = event.target;
-      while( element.nodeName !== "A" ) {
-        element = element.parentElement;
-      }
-      targetId = element.hash.substring(1);
-    }
-    if( this.route.snapshot.fragment === targetId && document.getElementById( targetId )) {
-      document.getElementById( targetId ).scrollIntoView();
-    }
+  anchorLinkClick( e ) {
+    let targetId = e.fragment;
+    let vOffset = ( window.innerWidth <= 992 ) ? 100 : 60;
+    window.scrollTo({
+      top: document.getElementById( targetId ).offsetTop - vOffset
+    });
+    window.history.pushState({}, null, document.location.href.split("#")[0] + "#" + targetId);
     this.openEndpointContainer( targetId );
   }