Merge pull request #2523 from pulibrary/2429-clipboard-button

Add clipboard.js and use it for "copy to clipboard" button on auth_link

app/javascript/packs/auth_link_clipboard.js

@@ -0,0 +1,12 @@
+import Clipboard from 'clipboard'
+
+document.addEventListener('DOMContentLoaded', () => {
+  let div = document.getElementById('clipboard-trigger-holder')
+  div.innerHTML = '<button class="btn btn-primary" id="clipboard-trigger">Copy link to clipboard</button>'
+  new Clipboard('#clipboard-trigger', {
+    text: function (trigger) {
+      let url = document.getElementById('authorized-link').children[0].getAttribute('href')
+      return url
+    }
+  })
+})

app/views/catalog/_auth_link_default.html.erb

@@ -1,13 +1,16 @@
+<%= javascript_pack_tag 'auth_link_clipboard' %>
 <% if @change_set.respond_to?(:auth_token) && @change_set.resource.decorate.public_readable_state? %>
   <div id="auth_link" class="panel panel-default auth-link">
     <div class="panel-heading">
       <h2 class="panel-title">Authorized Link</h2>
     </div>
     <div class="row panel-body">
-      <div class="col-sm-9">
+      <div class="col-sm-8" id="authorized-link">
         <%= build_authorized_link %>
       </div>
-      <div class="col-sm-3">
+      <div class="col-sm-2" id="clipboard-trigger-holder">
+      </div>
+      <div class="col-sm-2">
         <% if can?(:edit, resource) %>
           <%= simple_form_for @change_set do |f| %>
             <%= f.input :mint_auth_token, as: :hidden, input_html: { value: "1" } %>

package.json

@@ -10,6 +10,7 @@
     "ajv": "^6.2.1",
     "apollo-boost": "^0.1.10",
     "axios": "^0.18.0",
+    "clipboard": "^2.0.4",
     "graphql": "^0.13.2",
     "graphql-tag": "^2.9.2",
     "lux-design-system": "^2.0.0",

yarn.lock

@@ -1885,6 +1885,15 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+clipboard@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -2591,6 +2600,11 @@ delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -3656,6 +3670,13 @@ gonzales-pe@^4.0.3:
   dependencies:
     minimist "1.1.x"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -7821,6 +7842,11 @@ select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 selfsigned@^1.9.1:
   version "1.10.4"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
@@ -8506,6 +8532,11 @@ timsort@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
 
+tiny-emitter@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
+  integrity sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==
+
 tiny-relative-date@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"