Use ClipboardJS for HTML5 copy

.gitignore

@@ -47,3 +47,4 @@ public/css/main.css
 README.html
 po/*
 !po/*.po
+*.codekit3

package.json

@@ -1,7 +1,7 @@
 {
   "name": "flosight-ui",
   "description": "An open-source frontend for the Flosight API. The Flosight API provides you with a convenient, powerful and simple way to query and broadcast data on the florincoin network and build your own services with it.",
-  "version": "5.0.0-beta.65",
+  "version": "5.0.0-beta.66",
   "repository": "git://github.com/bitpay/flosight-ui.git",
   "bugs": {
     "url": "https://github.com/bitpay/flosight-ui/issues"

public/index-template.html

@@ -70,5 +70,6 @@
 	<script src="js/vendors.min.js"></script>
 	<script src="js/angularjs-all.min.js"></script>
 	<script src="js/main.min.js"></script>
+  <script src="js/clipboard.min.js"></script>
 </body>
 </html>

public/src/js/directives.js

@@ -40,36 +40,29 @@ angular.module('flosight')
       }
     };
   })
-  .directive('clipCopy', function() {
+  .directive('dataClipboardText', function() {
-    ZeroClipboard.config({
-      moviePath: '/lib/zeroclipboard/ZeroClipboard.swf',
-      trustedDomains: ['*'],
-      allowScriptAccess: 'always',
-      forceHandCursor: true
-    });
-
     return {
       restric: 'A',
-      scope: { clipCopy: '=clipCopy' },
+      scope: { dataClipboardText: '=dataClipboardText' },
       template: '<div class="tooltip fade right in"><div class="tooltip-arrow"></div><div class="tooltip-inner">Copied!</div></div>',
       link: function(scope, elm) {
-        var clip = new ZeroClipboard(elm);
+        var clip = new ClipboardJS(elm);
 
-        clip.on('load', function(client) {
+        // clip.on('load', function(client) {
-          var onMousedown = function(client) {
+        //   var onMousedown = function(client) {
-            client.setText(scope.clipCopy);
+        //     client.setText(scope.clipCopy);
-          };
+        //   };
 
-          client.on('mousedown', onMousedown);
+        //   client.on('mousedown', onMousedown);
 
-          scope.$on('$destroy', function() {
+        //   scope.$on('$destroy', function() {
-            client.off('mousedown', onMousedown);
+        //     client.off('mousedown', onMousedown);
-          });
+        //   });
-        });
+        // });
 
-        clip.on('noFlash wrongflash', function() {
+        // clip.on('noFlash wrongflash', function() {
-          return elm.remove();
+        //   return elm.remove();
-        });
+        // });
       }
     };
   })

public/views/address.html

@@ -4,7 +4,7 @@
     <div class="container" data-ng-if="!hideSNavbar">
       <div class="col-md-8 text-left">
           <h3 translate>Address</h3> {{address.addrStr}}
-          <span class="btn-copy" clip-copy="address.addrStr"></span>
+          <span class="btn-copy" data-clipboard-text="address.addrStr"></span>
       </div>
       <div class="col-md-4">
         <span class="txvalues txvalues-primary"><strong translate>Final Balance</strong> {{$root.currency.getConvertion(address.balance) || address.balance + ' BTC' }}</span>
@@ -25,7 +25,7 @@
     <div class="well well-sm ellipsis">
       <strong translate>Address</strong> 
       <span class="text-muted">{{address.addrStr}}</span>
-      <span class="btn-copy" clip-copy="address.addrStr"></span>
+      <span class="btn-copy" data-clipboard-text="address.addrStr"></span>
     </div>
     <h2 translate>Summary <small>confirmed</small></h2>
     <div class="row" data-ng-hide="!address.addrStr">

public/views/block.html

@@ -15,7 +15,7 @@
                 <strong>Hash</strong> {{block.hash}}
             </p>
             <div class="col-md-1 text-left">
-                <span class="btn-copy" clip-copy="block.hash"></span>
+                <span class="btn-copy" data-clipboard-text="block.hash"></span>
             </div>
           </div>
         </div>
@@ -39,7 +39,7 @@
     <div class="well well-sm ellipsis">
       <strong>BlockHash</strong> 
       <span class="txid text-muted">{{block.hash}}</span>
-      <span class="btn-copy" clip-copy="block.hash"></span>
+      <span class="btn-copy" data-clipboard-text="block.hash"></span>
     </div>
     <h2 translate>Summary</h2>
     <div class="row">
@@ -75,7 +75,7 @@
             <td><strong>Merkle Root</strong></td>
             <td class="text-right text-muted">
               <div class="ellipsis">
-                <span class="btn-copy" clip-copy="block.merkleroot"></span>
+                <span class="btn-copy" data-clipboard-text="block.merkleroot"></span>
                 <span>{{block.merkleroot}}</span>
               </div>
             </td>

public/views/transaction.html

@@ -6,7 +6,7 @@
           <h3 translate>Transaction</h3>
           <div class="ellipsis"> 
             <small>{{tx.txid}}</small> 
-            <span class="btn-copy" clip-copy="tx.txid"></span>
+            <span class="btn-copy" data-clipboard-text="tx.txid"></span>
           </div>
       </div>
       <div class="col-md-6 col-lg-5 text-right">
@@ -43,7 +43,7 @@
       <div class="well well-sm ellipsis">
         <strong translate>Transaction</strong> 
         <span class="txid text-muted">{{tx.txid}}</span>
-        <span class="btn-copy" clip-copy="tx.txid"></span>
+        <span class="btn-copy" data-clipboard-text="tx.txid"></span>
       </div>
       <h2 translate>Summary</h2>
       <table class="table" style="table-layout: fixed">
@@ -82,7 +82,7 @@
           <td><strong>Coinbase</strong></td>
           <td class="text-muted text-right">
             <div class="ellipsis">
-                <span class="btn-copy ng-isolate-scope" clip-copy="tx.vin[0].coinbase"></span>
+                <span class="btn-copy ng-isolate-scope" data-clipboard-text="tx.vin[0].coinbase"></span>
                 <span class="ng-binding">{{tx.vin[0].coinbase}}</span>
             </div>
           </td>

public/views/transaction/tx.html

@@ -5,7 +5,7 @@
         <span class="glyphicon glyphicon-plus-sign" data-ng-class="{'glyphicon-minus-sign': itemsExpanded}"></span>
       </a>
       <a href="tx/{{tx.txid}}">{{tx.txid}}</a>
-      <span class="btn-copy" clip-copy="tx.txid"></span>
+      <span class="btn-copy" data-clipboard-text="tx.txid"></span>
     </div>
   </div>
   <div class="col-xs-5 col-md-4 text-right text-muted">
@@ -95,7 +95,7 @@
             <p><strong>scriptSig</strong></p>
               <div data-ng-repeat="item in vin.scriptSig.asm | split:' '" class="">
                 <p class="col-md-11 ellipsis text-muted">{{item}}</p>
-                <p class="btn-copy" clip-copy="item"></p>
+                <p class="btn-copy" data-clipboard-text="item"></p>
               </div>
           </div>
         </div>
@@ -175,7 +175,7 @@
               <div class="small">
                 <p><strong>scriptPubKey</strong></p>
                 <span class="col-md-11 text-muted ellipsis">{{vout.scriptPubKey.asm}}</span>
-                <span class="btn-copy col-md-1" clip-copy="vout.scriptPubKey.asm"></span>
+                <span class="btn-copy col-md-1" data-clipboard-text="vout.scriptPubKey.asm"></span>
               </div>
           </div>
         </div>
@@ -194,7 +194,7 @@
 
 <div class="well well-sm bgwhite ellipsis" data-ng-if="itemsExpanded && !block.hash && tx.blockhash">
   <strong translate>Included in Block</strong> <a class="text-muted" href="block/{{tx.blockhash}}">{{tx.blockhash}}</a>
-  <span class="btn-copy" clip-copy="tx.blockhash"></span>
+  <span class="btn-copy" data-clipboard-text="tx.blockhash"></span>
 </div>
 
 <div class="line-top row" data-ng-hide="!tx">
@@ -214,7 +214,7 @@
     <div class="well well-sm" style="margin: 0px 10px">
       <strong>floData: </strong> 
       <span class="text-muted ng-binding" style="word-break: break-all">{{tx.floData}}</span>
-      <span class="btn-copy" clip-copy="tx.floData"></span>
+      <span class="btn-copy" data-clipboard-text="tx.floData"></span>
     </div>
   </div>
 </div>