New directive copy-to-clipboard multiplatform

Gruntfile.js

@@ -115,6 +115,8 @@ module.exports = function(grunt) {
           'bower_components/angular-qrcode/angular-qrcode.js',
           'bower_components/angular-gettext/dist/angular-gettext.js',
           'bower_components/ng-csv/build/ng-csv.js',
+          'bower_components/ionic-toast/dist/ionic-toast.bundle.min.js',
+          'bower_components/angular-clipboard/angular-clipboard.js',
           'bower_components/angular-mocks/angular-mocks.js',
           'angular-pbkdf2/angular-pbkdf2.js',
           'angular-bitcore-wallet-client/angular-bitcore-wallet-client.js'

bower.json

@@ -16,7 +16,9 @@
     "ng-lodash": "0.2.3",
     "qrcode-decoder-js": "*",
     "trezor-connect": "~1.0.1",
-    "ng-csv": "~0.3.6"
+    "ng-csv": "~0.3.6",
+    "ionic-toast": "^0.4.1",
+    "angular-clipboard": "^1.4.2"
   },
   "resolutions": {
     "angular": "1.5.3"

public/views/includes/confirm-tx.html

@@ -7,7 +7,7 @@
   <div class="size-36">{{tx.amountStr}}</div>
   <div class="size-12 label gray radius" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
   <i class="db fi-arrow-down size-24 m10v"></i>
-  <div class="payment-proposal-to" ng-click="copyToClipboard(tx.toAddress, $event)">
+  <div class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
     <i class="fi-bitcoin left m10l"></i>
     <contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b m15l size-14" address="{{tx.toAddress}}"></contact>
     <span ng-if="tx.hasMultiplesOutputs" translate>

public/views/includes/output.html

@@ -1,14 +1,14 @@
-<li class="p10 oh" ng-click="copyToClipboard(output.toAddress, $event)">
+<li class="p10 oh" copy-to-clipboard="output.toAddress">
   <span class="text-gray" translate>To</span>:
   <span class="right enable_text_select">{{output.toAddress || output.address}}</span>
 </li>
-<li class="p10" ng-click="copyToClipboard(output.amountStr, $event)">
+<li class="p10" copy-to-clipboard="output.amountStr">
   <span class="text-gray" translate>Amount</span>:
   <span class="right enable_text_select">{{output.amountStr}}
     <span ng-show="output.alternativeAmountStr" class="label gray radius">{{output.alternativeAmountStr}}</span>
   </span>
 </li>
-<li class="p10 oh" ng-click="copyToClipboard(output.message, $event)">
+<li class="p10 oh" copy-to-clipboard="output.message">
   <span class="text-gray" translate>Note</span>:
   <span class="right enable_text_select">{{output.message}}</span>
 </li>

public/views/modals/tx-details.html

@@ -25,7 +25,7 @@
             <p class="m0 text-gray size-14" translate>Moved</p>
           </div>
 
-          <div class="size-36" ng-click="copyToClipboard(btx.amountStr, $event)">
+          <div class="size-36" copy-to-clipboard="btx.amountStr">
             <span class="enable_text_select">{{btx.amountStr}}</span>
           </div>
           <div class="alternative-amount" ng-click="showRate=!showRate" ng-init="showRate = false">
@@ -46,7 +46,7 @@
 
       <ul class="no-bullet size-14 m0">
         <li ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh"
-          ng-click="copyToClipboard(btx.addressTo, $event)">
+          copy-to-clipboard="btx.addressTo">
           <span class="text-gray" translate>To</span>
           <span class="right">
             <span ng-if="btx.merchant">
@@ -89,19 +89,19 @@
         </li>
 
         <li class="line-b p10" ng-show="btx.action != 'received'"
-          ng-click="copyToClipboard(btx.feeStr, $event)">
+          copy-to-clipboard="btx.feeStr">
           <span class="text-gray" translate>Fee</span>
           <span class="right enable_text_select">{{btx.feeStr}}</span>
         </li>
 
         <li class="line-b p10 oh" ng-if="btx.message && btx.action != 'received'"
-          ng-click="copyToClipboard(btx.message, $event)">
+          copy-to-clipboard="btx.message">
           <span class="text-gray" translate>Description</span>
           <span class="right enable_text_select">{{btx.message}}</span>
         </li>
 
         <li ng-if="btx.merchant" class="line-b p10 oh"
-          ng-click="copyToClipboard(btx.merchant.pr.pd.memo, $event)">
+          copy-to-clipboard="btx.merchant.pr.pd.memo">
           <span class="text-gray" translate>Merchant message</span>
           <span class="right enable_text_select">
             {{btx.merchant.pr.pd.memo}}

public/views/modals/txp-details.html

@@ -16,7 +16,7 @@
         <div class="size-36">{{tx.amountStr}}</div>
         <div class="size-14 text-light" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
         <i class="db fi-arrow-down size-24 m10v"></i>
-        <span class="payment-proposal-to" ng-click="copyToClipboard(tx.toAddress, $event)">
+        <span class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
           <i class="fi-bitcoin left"></i>
           <contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b size-14" address="{{tx.toAddress}}"></contact>
           <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>

public/views/preferencesInformation.html

@@ -18,7 +18,7 @@
           {{walletName}}
         </span>
       </div>
-      <div class="item" ng-click="copyToClipboard(walletId)">
+      <div class="item" copy-to-clipboard="walletId">
         <span translate>Wallet Id</span>
         <span class="item-note">
           {{walletId}}
@@ -81,7 +81,7 @@
         Extended Public Keys
       </div>
 
-      <div class="item" ng-repeat="pk in pubKeys" ng-click="copyToClipboard(pk)">
+      <div class="item" ng-repeat="pk in pubKeys" copy-to-clipboard="pk">
         <span translate>Copayer {{$index}}<</span>
         <i class="icon ion-ios-checkmark-outline"></i>
         <span class="item-note">
@@ -96,7 +96,7 @@
           Last Wallet Addresses
         </div>
 
-        <div class="item" ng-repeat="a in addrs" class="oh" ng-click="copyToClipboard(a.address)">
+        <div class="item" ng-repeat="a in addrs" class="oh" copy-to-clipboard="a.address">
         <span>{{a.address}}</span>
         <span>{{a.path}} &middot;  {{a.createdOn *1000  | amDateFormat:'MMMM Do YYYY, h:mm a' }}</span>
         <i class="icon ion-ios-checkmark-outline"></i>
@@ -115,7 +115,7 @@
         <div class="item item-divider">
           Balance By Address
         </div>
-        <div class="item" ng-repeat="a in wallet.balanceByAddress" ng-click="copyToClipboard(a.address)">
+        <div class="item" ng-repeat="a in wallet.balanceByAddress" copy-to-clipboard="a.address">
           <span>{{a.address}}</span>
           <span class="item-note">
             {{(a.amount/1e8).toFixed(8)}} BTC

public/views/tab-receive.html

@@ -6,7 +6,7 @@
 
   <ion-content ng-controller="tabReceiveController" ng-init="init()"  cache-view="false">
 
-    <div class="text-center m30v" ng-click="copyToClipboard(addr, $event)" ng-show="addr" >
+    <div class="text-center m30v" copy-to-clipboard="addr" ng-show="addr" >
       <qrcode size="220" data="bitcoin:{{addr}}" ng-show="addr"></qrcode>
     </div>
 
@@ -50,7 +50,8 @@ Error: {{addrError}}
       </div>
       <div class="item item-icon-left">
         <i class="icon ion-social-bitcoin-outline"></i>
-        {{generatingAddress ? '...' : addr}}
+        <span ng-show="generatingAddress">...</span>
+        <span ng-show="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
       </div>
     </div>
     <div class="item item-text-wrap" ng-style="{'height' : '200px'}">

src/js/app.js

@@ -5,6 +5,8 @@ var modules = [
   'monospaced.qrcode',
   'gettext',
   'ionic',
+  'ionic-toast',
+  'angular-clipboard',
   'ngLodash',
   'ngCsv',
   'bwcModule',

src/js/controllers/modals/txDetails.js

@@ -85,11 +85,6 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
     return n.substring(0, 4);
   };
 
-  $scope.copyToClipboard = function(addr, $event) {
-    if (!addr) return;
-    self.copyToClipboard(addr, $event);
-  };
-
   $scope.cancel = function() {
     $scope.txDetailsModal.hide();
   };

src/js/controllers/modals/txpDetails.js

@@ -8,7 +8,7 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
   var now = Math.floor(Date.now() / 1000);
   $scope.loading = null;
 
-  
+
   $scope.copayerId = $scope.wallet.credentials.copayerId;
   $scope.isShared =  $scope.wallet.credentials.n > 1;
   $scope.canSign =  $scope.wallet.canSign() ||  $scope.wallet.isPrivKeyExternal();
@@ -187,11 +187,6 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
     });
   };
 
