web-dev-qa-db-ja.com

メディアアップローダのライブラリタブに切り替えます

私はoembedを介してメディアライブラリに外部ビデオを追加するためにメディアアップローダにタブを追加するプラグインを開発しています。すべてが期待通りに動作しますが、新しいタブで新しい外部ビデオを追加した後にライブラリタブに切り替える必要があります。これは私が使っているコードの一部です。

wp.media.controller.Custom = wp.media.controller.State.extend({

    initialize: function(){
        this.props = new Backbone.Model({ custom_data: '' });
        this.props.on( 'change:custom_data', this.refresh, this );
    },

    refresh: function() {
        this.frame.toolbar.get().refresh();
    },

    customAction: function(){
        wp.media.post( 'add-oembed', {
            url:     this.props.get('custom_data'),
            post_id: wp.media.view.settings.post.id
        });

        this.frame.content.mode('browse');

    }

});

行this.frame.content.mode('browse')はlibraryタブに切り替えるはずですが、次のようなエラーメッセージが表示されます。

TypeError: this.collection is undefined

何か案は？

javascriptmediatabsbackbone
3
leemon

文書化されていないメディアモーダルソースコードと Gist からのコードを使用して何日も苦労した後、私は解決策を思い付きました：

JS：

wp.media.controller.Custom = wp.media.controller.State.extend({

    initialize: function(){
        this.props = new Backbone.Model({ custom_data: '' });
        this.props.on( 'change:custom_data', this.refresh, this );
    },

    refresh: function() {
        this.frame.toolbar.get().refresh();
    },

    // called when the toolbar button is clicked
    customAction: function( controller ){
        // call the PHP function that inserts an oembed attachment to the database via AJAX
        wp.media.post( 'add-oembed', {
            url:     this.props.get( 'custom_data' ),
            post_id: wp.media.view.settings.post.id
        }).done( function( resp ) {
            // create an attachment model using the data from the AJAX response
            var attachment = wp.media.model.Attachment.create( resp );
            var edit = controller.state( 'insert' );
            // add the attachment to the library model
            edit.get( 'library' ).add( attachment );
        });

    }

});


wp.media.view.Toolbar.Custom = wp.media.view.Toolbar.extend({
    initialize: function() {
        _.defaults( this.options, {
            event: 'custom_event',
            close: false,
            items: {
                custom_event: {
                    text: wp.media.view.l10n.customButton,
                    style: 'primary',
                    priority: 80,
                    requires: false,
                    click: this.customAction
                }
            }
        });

        wp.media.view.Toolbar.prototype.initialize.apply( this, arguments );
    },

    refresh: function() {
        var custom_data = this.controller.state().props.get('custom_data');
        this.get('custom_event').model.set( 'disabled', ! custom_data );
        wp.media.view.Toolbar.prototype.refresh.apply( this, arguments );
    },

    // triggered when the button is clicked
    customAction: function(){
        this.controller.state().customAction( this.controller );
        // switch to the library view
        this.controller.setState( 'insert' );
    }

});

PHP：

add_action('wp_ajax_add-oembed', 'custom_add_oembed');

function custom_add_oembed() {
    $url = $_POST['url'];
    $post_ID = intval($_POST['post_id']);

    if (!current_user_can( 'edit_post', $post_ID ) ) {
        wp_send_json_error();
    }

    $oembed = new WP_oEmbed();
    $provider = $oembed->discover($url);
    if($provider === false && substr($url, 0, 5) === 'https') {
        $url = str_replace('https', 'http', $url);
        $provider = $oembed->discover($url);
    }
    if($provider === false) {
        wp_send_json_error();
    }

    $response = $oembed->fetch($provider, $url);
    if( $response === false) {
        wp_send_json_error();
    }

    $my_post = array(
        'post_parent'   => $post_ID,
        'post_title'    => $response->title,
        'post_content'  => '',
        'post_status'   => 'inherit',
        'post_author'   => get_current_user_id(),
        'post_type'     => 'attachment',
        'guid'          => $url,
        'post_mime_type'=> 'oembed/' . $response->provider_name
    );
    $attachment_id = wp_insert_post( $my_post );
    if( ! is_int($attachment_id) ) {
        wp_send_json_error();
    }

    if ( ! $attachment = wp_prepare_attachment_for_js( $attachment_id ) ) {
        wp_send_json_error();
    }

    wp_send_json_success( $attachment );

}
6
leemon