Make WordPress Core

Ticket #48463: 48463.3.diff

File 48463.3.diff, 8.8 KB (added by audrasjb, 3 years ago)

Media: Introduces copy link button

  • src/js/_enqueues/admin/post.js

    diff --git a/src/js/_enqueues/admin/post.js b/src/js/_enqueues/admin/post.js
    index cc7cab1a72..9d62e348e0 100644
    a b jQuery(document).ready( function($) { 
    12171217                        window.history.replaceState( null, null, location );
    12181218                });
    12191219        }
    1220 });
     1220
     1221        /**
     1222         * Copies the attachment link to the clipboard.
     1223         *
     1224         * Browser support for Chrome 43+, Firefox 42+, Safari 10+, Edge and Internet Explorer 10+
     1225         *
     1226         * @since 5.5.0
     1227         *
     1228         * @param {MouseEvent} event A click event.
     1229         *
     1230         * @returns {void}
     1231         */
     1232        $document.on( 'click', '.copy-attachment-url', function( event ) {
     1233
     1234                var successful = false;
     1235
     1236                // Copy Link Label
     1237                var AttachmentLinkButton = this;
     1238
     1239                // Attachment Input
     1240                var AttachmentLink = document.querySelector( '#attachment_url' );
     1241
     1242                // Set the focus to the input
     1243                AttachmentLink.focus();
     1244
     1245            // Select the input text
     1246            AttachmentLink.select();
     1247
     1248            // especially for IE
     1249            if ( window.clipboardData && window.clipboardData.setData ) {
     1250                successful = clipboardData.setData( "Text", AttachmentLink.value );
     1251            }
     1252
     1253            // checking for browser support
     1254            else if ( document.queryCommandSupported && document.queryCommandSupported( "copy" ) ) {
     1255                // process the 'copy' cmd
     1256                        try {
     1257                        var successful = document.execCommand( 'copy' );
     1258
     1259                        // let user know copy didn't happen
     1260                    } catch ( err ) {
     1261                        alert( AttachmentLinkButton.getAttribute('data-link-error-text') );
     1262                }
     1263                }
     1264
     1265                // copy did successfully completed
     1266                if ( successful ) {
     1267                        // temp store real copy link text
     1268                        var temp = AttachmentLinkButton.innerText;
     1269
     1270                // show 'Link Copied' text
     1271                AttachmentLinkButton.innerText = AttachmentLinkButton.getAttribute( 'data-link-copied-text' );
     1272
     1273                        // Trigger message to screen readers
     1274                        wp.a11y.speak( AttachmentLinkButton.getAttribute( 'data-link-copied-text' ) );
     1275
     1276                // remove 'Link Copied' text after 2s
     1277                setTimeout( function() {
     1278                        AttachmentLinkButton.innerText = temp;
     1279                }, 2000 );
     1280
     1281                        // Set the focus back to the button
     1282                        AttachmentLinkButton.focus();
     1283        }
     1284        } );
     1285} );
    12211286
    12221287/**
    12231288 * TinyMCE word count display
  • src/js/media/views/attachment/details.js

    diff --git a/src/js/media/views/attachment/details.js b/src/js/media/views/attachment/details.js
    index b9cf51445e..e5c1c99de0 100644
    a b Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp 
    2323                'click .trash-attachment':        'trashAttachment',
    2424                'click .untrash-attachment':      'untrashAttachment',
    2525                'click .edit-attachment':         'editAttachment',
     26                'click .copy-attachment-url':     'copyAttachmentLink',
    2627                'keydown':                        'toggleSelectionHandler'
    2728        },
    2829
     30        /**
     31         * Copies the attachment link to the clipboard.
     32         *
     33         * Browser support for Chrome 43+, Firefox 42+, Safari 10+, Edge and Internet Explorer 10+
     34         *
     35         * @since 5.5.0
     36         *
     37         * @param {MouseEvent} event A click event.
     38         *
     39         * @returns {void}
     40         */
     41        copyAttachmentLink: function( event ) {
     42
     43                var successful = false;
     44
     45                // Copy Link Label
     46                var AttachmentLinkButton = document.querySelector( '.copy-attachment-url' );
     47
     48                // Attachment Input
     49                var AttachmentLink = document.querySelector( 'input.attachment-details-copy-link' );
     50
     51                // Set the focus to the input
     52                AttachmentLink.focus();
     53
     54                // Select the input text
     55                AttachmentLink.select();
     56
     57                // especially for IE
     58                if (window.clipboardData && window.clipboardData.setData) {
     59                        successful = clipboardData.setData( "Text", AttachmentLink.value );
     60                }
     61
     62                // checking for browser support
     63                else if ( document.queryCommandSupported && document.queryCommandSupported( "copy" ) ) {
     64
     65                        try {
     66                                // process the 'copy' cmd
     67                                var successful = document.execCommand( 'copy' );
     68
     69                        // let user know copy didn't happen
     70                        } catch ( err ) {
     71                                alert( AttachmentLinkButton.getAttribute('data-link-error-text') );
     72                        }
     73                }
     74
     75                // copy did successfully completed
     76                if ( successful ) {
     77
     78                        // temp store real copy link text
     79                        var temp = AttachmentLinkButton.innerText;
     80
     81                        // show 'Link Copied' text
     82                        AttachmentLinkButton.innerText = AttachmentLinkButton.getAttribute('data-link-copied-text');
     83
     84                        // Trigger message to screen readers
     85                        wp.a11y.speak( AttachmentLinkButton.getAttribute( 'data-link-copied-text' ) );
     86
     87                        // remove 'Link Copied' text after 2s
     88                        setTimeout(function(){
     89                                AttachmentLinkButton.innerText = temp;
     90                        }, 2000 );
     91
     92                        // Set the focus back to the button
     93                        AttachmentLinkButton.focus();
     94                }
     95        },
     96
    2997        /**
    3098         * Shows the details of an attachment.
    3199         *
  • src/wp-admin/css/media.css

    diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
    index 3857baaf01..2edf273aa3 100644
    a b border color while dragging a file over the uploader drop area */ 
    797797        text-decoration: none;
    798798}
    799799
     800.copy-to-clipboard-container {
     801        position: relative;
     802}
     803
     804.copy-attachment-url {
     805        margin: 0;
     806        padding: 0 10px;
     807        height: 22px;
     808        position: absolute;
     809        top: 4px;
     810        right: 4px;
     811        outline: 0;
     812        background: #f3f5f6;
     813        border: 1px solid #7e8993;
     814        border-radius: 4px;
     815        box-shadow: -3px 0px 8px 2px #d8d8d8;
     816        cursor: pointer;
     817        font-weight: 500;
     818        color: #3c434a;
     819}
     820
     821.copy-attachment-url.edit-media-screen {
     822        line-height: 20px;
     823}
     824
     825#attachment-details-two-column-copy-link,
     826#attachment-details-copy-link,
     827#attachment_url {
     828        padding-right: 60px;
     829}
     830
     831@media only screen and (max-width: 768px) {
     832        .copy-attachment-url.edit-media-screen {
     833                top: 10px;
     834        }
     835}
     836
    800837
    801838/*------------------------------------------------------------------------------
    802839  14.2 - Image Editor
  • src/wp-admin/includes/media.php

    diff --git a/src/wp-admin/includes/media.php b/src/wp-admin/includes/media.php
    index c50666f6eb..d5fe3738b7 100644
    a b function attachment_submitbox_metadata() { 
    32673267        ?>
    32683268        <div class="misc-pub-section misc-pub-attachment">
    32693269                <label for="attachment_url"><?php _e( 'File URL:' ); ?></label>
    3270                 <input type="text" class="widefat urlfield" readonly="readonly" name="attachment_url" id="attachment_url" value="<?php echo esc_attr( $att_url ); ?>" />
     3270                <div class="copy-to-clipboard-container">
     3271                        <input type="text" class="widefat urlfield" name="attachment_url" id="attachment_url" value="<?php echo esc_attr( $att_url ); ?>" />
     3272                        <button data-link-copied-text="<?php _e( 'Copied!' ); ?>" data-link-error-text="<?php _e( 'Sorry, unable to copy!' ); ?>" aria-label="<?php _e( 'Copy Link' ); ?>" type="button" class="copy-attachment-url edit-media-screen"><?php _e( 'Copy' ); ?></button>
     3273                </div>
    32713274        </div>
    32723275        <div class="misc-pub-section misc-pub-filename">
    32733276                <?php _e( 'File name:' ); ?> <strong><?php echo $filename; ?></strong>
  • src/wp-includes/media-template.php

    diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
    index 87aa052171..620039cd58 100644
    a b function wp_print_media_templates() { 
    506506                                        </span>
    507507                                <# } #>
    508508                                <span class="setting" data-setting="url">
    509                                         <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
    510                                         <input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
     509                                        <label for="attachment_url"><?php _e( 'File URL:' ); ?></label>
     510                                        <div class="copy-to-clipboard-container">
     511                                                <input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" />
     512                                                <button data-link-copied-text="<?php _e( 'Copied!' ); ?>" data-link-error-text="<?php _e( 'Sorry, unable to copy!' ); ?>" aria-label="<?php _e( 'Copy Link' ); ?>" type="button" class="copy-attachment-url"><?php _e( 'Copy' ); ?></button>
     513                                        </div>
    511514                                </span>
    512515                                <div class="attachment-compat"></div>
    513516                        </div>
    function wp_print_media_templates() { 
    693696                        <textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
    694697                </span>
    695698                <span class="setting" data-setting="url">
    696                         <label for="attachment-details-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
    697                         <input type="text" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
     699                        <label for="attachment_url"><?php _e( 'File URL:' ); ?></label>
     700                        <div class="copy-to-clipboard-container">
     701                                <input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" />
     702                                <button data-link-copied-text="<?php _e( 'Copied!' ); ?>" data-link-error-text="<?php _e( 'Sorry, unable to copy!' ); ?>" aria-label="<?php _e( 'Copy Link' ); ?>" type="button" class="copy-attachment-url"><?php _e( 'Copy' ); ?></button>
     703                        </div>
    698704                </span>
    699705        </script>
    700706