[update] Add copy button

site/public/javascript/application/application.js

@@ -1,7 +1,8 @@
 var application = angular.module(
     'application',
     [
-        'hljs'
+        'hljs',
+        'angular-clipboard'
     ]
 );
 

site/public/javascript/controllers/project.js

@@ -4,7 +4,8 @@ application.controller(
         '$scope',
         '$interval',
         'project',
-        function( $scope, $interval, project )
+        'clipboard',
+        function( $scope, $interval, project, clipboard )
         {
             // Every 5 seconds
             $interval( function()
@@ -90,6 +91,19 @@ application.controller(
                 $scope.file.notif = 0;
             };
 
+            $scope.copy           = {};
+            $scope.copy.text      = 'copy';
+            $scope.copy.supported = clipboard.supported;
+            $scope.copy_to_clipboard_click = function()
+            {
+                $scope.copy.text = 'copied';
+                clipboard.copyText( $scope.version.content );
+            };
+            $scope.copy_to_clipboard_mouseleave = function()
+            {
+                $scope.copy.text = 'copy';
+            };
+
             $scope.init = function( project_slug )
             {
                 project.connect( project_slug );

site/public/stylus/pages/project.styl

@@ -335,11 +335,11 @@ body.project
                 left 200px
                 right 0
                 height 30px
-                line-height 30px
                 background #4d5b8d
                 text-align center
 
                 .content
+                    line-height 30px
                     display inline-block
 
                     .path
@@ -350,6 +350,22 @@ body.project
                     .name
                         display inline-block
                         font-weight bold
+                
+                .right-buttons
+                    position absolute
+                    top 0
+                    right 2px
+                    
+                    .button
+                        display inline-block
+                        margin 4px 2px
+                        padding 5px 10px
+                        background rgba(128,147,232,0.2)
+                        text-decoration none
+                        transition background 0.15s
+                        will-change background
+                        &:hover
+                            background rgba(128,147,232,0.30)
 
             nav.versions-nav
                 position absolute

site/public/vendors/angular/angular-clipboard.js

@@ -0,0 +1,82 @@
+(function (root, factory) {
+    /* istanbul ignore next */
+    if (typeof define === 'function' && define.amd) {
+        define(['angular'], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        module.exports = factory(require('angular'));
+    } else {
+        root.angularClipboard = factory(root.angular);
+  }
+}(this, function (angular) {
+
+return angular.module('angular-clipboard', [])
+    .factory('clipboard', ['$document', '$window', function ($document, $window) {
+        function createNode(text, context) {
+            var node = $document[0].createElement('textarea');
+            node.style.position = 'absolute';
+            node.textContent = text;
+            node.style.left = '-10000px';
+            node.style.top = ($window.pageYOffset || $document[0].documentElement.scrollTop) + 'px';
+            return node;
+        }
+
+        function copyNode(node) {
+            try {
+                // Set inline style to override css styles
+                $document[0].body.style.webkitUserSelect = 'initial';
+
+                var selection = $document[0].getSelection();
+                selection.removeAllRanges();
+                node.select();
+
+                if(!$document[0].execCommand('copy')) {
+                    throw('failure copy');
+                }
+                selection.removeAllRanges();
+            } finally {
+                // Reset inline style
+                $document[0].body.style.webkitUserSelect = '';
+            }
+        }
+
+        function copyText(text, context) {
+            var node = createNode(text, context);
+            $document[0].body.appendChild(node);
+            copyNode(node);
+            $document[0].body.removeChild(node);
+        }
+
+        return {
+            copyText: copyText,
+            supported: 'queryCommandSupported' in $document[0] && $document[0].queryCommandSupported('copy')
+        };
+    }])
+    .directive('clipboard', ['clipboard', function (clipboard) {
+        return {
+            restrict: 'A',
+            scope: {
+                onCopied: '&',
+                onError: '&',
+                text: '=',
+                supported: '=?'
+            },
+            link: function (scope, element) {
+                scope.supported = clipboard.supported;
+
+                element.on('click', function (event) {
+                    try {
+                        clipboard.copyText(scope.text, element[0]);
+                        if (angular.isFunction(scope.onCopied)) {
+                            scope.$evalAsync(scope.onCopied());
+                        }
+                    } catch (err) {
+                        if (angular.isFunction(scope.onError)) {
+                            scope.$evalAsync(scope.onError({err: err}));
+                        }
+                    }
+                });
+            }
+        };
+    }]);
+
+}));