Use ClipboardJS for HTML5 copy

This commit is contained in:
Sky Young 2018-05-22 11:21:57 -07:00
parent 52caae1d59
commit 7ec226faa2
9 changed files with 38 additions and 36 deletions

1
.gitignore vendored
View File

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

View File

@ -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"

View File

@ -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>

7
public/js/clipboard.min.js vendored Executable file

File diff suppressed because one or more lines are too long

View File

@ -40,36 +40,29 @@ angular.module('flosight')
}
};
})
.directive('clipCopy', function() {
ZeroClipboard.config({
moviePath: '/lib/zeroclipboard/ZeroClipboard.swf',
trustedDomains: ['*'],
allowScriptAccess: 'always',
forceHandCursor: true
});
.directive('dataClipboardText', function() {
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) {
var onMousedown = function(client) {
client.setText(scope.clipCopy);
};
// clip.on('load', function(client) {
// var onMousedown = function(client) {
// client.setText(scope.clipCopy);
// };
client.on('mousedown', onMousedown);
// client.on('mousedown', onMousedown);
scope.$on('$destroy', function() {
client.off('mousedown', onMousedown);
});
});
// scope.$on('$destroy', function() {
// client.off('mousedown', onMousedown);
// });
// });
clip.on('noFlash wrongflash', function() {
return elm.remove();
});
// clip.on('noFlash wrongflash', function() {
// return elm.remove();
// });
}
};
})

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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>