Changeset 22220

Timestamp:

10/12/2012 06:36:21 PM (13 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,