import { DOCUMENT } from '@angular/common' ; import { Component , Inject , Input } from '@angular/core' ; import { ActivatedRoute , Router } from '@angular/router' ; interface ILink { id : string ; headerType : string ; active : boolean ; name : string ; top : number ; } @ Component ( { selector : 'table-of-contents' , styleUrls : [ './table-of-contents.scss' ] , templateUrl : './table-of-contents.html' } ) export class TableOfContents { @ Input ( ) links : ILink [ ] = [ ] ; @ Input ( ) headerSelectors = '.docs-markdown h3, .docs-markdown h4' ; _rootUrl = this . _router . url . split ( '#' ) [ 0 ] ; constructor ( @ Inject ( DOCUMENT ) private _document , private _router , public route ) { this . links = this . createLinks ( ) ; } private createLinks ( ) { const links = [ ] ; const headers = Array . from ( this . _document . querySelectorAll ( this . headerSelectors ) ) ; if ( headers . length ) { for ( const header of headers ) { const name = header . innerText . trim ( ) . replace ( /^link/ , '' ) ; const { top } = header . getBoundingClientRect ( ) ; links . push ( { name , type : header . tagName . toLowerCase ( ) , top , id : header . id , active : false } ) ; } } return links ; } }