Properly align MCE attachment views.

* Adds a `$wrapper` property to MCE views to allow them to manipulate the wrapper on render. This should be used sparingly — only for layout changes that cannot be accomplished through altering the wrapper's children — and likely only for adding/removing classes.
* Uses `wp.html.string()` in `wp.mce.view.toView()`.

see #21390, #21812, #21813.


git-svn-id: https://develop.svn.wordpress.org/trunk@22220 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith 2012-10-12 18:36:21 +00:00
parent 18b3efaf52
commit 4966b15409
2 changed files with 22 additions and 5 deletions

View File

@ -111,7 +111,7 @@ var tb_position;
workflow.on( 'update:insert', function( selection ) {
this.insert( selection.map( function( attachment ) {
if ( 'image' === attachment.get('type') )
return '\n' + wp.media.string.image( attachment ) + '\n';
return wp.media.string.image( attachment ) + ' ';
else
return wp.media.string.link( attachment ) + ' ';
}).join('') );

View File

@ -281,7 +281,7 @@ window.wp = window.wp || {};
toView: function( viewType, options ) {
var view = wp.mce.view.get( viewType ),
instance, id, tag;
instance, id;
if ( ! view )
return '';
@ -296,10 +296,20 @@ window.wp = window.wp || {};
id = instance.el.id = instance.el.id || _.uniqueId('__wpmce-');
instances[ id ] = instance;
// If the view is a span, wrap it in a span.
tag = 'span' === instance.tagName ? 'span' : 'div';
// Create a dummy `$wrapper` property to allow `$wrapper` to be
// called in the view's `render` method without a conditional.
instance.$wrapper = $();
return '<' + tag + ' class="wp-view-wrap" data-wp-view="' + id + '" contenteditable="false"></' + tag + '>';
return wp.html.string({
// If the view is a span, wrap it in a span.
tag: 'span' === instance.tagName ? 'span' : 'div',
attrs: {
'class': 'wp-view-wrap wp-view-type-' + viewType,
'data-wp-view': id,
'contenteditable': false
}
});
},
// ### render( scope )
@ -316,6 +326,8 @@ window.wp = window.wp || {};
if ( ! view )
return;
// Link the real wrapper to the view.
view.$wrapper = wrapper;
// Render the view.
view.render();
// Detach the view element to ensure events are not unbound.
@ -543,6 +555,11 @@ window.wp = window.wp || {};
if ( ! attachment.url )
return;
// Align the wrapper.
if ( this.align )
this.$wrapper.addClass( 'align' + this.align );
// Generate the template options.
options = {
url: 'image' === attachment.type ? attachment.url : attachment.icon,
uploading: attachment.uploading