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 );
})();