È possibile riutilizzare modale wp.media.editor per finestre di dialogo diverse dai media

30

Per espandere: Mi piacerebbe utilizzare lo stesso codice / aspetto modale (come usato in wp.media.Modal, wp.media.FocusManager) per aprire un modale della mia finestra di dialogo personalizzata, non l'Editor multimediale. In passato, ho usato thickbox per questo genere di cose, ma wp.media.Modal sembra essere la strada del futuro per i modali - Per non parlare del fatto che sembra bello.

Ho cercato un po 'alla fonte JS e sono arrivato a un paio di possibili soluzioni:

  1. "Prendi in prestito" il codice media-views.js e usalo nel mio plugin.
  2. "Estendi" wp.media.Modal (dopo tutto è una vista dorsale).
  3. Crea un'implementazione personalizzata, jQueryUI, ecc.
  4. Basta arrendersi e usare thickbox.

Il prestito sembra leggermente meno pericoloso dell'uso di wp.media.Model.extend ({}), ma è dispendioso. Non sono un grande fan delle modali di jQueryUI, ma farebbe il lavoro. Allo stesso tempo, potrei fare un'implementazione personalizzata dei modali (o basarlo su un'altra lib).

Mi sembra che mi manchi qualcosa di ovvio: qualcun altro lo ha realizzato o il codice modale della nuova libreria multimediale è "troppo nuovo" per consentire il riutilizzo?

plugin-development  wp-admin  javascript 
— Ger
fonte
3
Sembra che ti manchi solo provandolo. Consiglierei di andare al n. 2: probabilmente il più pulito e il più stimolante / divertente, inoltre sembra che tu sappia come aggirare Backbone.
— montrealista
2
per favore condividi i tuoi risultati!
— paul
Plugin / tutorial interessanti su github.com/ericandrewlewis/wp-media-javascript-guide - Documentazione interattiva per Javascript che supporta WP Media .
— jgraup,

Risposte:

12

Risposta in ritardo e modifica. Dichiarazione di non responsabilità: il seguente non è un codice copia e incolla-togo.

Schizzo

Dato che non ho mai provato ad abusare del modale multimediale per qualcos'altro, ecco una breve panoramica, disegnata tracciando una parte da un progetto in cui mi trovo attualmente. E ' non è un pronto ad andare esempio, ma dovrebbe portare abbastanza vicino. Leggi i commenti attentamente e implementa il seguente PHP nei tuoi oggetti.

PHP

Nel nostro costruttore registriamo i nostri script, aggiungiamo meta box che contengono informazioni e un pulsante multimediale, filtriamo in altri tipi MIME (per esempio ZIP) e ci preoccupiamo di salvare i dati aggiuntivi:

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 );
}

Assicurati di interrompere se non hai bisogno di quello script in una determinata pagina. Ciò consente di risparmiare memoria, richiedere tempo e aiuta a mantenere pulita l'installazione.

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()
    );
}

Quindi aggiungiamo la meta box. All'interno della funzione, possiamo fare affidamento sulla proprietà $postobjects post_type, che verrà impostata anche per i nuovi post. Dato che abbiamo già registrato i callback nel costruttore negli hook contestuali appropriati, possiamo semplicemente prendere qualunque tipo di 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()
    );
}

Tipi MIME aggiuntivi

È sufficiente inserire un array che sostituisce o aggiunge i tipi MIME predefiniti del Media Modale. Puoi anche aggiungere o sovrascrivere altre impostazioni. Solo var_dump( $settings );per vedere cosa offre il callback. Assicurati inoltre di non intercettare il tipo di post errato.

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;
}

Rendering del contenuto

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']; ?>" />
}

Salva i dati

Finalmente ci assicuriamo che i nostri dati vengano salvati correttamente e saranno controllati. Usa tutte le esc_*()funzioni, il typecasting, i nonces e cosa no.

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;
}

Nota finale, prima di passare all'esempio JS: il codice viene estratto da un progetto corrente. Quindi, come già accennato, non funzionerà di default! È solo una guida e nient'altro.

Javascript

Il javascript stesso è piuttosto semplice. Non. Ma come puoi vedere, sto iniettando sia jQuery come oggetto di script localizzato personalizzato nella funzione. Da lì in poi, dovrai aggiungere qualsiasi logica tu possa avere bisogno. Vengono forniti console.log()i dintorni di base per diversi stati e richiamate e sono presenti.

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 );

Esercitazioni

Dominik Schilling - l'autore del WP 3.5 media manager - ha scritto una serie di demo per modali multimediali. Puoi vederli su GitHub .

— Kaiser
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.