Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create a completely custom media frame (WIP)
/**
* @type {Object} JavaScript namespace for our application.
*/
var Custom_Modal = {};
(function($, Custom_Modal) {
var $ = jQuery;
_.extend( Custom_Modal, { view: {}, controller: {} } );
Custom_Modal.view.HelloWorld = wp.media.View.extend( {
className: 'hello-world-frame',
template: wp.media.template( 'hello-world' ) // <script type="text/html" id="tmpl-hello-world">
} );
Custom_Modal.view.GenerateStyle = wp.media.View.extend( {
className: 'generate-style-frame',
template: wp.media.template( 'generate-style' ) // <script type="text/html" id="tmpl-hello-world">
} );
Custom_Modal.controller.HelloWorld = wp.media.controller.State.extend( {
defaults: {
id: 'hello-world-state',
menu: 'default',
content: 'hello_world_state'
}
} );
Custom_Modal.controller.GenerateStyle = wp.media.controller.State.extend( {
defaults: {
id: 'generate-style-state',
menu: 'default',
content: 'generate_style_state'
}
} );
var MediaFrame = wp.media.view.MediaFrame;
Custom_Modal.frame = MediaFrame.extend({
regions: ['menu','title','content','toolbar'],
initialize: function() {
// Call 'initialize' directly on the parent class.
MediaFrame.prototype.initialize.apply( this, arguments );
_.defaults( this.options, {
selection: [],
library: {},
multiple: false,
state: 'hello-world',
modal: true,
uploader: false
});
//this.createSelection();
this.createStates();
//this.bindHandlers();
},
/**
* Create the default states on the frame.
*/
createStates: function() {
var options = this.options;
if ( this.options.states ) {
return;
}
// Add the default states.
this.states.add([
new Custom_Modal.controller.HelloWorld( {
title: 'Hello World',
id: 'hello-world-state',
priority: 50
} ),
new Custom_Modal.controller.GenerateStyle( {
title: 'Generate Style',
id: 'generate-world-state',
priority: 50
} )
]);
},
});
$( '.open-custom-modal' ).on( 'click', function(e) { console.log('click');
e.preventDefault();
frame = new Custom_Modal.frame({
// Set the title of the modal.
title: custom_modal_metabox_i18n.title,
// Customize the submit button.
button: {
// Set the text of the button.
text: custom_modal_metabox_i18n.close,
},
// state: 'insert'
});
frame.open();
});
})(jQuery, Custom_Modal);
<?php
/*
Plugin Name: Custom Modal Frame
Plugin URI: https://kathyisawesome.com
Description: Use WP Media Frame for totally custom content
Version: 1.0.0
Author: Kathy Darling
Author URI: https://kathyisawesome.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: custom-modal
*/
add_action( 'admin_enqueue_scripts', 'custom_modal_metabox_scripts', 20 );
function custom_modal_metabox_scripts( $hook ){
// special script for dealing with textareas- needs to run AFTER all the tinyMCE init scripts, so make 'editor' a requirement
wp_register_script( 'custom-modal-metabox', plugin_dir_url( __FILE__ ) . 'custom-modal-metabox.js', array( 'jquery', 'editor', 'media-upload' ), '1.0.0', true );
}
add_action( 'add_meta_boxes','custom_modal_metabox' );
function custom_modal_metabox(){
add_meta_box( '_custom_modal_frame', __( 'Custom modal test','custom-modal' ), 'custom_modal_metabox_callback', array( 'page', 'post' ), 'advanced', 'high' );
}
function custom_modal_metabox_callback(){ ?>
<button class="button open-custom-modal"><?php _e( 'Open Modal', 'custom_modal_frame' );?></button>
<?php
wp_enqueue_script( 'custom-modal-metabox' );
$translation_array = array(
'first_section' => __('First Section', 'custom-modal' ),
'second_section' => __('Second Section', 'custom-modal' ),
'title' => __( 'A custom modal', 'custom-modal' ),
'close' => __('Close this modal', 'custom-modal' ),
);
wp_localize_script( 'custom-modal-metabox', 'custom_modal_metabox_i18n', $translation_array );
add_action( 'print_media_templates', 'custom_modal_print_templates' );
}
function custom_modal_print_templates(){ ?>
<script type="text/html" id="tmpl-hello-content">
<strong>hello world</strong>
</script>
<script type="text/html" id="tmpl-guacamole-content">
<strong>Guacamole is happiness</strong>
</script>
<?php
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment