Update copy UI for citation modal

app/components/citation_modal_component.html.erb

@@ -0,0 +1,22 @@
+<%= render Blacklight::System::ModalComponent.new do |component| %>
+  <% component.with_title { t('blacklight.tools.citation') } %>
+  <div data-controller="clipboard-copy">
+    <!-- Copy to clipboard button -->
+    <div class="mb-2 d-flex justify-content-end">
+      <button id="copyClipboard" class="btn btn-sm btn-outline-primary btn-clipboard" data-action="clipboard-copy#copy">
+        <span id="copyCheck" class="d-none" data-clipboard-copy-target="copyButtonIcon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
+          <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
+        </svg>
+        </span>
+        <span id="copyClipText" data-clipboard-copy-target="copyButtonText">Copy</span>
+      </button>
+    </div>
+
+    <!-- Citation content -->
+    <% citation = render Geoblacklight::Document::CitationComponent.with_collection(@documents) if @documents %>
+    <div class="citation-text" data-clipboard-copy-target="copyContent">
+      <%= citation %>
+    </div>
+  </div>
+<% end %>

app/components/citation_modal_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class CitationModalComponent < ViewComponent::Base
+  def initialize(documents:)
+    @documents = documents
+    super
+  end
+end

app/components/code_snippet_modal_component.html.erb

@@ -1,48 +1,48 @@
 <%= render Blacklight::System::ModalComponent.new do |component| %>
   <% component.with_title { t('earthworks.code_snippet.title') } %>
   <% component.with_body do %>
-    <div class="p-3" data-controller="codesnippet">
+    <div class="p-3" data-controller="clipboard-copy">
       <div class="mb-2">
         <ul id='codeNav' class='nav nav-tabs border-0' role='tablist'>
           <li class="nav-item" role="presentation">
               <button class="nav-link btn-link border-0 pl-0 active code-snippet-tab" id="python-tab" data-bs-toggle="tab" data-bs-target="#python-code" type="button" role="tab" 
-                aria-controls="python-code" aria-selected="true" data-action="codesnippet#resetCopyClick">Python</button>
+                aria-controls="python-code" aria-selected="true" data-action="clipboard-copy#reset">Python</button>
           </li>
           <li class="nav-item" role="presentation">
             <button class="nav-link btn-link border-0 code-snippet-tab" id="r-tab" data-bs-toggle="tab" data-bs-target="#r-code"  type="button" role="tab" 
-                aria-controls="r-code" aria-selected="false" data-action="codesnippet#resetCopyClick">R</button>
+                aria-controls="r-code" aria-selected="false" data-action="clipboard-copy#reset">R</button>
           </li>
           <li class="nav-item" role="presentation">
             <button class="nav-link btn-link border-0 code-snippet-tab" id="leaflet-tab" data-bs-toggle="tab" data-bs-target="#leaflet-code"  type="button" role="tab" 
-                aria-controls="leaflet-code" aria-selected="false" data-action="codesnippet#resetCopyClick">Leaflet</button>
+                aria-controls="leaflet-code" aria-selected="false" data-action="clipboard-copy#reset">Leaflet</button>
           </li>
         </ul>
       </div>
 
       <!-- Copy to clipboard button -->
       <div class="bd-clipboard p-3">
-        <button id="copyClipboard" class="btn btn-outline-primary btn-clipboard" title="" data-original-title="Copy to clipboard" data-action="codesnippet#copyToClipboard">
-         <span id="copyCheck" class="d-none" data-codesnippet-target="clipboardCheck">
+        <button id="copyClipboard" class="btn btn-sm btn-outline-primary btn-clipboard" data-action="clipboard-copy#copy" data-clipboard-copy-target-param=".tab-pane.active pre code">
+         <span id="copyCheck" class="d-none" data-clipboard-copy-target="copyButtonIcon">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
             <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
           </svg>
          </span>
-         <span id="copyClipText" data-codesnippet-target="clipboardText">Copy</span>
+         <span id="copyClipText" data-clipboard-copy-target="copyButtonText">Copy</span>
         </button>
       </div>
 
       <!-- Code snippet content -->
-      <div class="tab-content code-snippet-content" id="codeContent" data-codesnippet-target="codeContent">
-          <div class="tab-pane fade show p-3 active" id="python-code" role="tabpanel" aria-labelledby="python-tab">
-            <%= code_block(render_python) %> 
-          </div>
-          <div class="tab-pane fade p-3" id="r-code" role="tabpanel" aria-labelledby="r-tab">
-            <%= code_block(render_r) %> 
-          </div>
-          <div class="tab-pane fade p-3" id="leaflet-code" role="tabpanel" aria-labelledby="leaflet-tab">
-            <%= code_block(render_leaflet) %> 
-          </div>
+      <div class="tab-content code-snippet-content" id="codeContent">
+        <div class="tab-pane fade show p-3 active" id="python-code" role="tabpanel" aria-labelledby="python-tab">
+          <%= code_block(render_python) %> 
+        </div>
+        <div class="tab-pane fade p-3" id="r-code" role="tabpanel" aria-labelledby="r-tab">
+          <%= code_block(render_r) %> 
+        </div>
+        <div class="tab-pane fade p-3" id="leaflet-code" role="tabpanel" aria-labelledby="leaflet-tab">
+          <%= code_block(render_leaflet) %> 
+        </div>
       </div>
     </div>
   <% end %>
-<% end %>
+<% end %>

app/javascript/controllers/clipboard_copy_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus";
+
+// More fully-featured version of GeoBlacklight's clipboard controller
+// We have to register it under a different name in order to use it in the same app
+// TODO: move these changes up to GeoBlacklight?
+export default class extends Controller {
+  static targets = ["copyButtonText", "copyButtonIcon", "copyContent"];
+
+  // Copy text to clipboard and update copy button
+  async copy(event) {
+    let text = null;
+
+    // If the event included a 'target' param, use the text content of that element
+    if (event.params.target) {
+      const target = this.element.querySelector(event.params.target);
+      if (!target)
+        console.warn("Copy target element not found", event.params.target);
+      else text = target.textContent;
+    }
+
+    // Otherwise if a target element was explicitly designated, use its text content
+    else if (this.hasCopyContentTarget) text = this.copyContentTarget.textContent;
+
+    // If no text was found, log a warning and return
+    if (!text) {
+      console.warn("No text to copy");
+      return;
+    }
+
+    // Copy the text to the clipboard; trim whitespace
+    await navigator.clipboard.writeText(text.trim());
+
+    // Update the copy button
+    this.copyButtonTextTarget.innerHTML = "Copied";
+    this.copyButtonIconTarget.classList.remove("d-none");
+  }
+
+  // Reset to the original state of the copy button
+  reset() {
+    this.copyButtonTextTarget.innerHTML = "Copy";
+    this.copyButtonIconTarget.classList.add("d-none");
+  }
+}

app/views/catalog/_citation.html.erb

@@ -0,0 +1 @@
+<%= render CitationModalComponent.new(documents: @documents) %>