refactor(operators): remove clipboard dependency and add confirmation

Author: btroncone

package.json

@@ -42,7 +42,6 @@
     "@types/hammerjs": "2.0.35",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "ngx-clipboard": "8.1.0",
     "rxjs": "5.5.2",
     "ts-loader": "3.1.1",
     "zone.js": "0.8.14"

src/app/material/material.module.ts

@@ -11,7 +11,8 @@ import {
   MatCardModule,
   MatInputModule,
   MatMenuModule,
-  MatTooltipModule
+  MatTooltipModule,
+  MatSnackBarModule
 } from '@angular/material';
 
 @NgModule({
@@ -26,7 +27,8 @@ import {
     MatCardModule,
     MatInputModule,
     MatMenuModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatSnackBarModule
   ],
   exports: [
     MatToolbarModule,
@@ -38,7 +40,8 @@ import {
     MatCardModule,
     MatInputModule,
     MatMenuModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatSnackBarModule
   ]
 })
 export class MaterialModule {}

src/app/operators/components/operator-examples/operator-examples.component.html

@@ -1,16 +1,14 @@
 <h2> Examples </h2>
-<div
-  class="code-example"
-  *ngFor="let example of operatorExamples"
-  appHighlightJs>
+<div class="code-example"
+     *ngFor="let example of operatorExamples"
+     appHighlightJs>
   <div class="code-block mat-elevation-z2">
     <div class="example-header">
-      <div class="header-title" [innerHTML]="example.name"></div>
-      <button
-        mat-icon-button
-        ngxClipboard
-        [cbContent]="example.code"
-        matTooltip="Copy">
+      <div class="header-title"
+           [innerHTML]="example.name"></div>
+      <button mat-icon-button
+              (click)="copyToClipboard.emit(example.code)"
+              matTooltip="Copy">
         <mat-icon>content_copy</mat-icon>
       </button>
     </div>

src/app/operators/components/operator-examples/operator-examples.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Output, Input } from '@angular/core';
 import { OperatorExample } from '../../../../operator-docs';
 
 @Component({
@@ -8,4 +8,5 @@ import { OperatorExample } from '../../../../operator-docs';
 })
 export class OperatorExamplesComponent {
   @Input() operatorExamples: OperatorExample[];
+  @Output() copyToClipboard = new EventEmitter<string>();
 }

src/app/operators/components/operator/operator.component.html

@@ -1,44 +1,39 @@
-<app-operator-header
-  [operatorName]="operatorName"
-  [operatorSignature]="signature"
-  [id]="operatorName"
-  class="operator-header">
+<app-operator-header [operatorName]="operatorName"
+                     [operatorSignature]="signature"
+                     [id]="operatorName"
+                     class="operator-header">
 </app-operator-header>
 <section class="main-operator-container mat-typography">
-  <h3 class="short-description" [innerHTML]="shortDescription"></h3>
-  <app-operator-extras
-    class="margin-bottom-16"
-    *ngIf="shortDescriptionExtras"
-    [operatorExtras]="shortDescriptionExtras">
+  <h3 class="short-description"
+      [innerHTML]="shortDescription">
+  </h3>
+  <app-operator-extras class="margin-bottom-16"
+                       *ngIf="shortDescriptionExtras"
+                       [operatorExtras]="shortDescriptionExtras">
   </app-operator-extras>
-  <app-marble-diagram
-    class="margin-bottom-32"
-    [operatorName]="operatorName"
-    [useInteractiveMarbles]="useInteractiveMarbles"
-    [url]="marbleUrl">
+  <app-marble-diagram class="margin-bottom-32"
+                      [operatorName]="operatorName"
+                      [useInteractiveMarbles]="useInteractiveMarbles"
+                      [url]="marbleUrl">
   </app-marble-diagram>
-  <app-operator-examples
-    [operatorExamples]="examples" class="margin-bottom-16">
+  <app-operator-examples [operatorExamples]="examples"
+                         (copyToClipboard)="copyToClipboard($event)"
+                         class="margin-bottom-16">
   </app-operator-examples>
-  <app-operator-parameters
-    [operatorParameters]="parameters"
-    *ngIf="parameters?.length">
+  <app-operator-parameters [operatorParameters]="parameters"
+                           *ngIf="parameters?.length">
   </app-operator-parameters>
-  <app-operator-walkthrough
-    class="margin-bottom-16"
-    [operatorWalkthrough]="walkthrough" >
+  <app-operator-walkthrough class="margin-bottom-16"
+                            [operatorWalkthrough]="walkthrough">
   </app-operator-walkthrough>
-  <app-operator-extras
-    class="margin-bottom-16"
-    *ngIf="walkthroughExtras"
-    [operatorExtras]="walkthroughExtras">
+  <app-operator-extras class="margin-bottom-16"
+                       *ngIf="walkthroughExtras"
+                       [operatorExtras]="walkthroughExtras">
   </app-operator-extras>
-  <app-related-operators
-    [relatedOperators]="relatedOperators">
+  <app-related-operators [relatedOperators]="relatedOperators">
   </app-related-operators>
-  <app-additional-resources
-    [additionalResources]="additionalResources"
-    [sourceUrl]="sourceUrl"
-    [specsUrl]="specsUrl">
+  <app-additional-resources [additionalResources]="additionalResources"
+                            [sourceUrl]="sourceUrl"
+                            [specsUrl]="specsUrl">
   </app-additional-resources>
 </section>

src/app/operators/components/operator/operator.component.ts

@@ -7,9 +7,11 @@ import {
   InjectionToken
 } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { MatSnackBar } from '@angular/material';
+import { pluck } from 'rxjs/operators';
+import { CopierService } from '../../../core/services/copier.service';
 import { SeoService } from '../../../core/services/seo.service';
 import { OperatorDoc } from '../../../../operator-docs/operator.model';
-import { pluck } from 'rxjs/operators';
 
 export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 
@@ -28,8 +30,10 @@ export class OperatorComponent implements OnInit {
   constructor(
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
-    @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[],
-    private _seo: SeoService
+    private _seo: SeoService,
+    private _copierService: CopierService,
+    private _snackBar: MatSnackBar,
+    @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[]
   ) {}
 
   ngOnInit() {
@@ -63,6 +67,15 @@ export class OperatorComponent implements OnInit {
     }
   }
 
+  copyToClipboard(code: string) {
+    this._copierService.copyText(code);
+    this._snackBar.open(
+      'The example has been copied to your clipboard!',
+      null,
+      { duration: 3000 }
+    );
+  }
+
   get operatorName() {
     return this.operator.name;
   }

src/app/operators/operators.module.ts

@@ -5,7 +5,6 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LayoutModule } from '@angular/cdk/layout';
-import { ClipboardModule } from 'ngx-clipboard';
 
 import { ALL_OPERATORS, OperatorDoc } from '../../operator-docs';
 import { OperatorsRoutingModule } from './operators-routing.module';
@@ -41,13 +40,7 @@ import { MaterialModule } from '../material/material.module';
     HighlightJsDirective,
     SafeUrlPipe
   ],
-  imports: [
-    CommonModule,
-    MaterialModule,
-    OperatorsRoutingModule,
-    ClipboardModule,
-    LayoutModule
-  ],
+  imports: [CommonModule, MaterialModule, OperatorsRoutingModule, LayoutModule],
   providers: [
     { provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS },
     { provide: OPERATOR_TOKEN, useValue: ALL_OPERATORS }