feat(example-viewer): add copy source button (#262)

Author: willshowell

src/app/shared/copier/copier.service.ts

@@ -0,0 +1,60 @@
+/**
+ * This class is based on the code in the following projects:
+ *
+ * - https://github.com/zenorocha/select
+ * - https://github.com/zenorocha/clipboard.js/
+ *
+ * Both released under MIT license - © Zeno Rocha
+ */
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class CopierService {
+
+  private textarea: HTMLTextAreaElement;
+
+  /** Copy the text value to the clipboard. */
+  copyText(text: string): boolean {
+    this.createTextareaAndSelect(text);
+
+    const copySuccessful = document.execCommand('copy');
+    this.removeFake();
+
+    return copySuccessful;
+  }
+
+  /**
+   * Creates a hidden textarea element, sets its value from `text` property,
+   * and makes a selection on it.
+   */
+  private createTextareaAndSelect(text: string) {
+    // Create a fake element to hold the contents to copy
+    this.textarea = document.createElement('textarea');
+
+    // Prevent zooming on iOS
+    this.textarea.style.fontSize = '12pt';
+
+    // Hide the element
+    this.textarea.classList.add('cdk-visually-hidden');
+
+    // Move element to the same position vertically
+    const yPosition = window.pageYOffset || document.documentElement.scrollTop;
+    this.textarea.style.top = yPosition + 'px';
+
+    this.textarea.setAttribute('readonly', '');
+    this.textarea.value = text;
+
+    document.body.appendChild(this.textarea);
+
+    this.textarea.select();
+    this.textarea.setSelectionRange(0, this.textarea.value.length);
+  }
+
+  /** Remove the text area from the DOM. */
+  private removeFake() {
+    if (this.textarea) {
+      document.body.removeChild(this.textarea);
+      this.textarea = null;
+    }
+  }
+}

src/app/shared/doc-viewer/doc-viewer-module.ts

@@ -6,11 +6,13 @@ import {
   MdIconModule,
   MdTabsModule,
   MdTooltipModule,
+  MdSnackBarModule,
   PortalModule
 } from '@angular/material';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {HeaderLink} from './header-link';
+import {CopierService} from '../copier/copier.service';
 
 
 // ExampleViewer is included in the DocViewerModule because they have a circular dependency.
@@ -19,11 +21,13 @@ import {HeaderLink} from './header-link';
     MdButtonModule,
     MdIconModule,
     MdTooltipModule,
+    MdSnackBarModule,
     MdTabsModule,
     CommonModule,
     PortalModule,
     PlunkerButtonModule
   ],
+  providers: [CopierService],
   declarations: [DocViewer, ExampleViewer, HeaderLink],
   entryComponents: [ExampleViewer, HeaderLink],
   exports: [DocViewer, ExampleViewer, HeaderLink],

src/app/shared/doc-viewer/doc-viewer.spec.ts

@@ -32,6 +32,14 @@ describe('DocViewer', () => {
     expect(docViewer.nativeElement.innerHTML).toBe('<div>my docs page</div>');
   });
 
