htdocs: Add clipboard.js

stephenfin · stephenfin · commit 02f8c2818bfd · 2017-06-14T09:38:08.000+01:00
We provide our own, much smaller implementation of this currently.
However, we want to be able to implement slightly different variants of
this elsewhere and using an existing library helps avoid reinventing the
wheel and lets us use already battle-tested code.

Signed-off-by: Stephen Finucane &lt;stephen@that.guru&gt;
Reviewed-by: Andrew Donnellan &lt;andrew.donnellan@au1.ibm.com&gt;
diff --git a/htdocs/README.rst b/htdocs/README.rst
@@ -65,6 +65,16 @@ js
 
   Part of Patchwork.
 
+``clipboard.min.js``
+
+  Modern copy to clipboard. No Flash. Just 3kb gzipped
+
+  This is used to allow us to "click to copy" various elements in the UI.
+
+  :Website: https://clipboardjs.com/
+  :GitHub: https://github.com/zenorocha/clipboard.js/
+  :Version: 1.7.1
+
 ``jquery.js``
 
   jQuery is a fast, small, and feature-rich JavaScript library. It makes things
diff --git a/htdocs/js/clipboard.min.js b/htdocs/js/clipboard.min.js
diff --git a/patchwork/templates/patchwork/patch-list.html b/patchwork/templates/patchwork/patch-list.html
@@ -50,19 +50,8 @@
         e.preventDefault();
     });
 });
-
-{% if user.is_authenticated and user.profile.show_ids %}
-function copyToClipboard(patch_id) {
-    input = document.createElement('input');
-    input.setAttribute('type', 'text');
-    input.setAttribute('value', patch_id);
-    input = document.body.appendChild(input);
-    input.select();
-    document.execCommand('copy');
-    input.remove();
-}
-{% endif %}
 </script>
+
 <form method="post">
 {% csrf_token %}
 <input type="hidden" name="form" value="patchlistform"/>
@@ -195,9 +184,10 @@
    {% endif %}
    {% if user.is_authenticated and user.profile.show_ids %}
    <td>
-     <button type="button" class="btn btn-xs"
-	     onClick="javascript:copyToClipboard('{{patch.id}}');"
-	     title="Copy to Clipboard">{{ patch.id }}</button>
+    <button type="button" class="btn btn-xs btn-copy"
+     data-clipboard-text="{{ patch.id }}" title="Copy to Clipboard">
+      {{ patch.id }}
+    </button>
    </td>
    {% endif %}
    <td>
diff --git a/templates/base.html b/templates/base.html
@@ -20,6 +20,12 @@
   <![endif]-->
   <script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"></script>
   <script type="text/javascript" src="{% static "js/selectize.min.js" %}"></script>
+  <script type="text/javascript" src="{% static "js/clipboard.min.js" %}"></script>
+  <script type="text/javascript">
+   $(document).ready(function() {
+       new Clipboard(document.querySelectorAll('button.btn-copy'));
+   });
+  </script>
 {% block headers %}{% endblock %}
  </head>
  <body>
