Merge branch 'copy-button-merge'

Author: carols10cents

app/styles/crate.scss

@@ -241,13 +241,35 @@
             color: white;
             padding: 20px;
         }
-
+        button, button:active {
+            padding: 5px 0;
+            background-color: #FFFFFF;
+            border: none;
+            width: 60px;
+            cursor: pointer;
+        }
+        button:hover {
+            background: #edebdd;
+        }
         @media only screen and (min-width: 500px) {
             .action { @include flex(2); display: block; }
             code { @include flex(8); }
         }
     }
+    .copy-result {
+        text-align: right;
 
+        span {
+            font-size: 80%;
+            font-weight: bold;
+        }
+        .copy-success {
+            color: $link-color;
+        }
+        .copy-failure {
+            color: red;
+        }
+    }
     .last-update {
         color: $main-color-light;
         font-size: 90%;

app/templates/crate/version.hbs

@@ -57,7 +57,13 @@
         {{/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 class="copy-result">
+            <span id="copy-notification"></span>
         </div>
     </div>
     <div class='authorship'>
@@ -271,3 +277,40 @@
     </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');
+    var notificationElement = document.getElementById('copy-notification');
+
+    clipboard.on('success', function(e) {
+        var successText = 'Copied !';
+
+        e.clearSelection();
+        notificationElement.classList.add('copy-success')
+        notificationElement.textContent = successText;
+        fadeOffElement(notificationElement, 2000);
+    });
+
+    clipboard.on('error', function(e) {
+        var failureText = 'An error occured. Please use CTRL+C.';
+
+        notificationElement.classList.add('copy-failure')
+        notificationElement.textContent = failureText;
+        fadeOffElement(notificationElement, 2000);
+    });
+
+    function fadeOffElement(element, delay) {
+        setTimeout(function() {
+            resetElement(element);
+        }, delay);
+    }
+
+    function resetElement(element) {
+        element.innerHTML = '';
+        element.className = '';
+    }
+</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();
 };