Changeset 22220

Timestamp:

10/12/2012 06:36:21 PM (14 years ago)

Author:

koopersmith

Message:

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.

Location:

trunk

Files:

• wp-admin/js/media-upload.js (modified) (1 diff)
• wp-includes/js/mce-view.js (modified) (4 diffs)

trunk/wp-admin/js/media-upload.js

@@ -112 +112 @@
                                 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 ) + ' ';

trunk/wp-includes/js/mce-view.js

@@ -282 +282 @@
                 toView: function( viewType, options ) {
                         var view = wp.mce.view.get( viewType ),
-                                instance, id, tag;
+                                instance, id;
 
                         if ( ! view )
@@ -297 +297 @@
                         instances[ id ] = instance;
 
-                        // If the view is a span, wrap it in a span.
-                        tag = 'span' === instance.tagName ? 'span' : 'div';
-
-                        return '<' + tag + ' class="wp-view-wrap" data-wp-view="' + id + '" contenteditable="false"></' + tag + '>';
+                        // Create a dummy `$wrapper` property to allow `$wrapper` to be
+                        // called in the view's `render` method without a conditional.
+                        instance.$wrapper = $();
+
+                        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
+                                }
+                        });
                 },
 
@@ -317 +327 @@
                                         return;
 
+                                // Link the real wrapper to the view.
+                                view.$wrapper = wrapper;
                                 // Render the view.
                                 view.render();
@@ -544 +556 @@
                                         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,