Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
Built from https://develop.svn.wordpress.org/trunk@52842


git-svn-id: http://core.svn.wordpress.org/trunk@52431 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
davidbaumwald 2022-03-10 18:24:03 +00:00
parent c771c6a79d
commit 658f4e9367
9 changed files with 82 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
wp-admin/css/list-tables-rtl.css
View File

@ -385,6 +385,23 @@ 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;
right: 50%;
transform: translate(50%, -100%);
background: #000;
color: #fff;
border-radius: 5px;
margin: 0;
padding: 2px 5px;
}
/* @todo: pick a consistent list table selector */
.wp-list-table a {
transition: none;

2
wp-admin/css/list-tables-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

17
wp-admin/css/list-tables.css
View File

@ -384,6 +384,23 @@ 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;
}
/* @todo: pick a consistent list table selector */
.wp-list-table a {
transition: none;

2
wp-admin/css/list-tables.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/includes/class-wp-media-list-table.php
View File

@ -806,6 +806,15 @@ class WP_Media_List_Table extends WP_List_Table {
esc_attr( sprintf( __( 'View “%s”' ), $att_title ) ),
__( '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!' )
);
}
}

35
wp-admin/js/media.js
View File

@ -141,7 +141,10 @@
* @return {void}
*/
$( 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.
if ( $mediaGridWrap.length && window.wp && window.wp.media ) {
@ -205,5 +208,35 @@
$( '.find-box-inside' ).on( 'click', 'tr', function() {
$( 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 );

2
wp-admin/js/media.min.js vendored
View File

@ -1,2 +1,2 @@
/*! This file is auto-generated */
!function(s){window.findPosts={open:function(n,e){var i=s(".ui-find-overlay");return 0===i.length&&(s("body").append('<div class="ui-find-overlay"></div>'),findPosts.overlay()),i.show(),n&&e&&s("#affected").attr("name",n).val(e),s("#find-posts").show(),s("#find-posts-input").trigger("focus").on("keyup",function(n){27==n.which&&findPosts.close()}),findPosts.send(),!1},close:function(){s("#find-posts-response").empty(),s("#find-posts").hide(),s(".ui-find-overlay").hide()},overlay:function(){s(".ui-find-overlay").on("click",function(){findPosts.close()})},send:function(){var n={ps:s("#find-posts-input").val(),action:"find_posts",_ajax_nonce:s("#_ajax_nonce").val()},e=s(".find-box-search .spinner");e.addClass("is-active"),s.ajax(ajaxurl,{type:"POST",data:n,dataType:"json"}).always(function(){e.removeClass("is-active")}).done(function(n){n.success||s("#find-posts-response").text(wp.i18n.__("An error has occurred. Please reload the page and try again.")),s("#find-posts-response").html(n.data)}).fail(function(){s("#find-posts-response").text(wp.i18n.__("An error has occurred. Please reload the page and try again."))})}},s(function(){var n,e=s("#wp-media-grid");e.length&&window.wp&&window.wp.media&&(n=_wpMediaGridSettings,n=window.wp.media({frame:"manage",container:e,library:n.queryVars}).open(),e.trigger("wp-media-grid-ready",n)),s("#find-posts-submit").on("click",function(n){s('#find-posts-response input[type="radio"]:checked').length||n.preventDefault()}),s("#find-posts .find-box-search :input").on("keypress",function(n){if(13==n.which)return findPosts.send(),!1}),s("#find-posts-search").on("click",findPosts.send),s("#find-posts-close").on("click",findPosts.close),s("#doaction").on("click",function(e){s('select[name="action"]').each(function(){var n=s(this).val();"attach"===n?(e.preventDefault(),findPosts.open()):"delete"===n&&(showNotice.warn()||e.preventDefault())})}),s(".find-box-inside").on("click","tr",function(){s(this).find(".found-radio input").prop("checked",!0)})})}(jQuery);
!function(s){window.findPosts={open:function(n,e){var i=s(".ui-find-overlay");return 0===i.length&&(s("body").append('<div class="ui-find-overlay"></div>'),findPosts.overlay()),i.show(),n&&e&&s("#affected").attr("name",n).val(e),s("#find-posts").show(),s("#find-posts-input").trigger("focus").on("keyup",function(n){27==n.which&&findPosts.close()}),findPosts.send(),!1},close:function(){s("#find-posts-response").empty(),s("#find-posts").hide(),s(".ui-find-overlay").hide()},overlay:function(){s(".ui-find-overlay").on("click",function(){findPosts.close()})},send:function(){var n={ps:s("#find-posts-input").val(),action:"find_posts",_ajax_nonce:s("#_ajax_nonce").val()},e=s(".find-box-search .spinner");e.addClass("is-active"),s.ajax(ajaxurl,{type:"POST",data:n,dataType:"json"}).always(function(){e.removeClass("is-active")}).done(function(n){n.success||s("#find-posts-response").text(wp.i18n.__("An error has occurred. Please reload the page and try again.")),s("#find-posts-response").html(n.data)}).fail(function(){s("#find-posts-response").text(wp.i18n.__("An error has occurred. Please reload the page and try again."))})}},s(function(){var o,n,e=s("#wp-media-grid"),i=new ClipboardJS(".copy-attachment-url.media-library");e.length&&window.wp&&window.wp.media&&(n=_wpMediaGridSettings,n=window.wp.media({frame:"manage",container:e,library:n.queryVars}).open(),e.trigger("wp-media-grid-ready",n)),s("#find-posts-submit").on("click",function(n){s('#find-posts-response input[type="radio"]:checked').length||n.preventDefault()}),s("#find-posts .find-box-search :input").on("keypress",function(n){if(13==n.which)return findPosts.send(),!1}),s("#find-posts-search").on("click",findPosts.send),s("#find-posts-close").on("click",findPosts.close),s("#doaction").on("click",function(e){s('select[name="action"]').each(function(){var n=s(this).val();"attach"===n?(e.preventDefault(),findPosts.open()):"delete"===n&&(showNotice.warn()||e.preventDefault())})}),s(".find-box-inside").on("click","tr",function(){s(this).find(".found-radio input").prop("checked",!0)}),i.on("success",function(n){var e=s(n.trigger),i=s(".success",e.closest(".copy-to-clipboard-container"));n.clearSelection(),e.trigger("focus"),clearTimeout(o),i.removeClass("hidden"),o=setTimeout(function(){i.addClass("hidden")},3e3),wp.a11y.speak(wp.i18n.__("The file URL has been copied to your clipboard"))})})}(jQuery);

2
wp-includes/script-loader.php
View File

@ -1351,7 +1351,7 @@ function wp_default_scripts( $scripts ) {
$scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );
$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' );
$scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array( 'jquery', 'jquery-ui-core', 'json2', 'imgareaselect', 'wp-a11y' ), false, 1 );

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.0-alpha-52841';
$wp_version = '6.0-alpha-52842';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.