Skip to content

Commit

Permalink
Change WPMT > WPMJG
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericandrewlewis
ericandrewlewis committed Jun 6, 2014
1 parent facd012 commit f4c1e74
Show file tree
Hide file tree
Showing 16 changed files with 150 additions and 104 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
WordPress Backbone Media Guide
WordPress Media Javascript Guide
==============================

Enabling this WordPress plugin will create a top-level admin page "Media Guide," where documentation on Backbone design patterns and reusable elements can be found.
Enabling this WordPress plugin will create a top-level admin page "Media Guide," where documentation on Javascript design patterns and reusable elements in the media experience can be found.

![A screenshot of the plugin](/screenshot.png?raw=true "Example of documentation")
63 changes: 53 additions & 10 deletions index.php
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<?php
/*
Plugin Name: WP Media Tutorial
Plugin Name: WordPress Media Javascript Guide
Author: Eric Andrew Lewis
Version: 0.1
Plugin URI: http://github/ericandrewlewis/wordpress-media-javascript-guide
Description: Enabling this WordPress plugin will create a top-level admin page "Media Guide," where documentation on Javascript design patterns and reusable elements in the media experience can be found.
*/

/**
* Sandbox plugin PHP functionality yall.
*/
class WPMT {
class WPMJG {
protected static $instance = array();

/**
Expand Down Expand Up @@ -71,15 +74,15 @@ public function admin_enqueue_scripts() {
$example_id = self::get_current_example();

$example_script_src = sprintf( plugin_dir_url( __FILE__ ) . 'sections/%s/examples/%s/script.js',
WPMT::get_current_section(),
WPMT::get_current_example() );
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',
WPMT::get_current_section(),
WPMT::get_current_example() );
WPMJG::get_current_section(),
WPMJG::get_current_example() );

wp_enqueue_style( 'wp-media-backbone-tutorial-example-' . $example_id,
$example_style_src );
Expand Down Expand Up @@ -113,7 +116,7 @@ public function maybe_bootstap_example_screen() {

public function admin_body_class( $classes ) {
if ( self::is_example_page() ) {
$classes .= ' wpmt-example ';
$classes .= ' WPMJG-example ';
}
return $classes;
}
Expand Down Expand Up @@ -155,10 +158,19 @@ public static function get_current_example() {
return $example;
}

/**
* Whether the current page is an example page.
* @return boolean
*/
public static function is_example_page() {
return (bool) self::get_current_example();
}

/**
* Whether the current page is a section page.
*
* @return boolean
*/
public static function is_section_page() {
$is_section_page = null;
if ( (bool) self::get_current_section() && ! self::is_example_page() )
Expand All @@ -168,6 +180,12 @@ public static function is_section_page() {
return $is_section_page;
}

/**
* Output a readable version of the markup for a section example.
*
* @param string $section_id
* @param int $example_id
*/
public function the_section_example_markup( $section_id, $example_id ) {
$file_path = sprintf( '%ssections/%s/examples/%s/index.php',
plugin_dir_path( __FILE__ ),
Expand All @@ -177,6 +195,12 @@ public function the_section_example_markup( $section_id, $example_id ) {
echo htmlentities( $file_contents );
}

/**
* Output a readable version of the javascript for a section example.
*
* @param string $section_id
* @param int $example_id
*/
public function the_section_example_javascript( $section_id, $example_id ) {
$file_path = sprintf( '%ssections/%s/examples/%s/script.js',
plugin_dir_path( __FILE__ ),
Expand All @@ -186,16 +210,32 @@ public function the_section_example_javascript( $section_id, $example_id ) {
echo htmlentities( $file_contents );
}

/**
* Get a link to a section.
*
* @param string $section_id
* @return string anchor link.
*/
public function get_section_link( $section_id ) {
return sprintf( '<a href="%s">%s</a>',
self::get_section_url( $section_id ),
$section_id );
}

/**
* Output a link to a section.
*
* @param string $section_id
*/
public function the_section_link( $section_id ) {
echo self::get_section_link( $section_id );
}

/**
* Output the "inherited from..." text.
*
* @param string $object
*/
public function inherited_from_text( $object ) {
printf( '<span class="inheritance-info">inherited from <code>%s</code></span>',
self::get_section_link( $object ) );
Expand All @@ -204,8 +244,11 @@ public function inherited_from_text( $object ) {

}

function wpmt() {
return WPMT::get_instance();
/**
* Facade for singleton access.
*/
function WPMJG() {
return WPMJG::get_instance();
}

wpmt();
WPMJG();
11 changes: 6 additions & 5 deletions sections/wp.Backbone.View/index.php
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<h3>wp.Backbone.View</h3>
<p>An extension of <code>Backbone.View</code>, which all views are built on top of.</p>
<p>Extends <code>Backbone.View</code>.</p>
<p>Base view on top of which all views in WordPress are built on.</p>
<p>A Subview Manager is baked in via <code>wp.Backbone.Subviews</code>.</p>
<div class="example">
<h3>Example: Render a view with a subview</h3>
<h4>LIVE EXAMPLE <a class="add-new-h2" target="_blank" href="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 1 ) ?>">open in a new window</a></h4>
<iframe class="iframe-interactive-demo" src="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 1 ) ?>"></iframe>
<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 wpmt()->the_section_example_markup( WPMT::get_current_section(), 1 ) ?></code></pre>
<pre><code class="language-html"><?php WPMJG()->the_section_example_markup( WPMJG::get_current_section(), 1 ) ?></code></pre>
<p>An element goes in a view where a subview will be rendered (here <code>.subview-container</code>).</p>
<p><code>wp.template()</code> will find templates where <code>id="tmpl-{...}"</code>, so ID templates accordingly.</p>
<p><code>wp.template()</code> expects Mustache-inspired templating tags (see <a href="http://core.trac.wordpress.org/ticket/22344">#22344</a>), so use them:
Expand All @@ -15,5 +16,5 @@
</blockquote>
</p>
<h4>JAVASCRIPT</h4>
<pre><code class="language-javascript"><?php wpmt()->the_section_example_javascript( WPMT::get_current_section(), 1 ) ?></code></pre>
<pre><code class="language-javascript"><?php WPMJG()->the_section_example_javascript( WPMJG::get_current_section(), 1 ) ?></code></pre>
</div>
10 changes: 5 additions & 5 deletions sections/wp.media()/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
// Accepts [ 'select', 'post', 'image', 'audio', 'video' ]
frame: 'select'
}); </code></pre>
See <?php WPMT::the_section_link( 'wp.media.view.MediaFrame.Post' ) ?>,
<?php WPMT::the_section_link( 'wp.media.view.MediaFrame.Select' ) ?>,
<?php WPMT::the_section_link( 'wp.media.view.MediaFrame.ImageDetails' ) ?>,
<?php WPMT::the_section_link( 'wp.media.view.MediaFrame.AudioDetails' ) ?>,
<?php WPMT::the_section_link( 'wp.media.view.MediaFrame.VideoDetails' ) ?>
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' ) ?>
16 changes: 8 additions & 8 deletions sections/wp.media.controller.Region/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,20 @@
<div class="example">
<h3>Example: Render a view in a region</h3>

<h4>LIVE EXAMPLE <a class="add-new-h2" target="_blank" href="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 1 ) ?>">open in a new window</a></h4>
<iframe class="iframe-interactive-demo" src="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 1 ) ?>"></iframe>
<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 wpmt()->the_section_example_markup( WPMT::get_current_section(), 1 ) ?></code></pre>
<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 wpmt()->the_section_example_javascript( WPMT::get_current_section(), 1 ) ?></code></pre>
<pre><code class="language-javascript"><?php WPMJG()->the_section_example_javascript( WPMJG::get_current_section(), 1 ) ?></code></pre>
</div>
<div class="example">
<h3>Example: Render a view in a region in two modes.</h3>
<p>One region is created. A callback is bound to clicking either button, which triggers a mode switch on the region, filling in the region with a different view for each mode.
<h4>Live Example <a class="add-new-h2" target="_blank" href="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 2 ) ?>">open in a new window</a></h4>
<iframe class="iframe-interactive-demo" src="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 2 ) ?>"></iframe>
<h4>Live Example <a class="add-new-h2" target="_blank" href="<?php echo WPMJG::get_example_url( WPMJG::get_current_section(), 2 ) ?>">open in a new window</a></h4>
<iframe class="iframe-interactive-demo" src="<?php echo WPMJG::get_example_url( WPMJG::get_current_section(), 2 ) ?>"></iframe>
<h4>Markup</h4>
<pre><code class="language-html"><?php wpmt()->the_section_example_markup( WPMT::get_current_section(), 2 ) ?></code></pre>
<pre><code class="language-html"><?php WPMJG()->the_section_example_markup( WPMJG::get_current_section(), 2 ) ?></code></pre>
<h4>Javascript</h4>
<pre><code class="language-javascript"><?php wpmt()->the_section_example_javascript( WPMT::get_current_section(), 2 ) ?></code></pre>
<pre><code class="language-javascript"><?php WPMJG()->the_section_example_javascript( WPMJG::get_current_section(), 2 ) ?></code></pre>
</div>
2 changes: 1 addition & 1 deletion sections/wp.media.controller.State/index.php
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<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 WPMT::get_section_url( 'wp.media.controller.StateMachine' ) ?>"><code>wp.media.controller.StateMachine</code></a>, include multiple states.</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
Expand Down
8 changes: 4 additions & 4 deletions sections/wp.media.controller.StateMachine/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
</dl>
<div class="example">
<h3>Example: A simple state machine that toggles between two states.</h3>
<h4>Live Example <a class="add-new-h2" target="_blank" href="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 1 ) ?>">open in a new window</a></h4>
<iframe class="iframe-interactive-demo" src="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 1 ) ?>"></iframe>
<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 wpmt()->the_section_example_markup( WPMT::get_current_section(), 1 ) ?></code></pre>
<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 wpmt()->the_section_example_javascript( WPMT::get_current_section(), 1 ) ?></code></pre>
<pre><code class="language-javascript"><?php WPMJG()->the_section_example_javascript( WPMJG::get_current_section(), 1 ) ?></code></pre>
</div>
<h4>Further reading</h4>
<ul>
Expand Down
40 changes: 20 additions & 20 deletions sections/wp.media.view.MediaFrame.Post/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,39 @@
<p>A workflow for choosing content in various forms (media, galleries, playlists) to insert into the content editor.</p>
<h3>Properties</h3>
<dl>
<dt><code>content</code><?php WPMT::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>content</code> region controller object. See <code><?php WPMT::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>menu</code><?php WPMT::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>menu</code> region controller object. See <code><?php WPMT::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>title</code><?php WPMT::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>title</code> region controller object. See <code><?php WPMT::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>toolbar</code><?php WPMT::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>toolbar</code> region controller object. See <code><?php WPMT::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>router</code><?php WPMT::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>router</code> region controller object. See <code><?php WPMT::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>views</code><?php WPMT::inherited_from_text( 'wp.Backbone.View' ) ?></dt>
<dt><code>content</code><?php WPMJG::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>content</code> region controller object. See <code><?php WPMJG::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>menu</code><?php WPMJG::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>menu</code> region controller object. See <code><?php WPMJG::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>title</code><?php WPMJG::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>title</code> region controller object. See <code><?php WPMJG::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>toolbar</code><?php WPMJG::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>toolbar</code> region controller object. See <code><?php WPMJG::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>router</code><?php WPMJG::inherited_from_text( 'wp.media.view.Frame' ) ?></dt>
<dd>The <code>router</code> region controller object. See <code><?php WPMJG::the_section_link( 'wp.media.controller.Region' ) ?></code>.</dd>
<dt><code>views</code><?php WPMJG::inherited_from_text( 'wp.Backbone.View' ) ?></dt>
<dd>A subview manager. Instance of <code>wp.Backbone.Subviews</code>.</dd>
</dl>
<h3>Methods</h3>
<dl>
<dt><code>open()</code><?php WPMT::inherited_from_text( 'wp.media.view.MediaFrame' ) ?></dt>
<dt><code>open()</code><?php WPMJG::inherited_from_text( 'wp.media.view.MediaFrame' ) ?></dt>
<dd>Open the frame in a modal.</dd>
<dt><code>close()</code><?php WPMT::inherited_from_text( 'wp.media.view.MediaFrame' ) ?></dt>
<dt><code>close()</code><?php WPMJG::inherited_from_text( 'wp.media.view.MediaFrame' ) ?></dt>
<dd>Close the modal.</dd>
<dt><code>state( state )</code><?php WPMT::inherited_from_text( 'wp.media.controller.StateMachine' ) ?></dt>
<dt><code>state( state )</code><?php WPMJG::inherited_from_text( 'wp.media.controller.StateMachine' ) ?></dt>
<dd>Get a state object. <br>Defaults to the current state; if a state ID is supplied, returns that state.</dd>
<dt><code>setState( state )</code><?php WPMT::inherited_from_text( 'wp.media.controller.StateMachine' ) ?></dt>
<dt><code>setState( state )</code><?php WPMJG::inherited_from_text( 'wp.media.controller.StateMachine' ) ?></dt>
<dd>Set the state.<br>
Triggers an `activate` event on the state, and a `deactivate` event on the previous state.</dd>
<dt><code>lastState()</code><?php WPMT::inherited_from_text( 'wp.media.controller.StateMachine' ) ?></dt>
<dt><code>lastState()</code><?php WPMJG::inherited_from_text( 'wp.media.controller.StateMachine' ) ?></dt>
<dd>Get the previously active state object.</dd>
</dl>
<div class="example">
<h3>Example: Open a post frame</h3>
<h4>LIVE EXAMPLE <a class="add-new-h2" target="_blank" href="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 1 ) ?>">open in a new window</a></h4>
<iframe class="iframe-interactive-demo" src="<?php echo WPMT::get_example_url( WPMT::get_current_section(), 1 ) ?>"></iframe>
<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 wpmt()->the_section_example_markup( WPMT::get_current_section(), 1 ) ?></code></pre>
<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 wpmt()->the_section_example_javascript( WPMT::get_current_section(), 1 ) ?></code></pre>
<pre><code class="language-javascript"><?php WPMJG()->the_section_example_javascript( WPMJG::get_current_section(), 1 ) ?></code></pre>
</div>
Loading

0 comments on commit f4c1e74

Please sign in to comment.