Add a "Beta Media" button to the post editor. Currently, it is only capable of inserting images. Other attachment types and galleries need not apply... yet.

* Added `wp.media.string.image( attachment, props )` for generating an image as a string from an attachment and relevant attachment display properties.
* Properly localized the gallery workflow.
* Added `Workflow.update()`, which closes the modal, triggers an `update` event, and resets the selection.
* Added `wp.mce.media` to manage the various media workflows for editors.

see #21813, #21814, #21390.


git-svn-id: http://core.svn.wordpress.org/trunk@22036 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-09-27 04:09:43 +00:00
parent 3ffb74a6ef
commit eec758fd26
6 changed files with 160 additions and 56 deletions

View File

@ -381,6 +381,8 @@ function media_buttons($editor_id = 'content') {
$img = '<img src="' . esc_url( admin_url( 'images/media-button.png?ver=20111005' ) ) . '" width="16" height="16" />';
echo '<a href="#" class="button insert-media" data-editor="' . esc_attr( $editor_id ) . '" title="' . esc_attr__( 'Add Media' ) . '">' . sprintf( __('%s Beta Media'), $img ) . '</a>';
echo '<a href="' . esc_url( get_upload_iframe_src() ) . '" class="thickbox add_media" id="' . esc_attr( $editor_id ) . '-add_media" title="' . esc_attr__( 'Add Media' ) . '" onclick="return false;">' . sprintf( $context, $img ) . '</a>';
}
add_action( 'media_buttons', 'media_buttons' );

View File

@ -86,3 +86,66 @@ var tb_position;
});
})(jQuery);
// WordPress, TinyMCE, and Media
// -----------------------------
(function($){
// Stores the editors' `wp.media.controller.Workflow` instaces.
var workflows = {};
wp.mce.media = {
insert: send_to_editor,
add: function( id, options ) {
var workflow = this.get( id );
if ( workflow )
return workflow;
workflow = workflows[ id ] = wp.media( _.defaults( options || {}, {
multiple: true
} ) );
workflow.on( 'update', function( selection ) {
this.insert( '\n' + selection.map( function( attachment ) {
return wp.media.string.image( attachment );
}).join('\n\n') + '\n' );
}, this );
return workflow;
},
get: function( id ) {
return workflows[ id ];
},
remove: function( id ) {
delete workflows[ id ];
},
init: function() {
$('.insert-media').on( 'click', function( event ) {
var editor = $(this).data('editor'),
workflow;
event.preventDefault();
if ( ! editor )
return;
workflow = wp.mce.media.get( editor );
// If the workflow exists, just open it.
if ( workflow ) {
workflow.open();
return;
}
// Initialize the editor's workflow if we haven't yet.
wp.mce.media.add( editor );
});
}
};
$( wp.mce.media.init )
}(jQuery));

View File

