feat(aio): add DtComponent to view/change the raw contents

aio/src/app/app.component.html

@@ -17,7 +17,8 @@
   </md-sidenav>
 
   <section class="sidenav-content" [id]="pageId">
-    <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered($event)"></aio-doc-viewer>
+    <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
+    <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
   </section>
 
 </md-sidenav-container>

aio/src/app/app.component.ts

@@ -21,6 +21,7 @@ const sideNavView = 'SideNav';
 export class AppComponent implements OnInit {
 
   currentNode: CurrentNode;
+  dtOn = false;
   pageId: string;
   currentDocument: DocumentContents;
   footerNodes: NavigationNode[];
@@ -98,7 +99,7 @@ export class AppComponent implements OnInit {
     this.autoScrollService.scroll(this.docViewer.nativeElement.offsetParent);
   }
 
-  onDocRendered(doc: DocumentContents) {
+  onDocRendered() {
     // This handler is needed because the subscription to the `currentUrl` in `ngOnInit`
     // gets triggered too early before the doc-viewer has finished rendering the doc
     this.autoScroll();
@@ -109,8 +110,8 @@ export class AppComponent implements OnInit {
     this.isSideBySide = width > this.sideBySideWidth;
   }
 
-  @HostListener('click', ['$event.target', '$event.button', '$event.ctrlKey', '$event.metaKey'])
-  onClick(eventTarget: HTMLElement, button: number, ctrlKey: boolean, metaKey: boolean): boolean {
+  @HostListener('click', ['$event.target', '$event.button', '$event.ctrlKey', '$event.metaKey', '$event.altKey'])
+  onClick(eventTarget: HTMLElement, button: number, ctrlKey: boolean, metaKey: boolean, altKey: boolean): boolean {
 
     // Hide the search results if we clicked outside both the search box and the search results
     if (this.searchResults) {
@@ -120,6 +121,10 @@ export class AppComponent implements OnInit {
       }
     }
 
+    if (eventTarget.tagName === 'FOOTER' && metaKey && altKey) {
+      this.dtOn = !this.dtOn;
+    }
+
     // Deal with anchor clicks
     if (eventTarget instanceof HTMLImageElement) {
       eventTarget = eventTarget.parentElement; // assume image wrapped in Anchor
@@ -133,5 +138,4 @@ export class AppComponent implements OnInit {
   sideNavToggle(value?: boolean) {
     this.sidenav.toggle(value);
   }
-
 }

aio/src/app/app.module.ts

@@ -22,6 +22,7 @@ import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
 import { AppComponent } from 'app/app.component';
 import { ApiService } from 'app/embedded/api/api.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
+import { DtComponent } from 'app/layout/doc-viewer/dt.component';
 import { EmbeddedModule } from 'app/embedded/embedded.module';
 import { GaService } from 'app/shared/ga.service';
 import { Logger } from 'app/shared/logger.service';
@@ -54,6 +55,7 @@ import { AutoScrollService } from 'app/shared/auto-scroll.service';
   declarations: [
     AppComponent,
     DocViewerComponent,
+    DtComponent,
     FooterComponent,
     TopMenuComponent,
     NavMenuComponent,

aio/src/app/layout/doc-viewer/doc-viewer.component.ts

@@ -35,7 +35,7 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
   private hostElement: HTMLElement;
 
   @Output()
-  docRendered = new EventEmitter<DocumentContents>();
+  docRendered = new EventEmitter();
 
   constructor(
     componentFactoryResolver: ComponentFactoryResolver,
@@ -60,7 +60,7 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
     this.ngOnDestroy();
     if (newDoc) {
       this.build(newDoc);
-      this.docRendered.emit(newDoc);
+      this.docRendered.emit();
     }
   }
 

aio/src/app/layout/doc-viewer/dt.component.ts

@@ -0,0 +1,30 @@
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { DocumentContents } from 'app/documents/document.service';
+
+@Component({
+  selector: 'aio-dt',
+  template: `
+  <div *ngIf="on">
+    <hr>
+    <textarea #dt [value]="text" rows="10" cols="80"></textarea>
+    <br/>
+    <button (click)="dtextSet()">Show change</button>
+  </div>
+  `
+})
+export class DtComponent {
+
+  @Input() on = false;
+  @Input('doc') doc: DocumentContents;
+  @Output() docChange = new EventEmitter<DocumentContents>();
+
+  @ViewChild('dt', { read: ElementRef })
+  dt: ElementRef;
+
+  get text() { return this.doc && this.doc.contents; }
+
+  dtextSet() {
+    this.doc.contents = this.dt.nativeElement.value;
+    this.docChange.emit({ ...this.doc });
+  }
+}