From 1d262f4aeb2ba370218e240f1b302e97132831e5 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Tue, 30 Apr 2019 12:01:20 +0300
Subject: [PATCH] fix(docs): add tab name into page header (#1445)

---
 .../documentation/page/page.component.html    |  5 +++-
 .../documentation/page/page.component.scss    |  9 +++++++
 docs/app/documentation/page/page.component.ts | 24 +++++++++++++++++--
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/docs/app/documentation/page/page.component.html b/docs/app/documentation/page/page.component.html
index 2c9118881e..5c97e05b80 100644
--- 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
index 1ff9a4a8eb..6fd6d7713f 100644
--- 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
index 75961a5945..178944daf8 100644
--- a/docs/app/documentation/page/page.component.ts
+++ b/docs/app/documentation/page/page.component.ts
@@ -4,11 +4,12 @@
  * 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({
@@ -16,11 +17,15 @@ import { NgdStructureService } from '../../@theme/services';
   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 '';
+  }
 }