diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html index 3bdf8e25aa..011ec48c39 100644 --- a/aio/src/app/app.component.html +++ b/aio/src/app/app.component.html @@ -17,7 +17,8 @@
- + +
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index 39b50c5cd6..243a4535ba 100644 --- a/aio/src/app/app.component.ts +++ b/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); } - } diff --git a/aio/src/app/app.module.ts b/aio/src/app/app.module.ts index f53de92cbf..a0324dbedd 100644 --- a/aio/src/app/app.module.ts +++ b/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, diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts index e9cec3e6cb..14a8ae53e6 100644 --- a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts +++ b/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(); + 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(); } } diff --git a/aio/src/app/layout/doc-viewer/dt.component.ts b/aio/src/app/layout/doc-viewer/dt.component.ts new file mode 100644 index 0000000000..41dc9397f5 --- /dev/null +++ b/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: ` +
+
+ +
+ +
+ ` +}) +export class DtComponent { + + @Input() on = false; + @Input('doc') doc: DocumentContents; + @Output() docChange = new EventEmitter(); + + @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 }); + } +}