add copy clipboard functionality

openpoke · Jul 17, 2024 · eb111d5 · eb111d5
1 parent d9a3e3d
commit eb111d5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
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
@@ -26,7 +26,8 @@
               <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 "file-copy-line", share_token.url, t("actions.copy_link", scope: "decidim.admin.share_tokens"), class: "action-icon--share" %>
+                 <%= 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 "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-admin/config/locales/en.yml b/decidim-admin/config/locales/en.yml
@@ -984,6 +984,8 @@ en:
           'true': 'Yes'
         index:
           back_to_share_tokens: Back to share tokens
+          copied: Copied!
+          copy_message: The text was successfully copied to clipboard.
           never: Never
           new_share_token_button: New token
           title: 'Sharing tokens for component: %{component_name}'

diff --git a/decidim-core/app/packs/src/decidim/clipboard.js b/decidim-core/app/packs/src/decidim/clipboard.js
@@ -38,14 +38,16 @@ $(() => {
     if (!$el.data("clipboard-copy") || $el.data("clipboard-copy").length < 1) {
       return;
     }
-
+    
     const $input = $($el.data("clipboard-copy"));
+    let selectedText = "";
     if ($input.length < 1 || !$input.is("input, textarea, select")) {
-      return;
+      selectedText = $el.data("clipboard-content");
+    } else {
+      selectedText = select($input[0]);
     }
 
     // Get the available text to clipboard.
-    const selectedText = select($input[0]);
     if (!selectedText || selectedText.length < 1) {
       return;
     }
@@ -83,13 +85,23 @@ $(() => {
       }
 
       if (!$el.data("clipboard-copy-label-original")) {
-        $el.data("clipboard-copy-label-original", $el.html());
+        if ($input.length > 0) {
+          $el.data("clipboard-copy-label-original", $el.html());
+        }
       }
 
-      $el.html(label);
+      if ($input.length > 0) {
+        $el.html(label);
+      } else {
+        $el.css("color", "var(--alert)");
+      }
       to = setTimeout(() => {
-        $el.html($el.data("clipboard-copy-label-original"));
-        $el.removeData("clipboard-copy-label-original");
+        if ($input.length > 0) {
+          $el.html($el.data("clipboard-copy-label-original"));
+          $el.removeData("clipboard-copy-label-original");
+        } else {
+          $el.css({ "color": "var(--secondary)", "padding-right": "0" });
+        }
         $el.removeData("clipboard-copy-label-timeout");
       }, CLIPBOARD_COPY_TIMEOUT);
       $el.data("clipboard-copy-label-timeout", to)