fix(docs): add tab name into page header (#1445)

akveo · Jun 4, 2019 · 1d262f4 · 1d262f4
1 parent 725ea7a
commit 1d262f4
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/docs/app/documentation/page/page.component.html b/docs/app/documentation/page/page.component.html
@@ -2,7 +2,10 @@
 
   <nb-card *ngIf="currentItem?.tabs" class="horizontal-nav">
     <nb-card-header>
-      {{ currentItem?.name }}
+      <h1 class="page-header h4">
+        {{ currentItem?.name }}
+        <span class="visually-hidden">{{ currentTabName }}</span>
+      </h1>
     </nb-card-header>
     <nb-card-body>
       <ngd-page-tabs [tabs]="currentItem?.tabs" horizontal></ngd-page-tabs>

diff --git a/docs/app/documentation/page/page.component.scss b/docs/app/documentation/page/page.component.scss
@@ -22,6 +22,15 @@
     font-size: 1.25rem;
   }
 
+  .visually-hidden {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+
   .middle-column {
     flex: 3;
     min-width: 0;

diff --git a/docs/app/documentation/page/page.component.ts b/docs/app/documentation/page/page.component.ts
@@ -4,23 +4,28 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, Inject, NgZone, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, NgZone, OnDestroy, OnInit, ViewChild, AfterContentChecked } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { filter, map, publishReplay, refCount, tap, takeWhile } from 'rxjs/operators';
 import { NB_WINDOW } from '@nebular/theme';
+import { NgdTabbedBlockComponent } from '../../blocks/components/tabbed-block/tabbed-block.component';
 import { NgdStructureService } from '../../@theme/services';
 
 @Component({
   selector: 'ngd-page',
   templateUrl: './page.component.html',
   styleUrls: ['./page.component.scss'],
 })
-export class NgdPageComponent implements OnInit, OnDestroy {
+export class NgdPageComponent implements OnInit, AfterContentChecked, OnDestroy {
 
   currentItem;
   private alive = true;
 
+  currentTabName: string = '';
+
+  @ViewChild(NgdTabbedBlockComponent) tabbedBlock: NgdTabbedBlockComponent;
+
   constructor(@Inject(NB_WINDOW) private window,
               private ngZone: NgZone,
               private router: Router,
@@ -39,6 +44,13 @@ export class NgdPageComponent implements OnInit, OnDestroy {
     this.window.history.scrollRestoration = 'manual';
   }
 
+  ngAfterContentChecked() {
+    const currentTabName = this.getCurrentTabName();
+    if (this.currentTabName !== currentTabName) {
+      Promise.resolve().then(() => this.currentTabName = currentTabName);
+    }
+  }
+
   ngOnDestroy() {
     this.alive = false;
   }
@@ -63,4 +75,12 @@ export class NgdPageComponent implements OnInit, OnDestroy {
         this.currentItem = item;
       });
   }
+
+  protected getCurrentTabName(): string {
+    if (this.tabbedBlock && this.tabbedBlock.currentTab) {
+      return this.tabbedBlock.currentTab.tab;
+    }
+
+    return '';
+  }
 }