WordPress.org
Get WordPress

Make WordPress Core

Ticket #48463: 48463-2.patch

File 48463-2.patch, 8.7 KB (added by sajjad67, 5 years ago)

Patch with lot's of improvement of click event and event message plus button design

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

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

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

     
    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
    2930        /**
     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.2.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
     60                successful = clipboardData.setData( "Text", AttachmentLink.value );
     61
     62            }
     63            // checking for browser support
     64            else if ( document.queryCommandSupported && document.queryCommandSupported( "copy" ) ) {
     65
     66                        try {
     67                       
     68                        // process the 'copy' cmd
     69                        var successful = document.execCommand( 'copy' );
     70                   
     71                    // let user know copy didn't happen
     72                    } catch ( err ) {
     73                       
     74                        alert( AttachmentLinkButton.getAttribute('data-link-error-text') );
     75                }
     76                }
     77
     78                // copy did successfully completed
     79                if ( successful ) {
     80
     81                        // temp store real copy link text
     82
     83                        var temp = AttachmentLinkButton.innerText;
     84
     85                // show 'Link Copied' text
     86                AttachmentLinkButton.innerText = AttachmentLinkButton.getAttribute('data-link-copied-text');
     87
     88                // remove 'Link Copied' text after 2s
     89                setTimeout(function(){
     90
     91                        AttachmentLinkButton.innerText = temp;
     92
     93                }, 2000 );
     94        }
     95        },
     96
     97        /**
    3098         * Shows the details of an attachment.
    3199         *
    32100         * @since 3.5.0

  • src/wp-admin/css/media.css

     
    12811281                max-width: 100%;
    12821282        }
    12831283}
     1284
     1285.copy-to-clipboard-container {
     1286    position: relative;
     1287}
     1288
     1289.copy-attachment-url:focus {
     1290    outline: none;
     1291}
     1292
     1293.copy-attachment-url {
     1294    position: absolute;
     1295    top: 4px;
     1296    right: 4px;
     1297    cursor: pointer;
     1298    margin: 0;
     1299    outline: 0;
     1300    font-weight: 500;
     1301    border-radius: 4px;
     1302    color: #3c434a;
     1303    border: 1px solid #7e8993;
     1304    height: 22px;
     1305    background: #f3f5f6;
     1306    padding: 0 10px;
     1307    box-shadow: -3px 0px 8px 2px #d8d8d8;
     1308}
     1309
     1310.copy-attachment-url.edit-media-screen {
     1311    line-height: 20px;
     1312}
     1313
     1314#attachment-details-two-column-copy-link,
     1315#attachment-details-copy-link,
     1316#attachment_url {
     1317    padding-right: 60px;
     1318}
     1319
     1320@media only screen and (max-width: 768px) {
     1321        .copy-attachment-url.edit-media-screen {
     1322            top: 10px;
     1323        }
     1324}
     1325 No newline at end of file

  • src/wp-admin/includes/media.php

     
    32483248        ?>
    32493249        <div class="misc-pub-section misc-pub-attachment">
    32503250                <label for="attachment_url"><?php _e( 'File URL:' ); ?></label>
    3251                 <input type="text" class="widefat urlfield" readonly="readonly" name="attachment_url" id="attachment_url" value="<?php echo esc_attr( $att_url ); ?>" />
     3251                <div class="copy-to-clipboard-container">
     3252                        <input type="text" class="widefat urlfield" name="attachment_url" id="attachment_url" value="<?php echo esc_attr( $att_url ); ?>" />
     3253                        <button data-link-copied-text="<?php _e( 'Copied!' ); ?>" data-link-error-text="<?php _e( 'Sorry, unable to copy!' ); ?>" aria-label="<?php _e( 'Copy Link' ); ?>" title="<?php _e( 'Copy Link To Clipboard!' ); ?>" type="button" class="copy-attachment-url edit-media-screen"><?php _e( 'Copy' ); ?></button>
     3254                </div>
    32523255        </div>
    32533256        <div class="misc-pub-section misc-pub-filename">
    32543257                <?php _e( 'File name:' ); ?> <strong><?php echo $filename; ?></strong>

  • src/wp-includes/media-template.php

     
    501501                                        </span>
    502502                                <# } #>
    503503                                <span class="setting" data-setting="url">
    504                                         <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
    505                                         <input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
     504                                        <label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'File URL' ); ?></label>
     505                                        <div class="copy-to-clipboard-container">
     506                                                <input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" />
     507                                                <button data-link-copied-text="<?php _e( 'Copied!' ); ?>" data-link-error-text="<?php _e( 'Sorry, unable to copy!' ); ?>" aria-label="<?php _e( 'Copy Link' ); ?>" title="<?php _e( 'Copy Link To Clipboard!' ); ?>" type="button" class="copy-attachment-url"><?php _e( 'Copy' ); ?></button>
     508                                        </div>
    506509                                </span>
    507510                                <div class="attachment-compat"></div>
    508511                        </div>
    … …  
    683686                        <textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
    684687                </span>
    685688                <span class="setting" data-setting="url">
    686                         <label for="attachment-details-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
    687                         <input type="text" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
     689                        <label for="attachment-details-copy-link" class="name"><?php _e( 'File URL' ); ?></label>
     690                        <div class="copy-to-clipboard-container">
     691                                <input type="text" class="attachment-details-copy-link" id="attachment-details-copy-link" value="{{ data.url }}" />
     692                                <button data-link-copied-text="<?php _e( 'Copied!' ); ?>" data-link-error-text="<?php _e( 'Sorry, unable to copy!' ); ?>" aria-label="<?php _e( 'Copy Link' ); ?>" title="<?php _e( 'Copy Link To Clipboard!' ); ?>" type="button" class="copy-attachment-url"><?php _e( 'Copy' ); ?></button>
     693                        </div>
    688694                </span>
    689695        </script>
    690696