是否可以在除媒体之外的其他对话框中重复使用wp.media.EDITOR模式

时间:2013-02-11 作者:Jer

要扩展:我想使用相同的模式代码/外观(如wp.media.Modal、wp.media.FocusManager中使用的)来打开我自己自定义对话框的模式,而不是媒体编辑器。在过去,我用thickbox来做这类事情,但是wp。媒体情态动词似乎是情态动词未来的发展方向——更不用说它看起来很酷了。

我对JS源代码进行了一些探讨,并找到了几个可能的解决方案:

“借用”代码媒体视图。js并在我的插件中使用它

感觉我遗漏了一些明显的东西:是否有其他人做到了这一点,或者新的媒体库模式代码是否“太新”而无法重用?

1 个回复
SO网友:kaiser

延迟回答(&A);编辑免责声明:以下是no &复制;粘贴多哥代码

由于我从未尝试将媒体模式用于其他任何事情,因此这里是一个简短的概述,通过从我当前参与的项目中提取一部分来进行概述。这不是一个现成的例子,但它应该能让你离得足够近。只需仔细阅读注释,并在对象中实现以下PHP。

PHP在我们的构造函数中,我们注册脚本,添加包含信息和媒体按钮的元框,过滤其他MIME类型(例如ZIP),并注意保存其他数据:

