diff --git a/src/js/media.js b/src/js/media.js index 36d6c4dd0..f5ebe5ca7 100644 --- a/src/js/media.js +++ b/src/js/media.js @@ -44,63 +44,77 @@ ); }; - $( document ).ready( function() { - if ( wp.media.frame ) { - wp.media.frame.on( 'edit:attachment', () => { - - const altTagsButton = document.getElementById( 'classifai-rescan-alt-tags' ); - const imageTagsButton = document.getElementById( 'classifai-rescan-image-tags' ); - const ocrScanButton = document.getElementById( 'classifai-rescan-ocr' ); - const smartCropButton = document.getElementById( 'classifai-rescan-smart-crop' ); + /** + * Handle click events for Image Processing buttons added to media modal. + */ + const handleButtonsClick = () => { + const altTagsButton = document.getElementById( 'classifai-rescan-alt-tags' ); + const imageTagsButton = document.getElementById( 'classifai-rescan-image-tags' ); + const ocrScanButton = document.getElementById( 'classifai-rescan-ocr' ); + const smartCropButton = document.getElementById( 'classifai-rescan-smart-crop' ); - if ( altTagsButton ) { - altTagsButton.addEventListener( 'click', e => handleClick( - { - button: e.target, - endpoint: '/classifai/v1/alt-tags/', - callback: resp => { - if ( resp ) { - const textField = document.getElementById( 'attachment-details-two-column-alt-text' ); - textField.value = resp; - } + if ( altTagsButton ) { + altTagsButton.addEventListener( 'click', e => handleClick( + { + button: e.target, + endpoint: '/classifai/v1/alt-tags/', + callback: resp => { + if ( resp ) { + const textField = document.getElementById( 'attachment-details-two-column-alt-text' ) ?? document.getElementById( 'attachment-details-alt-text' ); + if ( textField ) { + textField.value = resp; } } - ) ); + } } + ) ); + } - if ( imageTagsButton ) { - imageTagsButton.addEventListener( 'click', e => handleClick( - { - button: e.target, - endpoint: '/classifai/v1/image-tags/' - } - ) ); + if ( imageTagsButton ) { + imageTagsButton.addEventListener( 'click', e => handleClick( + { + button: e.target, + endpoint: '/classifai/v1/image-tags/' } + ) ); + } - if ( ocrScanButton ) { - ocrScanButton.addEventListener( 'click', e => handleClick( - { - button: e.target, - endpoint: '/classifai/v1/ocr/', - callback: resp => { - if ( resp ) { - const textField = document.getElementById( 'attachment-details-two-column-description' ); - textField.value = resp; - } + if ( ocrScanButton ) { + ocrScanButton.addEventListener( 'click', e => handleClick( + { + button: e.target, + endpoint: '/classifai/v1/ocr/', + callback: resp => { + if ( resp ) { + const textField = document.getElementById( 'attachment-details-two-column-description' ) ?? document.getElementById( 'attachment-details-description' ); + if ( textField ) { + textField.value = resp; } } - ) ); + } } + ) ); + } - if ( smartCropButton ) { - smartCropButton.addEventListener( 'click', e => handleClick( - { - button: e.target, - endpoint: '/classifai/v1/smart-crop/' - } - ) ); + if ( smartCropButton ) { + smartCropButton.addEventListener( 'click', e => handleClick( + { + button: e.target, + endpoint: '/classifai/v1/smart-crop/' } + ) ); + } + }; + + $( document ).ready( function() { + if ( wp.media ) { + wp.media.view.Modal.prototype.on( 'open', function() { + wp.media.frame.on( 'selection:toggle', handleButtonsClick ); } ); } + + if ( wp.media.frame ) { + wp.media.frame.on( 'edit:attachment', handleButtonsClick ); + } } ); } )( jQuery ) ;