Add Copy to Clipboard button

rmzelle · Oct 15, 2016 · f98a973 · f98a973
1 parent 0fe1103
commit f98a973
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
     <script src="libraries/mammoth.browser.min.js"></script>
 </head>
 
@@ -34,10 +35,10 @@
             </div>
             <div class="form-group">
                 <div class="col-sm-offset-1">
-                    <label>Step 2. Download the extracted references</label>
+                    <label>Step 2. Download or copy the extracted references</label>
                     <div>
                         <button id="download" type="button" class="btn btn-primary" disabled>Download</button>
-                        <!-- <button id="copy_to_clipboard" type="button" class="btn btn-primary" disabled>Copy to clipboard</button> -->
+                        <button id="copy_to_clipboard" data-clipboard-text="" type="button" class="btn btn-primary" disabled>Copy to clipboard</button>
                     </div>
                     <p id="extract_count" class="help-block">No references extracted.</p>
                 </div>

diff --git a/libraries/ref-extractor.js b/libraries/ref-extractor.js
@@ -68,19 +68,23 @@ function processExtractedFields(result) {
     if (zoteroFields.length > 0) {
         extractedFieldsString = JSON.stringify(zoteroFields);
 
+        document.getElementById("copy_to_clipboard").setAttribute("data-clipboard-text", extractedFieldsString);
+
         if (zoteroFields.length == 1) {
             document.getElementById("extract_count").innerHTML = "1 reference extracted.";
         } else {
             document.getElementById("extract_count").innerHTML = zoteroFields.length + " references extracted.";
         }
 
         document.getElementById("download").removeAttribute("disabled");
-        //document.getElementById("copy_to_clipboard").removeAttribute("disabled");
+        document.getElementById("copy_to_clipboard").removeAttribute("disabled");
     } else {
+        document.getElementById("copy_to_clipboard").setAttribute("data-clipboard-text", "");
+
         document.getElementById("extract_count").innerHTML = "No references extracted.";
 
-        document.getElementById("download").setAttribute("disabled", "disabled");
-        //document.getElementById("copy_to_clipboard").setAttribute("disabled");
+        document.getElementById("download").setAttribute("disabled", "true");
+        document.getElementById("copy_to_clipboard").setAttribute("disabled", "true");
     }
 }
 
@@ -91,4 +95,16 @@ document.getElementById("download").addEventListener("click", function(){
     saveAs(blob, "ref-extracts.json");
 });
 
+var clipboard = new Clipboard('#copy_to_clipboard');
+
+// Provide some feedback on button click
+clipboard.on('success', function(e) {
+    var copyButton = document.getElementById("copy_to_clipboard");
+    var oldButtonText = copyButton.innerHTML;
+    copyButton.innerHTML = "Copied!";
+    window.setTimeout(function () {
+        copyButton.innerHTML = oldButtonText;
+    }, 2000);
+});
+
 }());