Fix anchor links when navigating to current anchor

This commit is contained in:
hunicus 2022-03-11 19:06:06 -05:00
parent 2d4b824862
commit b71df774f5
No known key found for this signature in database
GPG Key ID: 24837C51B6D81FD9
4 changed files with 19 additions and 6 deletions

View File

@ -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>

View File

@ -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 );
}
}

View File

@ -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>

View File

@ -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 = [];