Ticket #48463: 48463.patch

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.2.0
+         *
+         * @param {MouseEvent} event A click event.
+         *
+         * @returns {void}
+         */
+        copyAttachmentLink: function( event ) {
+
+                var successful = false;
+                
+                // Copy Link Label
+                var AttachmentLinkLabel = document.querySelector( 'label.name.copy-attachment-url' );
+                
+                // Attachment Input
+                var AttachmentLink = document.querySelector( '#attachment-details-two-column-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( 'Sorry, unable to copy', err );
+                }
+                }
+
+                // copy did successfully completed
+                if ( successful ) {
+
+                // show 'Link Copied' text 1s animation
+                AttachmentLinkLabel.classList.add("copied");
+
+                // remove 'Link Copied' text after 2s
+                setTimeout(function(){
+
+                        AttachmentLinkLabel.classList.remove("copied");
+
+                }, 2000 );
+        }
+        },
+
+        /**
          * Shows the details of an attachment.
          *
          * @since 3.5.0

src/wp-admin/css/media.css

@@ -1281 +1281 @@
                 max-width: 100%;
         }
 }
+
+@keyframes showCopiedText {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+label.name.copy-attachment-url.copied:before {
+    position: absolute;
+    content: 'Link Copied!';
+    bottom: 30px;
+    left: 5px;
+    color: white;
+    background: green;
+    padding: 2px 8px;
+    border-radius: 3px;
+    -webkit-animation: showCopiedText 1s normal forwards;
+    -moz-animation: showCopiedText 1s normal forwards;
+    -o-animation: showCopiedText 1s normal forwards;
+    animation: showCopiedText 1s normal forwards;
+}
+ No newline at end of file

src/wp-includes/media-template.php

@@ -501 +501 @@
                                         </span>
                                 <# } #>
                                 <span class="setting" data-setting="url">
-                                        <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
+                                        <label for="attachment-details-two-column-copy-link" class="name copy-attachment-url"><?php _e( 'Copy Link' ); ?></label>
                                         <input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
                                 </span>
                                 <div class="attachment-compat"></div>