See #260 - adds 'copy to clipboard' in UI.

Why:

* So user can copy optimized content without downloading a file.

diff --git a/docs/css/home.css b/docs/css/home.css
index cf5de0d..cba6ed6 100644 (file)
--- a/docs/css/home.css
+++ b/docs/css/home.css
@@ -53,6 +53,15 @@ a, article, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, input, label, li,
   display: none;
 }
 
+.clipboard-copy {
+  border: none;
+  height: 2rem;
+  position: fixed;
+  right: -2rem;
+  top: 0;
+  width: 2rem;
+}
+
 .footer {
   text-align: center;
   margin-bottom: 2rem;

diff --git a/docs/index.html b/docs/index.html
index e8214f7..e2a6931 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -21,10 +21,12 @@
   <footer class="footer">
     Hosted with <span class="footer__heart">❤️</span> on <a href="//pages.github.com/">GitHub Pages.</a>
   </footer>
+  <textarea class="clipboard-copy"></textarea>
   <template class="dropped-file-template">
     <li class="dropped-files__file">
       <span class="dropped-files__file__name"></span>
       <a class="dropped-files__file__save" href="#" download="test.css">save</a>
+      <a class="dropped-files__file__copy" href="#" data-success-label="done!" data-error-label="oops! see console for details" data-original-label="copy to clipboard">copy to clipboard</a>
     </li>
   </template>
 </body>

diff --git a/docs/js/drag-drop.js b/docs/js/drag-drop.js
index 24f9d42..a1990f3 100644 (file)
--- a/docs/js/drag-drop.js
+++ b/docs/js/drag-drop.js
@@ -1,4 +1,6 @@
 (function () {
+  var COPY_TO_CLIPBOARD_RESET_DELAY = 2500
+
   var uniqueID = (function () {
     var UID = new Date().getTime()
 
@@ -57,10 +59,31 @@
   function optimizationCompleted(optimizationId, output) {
     var fileNode = document.querySelector('.dropped-files__file--' + optimizationId)
     var downloadNode = fileNode.querySelector('.dropped-files__file__save')
+    var copyToClipboardNode = fileNode.querySelector('.dropped-files__file__copy')
     var stylesBlob = new Blob([output.styles])
 
     fileNode.classList.add('dropped-files__file--optimized')
     downloadNode.href = URL.createObjectURL(stylesBlob)
+
+    copyToClipboardNode.addEventListener('click', function (event) {
+      var clipboardCopyNode = document.querySelector('.clipboard-copy')
+
+      event.preventDefault()
+      clipboardCopyNode.value = output.styles
+      clipboardCopyNode.select()
+
+      try {
+        document.execCommand('copy')
+        copyToClipboardNode.innerText = copyToClipboardNode.dataset.successLabel
+      } catch (e) {
+        console.error(e)
+        copyToClipboardNode.innerText = copyToClipboardNode.dataset.errorLabel
+      }
+
+      setTimeout(function () {
+        copyToClipboardNode.innerText = copyToClipboardNode.dataset.originalLabel
+      }, COPY_TO_CLIPBOARD_RESET_DELAY)
+    })
   }
 
   window.addEventListener('DOMContentLoaded', function () {