Issue #563.

A copy button is now displayed to the user if his browser supports ClipboardJS.

Has to be discussed now : how to inform the user that the content has actually been yanked.
    - tooltip: from scratch, using another library ?
    - display a message in an existing element of the page: where, and how to render it nicely ?

Author: tyr

app/styles/crate.scss

@@ -240,6 +240,9 @@
             color: white;
             padding: 20px;
         }
+        button {
+          padding:5px;
+        }
 
         @media only screen and (min-width: 500px) {
             .action { @include flex(2); display: block; }

app/templates/crate/version.hbs

@@ -57,7 +57,10 @@
         {{/if}}
         <div class='install'>
             <div class='action'>Cargo.toml</div>
-            <code>{{ crate.name }} = "{{ currentVersion.num }}"</code>
+            <code id="crate-toml">{{ crate.name }} = "{{ currentVersion.num }}"</code>
+            <button id="crate-download-button" data-clipboard-action="copy" data-clipboard-target="#crate-toml">
+                <img src="/assets/copy.svg" alt="Copy to clipboard" height="25px" />
+            </button>
         </div>
     </div>
     <div class='authorship'>
@@ -271,3 +274,19 @@
     </div>
 </div>
 {{/if}}
+
+<script type="text/javascript">
+  if (!Clipboard.isSupported()) {
+    document.getElementById('crate-download-button').classList.add('hidden');
+  }
+
+  var clipboard = new Clipboard('#crate-download-button');
+  clipboard.on('success', function(e) {
+      e.clearSelection();
+      // TODO : Add a tooltip to notify the user that it's copied
+  });
+  clipboard.on('error', function(e) {
+      // TODO : Add a tooltip to notify the user that the copy failed, so he will have to use CTRL+C
+  });
+
+</script>

bower.json

@@ -8,6 +8,7 @@
     "moment": "2.17.1",
     "moment-timezone": "0.5.11",
     "normalize-css": "5.0.0",
-    "pretender": "1.4.2"
+    "pretender": "1.4.2",
+    "clipboard": "1.6.0"
   }
 }

ember-cli-build.js

@@ -22,6 +22,6 @@ module.exports = function(defaults) {
 
   app.import('bower_components/moment/moment.js');
   app.import('bower_components/normalize-css/normalize.css');
-
+  app.import('bower_components/clipboard/dist/clipboard.js');
   return app.toTree();
 };