-  $scope.copyToClipboard = function(addr, $event) {
-    if (!addr) return;
-    self.copyToClipboard(addr, $event);
-  };
-
   $scope.close = function(txp) {
     $scope.loading = null;
     if (txp) {

src/js/controllers/preferencesInformation.js

@@ -113,13 +113,6 @@ angular.module('copayApp.controllers').controller('preferencesInformation',
       save('#202020');
     };
 
-    $scope.copyToClipboard = function(data) {
-      if ($scope.isCordova) {
-        window.cordova.plugins.clipboard.copy(data);
-        window.plugins.toast.showShortCenter(gettextCatalog.getString('Copied to clipboard'));
-      }
-    };
-
     $scope.scan = function() {
       walletService.startScan(wallet);
       $state.go('tabs.home');

src/js/controllers/tab-receive.js

@@ -32,39 +32,6 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
     });
   }
 
-  $scope.copyToClipboard = function(addr, $event) {
-
-    var showPopover = function() {
-
-      $ionicPopover.fromTemplateUrl('views/includes/copyToClipboard.html', {
-        scope: $scope
-      }).then(function(popover) {
-        $scope.popover = popover;
-        $scope.popover.show($event);
-      });
-
-      $scope.close = function() {
-        $scope.popover.hide();
-      }
-
-      $timeout(function() {
-        $scope.popover.hide(); //close the popover after 0.7 seconds
-      }, 700);
-
-      $scope.$on('$destroy', function() {
-        $scope.popover.remove();
-      });
-    };
-
-    if ($scope.isCordova) {
-      window.cordova.plugins.clipboard.copy(addr);
-      window.plugins.toast.showShortCenter(gettextCatalog.getString('Copied to clipboard'));
-    } else if ($scope.isNW) {
-      nodeWebkit.writeToClipboard(addr);
-      showPopover($event);
-    }
-  };
-
   $scope.shareAddress = function(addr) {
     if ($scope.isCordova) {
       window.plugins.socialsharing.share('bitcoin:' + addr, null, null, null);

src/js/directives/copyToClipboard.js

@@ -0,0 +1,39 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  .directive('copyToClipboard', function(platformInfo, gettextCatalog, ionicToast, clipboard) {
+    return {
+      restrict: 'A',
+      scope: {
+        copyToClipboard: '=copyToClipboard'
+      },
+      link: function(scope, elem, attrs, ctrl) {
+        var isCordova = platformInfo.isCordova;
+        var isChromeApp = platformInfo.isChromeApp;
+        var isNW = platformInfo.isNW;
+        elem.bind('mouseover', function() {
+          elem.css('cursor', 'pointer');
+        });
+
+        var msg = gettextCatalog.getString('Copied to clipboard');
+        elem.bind('click', function() {
+          var data = scope.copyToClipboard;
+          if (isCordova) {
+            window.cordova.plugins.clipboard.copy(data);
+            window.plugins.toast.showShortCenter(msg);
+          } else if (isNW) {
+            nodeWebkit.writeToClipboard(data);
+            scope.$apply(function() {
+              ionicToast.show(msg, 'bottom', false, 1000);
+            });
+          } else if (clipboard.supported) {
+            clipboard.copyText(data);
+            scope.$apply(function() {
+              ionicToast.show(msg, 'bottom', false, 1000);
+            });
+          }
+        });
+      }
+    }
+  });
+

test/karma.conf.js

@@ -24,6 +24,8 @@ module.exports = function(config) {
       'bower_components/angular-qrcode/angular-qrcode.js',
       'bower_components/angular-gettext/dist/angular-gettext.js',
       'bower_components/ng-csv/build/ng-csv.js',
+      'bower_components/ionic-toast/dist/ionic-toast.bundle.min.js',
+      'bower_components/angular-clipboard/angular-clipboard.js',
       'bower_components/angular-mocks/angular-mocks.js',
       'angular-pbkdf2/angular-pbkdf2.js',
       'angular-bitcore-wallet-client/angular-bitcore-wallet-client.js',