Make WordPress Core

Changeset 52842


Ignore:
Timestamp:
03/10/2022 06:22:57 PM (2 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/media.js

    r50547 r52842  
    142142     */
    143143    $( function() {
    144         var settings, $mediaGridWrap = $( '#wp-media-grid' );
     144        var settings,
     145            $mediaGridWrap             = $( '#wp-media-grid' ),
     146            copyAttachmentURLClipboard = new ClipboardJS( '.copy-attachment-url.media-library' ),
     147            copyAttachmentURLSuccessTimeout;
    145148
    146149        // Opens a manage media frame into the grid.
     
    206209            $( this ).find( '.found-radio input' ).prop( 'checked', true );
    207210        });
     211
     212        /**
     213         * Handles media list copy media URL button.
     214         *
     215         * @since 6.0.0
     216         *
     217         * @param {MouseEvent} event A click event.
     218         * @return {void}
     219         */
     220        copyAttachmentURLClipboard.on( 'success', function( event ) {
     221            var triggerElement = $( event.trigger ),
     222                successElement = $( '.success', triggerElement.closest( '.copy-to-clipboard-container' ) );
     223
     224            // Clear the selection and move focus back to the trigger.
     225            event.clearSelection();
     226            // Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680.
     227            triggerElement.trigger( 'focus' );
     228
     229            // Show success visual feedback.
     230            clearTimeout( copyAttachmentURLSuccessTimeout );
     231            successElement.removeClass( 'hidden' );
     232
     233            // Hide success visual feedback after 3 seconds since last success and unfocus the trigger.
     234            copyAttachmentURLSuccessTimeout = setTimeout( function() {
     235                successElement.addClass( 'hidden' );
     236            }, 3000 );
     237
     238            // Handle success audible feedback.
     239            wp.a11y.speak( wp.i18n.__( 'The file URL has been copied to your clipboard' ) );
     240        } );
    208241    });
    209242})( jQuery );
  • trunk/src/wp-admin/css/list-tables.css

    r51887 r52842  
    383383table.media .column-title .filename {
    384384    margin-bottom: 0.2em;
     385}
     386
     387/* Media Copy to clipboard row action */
     388.media .row-actions .copy-to-clipboard-container {
     389    display: inline;
     390    position: relative;
     391}
     392
     393.media .row-actions .copy-to-clipboard-container .success {
     394    position: absolute;
     395    left: 50%;
     396    transform: translate(-50%, -100%);
     397    background: #000;
     398    color: #fff;
     399    border-radius: 5px;
     400    margin: 0;
     401    padding: 2px 5px;
    385402}
    386403
  • trunk/src/wp-admin/includes/class-wp-media-list-table.php

    r51903 r52842  
    807807                    __( 'View' )
    808808                );
     809
     810                $actions['copy'] = sprintf(
     811                    '<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>',
     812                    esc_url( wp_get_attachment_url( $post->ID ) ),
     813                    /* translators: %s: Attachment title. */
     814                    esc_attr( sprintf( __( 'Copy &#8220;%s&#8221; URL to clipboard' ), $att_title ) ),
     815                    __( 'Copy URL to clipboard' ),
     816                    __( 'Copied!' )
     817                );
    809818            }
    810819        }
  • trunk/src/wp-includes/script-loader.php

    r52768 r52842  
    13521352
    13531353        $scripts->add( 'media-grid', "/wp-includes/js/media-grid$suffix.js", array( 'media-editor' ), false, 1 );
    1354         $scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery' ), false, 1 );
     1354        $scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery', 'clipboard', 'wp-i18n', 'wp-a11y' ), false, 1 );
    13551355        $scripts->set_translations( 'media' );
    13561356
Note: See TracChangeset for help on using the changeset viewer.