From bafb1c5e68cd20a725521c6800e920d0086785a7 Mon Sep 17 00:00:00 2001
From: Elia El Lazkani <eliaellazkani@gmail.com>
Date: Sun, 6 Oct 2019 00:34:08 +0200
Subject: [PATCH] Moving to clipboard for copying to clipboard

---
 shortenit/templates/index.html | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)
diff --git a/shortenit/templates/index.html b/shortenit/templates/index.html
index 5e9bb8f..0ba5307 100644
--- a/shortenit/templates/index.html
+++ b/shortenit/templates/index.html
@@ -19,6 +19,7 @@
 
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
   </head>
 
   <script type="text/javascript">
@@ -54,20 +55,24 @@
         document.getElementById("url-result").value = "Please enter a valid URL!";
     }
 
-    function copyToClipboard() {
-        /* Get the text field */
-        var copyText = document.querySelector("#url-result");
+    window.onload=function() {
+        console.log(ClipboardJS.isSupported())
+        var clipboard = new ClipboardJS('.btn', {
+            container: document.getElementById('copy-button')
+        });
 
-        /* Select the text field */
-        copyText.select();
-        copyText.setSelectionRange(0, 99999); /*For mobile devices*/
+        clipboard.on('success', function(e) {
+            console.info('Action:', e.action);
+            console.info('Text:', e.text);
+            console.info('Trigger:', e.trigger);
+        });
 
-        /* Copy the text inside the text field */
-        document.execCommand("copy");
+        clipboard.on('error', function(e) {
+            console.error('Action:', e.action);
+            console.error('Trigger:', e.trigger);
+        });
+    }
 
-        /* Alert the copied text */
-        alert("Copied the text: " + copyText.value);
-    } 
   </script>
 
   <body>
@@ -103,7 +108,8 @@
               <input type="text" id="url-result" class="form-control" readonly>
             </div>
             <div class="col-3">
-              <button class="btn btn-outline-primary" type="button" id="copy-button" data-toggle="tooltip" onclick="copyToClipboard()" data-placement="button" title="Copy to Clipboard">Copy</button>
+              <div>
+              <button class="btn btn-outline-primary" data-clipboard-target="#url-result" data-clipboard-action="copy">Copy</button>
             </div>
           </div>
         </div>
