fix clipboard js

openpoke · Jul 24, 2024 · 7e69e24 · 7e69e24
1 parent a7df6af
commit 7e69e24
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 21 deletions.
diff --git a/decidim-admin/app/views/decidim/admin/share_tokens/edit.html.erb b/decidim-admin/app/views/decidim/admin/share_tokens/edit.html.erb
@@ -12,7 +12,8 @@
         <div class="form__wrapper">
           <div class="pt-4">
             <div class="row column">
-              <%= f.text_field :token, aria: { label: :token }, disabled: true %>
+              <%= f.text_field :token, id: "share_token-token",aria: { label: :token }, disabled: true %>
+              <button type="button" class="button button__sm button__secondary" data-clipboard-copy="#share_token-token" data-clipboard-copy-label="<%= t("copied", scope: "decidim.admin.share_tokens.index") %>" data-clipboard-copy-message="<%= t("copy_message", scope: "decidim.admin.share_tokens.index") %>"><%= t("actions.copy_link", scope: "decidim.admin.share_tokens") %></button>
             </div>
             <%= render partial: "form", object: f %>
           </div>

diff --git a/decidim-admin/app/views/decidim/admin/share_tokens/index.html.erb b/decidim-admin/app/views/decidim/admin/share_tokens/index.html.erb
@@ -20,13 +20,13 @@
         <tbody>
           <% share_tokens.each do |share_token| %>
             <tr>
-              <td><%= share_token.token %></td>
+              <td id="js-token-<%= share_token.id %>"><%= share_token.token %></td>
               <td><%= share_token.expires_at.present? ? ("<span class=\"text-#{share_token.expired? ? "warning" : ""}\">#{l(share_token.expires_at, format: :decidim_short)}</span>".html_safe) : content_tag(:em, t(".never")) %></td>
               <td><%= t("booleans.#{share_token.registered_only}") %></td>
               <td><%= share_token.times_used %></td>
               <td class="table-list__actions">
                 <%= icon_link_to "pencil-line", edit_component_share_token_path(id: share_token ), t("actions.edit", scope: "decidim.admin.share_tokens"), class: "action-icon--edit" %>
-                 <%= icon_link_to "clipboard-line", "#", t("actions.copy_link", scope: "decidim.admin.share_tokens"), class: "action-icon--copy", data: { "clipboard-copy" => "this", "clipboard-content" => share_token.url,"clipboard-copy-label" => t(".copied"),"clipboard-copy-message" => t(".copy_message") } %>
+                 <%= icon_link_to "clipboard-line", "#", t("actions.copy_link", scope: "decidim.admin.share_tokens"), class: "action-icon--copy", data: { "clipboard-copy" => "#js-token-#{share_token.id}", "clipboard-content" => share_token.url,"clipboard-copy-label" => t(".copied"),"clipboard-copy-message" => t(".copy_message") } %>
                 <%= icon_link_to "eye-line", share_token.url, t("actions.preview", scope: "decidim.admin.share_tokens"), class: "action-icon--preview", target: :blank %>
                 <%= icon_link_to "delete-bin-line", share_token_path(component, id: share_token ), t("actions.destroy", scope: "decidim.admin.share_tokens"), class: "action-icon--remove", method: :delete, data: { confirm: t("actions.confirm_destroy", scope: "decidim.admin.share_tokens") } %>
               </td>

diff --git a/decidim-core/app/packs/src/decidim/clipboard.js b/decidim-core/app/packs/src/decidim/clipboard.js
@@ -21,7 +21,9 @@ import select from "select";
  *
  * Options through data attributes:
  * - `data-clipboard-copy` = The jQuery selector for the target input element
- *   where text will be copied from.
+ *   where text will be copied from. If this element does not contain any visible text (for instance is an image),
+ *   the selector indicated in here will be used to place the confirmation message.
+ * - `data-clipboard-content` = The text that will be copied if the target input element is not found.
  * - `data-clipboard-copy-label` = The label that will be shown in the button
  *   after a succesful copy.
  * - `data-clipboard-copy-message` = The text that will be announced to screen
@@ -40,13 +42,18 @@ $(() => {
     }
 
     const $input = $($el.data("clipboard-copy"));
+
     let selectedText = "";
     if ($input.length < 1 || !$input.is("input, textarea, select")) {
       selectedText = $el.data("clipboard-content");
     } else {
       selectedText = select($input[0]);
     }
 
+    let $msgEl = $el;
+    if($msgEl.text() === "") {
+      $msgEl = $input;
+    }
     // Get the available text to clipboard.
     if (!selectedText || selectedText.length < 1) {
       return;
@@ -85,28 +92,14 @@ $(() => {
       }
 
       if (!$el.data("clipboard-copy-label-original")) {
-        $el.data("clipboard-copy-label-original", $el.html());
+        $el.data("clipboard-copy-label-original", $msgEl.html());
       }
 
-      $el.html(label);
-      if ($input.length === 0) {
-        $el.css({
-          "color": "var(--alert)",
-          "text-decoration": "none"
-        });
-      }
+      $msgEl.html(label);
 
       to = setTimeout(() => {
-        $el.html($el.data("clipboard-copy-label-original"));
+        $msgEl.html($el.data("clipboard-copy-label-original"));
         $el.removeData("clipboard-copy-label-original");
-
-        if ($input.length === 0) {
-          $el.css({
-            "color": "var(--secondary)",
-            "padding-right": "0"
-          });
-        }
-
         $el.removeData("clipboard-copy-label-timeout");
       }, CLIPBOARD_COPY_TIMEOUT);