public
Created

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/

  • Download Gist
custom_media_menu.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
// 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 );
}
 
});
custom_media_menu.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<?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;
}
 
?>

Hello. It is a nice part of something to get started with.
On http://wordpress.stackexchange.com/questions/78881/wordpress-3-5-media-manager-add-a-button i Have puted a request for help in doing something simmilar, but still diffrent - instead of adding new "left" menu item - the request is for help with adding aditional two buttons to standard view: insert media -> add files. Maybe with Your knowledge You could help somehow? Thanks in advice.

Hey, this looks like a great starting point!

I'm very new to things like js (and therefore Backbone.js) though I am beginning to understand the basics ... but, unfortunately I don't have time in my current project to try and learn this now.

Was wondering if you could look over my Stack Overflow question (http://wordpress.stackexchange.com/questions/130585/customizing-the-3-5-add-media-popup-backbone-js) and tell me what I might be doing wrong / how to customize your code to better fit my needs until I have time to learn this stuff for myself.

Thanks for your time / any help you can offer.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.