Merge pull request #129 from colkito/feature/copy-to-clipboard

SUPER COOL!!

app/views/includes/foot.jade

@@ -4,13 +4,13 @@
 //script(type='text/javascript', src='/lib/bootstrap/dist/js/bootstrap.min.js')
 script(type='text/javascript', src='/socket.io/socket.io.js')
 script(type='text/javascript', src='/lib/momentjs/moment.js')
+script(type='text/javascript', src='/lib/qrcode-generator/js/qrcode.js')
+script(type='text/javascript', src='/lib/zeroclipboard/ZeroClipboard.min.js')
 
 //AngularJS
 script(type='text/javascript', src='/lib/angular/angular.js')
-script(type='text/javascript', src='/lib/angular-cookies/angular-cookies.js')
 script(type='text/javascript', src='/lib/angular-resource/angular-resource.js')
 script(type='text/javascript', src='/lib/angular-route/angular-route.js')
-script(type='text/javascript', src='/lib/qrcode-generator/js/qrcode.js')
 script(type='text/javascript', src='/lib/angular-qrcode/qrcode.js')
 script(type='text/javascript', src='/lib/angular-animate/angular-animate.js')
 

bower.json

@@ -12,6 +12,7 @@
     "angular-ui-utils": "0.1.0",
     "angular-qrcode": "latest",
     "angular-animate": "latest",
-    "momentjs": "~2.5.0"
+    "momentjs": "~2.5.0",
+    "zeroclipboard": "~1.3.0-beta.1"
   }
 }

public/css/common.css

@@ -391,4 +391,13 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   color: black;
 }
 
-
+.btn-copy {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  background: #FFFFFF;
+  border-radius: 2px;
+  border: 2px solid #E4E4E4;
+  color: #9b9b9b;
+  margin-left: 5px;
+  padding: 2px 6px;
+}

public/js/app.js

@@ -1,20 +1,19 @@
 'use strict';
 
-angular.module('insight',
+angular.module('insight',[
-    ['ngAnimate',
+  'ngAnimate',
-    'ngCookies',
+  'ngResource',
-    'ngResource',
+  'ngRoute',
-    'ngRoute',
+  'ui.bootstrap',
-    'ui.bootstrap',
+  'ui.route',
-    'ui.route',
+  'monospaced.qrcode',
-    'insight.system',
+  'insight.system',
-    'insight.socket',
+  'insight.socket',
-    'insight.blocks',
+  'insight.blocks',
-    'insight.transactions',
+  'insight.transactions',
-    'monospaced.qrcode',
+  'insight.address',
-    'insight.address',
+  'insight.search',
-    'insight.search',
+  'insight.status'
-    'insight.status'
 ]);
 
 angular.module('insight.system', []);

public/js/directives.js

@@ -1,25 +1,58 @@
 'use strict';
 
-angular.module('insight.address').directive('whenScrolled', ['$window', function($window) {
+var ZeroClipboard = window.ZeroClipboard;
-  return {
-    link: function(scope, elm, attr) {
-      var pageHeight, clientHeight, scrollPos;
-      $window = angular.element($window);
 
-      var handler = function() {
+angular.module('insight')
-        pageHeight = window.document.documentElement.scrollHeight;
+  .directive('whenScrolled', ['$window', function($window) {
-        clientHeight = window.document.documentElement.clientHeight;
+    return {
-        scrollPos = window.pageYOffset;
+      restric: 'A',
+      link: function(scope, elm, attr) {
+        var pageHeight, clientHeight, scrollPos;
+        $window = angular.element($window);
 
-        if (pageHeight - (scrollPos + clientHeight) === 0) {
+        var handler = function() {
-          scope.$apply(attr.whenScrolled);
+          pageHeight = window.document.documentElement.scrollHeight;
-        }
+          clientHeight = window.document.documentElement.clientHeight;
-      };
+          scrollPos = window.pageYOffset;
 
-      $window.on('scroll', handler);
+          if (pageHeight - (scrollPos + clientHeight) === 0) {
-      scope.$on('$destroy', function() {
+            scope.$apply(attr.whenScrolled);
-        return $window.off('scroll', handler);
+          }
-      });
+        };
-    }
+
-  };
+        $window.on('scroll', handler);
-}]);
+        scope.$on('$destroy', function() {
+          return $window.off('scroll', handler);
+        });
+      }
+    };
+  }])
+  .directive('clipCopy', [function() {
+    ZeroClipboard.config({
+      moviePath: '../lib/zeroclipboard/ZeroClipboard.swf',
+      trustedDomains: ['*'],
+      allowScriptAccess: 'always',
+      forceHandCursor: true
+    });
+
+    return {
+      restric: 'A',
+      scope: { clipCopy: '=clipCopy' },
+      link: function(scope, elm) {
+        var clip = new ZeroClipboard(elm);
+
+        clip.on('load', function(client) {
+          var onMousedown = function(client) {
+            client.setText(scope.clipCopy);
+          };
+
+          client.on('mousedown', onMousedown);
+
+          scope.$on('$destroy', function() {
+            client.off('mousedown', onMousedown);
+            client.unglue(elm);
+          });
+        });
+      }
+    };
+  }]);

public/views/footer.html

@@ -1,3 +1,3 @@
 <div class="container">
-	<a class="insight m10v pull-right" href="/"><small>Insight</small></a>
+	<a class="insight m10v pull-right" href="/"><small>Insight v0.0.1</small></a>
 </div>

public/views/transaction/tx.html

@@ -1,7 +1,7 @@
   <div class="line-bot">
-    <a href="/#!/tx/{{tx.txid}}">{{tx.txid}}</a>
+    <a href="/#!/tx/{{tx.txid}}">{{tx.txid}}</a> <a href="#" class="btn-copy" clip-copy="tx.txid"><span class="glyphicon glyphicon-paperclip"></span></a>
     <a class="pull-right" style="margin-left:10px" data-ng-click="itemsExpanded = !itemsExpanded">
-      <span class="glyphicon" data-ng-class="{'glyphicon-minus-sign': itemsExpanded, 'glyphicon-plus-sign': !itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="down"></span>
+      <span class="glyphicon" data-ng-class="{'glyphicon-minus-sign': itemsExpanded, 'glyphicon-plus-sign': !itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="left"></span>
     </a>
     <span class="pull-right">{{tx.time * 1000 | date:'medium'}}</span>
   </div>