it-swarm.com.de

Ist es möglich, wp.media.editor Modal für andere Dialoge als Medien zu verwenden?

Zum Erweitern: Ich möchte denselben Modalcode/dasselbe Erscheinungsbild (wie in wp.media.Modal, wp.media.FocusManager) verwenden, um ein Modal meines eigenen benutzerdefinierten Dialogfelds zu öffnen, nicht den Media Editor. In der Vergangenheit habe ich für solche Dinge Thickbox verwendet, aber wp.media.Modal scheint der Weg der Zukunft für Modals zu sein - ganz zu schweigen davon, dass es cool aussieht.

Ich habe ein bisschen an der JS-Quelle gestochert und bin zu ein paar möglichen Lösungen gekommen:

  1. "Leihen" Sie den Code media-views.js und verwenden Sie ihn in meinem Plugin.
  2. "Extend" wp.media.Modal (es ist immerhin eine Backbone-Ansicht).
  3. Erstellen Sie eine benutzerdefinierte Implementierung, jQueryUI usw.
  4. Gib einfach auf und benutze Thickbox.

Das Ausleihen scheint etwas weniger gefährlich zu sein als das Verwenden von wp.media.Model.extend ({}), aber es ist verschwenderisch. Ich bin kein großer Fan von jQueryUIs Modals, aber es würde die Arbeit erledigen. Gleichzeitig könnte ich eine benutzerdefinierte Implementierung von Modalen durchführen (oder sie auf einer anderen Bibliothek aufbauen).

Ich habe das Gefühl, dass ich etwas Offensichtliches vermisse: Hat dies jemand anderes durchgezogen oder ist der Modalcode der neuen Medienbibliothek "zu neu", um eine Wiederverwendung zuzulassen?

30
Jer

Späte Beantwortung und Bearbeitung. Haftungsausschluss: Folgendes ist nein Code zum Kopieren und Einfügen.

Grobe Skizze

Da ich nie versucht habe, das Medienmodal für andere Zwecke zu missbrauchen, folgt hier ein kurzer Überblick, der anhand eines Teils eines Projekts skizziert wurde, an dem ich gerade arbeite. Es ist nicht ein einsatzbereites Beispiel, aber es sollte Sie nahe genug bringen. Lesen Sie einfach die Kommentare sorgfältig und implementieren Sie die folgenden PHP in Ihre Objekte.

PHP

In unserem Konstruktor registrieren wir unsere Skripte, fügen Meta-Felder hinzu, die Informationen und eine Medienschaltfläche enthalten, filtern zusätzliche MIME-Typen (z. B. Zip) und kümmern uns um das Speichern der zusätzlichen Daten:

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

Stellen Sie sicher, dass Sie den Vorgang abbrechen, wenn Sie das Skript auf einer bestimmten Seite nicht benötigen. Dies spart Speicherplatz, fordert Zeit an und sorgt für eine saubere Installation.

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

Dann fügen wir die Meta Box hinzu. Innerhalb der Funktion können wir uns auf die Eigenschaft $post objects post_type verlassen, die auch für neue Posts festgelegt wird. Da wir die Rückrufe im Konstruktor bereits für die entsprechenden Kontext-Hooks registriert haben, können wir einfach den Post-Typ verwenden, der auf uns zukommt.

public function add_meta_box( $post )
{
    add_meta_box(
        'wprd_upload',
        __( 'Upload', 'our_textdomain' ),
        array( $this, 'render_content' ),
        $post->post_type,
        'advanced',
        'default',
        array()
    );
}

Zusätzliche MIME-Typen

Fügen Sie einfach ein Array ein, das die Standard-MIME-Typen des Media Modal überschreibt oder ergänzt. Sie können auch andere Einstellungen hinzufügen oder überschreiben. Nur var_dump( $settings );, um zu sehen, was der Rückruf bietet. Stellen Sie außerdem sicher, dass wir nicht den falschen Post-Typ abfangen.

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

Rendern Sie den Inhalt

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

Sichere die Daten

Schließlich stellen wir sicher, dass unsere Daten ordnungsgemäß gespeichert und überprüft werden. Verwenden Sie alle esc_*()-Funktionen, Typumwandlungen, Nonces und was nicht.

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

Letzte Anmerkung, bevor Sie zum JS-Beispiel übergehen: Der Code ist ausgebrochen eines aktuellen Projekts. Also wird es - wie schon erwähnt - standardmäßig nicht funktionieren! Es ist nur eine Anleitung und sonst nichts.

Javascript

Das Javascript selbst ist ziemlich einfach. Nicht. Aber wie Sie sehen, füge ich sowohl die jQuery als auch das benutzerdefinierte lokalisierte Skriptobjekt in die Funktion ein. Von da an müssen Sie die Logik hinzufügen, die Sie benötigen. Die Basisumgebung für verschiedene Zustände und Rückrufe wird bereitgestellt und console.log()s sind vorhanden.

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

Tutorials

Dominik Schilling - der Autor des Medienmanagers WP 3.5 - hat eine Reihe von Demos für Medienmodale geschrieben. Sie können sie auf GitHub anzeigen .

12
kaiser