From 394ec63d27fe9b195ecf7a06273dd3448b88703b Mon Sep 17 00:00:00 2001
From: Rishabh Rawat <www.rishabhrawat570@gmail.com>
Date: Tue, 9 Jul 2019 06:55:28 +0530
Subject: [PATCH] add a copy to clipboard button. (#232)

---
 examples/copyToClipboard.js | 28 ++++++++++++++++++++++++++++
 examples/demo.css           | 25 +++++++++++++++++++++++++
 index.html                  |  9 ++++++---
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 examples/copyToClipboard.js

diff --git a/examples/copyToClipboard.js b/examples/copyToClipboard.js
new file mode 100644
index 00000000..20441843
--- /dev/null
+++ b/examples/copyToClipboard.js
@@ -0,0 +1,28 @@
+document.addEventListener("DOMContentLoaded", function() {
+    let usernames = document.getElementById('contrib-names');
+    let copyButton = document.getElementById('copybutton');
+    let dummyInp = document.createElement("input");
+    let body = document.querySelector('body');
+
+
+    copyButton.addEventListener("click", function (event) {
+        event.preventDefault();
+        let names = usernames.textContent;
+        dummyInp.setAttribute('type', 'text');
+		dummyInp.setAttribute('value', `${names}`);
+        body.appendChild(dummyInp);
+        dummyInp.select();
+		document.execCommand("copy");
+		dummyInp.setAttribute('type', 'hidden');
+    })
+
+
+    dummyInp.addEventListener("copy", function(event) {
+        event.preventDefault();
+        if (event.clipboardData) {
+            event.clipboardData.setData("text/plain", usernames.textContent);
+        }
+    })
+  
+
+})
diff --git a/examples/demo.css b/examples/demo.css
index 7afe2b18..4fc1211f 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -125,6 +125,31 @@ h1, h2, .section h3 {
     box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
 }
 
+#copybutton {
+    width: 30px;
+    height: 25px;
+    float: right;
+    border-radius: 3px;
+    border: none;
+    box-shadow: 1px 1px 1px 1px #e2abab;
+    background-color: #fceeee;
+    transition: box-shadow 0.2s ease;
+}
+
+#copybutton i {
+    margin: 0 3px;
+    padding: 6px;
+}
+
+#copybutton:hover {
+    box-shadow: 0.6px 0.6px 0.5px 0.5px #e2abab;
+    cursor: pointer;
+}
+
+#copybutton:active {
+    box-shadow: 0.1px 0.1px 0.1px 0.1px #e2abab;
+}
+
 
 @media only screen and (max-width: 569px) {
     .links {
diff --git a/index.html b/index.html
index 4cff2348..2de823de 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,7 @@
     <script src="examples/demo.js"></script>
     <script src="examples/themes.js"></script>
     <script src="src/scripts/configure.js"></script>
+    <script src="examples/copyToClipboard.js"></script>
 
   </head>
 
@@ -179,10 +180,12 @@ <h2 class="recent-contributors-head">Recent Contributors</h2>
 
 
       <h2 class="contributors-head">Contributors</h2>
-
+      
+      <div title="copy to clipboard" id="copybutton"><i class="fa fa-clipboard" aria-hidden="true"></i></div>
+      
       <p>This project was made possible by many contributors, including the following GitHub users:</p>
-
-      <div class="well contributors"><div id="spinner-icon" style="text-align: center;"><i class="fa fa-spinner fa-spin"></i></div><p class="usernames"></p><hr /><p class="avatars text-center"></p></div>
+      
+      <div class="well contributors"><div id="spinner-icon" style="text-align: center;"><i class="fa fa-spinner fa-spin"></i></div><p id="contrib-names" class="usernames"></p><hr /><p class="avatars text-center"></p></div>
 	
 	  <div class="row" id="connectwithus">
 		<h2 class="text-center d-block">Connect with us</h2>