media-replace.js
| 1 | (function( $ ) { |
| 2 | 'use strict'; |
| 3 | |
| 4 | $(document).ready( function() { |
| 5 | |
| 6 | // Place the Replace Media section after the side metaboxes |
| 7 | $('#media-replace-div').appendTo('#postbox-container-1'); |
| 8 | |
| 9 | }); |
| 10 | |
| 11 | })( jQuery ); |
| 12 | |
| 13 | // let asenhaMRVars = asenhaMR; |
| 14 | |
| 15 | // Open media modal on clicking Select New Media File button. |
| 16 | // This is set with onclick="replaceMedia('mime/type')" on the button HTML |
| 17 | function replaceMedia(originalAttachmentId,oldImageMimeType) { |
| 18 | if ( oldImageMimeType ) { |
| 19 | // There's a mime type defined. Do nothing. |
| 20 | } else { |
| 21 | // We're in the grid view of an image. Get the mime type form the file info in DOM. |
| 22 | if ( jQuery('.details .file-type').length ) { |
| 23 | var oldImageMimeTypeFromDom = jQuery('.details .file-type').html(); |
| 24 | } |
| 25 | // Sometimes .file-type div is not there, and instead, a second .filename div is used to display file type info |
| 26 | else if ( jQuery('.details .filename:nth-child(2)').length ) { |
| 27 | var oldImageMimeTypeFromDom = jQuery('.details .filename:nth-child(2)').html(); |
| 28 | } |
| 29 | // Replace '<strong>File type:</strong>' in any language with empty string |
| 30 | oldImageMimeTypeFromDom = oldImageMimeTypeFromDom.replace(/<strong>(.*?)<\/strong>/, ''); |
| 31 | // Replace one blank spacing with an empty space / no space |
| 32 | oldImageMimeType = oldImageMimeTypeFromDom.replace(' ', ''); |
| 33 | } |
| 34 | |
| 35 | // https://codex.wordpress.org/Javascript_Reference/wp.media |
| 36 | // https://github.com/ericandrewlewis/wp-media-javascript-guide |
| 37 | |
| 38 | // Instantiate the media frame |
| 39 | mediaFrame = wp.media({ |
| 40 | title: mediaReplace.selectMediaText, |
| 41 | button: { |
| 42 | text: mediaReplace.performReplacementText |
| 43 | }, |
| 44 | multiple: false // Enable/disable multiple select |
| 45 | }); |
| 46 | |
| 47 | |
| 48 | // Open the media dialog and store it in a variable |
| 49 | var mediaFrameEl = jQuery(mediaFrame.open().el); |
| 50 | |
| 51 | // Open the "Upload files" tab on load |
| 52 | mediaFrameEl.find('#menu-item-upload').click(); |
| 53 | |
| 54 | // When an image is selected |
| 55 | mediaFrameEl.on('click', 'li.attachment', function(e) { |
| 56 | var mimeTypeWarning = '<div class="mime-type-warning">The selected image is of a different type than the image to replace. Please choose an image with the same type.</div>'; |
| 57 | var selectedAttachment = mediaFrame.state().get('selection').first().toJSON(); |
| 58 | var selectedAttachmentMimeType = selectedAttachment.mime; |
| 59 | |
| 60 | if ( oldImageMimeType != selectedAttachmentMimeType ) { |
| 61 | jQuery('.media-frame-toolbar .media-toolbar-primary .mime-type-warning').remove(); |
| 62 | jQuery('.media-frame-toolbar .media-toolbar-primary').prepend(mimeTypeWarning); |
| 63 | jQuery('.media-frame-toolbar .media-toolbar-primary .media-button-select').prop('disabled', true); |
| 64 | } else { |
| 65 | jQuery('.media-frame-toolbar .media-toolbar-primary .mime-type-warning').remove(); |
| 66 | jQuery('.media-frame-toolbar .media-toolbar-primary .media-button-select').prop('disabled', false); |
| 67 | } |
| 68 | }); |
| 69 | |
| 70 | // Make sure the "Drop files to upload" blue overlay is closed after dropping one or more files |
| 71 | jQuery('.supports-drag-drop:not(.upload.php)').on( 'drop', function() { |
| 72 | jQuery('.uploader-window').hide(); |
| 73 | }); |
| 74 | |
| 75 | // When Perform Replacement button is clicked in the media frame... |
| 76 | mediaFrame.on('select', function() { |
| 77 | |
| 78 | // Get media attachment details from the frame state |
| 79 | var attachment = mediaFrame.state().get('selection').first().toJSON(); |
| 80 | var newImageMimeType = attachment.mime; |
| 81 | |
| 82 | if ( oldImageMimeType == newImageMimeType ) { |
| 83 | |
| 84 | // Send the attachment id of the replacement / new image to our hidden input |
| 85 | jQuery('#new-attachment-id-'+originalAttachmentId).val(attachment.id); |
| 86 | |
| 87 | if (jQuery('#new-attachment-id-'+originalAttachmentId).closest('.media-modal').length) { |
| 88 | |
| 89 | } else { |
| 90 | // For media library list view |
| 91 | // "Perform Replacement" button has been clicked. Submit the edit form, which includes 'new-attachment-id' |
| 92 | jQuery('#new-attachment-id-'+originalAttachmentId).closest("form").submit(); |
| 93 | jQuery(mediaFrame.close()); |
| 94 | } |
| 95 | } |
| 96 | |
| 97 | }); |
| 98 | |
| 99 | } |