add a copy to clipboard button. (publiclab#232)

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);
+        }
+    })
+
+
+})

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 {

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>