Changeset 22523

Timestamp:

11/10/2012 07:51:37 AM (12 years ago)

Author:

koopersmith

Message:

Media: Backwards compatibility for media_upload_tabs.

• Adds createIframeStates() to the MediaFrame view. It creates states and bindings for the media_upload_tabs output, and is included on MediaFrame.Post by default.
• Hijacks tb_remove() when the media modal is open to ensure the modal closes correctly.
• Adds a chromeless parameter to thickbox media tab URLs to render the UI without the old row of tabs.

see #22186, #21390.

Location:

trunk

Files:

• wp-admin/includes/media.php (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (1 diff)
• wp-includes/js/media-models.js (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (7 diffs)
• wp-includes/media.php (modified) (1 diff)

trunk/wp-admin/includes/media.php

@@ -1276 +1276 @@
  */
 function media_upload_header() {
-    ?>
-    <script type="text/javascript">post_id = <?php echo intval($_REQUEST['post_id']); ?>;</script>
-    <div id="media-upload-header">
-    <?php the_media_upload_tabs(); ?>
-    </div>
-    <?php
+    echo '<script type="text/javascript">post_id = ' . intval( $_REQUEST['post_id'] ) . ";</script>\n";
+    if ( empty( $_GET['chromeless'] ) ) {
+        echo '<div id="media-upload-header">';
+        the_media_upload_tabs();
+        echo '</div>';
+    }
 }
 

trunk/wp-includes/css/media-views.css

@@ -252 +252 @@
 .media-frame .media-toolbar .add-to-gallery {
     display: none;
+}
+
+/**
+ * Iframes
+ */
+.media-frame .media-iframe {
+    overflow: hidden;
+}
+
+.media-iframe iframe {
+    height: 100%;
+    width: 100%;
 }
 

trunk/wp-includes/js/media-models.js

@@ -31 +31 @@
 
         delete attributes.frame;
+        // Set the default state.
+        frame.state( frame.options.state );
+        // Render, attach, and open the frame.
         return frame.render().attach().open();
     };

trunk/wp-includes/js/media-views.js

@@ -8 +8 @@
     // Link any localized strings.
     l10n = media.view.l10n = _.isUndefined( _wpMediaViewsL10n ) ? {} : _wpMediaViewsL10n;
+
+    // Link any settings.
+    media.view.settings = l10n.settings || {};
+    delete l10n.settings;
 
     // Check if the browser supports CSS 3.0 transitions
@@ -551 +555 @@
         _createStates: function() {
             // Create the default `states` collection.
-            this.states = new Backbone.Collection();
+            this.states = new Backbone.Collection( null, {
+                model: media.controller.State
+            });
 
             // Ensure states have a reference to the frame.
@@ -626 +632 @@
 
             return this;
+        },
+
+        createIframeStates: function( options ) {
+            var settings = media.view.settings,
+                tabs = settings.tabs,
+                tabUrl = settings.tabUrl,
+                $postId;
+
+            if ( ! tabs || ! tabUrl )
+                return;
+
+            // Add the post ID to the tab URL if it exists.
+            $postId = $('#post_ID');
+            if ( $postId.length )
+                tabUrl += '&post_id=' + $postId.val();
+
+            // Generate the tab states.
+            _.each( tabs, function( title, id ) {
+                var frame = this.get( 'iframe:' + id ).set( _.defaults({
+                    tab:     id,
+                    src:     tabUrl + '&tab=' + id,
+                    title:   title,
+                    content: 'iframe',
+                    menu:    'main'
+                }, options ) );
+            }, this );
+
+            this.content.on( 'activate:iframe', this.iframeContent, this );
+            this.menu.on( 'activate:main', this.iframeMenu, this );
+            this.on( 'open', this.hijackThickbox, this );
+            this.on( 'close', this.restoreThickbox, this );
+        },
+
+        iframeContent: function() {
+            this.$el.addClass('hide-toolbar hide-sidebar');
+            this.content.view( new media.view.Iframe({
+                controller: this
+            }).render() );
+        },
+
+        iframeMenu: function() {
+            var views = {};
+
+            _.each( media.view.settings.tabs, function( title, id ) {
+                views[ 'iframe:' + id ] = {
+                    text: this.get( 'iframe:' + id ).get('title'),
+                    priority: 200
+                };
+            }, this );
+
+            this.menu.view().add( views );
+        },
+
+        hijackThickbox: function() {
+            var frame = this;
+
+            if ( ! window.tb_remove || this._tb_remove )
+                return;
+
+            this._tb_remove = window.tb_remove;
+            window.tb_remove = function() {
+                frame.close();
+                frame.reset();
+                frame.state( frame.options.state );
+                frame._tb_remove.call( window );
+            };
+        },
+
+        restoreThickbox: function() {
+            if ( ! this._tb_remove )
+                return;
+
+            window.tb_remove = this._tb_remove;
+            delete this._tb_remove;
         }
     });
@@ -632 +712 @@
     _.each(['open','close','attach','detach'], function( method ) {
         media.view.MediaFrame.prototype[ method ] = function( view ) {
+            this.trigger( method );
             if ( this.modal )
                 this.modal[ method ].apply( this.modal, arguments );
@@ -655 +736 @@
             this.createStates();
             this.bindHandlers();
-
-            // Set the default state.
-            this.state( this.options.state );
         },
 
@@ -810 +888 @@
 
             media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
+            this.createIframeStates();
         },
 
@@ -2506 +2585 @@
         }
     });
+
+    /**
+     * wp.media.view.Iframe
+     */
+    media.view.Iframe = Backbone.View.extend({
+        className: 'media-iframe',
+
+        initialize: function() {
+            this.controller = this.options.controller;
+        },
+
+        render: function() {
+            this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' );
+            return this;
+        }
+    });
 }(jQuery));

trunk/wp-includes/media.php

@@ -1298 +1298 @@
  */
 function wp_enqueue_media() {
+    // We're going to pass the old thickbox media tabs to `media_upload_tabs`
+    // to ensure plugins will work. We will then unset those tabs.
+    $tabs = array(
+        // handler action suffix => tab text
+        'type'     => __('From Computer'),
+        'type_url' => __('From URL'),
+        'gallery'  => __('Gallery'),
+        'library'  => __('Media Library'),
+    );
+
+    $tabs = apply_filters( 'media_upload_tabs', $tabs );
+    unset( $tabs['type'], $tabs['type_url'], $tabs['gallery'], $tabs['library'] );
+
+    $settings = array(
+        'tabs'   => $tabs,
+        'tabUrl' => add_query_arg( array(
+            'chromeless' => true
+        ), admin_url('media-upload.php') ),
+    );
+
     wp_localize_script( 'media-views', '_wpMediaViewsL10n', array(
+        // Settings
+        'settings' => $settings,
+
         // Generic
         'insertMedia' => __( 'Insert Media' ),