Cómo activar una actualización en el modo de medios


12

Estoy desarrollando un complemento que agrega una nueva pestaña al modo de medios, y necesito saber cómo activar una actualización de la pestaña de archivos adjuntos para que muestre los archivos adjuntos recién agregados. Este es el código que estoy usando:

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

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

    // triggered when the button is clicked
    addAttachment: function(){
        this.controller.state().addAttachment();
        this.controller.setState( 'insert' );
        // I NEED TO TRIGGER A REFRESH OF THE ATTACHMENTS TAB HERE
    }
});

Cualquier ayuda sería apreciada. La documentación modal de los medios es casi inexistente.

Gracias


IIRC esos son solo vistas de Backbone / Underscore. En otras palabras, cuando actualiza el modelo, debería actualizar la vista por sí mismo ya que "ModelView" debería activarlo.
kaiser

Bueno, la this.controller.state().addAttachment()función es solo una llamada AJAX wp.media.post(), por lo que necesitaría activar un evento hipotético de "modelo actualizado" en algún lugar después de esta llamada AJAX. ¿Algunas ideas?
leemon

"¿Algunas ideas?" - actualmente no. Esto es algo en lo que tendría que invertir bastante tiempo para leer el núcleo (que no tengo ahora). Acerca de su comentario: hay MarkDown disponible (consulte el botón "agregar comentario" de "ayuda" a continuación).
kaiser

Respuestas:


2

Puede consultar este enlace https://codex.wordpress.org/Javascript_Reference/wp.media

jQuery(function($){

  // Set all variables to be used in scope
  var frame,
      metaBox = $('#meta-box-id.postbox'), // Your meta box id here
      addImgLink = metaBox.find('.upload-custom-img'),
      delImgLink = metaBox.find( '.delete-custom-img'),
      imgContainer = metaBox.find( '.custom-img-container'),
      imgIdInput = metaBox.find( '.custom-img-id' );

  // ADD IMAGE LINK



addImgLink.on( 'click', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }

    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Media Of Your Chosen Persuasion',
      button: {
        text: 'Use this media'
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });


    // When an image is selected in the media frame...
    frame.on( 'select', function() {

      // Get media attachment details from the frame state
      var attachment = frame.state().get('selection').first().toJSON();

      // Send the attachment URL to our custom image input field.
      imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

      // Send the attachment id to our hidden input
      imgIdInput.val( attachment.id );

      // Hide the add image link
      addImgLink.addClass( 'hidden' );

      // Unhide the remove image link
      delImgLink.removeClass( 'hidden' );
    });

    // Finally, open the modal on click
    frame.open();
  });


  // DELETE IMAGE LINK
  delImgLink.on( 'click', function( event ){

    event.preventDefault();

    // Clear out the preview image
    imgContainer.html( '' );

    // Un-hide the add image link
    addImgLink.removeClass( 'hidden' );

    // Hide the delete image link
    delImgLink.addClass( 'hidden' );

    // Delete the image id from the hidden input
    imgIdInput.val( '' );

  });

});

1

Poner a prueba o probar:

wp.media.editor.get(wpActiveEditor).views._views[".media-frame-content"][0].views._views[""][1].collection.props.set({ignore:(+(new Date()))})

Parece que debe haber una manera más fácil, ¡pero eso me funciona mientras tanto!

Una forma mejor de hacerlo:

wp.media.frame.content.get('gallery').collection.props.set({‌​ignore: (+ new Date())});, 

en este caso estoy actualizando la pestaña de la galería.

Pruebe los dos códigos anteriores y vea cuál funciona mejor para usted.


1
¡Esto fue útil para mí! Gracias.
Siddhesh Shirodkar

1
Sí, esto funcionó para mí también.
Amol Bhandari SJ
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.