Add copyable module and use it for accessions

Author: lmrodriguezr

app/javascript/packs/application.js

@@ -27,4 +27,5 @@ import "packs/autocomplete";
 import "packs/dictionary";
 import "packs/network";
 import "packs/styling";
+import "packs/copyable";
 

app/javascript/packs/copyable.js

@@ -0,0 +1,21 @@
+$(document).on("turbolinks:load", function() {
+  $(".copyable:not(:has(.copyer))").each(function() {
+    var elem = $(this);
+    var cont = elem.text().replace(/\s+/gm, " ");
+    var copied = $(
+      '<span style="display: none;" class="small">' +
+      'Copied to the clipboard</span>'
+    );
+    var btn = $(
+      '<a class="badge badge-pill badge-primary mx-2 copyer" type="button">' +
+      '<i class="fas fa-copy mr-1"> </i> Copy</a>'
+    );
+    btn.on("click", function() {
+      navigator.clipboard.writeText(cont);
+      copied.fadeIn(200).delay(800).fadeOut(800);
+    });
+    elem.append(btn);
+    elem.append(copied);
+  });
+});
+

app/views/names/_citation.html.erb

@@ -138,7 +138,7 @@
   <% end %>
 
   <dt><%= fa_icon('barcode') %> Canonical URL</dt>
-  <dd>
+  <dd class="copyable">
     <%= @name.seqcode_url %>
   </dd>
 </dl>

app/views/registers/_citation.html.erb

@@ -17,7 +17,7 @@
   <div class="row pl-3">
     <dl class="col-md-7">
       <dt><%= fa_icon(:barcode) %> SeqCode Registry Accession</dt>
-      <dd><%= @register.acc_url %></dd>
+      <dd class="copyable"><%= @register.acc_url %></dd>
 
       <dt><%= fa_icon('clipboard-check') %> Status</dt>
       <dd>
@@ -52,7 +52,7 @@
 
       <% if @register.validated? %>
         <dt><%= fa_icon('book-open') %> How to cite</dt>
-        <dd>
+        <dd class="copyable">
           <%= @register.user.display_name %>
           (<%= @register.validated_at.year %>).
           <%= @register.propose_title.gsub(/\.\z/, '') %>.