Add copy-url button to assets; unified the mechanism across views

4 files changed, 34 insertions, 8 deletions

diff --git a/app/views/assets/show.html.erb b/app/views/assets/show.html.erb
index 5717dd9..ff00883 100644
--- a/app/views/assets/show.html.erb
+++ b/app/views/assets/show.html.erb
@@ -20,7 +20,15 @@
     <div class="node_content"><%= image_tag @asset.upload.url(:medium), style: "max-width: 300px; max-height: 300px;" %></div>
 
     <div class="node_description">Public Path</div>
-    <div class="node_content"><%= @asset.upload.url.sub(/\?\d+$/, "") %></div>
+    <div class="node_content">
+      <% public_path = @asset.upload.url.sub(/\?\d+$/, "") %>
+      <%= link_to public_path, public_path, target: "_blank", rel: "noopener" %>
+      <button type="button" class="action_button copy_button"
+              data-copy-url="<%= request.base_url + public_path %>">
+        <%= icon("copy", library: "tabler", "aria-hidden": true) %>
+        <span class="copy_button_label">Copy URL</span>
+      </button>
+    </div>
 
     <div class="node_description">Content Type</div>
     <div class="node_content"><%= @asset.upload.content_type %></div>
diff --git a/app/views/nodes/new.html.erb b/app/views/nodes/new.html.erb
index 890d46e..805fbc9 100644
--- a/app/views/nodes/new.html.erb
+++ b/app/views/nodes/new.html.erb
@@ -41,7 +41,10 @@
   <div class="node_description">Resulting path</div>
   <div class="node_content">
     <span id="resulting_path">—</span>
-    <button type="button" id="copy_resulting_path" class="unselected">copy</button>
+    <button type="button" id="copy_resulting_path" class="unselected copy_button" data-copy-target="#resulting_path">
+      <span class="copy_button_label">copy</span>
+    </button>
+
     <span class="field_hint">This preview updates as you type. The final path can still be changed afterward by editing the title (for the last segment) or moving the node to a different parent (for everything before it).</span>
   </div>
 
diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index b7bdc10..e9f96c2 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -86,6 +86,27 @@ $(document).ready(function () {
     if (meta) request.setRequestHeader("X-CSRF-Token", meta.content);
   });
 
+  document.addEventListener('click', function (event) {
+    var button = event.target.closest('.copy_button');
+    if (!button) return;
+
+    var text = button.dataset.copyUrl;
+    if (text === undefined && button.dataset.copyTarget) {
+      var target = document.querySelector(button.dataset.copyTarget);
+      text = target ? target.textContent : undefined;
+    }
+
+    if (!text || text === '—' || !navigator.clipboard) return;
+
+    navigator.clipboard.writeText(text).then(function () {
+      var label = button.querySelector('.copy_button_label');
+      if (!label) return;
+      var original = label.textContent;
+      label.textContent = 'Copied!';
+      setTimeout(function () { label.textContent = original; }, 1500);
+    });
+  });
+
 });
 
 
diff --git a/public/javascripts/admin_search.js b/public/javascripts/admin_search.js
index b53c931..ad368cb 100644
--- a/public/javascripts/admin_search.js
+++ b/public/javascripts/admin_search.js
@@ -202,12 +202,6 @@ parent_search = {
     $("#title").bind("input", function() {
       parent_search.update_resulting_path();
     });
-
-    $("#copy_resulting_path").bind("click", function() {
-      var path = $("#resulting_path").text();
-      if (path === "—" || !navigator.clipboard) return;
-      navigator.clipboard.writeText(path);
-    });
   },
 
   update_resulting_path : function() {