[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
@@ -351,6 +351,22 @@ body.project
                         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
                 top 0

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}));
+                        }
+                    }
+                });
+            }
+        };
+    }]);
+
+}));

site/views/pages/index/project.pug

@@ -88,6 +88,11 @@ div(ng-controller="ProjectController as controller",ng-init="init('" + project_s
                         | {{file.path.directory}}/
                     span.name
                         | {{file.name}}
+                .right-buttons
+                    a.button.default.copy-to-clipboard(href="#",ng-show="copy.supported",ng-click="copy_to_clipboard_click()",ng-mouseleave="copy_to_clipboard_mouseleave()")
+                        | {{copy.text}}
+                    //- a.button.default.download(href="#",ng-click="download_click()")
+                    //-     | download
             nav.versions-nav
                 a.version(href="#",ng-repeat="_version in file.versions",ng-click="version_click(_version)",ng-class="_version.active ? 'active' : 'inactive'")
                     .background

site/views/partials/header.pug

@@ -13,6 +13,7 @@ html(ng-app="application")
         script(src="/vendors/moment.min.js")
         script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js")
         script(src="/vendors/angular/angular-highlightjs.min.js")
+        script(src="/vendors/angular/angular-clipboard.js")
         script(src="/javascript/application/application.js")
         script(src="/javascript/controllers/project.js")
         script(src="/javascript/controllers/projects.js")