+  it('should save textContent of the doc', () => {
+    let fixture = TestBed.createComponent(DocViewerTestComponent);
+    fixture.detectChanges();
+
+    let docViewer = fixture.debugElement.query(By.directive(DocViewer));
+    expect(docViewer.componentInstance.textContent).toBe('my docs page');
+  });
+
   it('should show error message when doc not found', () => {
     let fixture = TestBed.createComponent(DocViewerTestComponent);
     fixture.detectChanges();

src/app/shared/doc-viewer/doc-viewer.ts

@@ -32,6 +32,9 @@ export class DocViewer implements OnDestroy {
 
   @Output() contentLoaded = new EventEmitter<void>();
 
+  /** The document text. It should not be HTML encoded. */
+  textContent = '';
+
   constructor(private _appRef: ApplicationRef,
               private _componentFactoryResolver: ComponentFactoryResolver,
               private _elementRef: ElementRef,
@@ -51,6 +54,7 @@ export class DocViewer implements OnDestroy {
           // TODO(mmalerba): Trust HTML.
           if (response.ok) {
             this._elementRef.nativeElement.innerHTML = response.text();
+            this.textContent = this._elementRef.nativeElement.textContent;
             this._loadComponents('material-docs-example', ExampleViewer);
             this._loadComponents('header-link', HeaderLink);
             this.contentLoaded.next();

src/app/shared/example-viewer/_example-viewer-theme.scss

@@ -17,6 +17,16 @@
       background: rgba(mat-color($foreground, secondary-text), .03);
     }
 
+    .docs-example-source-copy {
+      color: mat-color($foreground, hint-text);
+      right: 8px;
+
+      [dir='rtl'] & {
+        right: auto;
+        left: 8px;
+      }
+    }
+
     .docs-example-source {
       border-bottom: 1px solid mat-color($foreground, divider);
     }

src/app/shared/example-viewer/example-viewer.html

@@ -19,8 +19,15 @@
     <md-tab-group>
       <!-- TODO(jelbourn): don't hard-code the html + ts + css structure -->
       <md-tab *ngFor="let extension of ['HTML', 'TS', 'CSS']" [label]="extension">
-        <pre *ngIf="exampleFileUrl(extension)" class="docs-example-source"><doc-viewer
-            [documentUrl]="exampleFileUrl(extension)"></doc-viewer></pre>
+        <div class="docs-example-source-wrapper">
+          <button md-icon-button type="button" class="docs-example-source-copy"
+                  title="Copy example source" aria-label="Copy example source to clipboard"
+                  (click)="copySource(viewer.textContent)">
+            <md-icon>content_copy</md-icon>
+          </button>
+          <pre class="docs-example-source"><doc-viewer
+              #viewer [documentUrl]="exampleFileUrl(extension)"></doc-viewer></pre>
+        </div>
       </md-tab>
     </md-tab-group>
   </div>

src/app/shared/example-viewer/example-viewer.scss

@@ -21,8 +21,20 @@
   flex: 1 1 auto;
 }
 
+.docs-example-source-copy {
+  position: absolute;
+  top: 8px;
+  display: none;
+}
+
+.docs-example-source-wrapper:hover {
+  .docs-example-source-copy {
+    display: inline-block;
+  }
+}
+
 .docs-example-source {
-  padding: 0 0 10px 30px;
+  padding: 0 30px 10px 30px;
   min-height: 150px;
 }
 

src/app/shared/example-viewer/example-viewer.spec.ts

@@ -1,5 +1,8 @@
 import {ReactiveFormsModule} from '@angular/forms';
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, inject, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MockBackend} from '@angular/http/testing';
+import {Response, ResponseOptions} from '@angular/http';
+import {By} from '@angular/platform-browser';
 
 import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
 import {ExampleViewer} from './example-viewer';
@@ -14,12 +17,15 @@ import {
   MdInputModule,
   MdSlideToggleModule
 } from '@angular/material';
+import {CopierService} from '../copier/copier.service';
+import {MdSnackBar} from '@angular/material';
 
 const exampleKey = 'autocomplete-overview';
 
 
 describe('ExampleViewer', () => {
   let fixture: ComponentFixture<ExampleViewer>;
+  let component: ExampleViewer;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -32,20 +38,27 @@ describe('ExampleViewer', () => {
     }).compileComponents();
   }));
 
+  beforeEach(inject([MockBackend], (mockBackend: MockBackend) => {
+    // Mock backend request that may come through the doc viewer
+    mockBackend.connections.subscribe((connection: any) => {
+      const url = connection.request.url;
+      connection.mockRespond(getFakeDocResponse(url));
+    });
+  }));
+
   beforeEach(() => {
     fixture = TestBed.createComponent(ExampleViewer);
+    component = fixture.componentInstance;
   });
 
   it('should toggle showSource boolean', () => {
-    const component = fixture.componentInstance;
     fixture.detectChanges();
     expect(component.showSource).toBe(false);
     component.toggleSourceView();
     expect(component.showSource).toBe(true);
   });
 
   it('should set and return example properly', () => {
-    const component = fixture.componentInstance;
     component.example = exampleKey;
     fixture.detectChanges();
     const data = component.exampleData;
@@ -54,7 +67,6 @@ describe('ExampleViewer', () => {
   });
 
   it('should log message about missing example', () => {
-    const component = fixture.componentInstance;
     spyOn(console, 'log');
     component.example = 'foobar';
     fixture.detectChanges();
@@ -64,7 +76,6 @@ describe('ExampleViewer', () => {
 
   it('should return assets path for example based on extension', () => {
     // set example
-    const component = fixture.componentInstance;
     component.example = exampleKey;
     fixture.detectChanges();
 
@@ -77,6 +88,50 @@ describe('ExampleViewer', () => {
       expect(actual).toEqual(expected);
     });
   });
+
+  describe('copy button', () => {
+    let button: HTMLElement;
+
+    beforeEach(() => {
+      // Open source view
+      component.example = exampleKey;
+      component.showSource = true;
+      fixture.detectChanges();
+
+      // Select button element
+      const btnDe = fixture.debugElement.query(By.css('.docs-example-source-copy'));
+      button = btnDe ? btnDe.nativeElement : null;
+    });
+
+    it('should call copier service when clicked', () => {
+      const copierService: CopierService = TestBed.get(CopierService);
+      const spy = spyOn(copierService, 'copyText');
+      expect(spy.calls.count()).toBe(0, 'before click');
+      button.click();
+      expect(spy.calls.count()).toBe(1, 'after click');
+      expect(spy.calls.argsFor(0)[0]).toBe('my docs page', 'click content');
+    });
+
+    it('should display a message when copy succeeds', () => {
+      const snackBar: MdSnackBar = TestBed.get(MdSnackBar);
+      const copierService: CopierService = TestBed.get(CopierService);
+      spyOn(snackBar, 'open');
+      spyOn(copierService, 'copyText').and.returnValue(true);
+      button.click();
+      expect(snackBar.open).toHaveBeenCalledWith('Code copied', '', {duration: 2500});
+    });
+
+    it('should display an error when copy fails', () => {
+      const snackBar: MdSnackBar = TestBed.get(MdSnackBar);
+      const copierService: CopierService = TestBed.get(CopierService);
+      spyOn(snackBar, 'open');
+      spyOn(copierService, 'copyText').and.returnValue(false);
+      button.click();
+      expect(snackBar.open)
+          .toHaveBeenCalledWith('Copy failed. Please try again!', '', {duration: 2500});
+    });
+  });
+
 });
 
 
@@ -96,3 +151,24 @@ describe('ExampleViewer', () => {
   entryComponents: [EXAMPLE_COMPONENTS[exampleKey].component],
 })
 class TestExampleModule { }
+
+
+const FAKE_DOCS = {
+  '/assets/examples/autocomplete-overview-example-html.html':
+      '<div>my docs page</div>',
+  '/assets/examples/autocomplete-overview-example-ts.html':
+      '<span>const a = 1;</span>',
+  '/assets/examples/autocomplete-overview-example-css.html':
+      '<pre>.class { color: black; }</pre>',
+};
+
+function getFakeDocResponse(url: string) {
+  if (url in FAKE_DOCS) {
+    return new Response(new ResponseOptions({
+      status: 200,
+      body: FAKE_DOCS[url],
+    }));
+  } else {
+    return new Response(new ResponseOptions({status: 404}));
+  }
+}

src/app/shared/example-viewer/example-viewer.ts

@@ -1,8 +1,9 @@
 import {Component, Input} from '@angular/core';
-import {ComponentPortal} from '@angular/material';
+import {ComponentPortal, MdSnackBar} from '@angular/material';
 import 'rxjs/add/operator/first';
 
 import {EXAMPLE_COMPONENTS, LiveExample} from '@angular/material-examples';
+import {CopierService} from '../copier/copier.service';
 
 
 @Component({
@@ -22,6 +23,10 @@ export class ExampleViewer {
   /** Whether the source for the example is being displayed. */
   showSource = false;
 
+  constructor(
+    private snackbar: MdSnackBar,
+    private copier: CopierService) { }
+
   get example() {
     return this._example;
   }
@@ -44,4 +49,12 @@ export class ExampleViewer {
   exampleFileUrl(extension: string) {
     return `/assets/examples/${this.example}-example-${extension.toLowerCase()}.html`;
   }
+
+  copySource(text: string) {
+    if (this.copier.copyText(text)) {
+      this.snackbar.open('Code copied', '', {duration: 2500});
+    } else {
+      this.snackbar.open('Copy failed. Please try again!', '', {duration: 2500});
+    }
+  }
 }