demos: Add copy to clipboard button (#1895)

closes #1782

Author: benjaminforras

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

@@ -7,4 +7,9 @@
     <mdc-tab *ngFor="let tab of tabs" [label]="tab.label"></mdc-tab>
   </mdc-tab-scroller>
 </mdc-tab-bar>
-<pre><code [highlight]="currentExample" *ngIf="open"></code></pre>
+<div class="example-container" *ngIf="open">
+  <button mdcIconButton class="example-copy-button" (click)="copyCode()">
+    <mdc-icon>file_copy</mdc-icon>
+  </button>
+  <pre><code [highlight]="currentExample"></code></pre>
+</div>

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

@@ -7,3 +7,14 @@
   margin-top: 20px;
   background-color: #344955 !important;
 }
+
+.example-container {
+  position: relative;
+}
+
+.example-copy-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: #ffffff;
+}

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

@@ -1,6 +1,7 @@
-import { Component, Input, OnInit, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
 
 import {MdcTabActivatedEvent} from '@angular-mdc/web';
+import {MdcSnackbar} from '@angular-mdc/web/snackbar';
 
 interface Example {
   label?: string;
@@ -39,11 +40,36 @@ export class ExampleViewer implements OnInit {
   }
   private _example: Example;
 
+  constructor(private snackbar: MdcSnackbar) {}
+
   ngOnInit(): void {
     this.currentExample = this.tabs[0].source;
   }
 
   onActivatedTab(event: MdcTabActivatedEvent): void {
     this.currentExample = this.tabs[event.index].source;
   }
+
+  copyCode(): void {
+    const tempTextarea = document.createElement('textarea');
+    tempTextarea.id = 'txt';
+    tempTextarea.style.position = 'fixed';
+    tempTextarea.style.top = '0';
+    tempTextarea.style.left = '0';
+    tempTextarea.style.opacity = '0';
+    tempTextarea.value = this.currentExample;
+    document.body.appendChild(tempTextarea);
+    tempTextarea.select();
+
+    try {
+      const returnValue = document.execCommand('copy');
+      if (returnValue) {
+        this.snackbar.open('Code copied');
+      }
+    } catch (err) {
+      this.snackbar.open('Unable to copy.');
+    } finally {
+      document.body.removeChild(tempTextarea);
+    }
+  }
 }