Skip to content

Instantly share code, notes, and snippets.

@Fab1en
Created January 21, 2013 15:32
Show Gist options
  • Save Fab1en/4586865 to your computer and use it in GitHub Desktop.
Save Fab1en/4586865 to your computer and use it in GitHub Desktop.
Draft plugin example to add a javascript menu into the WP3.5 Media Library popup. Answer to this Wordpress stackexchange question : http://wordpress.stackexchange.com/questions/76980/add-a-menu-item-to-wordpress-3-5-media-manager/
// for debug : trace every event
/*var originalTrigger = wp.media.view.MediaFrame.Post.prototype.trigger;
wp.media.view.MediaFrame.Post.prototype.trigger = function(){
console.log('Event Triggered:', arguments);
originalTrigger.apply(this, Array.prototype.slice.call(arguments));
}*/
// custom state : this controller contains your application logic
wp.media.controller.Custom = wp.media.controller.State.extend({
initialize: function(){
// this model contains all the relevant data needed for the application
this.props = new Backbone.Model({ custom_data: '' });
this.props.on( 'change:custom_data', this.refresh, this );
},
// called each time the model changes
refresh: function() {
// update the toolbar
this.frame.toolbar.get().refresh();
},
// called when the toolbar button is clicked
customAction: function(){
console.log(this.props.get('custom_data'));
}
});
// custom toolbar : contains the buttons at the bottom
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, // added via 'media_view_strings' filter,
style: 'primary',
priority: 80,
requires: false,
click: this.customAction
}
}
});
wp.media.view.Toolbar.prototype.initialize.apply( this, arguments );
},
// called each time the model changes
refresh: function() {
// you can modify the toolbar behaviour in response to user actions here
// disable the button if there is no custom data
var custom_data = this.controller.state().props.get('custom_data');
this.get('custom_event').model.set( 'disabled', ! custom_data );
// call the parent refresh
wp.media.view.Toolbar.prototype.refresh.apply( this, arguments );
},
// triggered when the button is clicked
customAction: function(){
this.controller.state().customAction();
}
});
// custom content : this view contains the main panel UI
wp.media.view.Custom = wp.media.View.extend({
className: 'media-custom',
// bind view events
events: {
'input': 'custom_update',
'keyup': 'custom_update',
'change': 'custom_update'
},
initialize: function() {
// create an input
this.input = this.make( 'input', {
type: 'text',
value: this.model.get('custom_data')
});
// insert it in the view
this.$el.append(this.input);
// re-render the view when the model changes
this.model.on( 'change:custom_data', this.render, this );
},
render: function(){
this.input.value = this.model.get('custom_data');
return this;
},
custom_update: function( event ) {
this.model.set( 'custom_data', event.target.value );
}
});
// supersede the default MediaFrame.Post view
var oldMediaFrame = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = oldMediaFrame.extend({
initialize: function() {
oldMediaFrame.prototype.initialize.apply( this, arguments );
this.states.add([
new wp.media.controller.Custom({
id: 'my-action',
menu: 'default', // menu event = menu:render:default
content: 'custom',
title: wp.media.view.l10n.customMenuTitle, // added via 'media_view_strings' filter
priority: 200,
toolbar: 'main-my-action', // toolbar event = toolbar:create:main-my-action
type: 'link'
})
]);
this.on( 'content:render:custom', this.customContent, this );
this.on( 'toolbar:create:main-my-action', this.createCustomToolbar, this );
this.on( 'toolbar:render:main-my-action', this.renderCustomToolbar, this );
},
createCustomToolbar: function(toolbar){
toolbar.view = new wp.media.view.Toolbar.Custom({
controller: this
});
},
customContent: function(){
// this view has no router
this.$el.addClass('hide-router');
// custom content view
var view = new wp.media.view.Custom({
controller: this,
model: this.state().props
});
this.content.set( view );
}
});
<?php
/*
* Plugin Name: Custom media menu
* Description: Adds a custom menu in WP3.5 Media Popup
* Author: Fabien Quatravaux
* Version: 1.0
*/
add_action('admin_enqueue_scripts', 'custom_add_script');
function custom_add_script(){
wp_enqueue_script('custom', plugins_url('custom_media_menu.js', __FILE__), array('media-views'), false, true);
}
add_filter('media_view_strings', 'custom_media_string', 10, 2);
function custom_media_string($strings, $post){
$strings['customMenuTitle'] = __('Custom Menu Title', 'custom');
$strings['customButton'] = __('Custom Button', 'custom');
return $strings;
}
?>
@josheby
Copy link

josheby commented Mar 4, 2016

I am seeing an issue where when I click on the new menu item in the media library, the view doesn't appear to actually display. It just displays the previous section tha twas being viewed. I have poked around with the code for a while, but being new to backbone.js I am not certain what I am missing. Have you seen this issue with your example by chance?

@rajdhinesh
Copy link

Hi , I am seeing an issue in media libray, the previous clicked link show in custom tab and also image insert not go to show list.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment