accessing wp.media api from a tinymce plugin

Question

I'm trying to create a tinymce plugin that generates a shortcode containing two image ids:

[image-fade old="xx" new="yy"]

I would like to let users select images directly from the media selector frame, but haven't figured out how to do this. I am able to allow the users to enter the ID in an alert box, but can't do better than that. This is what I have so far:

( function() {
    var open_media_window = function () {
        var first={};

        var window = wp.media({
            title: 'Insert a media',
            library: {type: 'image'},
            multiple: false,
            button: {text: 'Insert'}
        });
        window.on('select', function(){
            var files = window.state().get('selection').toArray();
            first = files[0].toJSON();
            console.log ("first is: " + first);
            return first.id;
        });
        window.open();
        return first.id;

    };
    tinymce.create( 'tinymce.plugins.hhImage', {
    init: function( ed, url ) {
        ed.addButton( 'hh_image', {
        title: 'Insert Historical Image Overlay',
        image: 'http://matttest.hackinghistory.ca/wp-content/plugins/custom-content-type-manager/js/plugins/../../images/wrench.png',
        onclick: function() {       
            //old = prompt( "Enter id of old photo", "" );
            old = open_media_window();
            //newImage = prompt( "Enter id of new photo", "" );
            newImage = open_media_window();
            ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' );
        }
        });
    },
    createControl: function( n, cm ) { return null; },
    });
    tinymce.PluginManager.add( 'hh_image', tinymce.plugins.hhImage );
})();

The media selector window will open, and I can select two images, but nothing gets logged to the javascript console and the shortcode produced is:

[image-fade old="undefined" new="undefined"]

What am I doing wrong here? Thanks for the help! Matt

Answer 1

I have a working solution that uses Promises, but it is ugly and I would certainly appreciate tips. I haven't been able to figure out how tot instantiate a subclass of promises, so the code is repetitive and inefficient, and also instantiates the wp.media frame twice. In addition, there's no "reject" directive in the Promise so if the Promise doesn't resolve it will just hang in empty space forever.

I'm not going to accept this answer as I feel it's such bad code that I'm sure someone can come up with something better!

    /**
 * TinyMCE buttons for custom shortcodes
 */
( function() {
    var open_media_window = function () {
        var first={};

        var window = wp.media({
            title: 'Insert a media',
            library: {type: 'image'},
            multiple: false,
            button: {text: 'Insert'}
        });
        window.on('select', function(){
            var files = window.state().get('selection').toArray();
            first = files[0].toJSON();
            console.log ("first is: " + first);
            return first.id;
        });
        window.open();
        return first.id;

    };
    tinymce.create( 'tinymce.plugins.hhImage', {
        init: function( ed, url ) {
            ed.addButton( 'hh_image', {
            title: 'Insert Historical Image Overlay',
            image: url + '/hist-image.png',
            onclick: function() {

                //old = prompt( "Enter id of old photo", "" );
                    var promise = new Promise(function(resolve,reject) {
                        var window =  wp.media({
                            title: 'Choose HISTORICAL image',
                            library: {type: 'image'},
                            multiple: false,
                            button: {text: 'Use as HISTORICAL image'}
                        });
                        window.on('select', function(){
                            var files = window.state().get('selection').toArray();
                            first = files[0].toJSON();
                            console.log ("first is: " + first);
                            resolve(first.id);
                        });
                        window.open();  
                    });
                    promise.then(function(data) {
                        var old = data;
                        var promise2  = new Promise(function (resolve,reject) {
                            var window =  wp.media({
                                title: 'Choose CONTEMPORARY image',
                                library: {type: 'image'},
                                multiple: false,
                                button: {text: 'Use as CONTEMPORARY image'}
                            });
                            window.on('select', function(){
                                var files = window.state().get('selection').toArray();
                                first = files[0].toJSON();
                                console.log ("first is: " + first);
                                resolve(first.id);
                            });
                            window.open();  
                        });
                        promise2.then(function(data2) {
                            var newImage = data2;
                            ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' );
                        });
                    });



                      //  open_media_window();
                      //  old = promise.done();
                    //newImage = prompt( "Enter id of new photo", "" );
                        //newImage = open_media_window();
                    //ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' );
                }
                });
                        },
            createControl: function( n, cm ) { return null; },
        });
                    tinymce.PluginManager.add( 'hh_image', tinymce.plugins.hhImage );
                  })();