Add an option to 'copy to clipboard' (#37)

Author: arjunmahishi

index.html

@@ -43,6 +43,9 @@ <h2>Instantly convert <a href="http://curl.haxx.se/">curl</a> commands to <a hre
 
 		<main>
 			<textarea id="input" rows="4" placeholder="Paste curl here"></textarea>
+			<div class="copy-div">
+				<a href="javascript:" type="button" onclick="copyCode()">Copy to clipboard</a>
+			</div>
 			<div id="output"></div>
 		</main>
 

resources/css/common.css

@@ -94,3 +94,11 @@ footer {
 	margin: 50px auto;
 	text-align: center;
 }
+
+.copy-div {
+	text-align: right;
+}
+
+.copy-div > a {
+	text-decoration: none;
+}

resources/js/common.js

@@ -10,6 +10,27 @@ function initAnalytics()
 	ga('send', 'pageview');
 }
 
+function copyCode() {
+	selectCode("output");
+	document.execCommand("copy");
+}
+
+// select the entire text present in the "output"
+// div across all the spans
+// ref: https://stackoverflow.com/questions/1173194/select-all-div-text-with-single-mouse-click
+function selectCode(containerid) {
+    if (document.selection) { // IE
+        var range = document.body.createTextRange();
+        range.moveToElementText(document.getElementById(containerid));
+        range.select();
+    } else if (window.getSelection) {
+        var range = document.createRange();
+        range.selectNode(document.getElementById(containerid));
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(range);
+    }
+}
+
 $(function()
 {
 	var emptyOutputMsg = "Go code will appear here";