Changeset 52842

Timestamp:

03/10/2022 06:22:57 PM (3 years ago)

Author:

davidbaumwald

Message:

Media: Add a "Copy URL to clipboard" function to the list table view.

Previously, a button was added to the modal view for a single media item in the "grid" view to copy the file URL to the user's clipboard. This change adds a similar function to the "list" view for each media item.

Follow-up to [48232].

Props pbiron, ravipatel, alexstine, afercia.
Fixes #54426.

Location:

trunk/src

Files:

• js/_enqueues/admin/media.js (modified) (2 diffs)
• wp-admin/css/list-tables.css (modified) (1 diff)
• wp-admin/includes/class-wp-media-list-table.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/js/_enqueues/admin/media.js

@@ -142 +142 @@
      */
     $( function() {
-        var settings, $mediaGridWrap = $( '#wp-media-grid' );
+        var settings,
+            $mediaGridWrap             = $( '#wp-media-grid' ),
+            copyAttachmentURLClipboard = new ClipboardJS( '.copy-attachment-url.media-library' ),
+            copyAttachmentURLSuccessTimeout;
 
         // Opens a manage media frame into the grid.
@@ -206 +209 @@
             $( this ).find( '.found-radio input' ).prop( 'checked', true );
         });
+
+        /**
+         * Handles media list copy media URL button.
+         *
+         * @since 6.0.0
+         *
+         * @param {MouseEvent} event A click event.
+         * @return {void}
+         */
+        copyAttachmentURLClipboard.on( 'success', function( event ) {
+            var triggerElement = $( event.trigger ),
+                successElement = $( '.success', triggerElement.closest( '.copy-to-clipboard-container' ) );
+
+            // Clear the selection and move focus back to the trigger.
+            event.clearSelection();
+            // Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680.
+            triggerElement.trigger( 'focus' );
+
+            // Show success visual feedback.
+            clearTimeout( copyAttachmentURLSuccessTimeout );
+            successElement.removeClass( 'hidden' );
+
+            // Hide success visual feedback after 3 seconds since last success and unfocus the trigger.
+            copyAttachmentURLSuccessTimeout = setTimeout( function() {
+                successElement.addClass( 'hidden' );
+            }, 3000 );
+
+            // Handle success audible feedback.
+            wp.a11y.speak( wp.i18n.__( 'The file URL has been copied to your clipboard' ) );
+        } );
     });
 })( jQuery );

trunk/src/wp-admin/css/list-tables.css

@@ -383 +383 @@
 table.media .column-title .filename {
     margin-bottom: 0.2em;
+}
+
+/* Media Copy to clipboard row action */
+.media .row-actions .copy-to-clipboard-container {
+    display: inline;
+    position: relative;
+}
+
+.media .row-actions .copy-to-clipboard-container .success {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    background: #000;
+    color: #fff;
+    border-radius: 5px;
+    margin: 0;
+    padding: 2px 5px;
 }
 

trunk/src/wp-admin/includes/class-wp-media-list-table.php

@@ -807 +807 @@
                     __( 'View' )
                 );
+
+                $actions['copy'] = sprintf(
+                    '<span class="copy-to-clipboard-container"><button type="button" class="button-link copy-attachment-url media-library" data-clipboard-text="%s" aria-label="%s">%s</button><span class="success hidden" aria-hidden="true">%s</span></span>',
+                    esc_url( wp_get_attachment_url( $post->ID ) ),
+                    /* translators: %s: Attachment title. */
+                    esc_attr( sprintf( __( 'Copy &#8220;%s&#8221; URL to clipboard' ), $att_title ) ),
+                    __( 'Copy URL to clipboard' ),
+                    __( 'Copied!' )
+                );
             }
         }

trunk/src/wp-includes/script-loader.php

@@ -1352 +1352 @@
 
         $scripts->add( 'media-grid', "/wp-includes/js/media-grid$suffix.js", array( 'media-editor' ), false, 1 );
-        $scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery' ), false, 1 );
+        $scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery', 'clipboard', 'wp-i18n', 'wp-a11y' ), false, 1 );
         $scripts->set_translations( 'media' );