WordPress.org

Make WordPress Core

Changeset 22523


Ignore:
Timestamp:
11/10/2012 07:51:37 AM (8 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/includes/media.php

    r22489 r22523  
    12761276 */
    12771277function media_upload_header() {
    1278     ?>
    1279     <script type="text/javascript">post_id = <?php echo intval($_REQUEST['post_id']); ?>;</script>
    1280     <div id="media-upload-header">
    1281     <?php the_media_upload_tabs(); ?>
    1282     </div>
    1283     <?php
     1278    echo '<script type="text/javascript">post_id = ' . intval( $_REQUEST['post_id'] ) . ";</script>\n";
     1279    if ( empty( $_GET['chromeless'] ) ) {
     1280        echo '<div id="media-upload-header">';
     1281        the_media_upload_tabs();
     1282        echo '</div>';
     1283    }
    12841284}
    12851285
  • trunk/wp-includes/css/media-views.css

    r22466 r22523  
    252252.media-frame .media-toolbar .add-to-gallery {
    253253    display: none;
     254}
     255
     256/**
     257 * Iframes
     258 */
     259.media-frame .media-iframe {
     260    overflow: hidden;
     261}
     262
     263.media-iframe iframe {
     264    height: 100%;
     265    width: 100%;
    254266}
    255267
  • trunk/wp-includes/js/media-models.js

    r22495 r22523  
    3131
    3232        delete attributes.frame;
     33        // Set the default state.
     34        frame.state( frame.options.state );
     35        // Render, attach, and open the frame.
    3336        return frame.render().attach().open();
    3437    };
  • trunk/wp-includes/js/media-views.js

    r22509 r22523  
    88    // Link any localized strings.
    99    l10n = media.view.l10n = _.isUndefined( _wpMediaViewsL10n ) ? {} : _wpMediaViewsL10n;
     10
     11    // Link any settings.
     12    media.view.settings = l10n.settings || {};
     13    delete l10n.settings;
    1014
    1115    // Check if the browser supports CSS 3.0 transitions
     
    551555        _createStates: function() {
    552556            // Create the default `states` collection.
    553             this.states = new Backbone.Collection();
     557            this.states = new Backbone.Collection( null, {
     558                model: media.controller.State
     559            });
    554560
    555561            // Ensure states have a reference to the frame.
     
    626632
    627633            return this;
     634        },
     635
     636        createIframeStates: function( options ) {
     637            var settings = media.view.settings,
     638                tabs = settings.tabs,
     639                tabUrl = settings.tabUrl,
     640                $postId;
     641
     642            if ( ! tabs || ! tabUrl )
     643                return;
     644
     645            // Add the post ID to the tab URL if it exists.
     646            $postId = $('#post_ID');
     647            if ( $postId.length )
     648                tabUrl += '&post_id=' + $postId.val();
     649
     650            // Generate the tab states.
     651            _.each( tabs, function( title, id ) {
     652                var frame = this.get( 'iframe:' + id ).set( _.defaults({
     653                    tab:     id,
     654                    src:     tabUrl + '&tab=' + id,
     655                    title:   title,
     656                    content: 'iframe',
     657                    menu:    'main'
     658                }, options ) );
     659            }, this );
     660
     661            this.content.on( 'activate:iframe', this.iframeContent, this );
     662            this.menu.on( 'activate:main', this.iframeMenu, this );
     663            this.on( 'open', this.hijackThickbox, this );
     664            this.on( 'close', this.restoreThickbox, this );
     665        },
     666
     667        iframeContent: function() {
     668            this.$el.addClass('hide-toolbar hide-sidebar');
     669            this.content.view( new media.view.Iframe({
     670                controller: this
     671            }).render() );
     672        },
     673
     674        iframeMenu: function() {
     675            var views = {};
     676
     677            _.each( media.view.settings.tabs, function( title, id ) {
     678                views[ 'iframe:' + id ] = {
     679                    text: this.get( 'iframe:' + id ).get('title'),
     680                    priority: 200
     681                };
     682            }, this );
     683
     684            this.menu.view().add( views );
     685        },
     686
     687        hijackThickbox: function() {
     688            var frame = this;
     689
     690            if ( ! window.tb_remove || this._tb_remove )
     691                return;
     692
     693            this._tb_remove = window.tb_remove;
     694            window.tb_remove = function() {
     695                frame.close();
     696                frame.reset();
     697                frame.state( frame.options.state );
     698                frame._tb_remove.call( window );
     699            };
     700        },
     701
     702        restoreThickbox: function() {
     703            if ( ! this._tb_remove )
     704                return;
     705
     706            window.tb_remove = this._tb_remove;
     707            delete this._tb_remove;
    628708        }
    629709    });
     
    632712    _.each(['open','close','attach','detach'], function( method ) {
    633713        media.view.MediaFrame.prototype[ method ] = function( view ) {
     714            this.trigger( method );
    634715            if ( this.modal )
    635716                this.modal[ method ].apply( this.modal, arguments );
     
    655736            this.createStates();
    656737            this.bindHandlers();
    657 
    658             // Set the default state.
    659             this.state( this.options.state );
    660738        },
    661739
     
    810888
    811889            media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
     890            this.createIframeStates();
    812891        },
    813892
     
    25062585        }
    25072586    });
     2587
     2588    /**
     2589     * wp.media.view.Iframe
     2590     */
     2591    media.view.Iframe = Backbone.View.extend({
     2592        className: 'media-iframe',
     2593
     2594        initialize: function() {
     2595            this.controller = this.options.controller;
     2596        },
     2597
     2598        render: function() {
     2599            this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' );
     2600            return this;
     2601        }
     2602    });
    25082603}(jQuery));
  • trunk/wp-includes/media.php

    r22516 r22523  
    12981298 */
    12991299function wp_enqueue_media() {
     1300    // We're going to pass the old thickbox media tabs to `media_upload_tabs`
     1301    // to ensure plugins will work. We will then unset those tabs.
     1302    $tabs = array(
     1303        // handler action suffix => tab text
     1304        'type'     => __('From Computer'),
     1305        'type_url' => __('From URL'),
     1306        'gallery'  => __('Gallery'),
     1307        'library'  => __('Media Library'),
     1308    );
     1309
     1310    $tabs = apply_filters( 'media_upload_tabs', $tabs );
     1311    unset( $tabs['type'], $tabs['type_url'], $tabs['gallery'], $tabs['library'] );
     1312
     1313    $settings = array(
     1314        'tabs'   => $tabs,
     1315        'tabUrl' => add_query_arg( array(
     1316            'chromeless' => true
     1317        ), admin_url('media-upload.php') ),
     1318    );
     1319
    13001320    wp_localize_script( 'media-views', '_wpMediaViewsL10n', array(
     1321        // Settings
     1322        'settings' => $settings,
     1323
    13011324        // Generic
    13021325        'insertMedia' => __( 'Insert Media' ),
Note: See TracChangeset for help on using the changeset viewer.