Run javascript upon successfully set featured image

Question

I'm looking into running Color Thief against the featured image whenever it is set or updated. I can't seem to find any way on how to hook into this event.

Currently I'm doing what I feel is a bit hacky

jQuery(document).on('click', '#__wp-uploader-id-2 .media-toolbar-primary', function(event){

  setTimeout(function() {

    var image = new Image();
    image.src = 'image.jpg';

    var colorThief = new ColorThief();
    var dominantColor = colorThief.getColor(image);

    console.log(dominantColor);
  }, 100);

});

There must be a better way?

I've been looking into making a copy of the featured image meta box, but feels very cumbersome.

function pom_image_box() {
  remove_meta_box('postimagediv', 'artist', 'side');
  add_meta_box('postimagediv', __('POM Image'), __NAMESPACE__ .'\\pom_post_thumbnail_meta_box', 'artist', 'normal', 'high');
}
add_action('do_meta_boxes', __NAMESPACE__ .'\\pom_image_box');


function pom_post_thumbnail_meta_box( $post ) {
  $thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
  echo _pom_wp_post_thumbnail_html( $thumbnail_id, $post->ID );
}



function _pom_wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
  global $content_width, $_wp_additional_image_sizes;

  $post = get_post( $post );

  $upload_iframe_src = esc_url( get_upload_iframe_src('image', $post->ID ) );
  $set_thumbnail_link = '<p class="hide-if-no-js"><a title="' . esc_attr__( 'Set featured image' ) . '" href="%s" id="set-post-thumbnail" class="thickbox">%s</a></p>';
  $content = sprintf( $set_thumbnail_link, $upload_iframe_src, esc_html__( 'Set featured image' ) );

  if ( $thumbnail_id && get_post( $thumbnail_id ) ) {
    $old_content_width = $content_width;
    $content_width = 266;
    if ( !isset( $_wp_additional_image_sizes['post-thumbnail'] ) )
      $thumbnail_html = wp_get_attachment_image( $thumbnail_id, array( $content_width, $content_width ) );
    else
      $thumbnail_html = wp_get_attachment_image( $thumbnail_id, 'post-thumbnail' );
    if ( !empty( $thumbnail_html ) ) {
      $ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
      $content = sprintf( $set_thumbnail_link, $upload_iframe_src, $thumbnail_html );
      $content .= '<p class="hide-if-no-js"><a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail(\'' . $ajax_nonce . '\');return false;">' . esc_html__( 'Remove featured image' ) . '</a></p>';
    }
    $content_width = $old_content_width;
  }

  /**
   * Filter the admin post thumbnail HTML markup to return.
   *
   * @since 2.9.0
   *
   * @param string $content Admin post thumbnail HTML markup.
   * @param int    $post_id Post ID.
   */
  return apply_filters( 'admin_post_thumbnail_html', $content, $post->ID );
}

Not sure where I can go from here, I haven't found exactly where wpsetAsThumbnail is called. And even if I do. I tried modifying set-post-thumbnail.js, but my console.log's did not show up.

I also tried https://wordpress.stackexchange.com/a/74596/2830 (with updated code since it's changed since 2012) But that breaks the featured image functionality altogether.

Answer 1

You could use .ajaxComplete, as mentioned by @onetrickpony in https://wordpress.stackexchange.com/a/36597/57034, except do it globally on document, as mentioned in http://api.jquery.com/ajaxcomplete/, then filter based on action:

add_action( 'admin_print_footer_scripts', function () {
    ?>
    <script type="text/javascript">
    jQuery(function ($) {
        $(document).ajaxComplete(function (event, xhr, settings) {
            var match;
            if (typeof settings.data === 'string'
            && /action=set-post-thumbnail/.test(settings.data)
            && xhr.responseJSON && typeof xhr.responseJSON.data === 'string') {
                match = /<img[^>]+src="([^"]+)"/.exec(xhr.responseJSON.data);
                if (match !== null) {
                    var image = new Image();
                    $(image).load(function () {
                        var colorThief = new ColorThief();
                        var dominantColor = colorThief.getColor(image);

                        console.log(dominantColor);
                    });
                    image.src = match[1];
                }
            }
        });
    });
    </script>
    <?php
} );