public function __construct()
{
    add_action( \'admin_enqueue_scripts\', array( $this, \'enqueue_scripts\' ) );

    foreach( $this->post_types as $post_type )
        add_action( "add_meta_boxes_{$post_type}", array( $this, \'add_meta_box\' ) );

    add_filter( \'media_view_settings\', array( $this, \'filter_media_view_settings\' ), 10, 2 );

    add_action( \'wp_insert_post_data\', array( $this, \'wp_insert_post_data\' ), 10, 2 );
}
如果不需要特定页面上的脚本,请确保中止。这样可以节省内存、请求时间,并有助于保持安装干净。

public function enqueue_scripts( $page )
{
    if (
        ! in_array( $page, array( \'post.php\', \'post-new.php\' ) )
        # Assuming that there\'s a class property array that holds post types we want to add to
        # OR ! in_array( get_current_screen()->post_type, array_keys( $this->post_types ) )
    )
        return;

    wp_enqueue_media();
    wp_enqueue_script(
        \'wpse_media_modal\',
        plugins_url( \'assets/js/media-modal.js\', dirname( __FILE__ ) ),
        array(
            # \'jquery\',
            \'media-views\'
        ),
        null,
        true
    );
    wp_localize_script(
        \'wpse_media_modal\',
        \'wpse_obj\',
        $this->get_media_props()
    );
}
然后我们添加元框。在函数内部,我们可以依赖$post 对象post_type 属性,该属性也将为新帖子设置。由于我们已经将构造函数中的回调注册到适当的上下文挂钩中,所以我们可以简单地采用出现的任何post类型。

public function add_meta_box( $post )
{
    add_meta_box(
        \'wprd_upload\',
        __( \'Upload\', \'our_textdomain\' ),
        array( $this, \'render_content\' ),
        $post->post_type,
        \'advanced\',
        \'default\',
        array()
    );
}
附加MIME类型只需插入一个数组,该数组覆盖或添加到媒体模式的默认MIME类型。您也可以添加或覆盖其他设置。只是var_dump( $settings ); 查看回调提供了什么。还要确保我们没有截获错误的帖子类型。

public function filter_media_view_settings( $settings, $post )
{
    if ( ! in_array( $post->post_type, array_keys( $this->post_types ) ) )
        return $settings;

    $settings[\'mimeTypes\'] += array( \'application/zip\' );

    return $settings;
}
渲染内容

public function render_content()
{
    $props = array(
        \'modalTitle\'      => __( \'Select ZIP Archives\', \'our_textdomain\' ),

        // The following data is what we will access later
        // SomeIDfromLocalizedScriptOBJ
        \'buttonID\'        => \'open-media-lib\',
        \'buttonClass\'     => \'open-media-button\',
        \'buttonText\'      => __( \'Add ZIP\', \'our_textdomain\' ),
        \'buttonDataText\'  => __( \'Select\', \'our_textdomain\' ),
        \'buttonDataTitle\' => __( \'Select Whatever\', \'our_textdomain\' ),

        \'mimeTypes\'       => array(
            $zip => __( \'ZIP Archive\', \'our_textdomain\' ),
        ),
    );

    wp_nonce_field( plugin_basename( __FILE__ ), $this->nonce_name );
    ?>
    <input type="button"
           class="button <?php echo $props[\'buttonClass\']; ?>"
           id="<?php echo $props[\'buttonID\']; ?>"
           value="<?php echo $props[\'buttonText\']; ?>"
           data-title="<?php echo $props[\'buttonDataTitle\']; ?>"
           data-button-text="<?php echo $props[\'buttonDataText\']; ?>" />
}
保存数据最后,我们要确保数据正确保存并进行检查。使用所有esc_*() 函数、类型转换、nonce等等。

public function wp_insert_post_data( $data, $post_array )
{
    if (
        ! in_array( $post_array[\'post_type\'], array_keys( $this->post_types ) )
        # OR ( defined( \'DOING_AUTOSAVE\' ) AND DOING_AUTOSAVE )
        OR ! isset( $_POST[ $this->nonce_name ] )
        OR ! wp_verify_nonce( $_POST[ $this->nonce_name ], plugin_basename( __FILE__ ) )
    )
        return $data;

    $post_array[\'zip\'] = array_map( \'array_filter\', $post_array[\'zip\'] );

    $id = $post_array[\'ID\'];
    update_post_meta(
        $id,
        \'zip\',
        $post_array[\'zip\'],
        get_post_meta( $id, \'zip\' )
    );

    return $data;
}
最后一点,在开始JS示例之前:代码是当前项目的分解代码。因此,正如前面提到的那样,默认情况下它不会工作!这只是一个指南,没有别的。

Javascript本身非常简单。不但正如您所看到的,我将jQuery作为自定义本地化脚本对象注入到函数中。从那以后,你必须添加你可能需要的任何逻辑。提供了不同状态和回调的基本环境console.log()存在。

var ds = ds || {};

( function( $, obj ) {
    var media;

    ds.media = media = {};

    _.extend( media, {
        view: {},
        controller: {}
    } );

    media.buttonID    = \'#\' + obj.buttonID,

    _.extend( media, {
        frame: function() {
            if ( this._frame )
                return this._frame;

            var states = [
                new wp.media.controller.Library(),
                new wp.media.controller.Library( {
                    id:                 \'image\',
                    title:              \'Images\',
                    priority:           20,
                    searchable:         false,
                    library:            wp.media.query( { type: \'image\' } ),
                    multiple:           true
                } ),
                /*new wp.media.controller.Library( {
                    id:                 \'video\',
                    title:              \'Video\',
                    priority:           40,
                    library:            wp.media.query( { type: \'video\' } ),
                    multiple:           false,
                    contentUserSetting: false // Show the Upload Files tab.
                } ),*/
                new wp.media.controller.Library( {
                    id:                 obj.SomeIDfromLocalizedScriptOBJ,
                    title:              obj.SomeTitlefromLocalizedScriptOBJ,
                    priority:           30,
                    searchable:         true,
                    // filterable:         \'uploaded\',
                    library:            wp.media.query( { type: obj.SomeMIMETypesfromLocalizedScriptOBJ } ),
                    multiple:           true
                    // contentUserSetting: true
                } ),
            ];

            this._frame = wp.media( {
                // className: \'media-frame no-sidebar\',
                states: states
                // frame: \'post\'
            } );

            this._frame.on( \'open\', this.open );

            this._frame.on( \'ready\', this.ready );

            this._frame.on( \'close\', this.close );

            this._frame.on( \'menu:render:default\', this.menuRender );

            this._frame.state( \'library\' ).on( \'select\', this.select );
            this._frame.state( \'image\' ).on( \'select\', this.select );
            this._frame.state( obj.ZIPTabID ).on( \'select\', this.select );

            return this._frame;
        },

        open: function() {
            console.log( \'Frame opened\' );
        },

        ready: function() {
            console.log( \'Frame ready\' );
        },

        close: function() {
            console.log( \'Frame closed\' );
        },

        menuRender: function( view ) {
            /* view.unset( \'library-separator\' );
            view.unset( \'embed\' );
            view.unset( \'gallery\' ); */
        },

        select: function() {
            var settings = wp.media.view.settings,
                selection = this.get( \'selection\' );

            selection.map( media.showAttachmentDetails );
        },

        showAttachmentDetails: function( attachment ) {
            // This function normally is used to display attachments
            // Handle removal of rows
            media.removeAttachmentRow( /* some var */ );
        },

        removeAttachmentRow: function( row ) {
            // Remove stuff callback
        },

        init: function() {
            // Open media frame
            $( media.buttonID ).on( \'click.media_frame_open\', function( e ) {
                e.preventDefault();

                media.frame().open();
            } );
        }
    } );

    $( media.init );
} )( jQuery, wpse_obj );
《WP 3.5媒体管理器》的作者多米尼克·席林(DominikSchilling)编写了一套媒体模式的演示。你可以view them on GitHub.

结束