Merge pull request #7098 from cmgustavo/v4-14

Copy to clipboard directive

package.json

@@ -111,7 +111,6 @@
     "ionic-plugin-keyboard": "^2.2.1",
     "ionicons": "^3.0.0",
     "lodash": "^4.17.4",
-    "ngx-clipboard": "^8.1.1",
     "preconditions": "^2.2.0",
     "rxjs": "^5.5.2",
     "simple-plist": "^0.2.1",

src/app/app.module.ts

@@ -94,10 +94,18 @@ import { TxConfirmNotificationProvider } from '../providers/tx-confirm-notificat
 import { TxFormatProvider } from '../providers/tx-format/tx-format';
 import { WalletProvider } from '../providers/wallet/wallet';
 
+/* Directives */
+
+import { CopyToClipboard } from '../directives/copy-to-clipboard/copy-to-clipboard';
+
 export function createTranslateLoader(http: HttpClient) {
   return new TranslatePoHttpLoader(http, 'assets/i18n', '.po');
 }
 
+let directives: any = [
+  CopyToClipboard
+];
+
 let pages: any = [
   AddPage,
   ChooseFeeLevelPage,
@@ -187,7 +195,7 @@ let providers: any = [
 ];
 
 export function declarationsComponents() {
-  return pages;
+  return pages.concat(directives);
 }
 
 export function entryComponents() {

src/directives/copy-to-clipboard/copy-to-clipboard.ts

@@ -0,0 +1,56 @@
+import { DOCUMENT } from "@angular/platform-browser";
+import { Directive, Inject } from '@angular/core';
+import { ToastController } from 'ionic-angular';
+import { Clipboard } from '@ionic-native/clipboard';
+import { PlatformProvider } from '../../providers/platform/platform';
+
+@Directive({
+  selector: '[copy-to-clipboard]', // Attribute selector
+  inputs: [ 'value: copy-to-clipboard' ],
+  host: {
+    '(click)': 'copy()'
+  }
+})
+export class CopyToClipboard {
+
+  public value: string;
+  private dom: Document;
+  private isCordova: boolean;
+  private isNW: boolean;
+
+  constructor(
+    @Inject( DOCUMENT ) dom: Document,
+    public toastCtrl: ToastController,
+    public clipboard: Clipboard,
+    public platform: PlatformProvider
+  ) {
+    console.log('Hello CopyToClipboardDirective Directive');
+    this.isCordova = this.platform.isCordova;
+    this.isNW = this.platform.isNW;
+    this.dom = dom;
+  }
+
+  private copyBrowser() {
+    let textarea = this.dom.createElement('textarea');
+    this.dom.body.appendChild( textarea );
+    textarea.value = this.value;
+    textarea.select();
+    this.dom.execCommand('copy');
+  }
+
+  public copy() {
+    if (this.isCordova) {
+      this.clipboard.copy(this.value);
+    } else if (this.isNW) {
+      // TODO: Node-webkit won't be supported
+    } else {
+      this.copyBrowser();
+    }
+    let showSuccess = this.toastCtrl.create({
+      message: 'Copied to clipboard',
+      duration: 1000,
+    });
+    showSuccess.present();
+  }
+
+}

src/pages/receive/receive.html

@@ -14,8 +14,8 @@
     <ion-icon name="arrow-forward"></ion-icon>
   </div>
   <div *ngIf="wallet && wallet.isComplete()" class="qr-container">
-    <qr-code *ngIf="address" [value]="qrAddress" [level]="M" [size]="220" [foreground]="'#334'"></qr-code>
-    <div class="text-address">{{ address }}</div>
+    <qr-code *ngIf="address" copy-to-clipboard="{{ address }}" [value]="qrAddress" [level]="M" [size]="220" [foreground]="'#334'"></qr-code>
+    <div class="text-address" copy-to-clipboard="{{ address }}">{{ address }}</div>
     <button ion-button block clear [hidden]="!address" (click)="requestSpecificAmount()">
       <span translate>Request Specific amount</span>
       <ion-icon name="arrow-forward"></ion-icon>