@ -1008,7 +1008,7 @@
.wp-editor-tools {
height: 30px;
padding: 0 10px;
padding: 0 10px 0 0;
}
.wp-editor-container {
@ -1079,16 +1079,18 @@ html[dir="rtl"] .wp-switch-editor {
color: #555;
}
.wp-media-buttons {
line-height: 1;
padding: 9px 0 0;
.wp-media-buttons .button {
margin-right: 5px;
}
.wp-media-buttons .insert-media {
padding-left: 0.4em;
}
.wp-media-buttons a {
text-decoration: none;
color: #333;
color: #464646;
font-size: 12px;
vertical-align: bottom;
}
.wp-media-buttons img {

View File

@ -359,45 +359,68 @@ if ( typeof wp === 'undefined' )
// Default TinyMCE Views
// ---------------------
(function($){
var mceview = wp.mce.view,
mceFreeAttrs;
var mceview = wp.mce.view;
wp.media.string = {};
wp.media.string.image = function( attachment, props ) {
var classes, img, options, size;
attachment = attachment.toJSON();
props = _.defaults( props || {}, {
img: {},
align: getUserSetting( 'align', 'none' ),
size: getUserSetting( 'imgsize', 'medium' ),
link: getUserSetting( 'urlbutton', 'post' )
});
img = _.clone( props.img );
classes = img['class'] ? img['class'].split(/\s+/) : [];
size = attachment.sizes ? attachment.sizes[ props.size ] : {};
if ( ! size )
delete props.size;
img.width = size.width || attachment.width;
img.height = size.height || attachment.height;
img.src = size.url || attachment.url;
// Update `img` classes.
if ( props.align )
classes.push( 'align' + props.align );
if ( props.size )
classes.push( 'size-' + props.size );
classes.push( 'wp-image-' + attachment.id );
img['class'] = _.compact( classes ).join(' ');
// Generate `img` tag options.
options = {
tag: 'img',
attrs: img,
single: true
};
// Generate the `a` element options, if they exist.
if ( props.anchor ) {
options = {
tag: 'a',
attrs: props.anchor,
content: options
};
}
return wp.html.string( options );
};
mceview.add( 'attachment', {
pattern: new RegExp( '(?:<a([^>]*)>)?<img([^>]*class=(?:"[^"]*|\'[^\']*)\\bwp-image-(\\d+)[^>]*)>(?:</a>)?' ),
text: function( instance ) {
var img = _.clone( instance.img ),
classes = img['class'].split(/\s+/),
options;
// Update `img` classes.
if ( instance.align )
classes.push( 'align' + instance.align );
if ( instance.size )
classes.push( 'size-' + instance.size );
classes.push( 'wp-image-' + instance.model.id );
img['class'] = _.compact( classes ).join(' ');
// Generate `img` tag options.
options = {
tag: 'img',
attrs: img,
single: true
};
// Generate the `a` element options, if they exist.
if ( instance.anchor ) {
options = {
tag: 'a',
attrs: instance.anchor,
content: options
};
}
return wp.html.string( options );
var props = _.pick( instance, 'align', 'size', 'link', 'img', 'anchor' );
return wp.media.string.image( instance.model, props );
},
view: {

View File

@ -116,6 +116,12 @@
return this;
},
update: function() {
this.close();
this.trigger( 'update', this.selection );
this.selection.clear();
},
createSelection: function() {
var controller = this;
@ -479,7 +485,8 @@
'insert-into-post': {
text: l10n.insertIntoPost,
priority: 30
priority: 30,
click: _.bind( controller.update, controller )
},
'add-to-gallery': {
@ -528,24 +535,23 @@
this.toolbarView = new media.view.Toolbar({
items: {
'return-to-library': {
text: 'Return to media library',
text: l10n.returnToLibrary,
priority: -40,
click: function() {
controller.render('library');
}
},
'insert-gallery-into-post': {
style: 'primary',
text: 'Insert gallery into post',
style: 'primary',
text: l10n.insertGalleryIntoPost,
priority: 40,
click: function() {
controller.close();
}
click: _.bind( controller.update, controller )
},
'add-images': {
text: 'Add images from media library',
'add-images-from-library': {
text: l10n.addImagesFromLibrary,
priority: 30
}
}

View File

@ -297,7 +297,7 @@ function wp_default_scripts( &$scripts ) {
'type' => 'characters' == _x( 'words', 'word count: words or characters?' ) ? 'c' : 'w',
) );
$scripts->add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox' ), false, 1 );
$scripts->add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox', 'mce-view' ), false, 1 );
$scripts->add( 'hoverIntent', "/wp-includes/js/hoverIntent$suffix.js", array('jquery'), 'r6', 1 );
@ -317,12 +317,20 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'media-models', "/wp-includes/js/media-models$suffix.js", array( 'backbone', 'jquery' ), false, 1 );
$scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'media-models', 'wp-plupload' ), false, 1 );
did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(
'insertMedia' => __( 'Insert Media' ),
'selectMediaSingular' => __( 'Select a media file:' ),
'selectMediaMultiple' => __( 'Select one or more media files:' ),
'createNewGallery' => __( 'Create a new gallery' ),
'insertIntoPost' => __( 'Insert into post' ),
'addToGallery' => __( 'Add to gallery' ),
// Generic
'insertMedia' => __( 'Insert Media' ),
'selectMediaSingular' => __( 'Select a media file:' ),
'selectMediaMultiple' => __( 'Select one or more media files:' ),
// Library
'createNewGallery' => __( 'Create a new gallery' ),
'insertIntoPost' => __( 'Insert into post' ),
'addToGallery' => __( 'Add to gallery' ),
// Gallery
'returnToLibrary' => __( 'Return to media library' ),
'insertGalleryIntoPost' => __( 'Insert gallery into post' ),
'addImagesFromLibrary' => __( 'Add images from media library' ),
) );
$scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 );