From b71df774f589e233753ce24d773dd452d613a230 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Fri, 11 Mar 2022 19:06:06 -0500
Subject: [PATCH] Fix anchor links when navigating to current anchor

---
 .../src/app/components/docs/api-docs-nav.component.html  | 2 +-
 .../src/app/components/docs/api-docs-nav.component.ts    | 8 ++++++--
 frontend/src/app/components/docs/api-docs.component.html | 6 +++---
 frontend/src/app/components/docs/api-docs.component.ts   | 9 +++++++++
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/docs/api-docs-nav.component.html b/frontend/src/app/components/docs/api-docs-nav.component.html
index 8c6d3b006..83eaaf9e8 100644
--- a/frontend/src/app/components/docs/api-docs-nav.component.html
+++ b/frontend/src/app/components/docs/api-docs-nav.component.html
@@ -1,4 +1,4 @@
 <div *ngFor="let item of restDocs">
   <p *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</p>
-  <a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" [routerLink]="['./']" fragment="{{ item.fragment }}" (click)="collapseItem.toggle()">{{ item.title }}</a>
+  <a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" [routerLink]="['./']" fragment="{{ item.fragment }}" (click)="navLinkClick($event)">{{ item.title }}</a>
 </div>
diff --git a/frontend/src/app/components/docs/api-docs-nav.component.ts b/frontend/src/app/components/docs/api-docs-nav.component.ts
index 630611c15..90588860e 100644
--- a/frontend/src/app/components/docs/api-docs-nav.component.ts
+++ b/frontend/src/app/components/docs/api-docs-nav.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { restApiDocsData } from './api-docs-data';
 
 @Component({
@@ -9,7 +9,7 @@ import { restApiDocsData } from './api-docs-data';
 export class ApiDocsNavComponent implements OnInit {
 
   @Input() network: any;
-  @Input() collapseItem: any = { toggle: () => {} };
+  @Output() navLinkClickEvent: EventEmitter<any> = new EventEmitter();
   restDocs: any[];
 
   constructor() { }
@@ -17,5 +17,9 @@ export class ApiDocsNavComponent implements OnInit {
   ngOnInit(): void {
     this.restDocs = restApiDocsData;
   }
+  
+  navLinkClick( event ) {
+    this.navLinkClickEvent.emit( event );
+  }
 
 }
diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html
index 673691763..e043064db 100644
--- a/frontend/src/app/components/docs/api-docs.component.html
+++ b/frontend/src/app/components/docs/api-docs.component.html
@@ -4,7 +4,7 @@
     <div id="restAPI" *ngIf="restTabActivated">
 
       <div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
-        <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav>
+        <app-api-docs-nav (navLinkClickEvent)="scrollSameId( $event )" [network]="{ val: network$ | async }"></app-api-docs-nav>
       </div>
 
       <div class="doc-content">
@@ -16,7 +16,7 @@
           <div #collapse="ngbCollapse" [(ngbCollapse)]="mobileMenuOpen">
             <div class="card">
               <div class="card-body">
-                <app-api-docs-nav [collapseItem]="collapse" [network]="{ val: network$ | async }"></app-api-docs-nav>
+                <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav>
               </div>
             </div>
           </div>
@@ -26,7 +26,7 @@
 
         <div *ngFor="let item of restDocs">
           <div *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" class="endpoint-container" id="{{ item.fragment }}">
-            <a class="section-header" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
+            <a class="section-header" (click)="scrollSameId( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <ng-container *ngIf="item.httpRequestMethod === 'GET' && network.val === 'bisq' && item.codeExample.hasOwnProperty('bisq');else liquid_link_example" #bisq_link_example>
diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts
index 39617cdea..706d05fdb 100644
--- a/frontend/src/app/components/docs/api-docs.component.ts
+++ b/frontend/src/app/components/docs/api-docs.component.ts
@@ -3,6 +3,7 @@ import { Env, StateService } from 'src/app/services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
 import { tap } from 'rxjs/operators';
+import { ActivatedRoute } from "@angular/router";
 import { restApiDocsData, wsApiDocsData } from './api-docs-data';
 
 @Component({
@@ -28,6 +29,7 @@ export class ApiDocsComponent implements OnInit {
   constructor(
     private stateService: StateService,
     private seoService: SeoService,
+    private route: ActivatedRoute,
   ) { }
 
   ngAfterViewInit() {
@@ -70,6 +72,13 @@ export class ApiDocsComponent implements OnInit {
     });
   }
 
+  scrollSameId( event: any ) {
+    const targetId = event.target.hash.substring(1);
+    if( this.route.snapshot.fragment === targetId ) {
+      document.getElementById( targetId ).scrollIntoView();
+    }
+  }
+
   wrapUrl(network: string, code: any, websocket: boolean = false) {
 
     let curlResponse = [];