/**
* Enqueue scripts.
*/
public function admin_enqueue_scripts()
{
// Bail if we're not on the edit post screen.
if (get_current_screen()->base != 'toplevel_page_media-guide') {
return;
}
wp_enqueue_media();
wp_enqueue_script('highlight-js', plugin_dir_url(__FILE__) . 'includes/highlight/highlight.pack.js');
wp_enqueue_style('highlight-js', plugin_dir_url(__FILE__) . 'includes/highlight/styles/monokai_sublime.css');
wp_enqueue_style('wp-media-backbone-tutorial', plugin_dir_url(__FILE__) . 'style.css');
// Load the documentation javascript for a section page.
if (self::is_section_page()) {
wp_enqueue_script('wp-media-backbone-tutorial', plugin_dir_url(__FILE__) . 'script.js', array('media-views', 'media-models', 'highlight-js'));
}
// Load the example javascript and stylesheet for an example page.
if (self::is_example_page()) {
$example_id = self::get_current_example();
$example_script_src = sprintf(plugin_dir_url(__FILE__) . 'sections/%s/examples/%s/script.js', WPMJG::get_current_section(), WPMJG::get_current_example());
wp_enqueue_script('wp-media-backbone-tutorial-example-' . $example_id, $example_script_src, array('media-views', 'media-models'));
$example_style_src = sprintf(plugin_dir_url(__FILE__) . 'sections/%s/examples/%s/style.css', WPMJG::get_current_section(), WPMJG::get_current_example());
wp_enqueue_style('wp-media-backbone-tutorial-example-' . $example_id, $example_style_src);
}
}
require 'menu.php'; ?> <?php require '../sections/' . WPMJG::get_current_section() . '/index.php'; ?> <div class="entry-template"> <h3>Title</h3> <p>Content</p> <div class="example"> <h3>Example: title</h3> <h4>Live Example <a class="add-new-h2" target="_blank" href="<?php echo WPMJG::get_example_url(WPMJG::get_current_section(), 1); ?> ">open in a new window</a></h4> <iframe class="iframe-interactive-demo" src="<?php echo WPMJG::get_example_url(WPMJG::get_current_section(), 1); ?> "></iframe> <h4>Markup</h4> <pre><code class="language-html"><?php WPMJG()->the_section_example_markup(WPMJG::get_current_section(), 1); ?> </code></pre> <h4>Javascript</h4> <pre><code class="language-javascript"><?php WPMJG()->the_section_example_javascript(WPMJG::get_current_section(), 1); ?> </code></pre> </div> </div> </div>
<h3>wp.media.controller.State</h3>
<p>A state is a self-contained workflow step, e.g. selecting an image from the media library, or editing an image.</p>
<p>Extends directly from Backbone.Model. The default mode of each region is stored internally via model attributes.</p>
<p>Media frames, which are mixed-in with a <a href="<?php
echo WPMJG::get_section_url('wp.media.controller.StateMachine');
?>
"><code>wp.media.controller.StateMachine</code></a>, include multiple states.</p>
<div class="example"><h3>State boilerplate</h3>
<pre><code class="language-javascript">var stateConstructor = media.controller.State.extend({
// autowired (see media.controller.State.constructor() ) to be called when a state
// is activated (see media.controller.StateMachine.setState() )
activate: function() {},
// autowired (see media.controller.State.constructor() ) to be called when a state
// is deactivated (see media.controller.StateMachine.setState() )
deactivate: function() {},
// autowired (see media.controller.State.constructor() ) to be called when a state
// has the `reset` event triggered on it.
reset: function() {}
// autowired (see media.controller.State.constructor() ) to be called when a state
// has the `ready` event triggered on it.
ready: function() {}
});</code></pre>
</div>
<div class="wrap">
<h2>WordPress Media Backbone Guide</h2>
<?php
require plugin_dir_path(__FILE__) . 'menu.php';
$section_index_path = WPMJG::get_instance()->directory->sections . WPMJG::get_current_section() . '/index.php';
if (file_exists($section_index_path)) {
require $section_index_path;
} else {
require WPMJG::get_instance()->directory->plugin_root . '/templates/404.php';
}
?>
</div>
<h3>wp.media( attributes )</h3>
<p>Returns a media workflow.</p>
<pre><code class="language-javascript">// Returns a Select frame.
var selectFrame = wp.media({
// Accepts [ 'select', 'post', 'image', 'audio', 'video' ]
frame: 'select'
}); </code></pre>
See <?php
WPMJG::the_section_link('wp.media.view.MediaFrame.Post');
?>
,
<?php
WPMJG::the_section_link('wp.media.view.MediaFrame.Select');
?>
,
<?php
WPMJG::the_section_link('wp.media.view.MediaFrame.ImageDetails');
?>
,
<?php
WPMJG::the_section_link('wp.media.view.MediaFrame.AudioDetails');
?>
,
<?php
WPMJG::the_section_link('wp.media.view.MediaFrame.VideoDetails');
<div class="vignette"></div>
</div>
<p>The WordPress media library interfaces (the media modal) are a Javascript heavy
feature written with <a target="_blank" href="http://backbonejs.org">Backbone</a>.
Backbone is a light, unopinionated framework that can be dropped into an existing
web application without much investment, making it suitable for WordPress core, where
new features need to play nicely with existing functionality and our commitment
to backwards compatibility.</p>
<p>Javascript classes are documented in separate sections here.</p>
<h3>FAQ</h3>
<h4>I'm writing a plugin/theme and need a user to select an attachment, and do something
with that selection. Can I use the media modal to do this?</h4>
<p>Yes! The <a href="<?php
echo WPMJG::get_section_url('wp.media.view.MediaFrame.Select');
?>
">Select workflow</a> can do this for you.</p>
<h4>I want to add extra fields to the edit attachment interface.</h4>
<p>You can! Use the <a href="<?php
echo WPMJG::get_section_url('attachment_fields_to_edit');
?>
">attachment_fields_to_edit filter</a> to produce extra UI, and save this extra data on the edit_attachment action.</p>
<h3>External Resources</h3>
<ul>
<li><a href="https://www.youtube.com/watch?v=j5KPXLzuBXE">A video of Daryl Koopersmith gave a high level introduction to WordPress media during the 3.5 release cycle</a>.</li>
<li><a target="_blank" href="http://addyosmani.github.io/backbone-fundamentals/">Developing Backbone.js Applications</a> by Addy Osmani. A good introduction to Javascript MV* development.</li>
</ul>
