Ticket #48463: 48463.3.diff

src/js/_enqueues/admin/post.js

@@ -1217 +1217 @@
                         window.history.replaceState( null, null, location );
                 });
         }
-});
+
+        /**
+         * Copies the attachment link to the clipboard.
+         * 
+         * Browser support for Chrome 43+, Firefox 42+, Safari 10+, Edge and Internet Explorer 10+
+         *
+         * @since 5.5.0
+         *
+         * @param {MouseEvent} event A click event.
+         *
+         * @returns {void}
+         */
+        $document.on( 'click', '.copy-attachment-url', function( event ) {
+
+                var successful = false;
+
+                // Copy Link Label
+                var AttachmentLinkButton = this;
+
+                // Attachment Input
+                var AttachmentLink = document.querySelector( '#attachment_url' );
+
+                // Set the focus to the input
+                AttachmentLink.focus();
+
+            // Select the input text
+            AttachmentLink.select();
+
+            // especially for IE
+            if ( window.clipboardData && window.clipboardData.setData ) {
+                successful = clipboardData.setData( "Text", AttachmentLink.value );
+            }
+
+            // checking for browser support
+            else if ( document.queryCommandSupported && document.queryCommandSupported( "copy" ) ) {
+                // process the 'copy' cmd
+                        try {
+                        var successful = document.execCommand( 'copy' );
+
+                        // let user know copy didn't happen
+                    } catch ( err ) {
+                        alert( AttachmentLinkButton.getAttribute('data-link-error-text') );
+                }
+                }
+
+                // copy did successfully completed
+                if ( successful ) {
+                        // temp store real copy link text
+                        var temp = AttachmentLinkButton.innerText;
+
+                // show 'Link Copied' text
+                AttachmentLinkButton.innerText = AttachmentLinkButton.getAttribute( 'data-link-copied-text' );
+
+                        // Trigger message to screen readers
+                        wp.a11y.speak( AttachmentLinkButton.getAttribute( 'data-link-copied-text' ) );
+
+                // remove 'Link Copied' text after 2s
+                setTimeout( function() {
+                        AttachmentLinkButton.innerText = temp;
+                }, 2000 );
+
+                        // Set the focus back to the button
+                        AttachmentLinkButton.focus();
+        }
+        } );
+} );
 
 /**
  * TinyMCE word count display

src/js/media/views/attachment/details.js

@@ -23 +23 @@
                 'click .trash-attachment':        'trashAttachment',
                 'click .untrash-attachment':      'untrashAttachment',
                 'click .edit-attachment':         'editAttachment',
+                'click .copy-attachment-url':     'copyAttachmentLink',
                 'keydown':                        'toggleSelectionHandler'
         },
 
+        /**
+         * Copies the attachment link to the clipboard.
+         * 
+         * Browser support for Chrome 43+, Firefox 42+, Safari 10+, Edge and Internet Explorer 10+
+         *
+         * @since 5.5.0
+         *
+         * @param {MouseEvent} event A click event.
+         *
+         * @returns {void}
+         */
+        copyAttachmentLink: function( event ) {
+
+                var successful = false;
+
+                // Copy Link Label
+                var AttachmentLinkButton = document.querySelector( '.copy-attachment-url' );
+
+                // Attachment Input
+                var AttachmentLink = document.querySelector( 'input.attachment-details-copy-link' );
+
+                // Set the focus to the input
+                AttachmentLink.focus();
+
+                // Select the input text
+                AttachmentLink.select();
+
+                // especially for IE
+                if (window.clipboardData && window.clipboardData.setData) {
+                        successful = clipboardData.setData( "Text", AttachmentLink.value );
+                }
+
+                // checking for browser support
+                else if ( document.queryCommandSupported && document.queryCommandSupported( "copy" ) ) {
+
+                        try {
+                                // process the 'copy' cmd
+                                var successful = document.execCommand( 'copy' );
+
+                        // let user know copy didn't happen
+                        } catch ( err ) {
+                                alert( AttachmentLinkButton.getAttribute('data-link-error-text') );
+                        }
+                }
+
+                // copy did successfully completed
+                if ( successful ) {
+
+                        // temp store real copy link text
+                        var temp = AttachmentLinkButton.innerText;
+
+                        // show 'Link Copied' text
+                        AttachmentLinkButton.innerText = AttachmentLinkButton.getAttribute('data-link-copied-text');
+
+                        // Trigger message to screen readers
+                        wp.a11y.speak( AttachmentLinkButton.getAttribute( 'data-link-copied-text' ) );
+
+                        // remove 'Link Copied' text after 2s
+                        setTimeout(function(){
+                                AttachmentLinkButton.innerText = temp;
+                        }, 2000 );
+
+                        // Set the focus back to the button
+                        AttachmentLinkButton.focus();
+                }
+        },
+
         /**
          * Shows the details of an attachment.
          *

src/wp-admin/css/media.css

@@ -797 +797 @@
         text-decoration: none;
 }
 
+.copy-to-clipboard-container {
+        position: relative;
+}
+
+.copy-attachment-url {
+        margin: 0;
+        padding: 0 10px;
+        height: 22px;
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        outline: 0;
+        background: #f3f5f6;
+        border: 1px solid #7e8993;
+        border-radius: 4px;
+        box-shadow: -3px 0px 8px 2px #d8d8d8;
+        cursor: pointer;
+        font-weight: 500;
+        color: #3c434a;
+}
+
+.copy-attachment-url.edit-media-screen {
+        line-height: 20px;
+}
+
+#attachment-details-two-column-copy-link,
+#attachment-details-copy-link,
+#attachment_url {
+        padding-right: 60px;
+}
+
+@media only screen and (max-width: 768px) {
+        .copy-attachment-url.edit-media-screen {
+                top: 10px;
+        }
+}
+
 
 /*------------------------------------------------------------------------------
   14.2 - Image Editor

src/wp-admin/includes/media.php

@@ -3267 +3267 @@
         ?>
         <div class="misc-pub-section misc-pub-attachment">
                 <label for="attachment_url"><?php _e( 'File URL:' ); ?></label>
-                <input type="text" class="widefat urlfield" readonly="readonly" name="attachment_url" id="attachment_url" value="<?php echo esc_attr( $att_url ); ?>" />
+                <div class="copy-to-clipboard-container">
+                        <input type="text" class="widefat urlfield" name="attachment_url" id="attachment_url" value="<?php echo esc_attr( $att_url ); ?>" />
+                        <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>
+                </div>
         </div>
         <div class="misc-pub-section misc-pub-filename">
                 <?php _e( 'File name:' ); ?> <strong><?php echo $filename; ?></strong>

src/wp-includes/media-template.php

@@ -506 +506 @@
                                         </span>
                                 <# } #>
                                 <span class="setting" data-setting="url">
-                                        <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
-                                        <input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
+                                        <label for="attachment_url"><?php _e( 'File URL:' ); ?></label>
+                                        <div class="copy-to-clipboard-container">
+                                                <input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" />
+                                                <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>
+                                        </div>
                                 </span>
                                 <div class="attachment-compat"></div>
                         </div>
@@ -693 +696 @@
                         <textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
                 </span>
                 <span class="setting" data-setting="url">
-                        <label for="attachment-details-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
-                        <input type="text" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
+                        <label for="attachment_url"><?php _e( 'File URL:' ); ?></label>
+                        <div class="copy-to-clipboard-container">
+                                <input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" />
+                                <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>
+                        </div>
                 </span>
         </script>