feat(demo): add copy to clipboard to example-viewer. (#585)

demo/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;
+    }
+  }
+}

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

@@ -17,7 +17,11 @@
     <mat-tab-group>
       <mat-tab *ngFor="let f of example" [label]="f.file">
         <div class="docs-example-source-wrapper">
-          <pre class="docs-example-source" [innerHtml]="f.content" ></pre>
+          <button mat-icon-button type="button" class="docs-example-source-copy" title="Copy example source" aria-label="Copy example source to clipboard"
+            (click)="copySource(textContent)">
+            <mat-icon class="fa fa-copy"></mat-icon>
+          </button>
+          <pre class="docs-example-source" [innerHtml]="f.content" #textContent></pre>
         </div>
       </mat-tab>
     </mat-tab-group>

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

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { CopierService } from '../copier/copier.service';
 
 @Component({
   selector: 'formly-example-viewer',
@@ -12,7 +13,13 @@ export class ExampleViewerComponent {
   /** Whether the source for the example is being displayed. */
   showSource = false;
 
+  constructor(private copier: CopierService) {}
+
   toggleSourceView() {
     this.showSource = !this.showSource;
   }
+
+  copySource(content) {
+    this.copier.copyText(content.innerText);
+  }
 }

demo/src/app/shared/shared.module.ts

@@ -8,8 +8,10 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { MatTabsModule } from '@angular/material/tabs';
 import { PortalModule } from '@angular/cdk/portal';
+
 import { ExampleViewerComponent } from './example-viewer/example-viewer.component';
 import { ExamplesRouterViewerComponent } from './examples-router-viewer/examples-router-viewer.component';
+import { CopierService } from './copier/copier.service';
 
 @NgModule({
   imports: [
@@ -36,5 +38,8 @@ import { ExamplesRouterViewerComponent } from './examples-router-viewer/examples
     ExampleViewerComponent,
     ExamplesRouterViewerComponent,
   ],
+  providers: [
+    CopierService,
+  ],
 })
 export class SharedModule { }