J'ai fouillé le code source pour une raison similaire; Je voudrais ajouter les "Paramètres d'affichage des pièces jointes" au cadre par défaut "sélectionner". Pour autant que je sache, cela ne peut pas être fait en passant des paramètres à wp.media (), comme nous le souhaiterions tous. wp.media a actuellement les deux cadres ("post" et "select"), et les vues qui les accompagnent sont prédéfinies.
L'approche que j'examine maintenant consiste à étendre media.view.mediaFrame pour créer un nouveau cadre (basé sur le cadre "select") qui inclut les parties de la vue dont j'ai besoin. Si je réussis, je posterai le code.
ÉDITER:
Ian, j'ai obtenu la fonctionnalité que je voulais travailler et j'ai mis du temps à comprendre la vôtre. wp.media () n'est pas aussi modulaire qu'il pourrait l'être. Il accepte uniquement les valeurs «sélectionner» et «publier» pour le cadre, «sélectionner» étant la valeur par défaut, vous ne pouvez donc pas créer un nouvel objet cadre. Au lieu de cela, vous devez étendre l'un des deux objets de cadre (tout cela se trouve dans /wp-includes/js/media-views.js), ce qui est également un peu maladroit. L'ajout d'une partie de l'interface utilisateur est un processus en plusieurs étapes. Vous pouvez commencer avec Select et ajouter, mais pour le vôtre, j'ai choisi de commencer avec le code dans le cadre Post et de retirer les trucs de la galerie. Voici mon code, fonctionnant mais pas lourdement testé. Probablement aussi de la place pour la rationalisation.
wp.media.view.MediaFrame.Select = wp.media.view.MediaFrame.Select.extend({
initialize: function() {
wp.media.view.MediaFrame.prototype.initialize.apply( this, arguments );
_.defaults( this.options, {
multiple: true,
editing: false,
state: 'insert'
});
this.createSelection();
this.createStates();
this.bindHandlers();
this.createIframeStates();
},
createStates: function() {
var options = this.options;
// Add the default states.
this.states.add([
// Main states.
new wp.media.controller.Library({
id: 'insert',
title: 'Insert Media',
priority: 20,
toolbar: 'main-insert',
filterable: 'image',
library: wp.media.query( options.library ),
multiple: options.multiple ? 'reset' : false,
editable: true,
// If the user isn't allowed to edit fields,
// can they still edit it locally?
allowLocalEdits: true,
// Show the attachment display settings.
displaySettings: true,
// Update user settings when users adjust the
// attachment display settings.
displayUserSettings: true
}),
// Embed states.
new wp.media.controller.Embed(),
]);
if ( wp.media.view.settings.post.featuredImageId ) {
this.states.add( new wp.media.controller.FeaturedImage() );
}
},
bindHandlers: function() {
// from Select
this.on( 'router:create:browse', this.createRouter, this );
this.on( 'router:render:browse', this.browseRouter, this );
this.on( 'content:create:browse', this.browseContent, this );
this.on( 'content:render:upload', this.uploadContent, this );
this.on( 'toolbar:create:select', this.createSelectToolbar, this );
//
this.on( 'menu:create:gallery', this.createMenu, this );
this.on( 'toolbar:create:main-insert', this.createToolbar, this );
this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );
var handlers = {
menu: {
'default': 'mainMenu'
},
content: {
'embed': 'embedContent',
'edit-selection': 'editSelectionContent'
},
toolbar: {
'main-insert': 'mainInsertToolbar'
}
};
_.each( handlers, function( regionHandlers, region ) {
_.each( regionHandlers, function( callback, handler ) {
this.on( region + ':render:' + handler, this[ callback ], this );
}, this );
}, this );
},
// Menus
mainMenu: function( view ) {
view.set({
'library-separator': new wp.media.View({
className: 'separator',
priority: 100
})
});
},
// Content
embedContent: function() {
var view = new wp.media.view.Embed({
controller: this,
model: this.state()
}).render();
this.content.set( view );
view.url.focus();
},
editSelectionContent: function() {
var state = this.state(),
selection = state.get('selection'),
view;
view = new wp.media.view.AttachmentsBrowser({
controller: this,
collection: selection,
selection: selection,
model: state,
sortable: true,
search: false,
dragInfo: true,
AttachmentView: wp.media.view.Attachment.EditSelection
}).render();
view.toolbar.set( 'backToLibrary', {
text: 'Return to Library',
priority: -100,
click: function() {
this.controller.content.mode('browse');
}
});
// Browse our library of attachments.
this.content.set( view );
},
// Toolbars
selectionStatusToolbar: function( view ) {
var editable = this.state().get('editable');
view.set( 'selection', new wp.media.view.Selection({
controller: this,
collection: this.state().get('selection'),
priority: -40,
// If the selection is editable, pass the callback to
// switch the content mode.
editable: editable && function() {
this.controller.content.mode('edit-selection');
}
}).render() );
},
mainInsertToolbar: function( view ) {
var controller = this;
this.selectionStatusToolbar( view );
view.set( 'insert', {
style: 'primary',
priority: 80,
text: 'Select Image',
requires: { selection: true },
click: function() {
var state = controller.state(),
selection = state.get('selection');
controller.close();
state.trigger( 'insert', selection ).reset();
}
});
},
featuredImageToolbar: function( toolbar ) {
this.createSelectToolbar( toolbar, {
text: 'Set Featured Image',
state: this.options.state || 'upload'
});
},
mainEmbedToolbar: function( toolbar ) {
toolbar.view = new wp.media.view.Toolbar.Embed({
controller: this,
text: 'Insert Image'
});
}
});
Cela combine le code de wp.media.view.MediaFrame.Post avec celui de media.view.MediaFrame.Select, en ajustant le fait qu'il est exécuté en dehors de la portée d'origine. Les valeurs du texte sont les différents boutons, et vous pouvez référencer votre propre objet de localisation si vous le souhaitez. La valeur «filtrable» dans le constructeur de la bibliothèque (dans createStates ()) détermine quels types de supports seront pris en charge.
Une fois que vous avez étendu l'objet Select avec cette approche, instanciez-le simplement de la même manière que vous le faites actuellement et ajoutez votre gestionnaire personnalisé lorsqu'une image est sélectionnée. L'insertion à partir de l'URL peut déclencher un événement différent de celui lors de la sélection à partir d'un média téléchargé. Il serait probablement préférable d'instancier votre cadre d'abord, en fait, puis de l'étendre, de sorte que les autres cadres multimédias de la page ne soient pas affectés, mais je n'ai pas essayé cela.
J'espère que cela pourra aider-
