<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[22437] trunk: Media: Integrate the gallery workflow with the media menu.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg > ul, #logmsg > ol { margin-left: 0; margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/22437">22437</a></dd>
<dt>Author</dt> <dd>koopersmith</dd>
<dt>Date</dt> <dd>2012-11-07 20:14:41 +0000 (Wed, 07 Nov 2012)</dd>
</dl>
<h3>Log Message</h3>
<pre>Media: Integrate the gallery workflow with the media menu.
`wp.media.model.Query.more()`
* If a request has already been sent out for more attachments, return that request object instead of creating another.
`wp.media.controller.Region`
* A region allows views to be swapped in and out of a section of the page without either view having to know about the other.
* Application components can use the same callbacks and resources by leveraging `Region.mode()`, which triggers a set of callbacks to create or transform the current view, but only if necessary.
`wp.media.view.Frame`
* Leverage `Region` controllers instead of forcing states to swap view objects, which causes states to fit more comfortably in the controller-camp.
* Add `previous()`, a method to fetch the previous state `id`.
* Separate out the default settings over several objects (so blank frames can be instantiated).
`wp.media.view.MediaFrame`
* The base `Frame` used for media management: handles integration with the `Modal` and `UploaderWindow` views.
`wp.media.view.MediaFrame.Post`
* Includes all default media states and callbacks necessary for inserting media into a post.
see <a href="http://core.trac.wordpress.org/ticket/21390">#21390</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadminjsmediauploadjs">trunk/wp-admin/js/media-upload.js</a></li>
<li><a href="#trunkwpincludescssmediaviewscss">trunk/wp-includes/css/media-views.css</a></li>
<li><a href="#trunkwpincludesjsmceviewjs">trunk/wp-includes/js/mce-view.js</a></li>
<li><a href="#trunkwpincludesjsmediamodelsjs">trunk/wp-includes/js/media-models.js</a></li>
<li><a href="#trunkwpincludesjsmediaviewsjs">trunk/wp-includes/js/media-views.js</a></li>
<li><a href="#trunkwpincludesmediaphp">trunk/wp-includes/media.php</a></li>
<li><a href="#trunkwpincludesscriptloaderphp">trunk/wp-includes/script-loader.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadminjsmediauploadjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/media-upload.js (22436 => 22437)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/media-upload.js 2012-11-07 20:12:47 UTC (rev 22436)
+++ trunk/wp-admin/js/media-upload.js 2012-11-07 20:14:41 UTC (rev 22437)
</span><span class="lines">@@ -116,7 +116,7 @@
</span><span class="cx"> }).join('') );
</span><span class="cx"> }, this );
</span><span class="cx">
</span><del>- workflow.get('gallery').on( 'update', function( selection ) {
</del><ins>+ workflow.get('gallery-edit').on( 'update', function( selection ) {
</ins><span class="cx"> var view = wp.mce.view.get('gallery'),
</span><span class="cx"> shortcode;
</span><span class="cx">
</span><span class="lines">@@ -125,9 +125,6 @@
</span><span class="cx">
</span><span class="cx"> shortcode = view.gallery.shortcode( selection );
</span><span class="cx"> this.insert( shortcode.string() );
</span><del>-
- // Reset the workflow view to the library.
- workflow.render('library');
</del><span class="cx"> }, this );
</span><span class="cx">
</span><span class="cx"> return workflow;
</span></span></pre></div>
<a id="trunkwpincludescssmediaviewscss"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/css/media-views.css (22436 => 22437)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/css/media-views.css 2012-11-07 20:12:47 UTC (rev 22436)
+++ trunk/wp-includes/css/media-views.css 2012-11-07 20:14:41 UTC (rev 22437)
</span><span class="lines">@@ -132,7 +132,7 @@
</span><span class="cx"> top: 0;
</span><span class="cx"> right: 0;
</span><span class="cx"> bottom: 61px;
</span><del>- width: 247px;
</del><ins>+ width: 267px;
</ins><span class="cx"> padding: 0 16px;
</span><span class="cx"> z-index: 75;
</span><span class="cx"> background: #f5f5f5;
</span><span class="lines">@@ -140,7 +140,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .hide-sidebar .media-sidebar {
</span><del>- right: -280px;
</del><ins>+ right: -300px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .hide-toolbar .media-sidebar {
</span><span class="lines">@@ -218,6 +218,10 @@
</span><span class="cx"> border-bottom: 1px solid #fff;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.media-menu > a.button {
+ margin: 0 20px;
+}
+
</ins><span class="cx"> /**
</span><span class="cx"> * Frame
</span><span class="cx"> */
</span><span class="lines">@@ -225,11 +229,11 @@
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-frame .media-content {
</del><ins>+.media-frame .region-content {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="cx"> left: 200px;
</span><del>- right: 280px;
</del><ins>+ right: 300px;
</ins><span class="cx"> bottom: 61px;
</span><span class="cx"> height: auto;
</span><span class="cx"> width: auto;
</span><span class="lines">@@ -237,11 +241,11 @@
</span><span class="cx"> overflow: auto;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-frame.hide-sidebar .media-content {
</del><ins>+.media-frame.hide-sidebar .region-content {
</ins><span class="cx"> right: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-frame.hide-toolbar .media-content {
</del><ins>+.media-frame.hide-toolbar .region-content {
</ins><span class="cx"> bottom: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -578,7 +582,7 @@
</span><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-content.uploader-inline {
</del><ins>+.region-content.uploader-inline {
</ins><span class="cx"> margin: 20px;
</span><span class="cx"> padding: 20px;
</span><span class="cx"> border: 1px dashed #aaa;
</span><span class="lines">@@ -799,16 +803,6 @@
</span><span class="cx"> * Attachment Display Settings
</span><span class="cx"> */
</span><span class="cx">
</span><del>-.attachment-display-settings,
-.button div.attachment-display-settings {
- padding: 0 1em 1em;
-}
-
-.attachment-display-settings h3 {
- font-weight: 200;
- margin: 1.4em 0 0.4em;
-}
-
</del><span class="cx"> .attachment-display-settings h4 {
</span><span class="cx"> margin: 1.4em 0 0.4em;
</span><span class="cx"> }
</span><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpincludesjsmceviewjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/mce-view.js (22436 => 22437)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/mce-view.js 2012-11-07 20:12:47 UTC (rev 22436)
+++ trunk/wp-includes/js/mce-view.js 2012-11-07 20:14:41 UTC (rev 22437)
</span><span class="lines">@@ -694,7 +694,7 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this.frame = wp.media({
</span><del>- state: 'gallery',
</del><ins>+ state: 'gallery-edit',
</ins><span class="cx"> title: mceview.l10n.editGallery,
</span><span class="cx"> editing: true,
</span><span class="cx"> multiple: true,
</span><span class="lines">@@ -712,7 +712,7 @@
</span><span class="cx"> }, this );
</span><span class="cx">
</span><span class="cx"> // Update the `shortcode` and `attachments`.
</span><del>- this.frame.get('gallery').on( 'update', function( selection ) {
</del><ins>+ this.frame.get('gallery-edit').on( 'update', function( selection ) {
</ins><span class="cx"> var view = mceview.get('gallery');
</span><span class="cx">
</span><span class="cx"> this.options.shortcode = view.gallery.shortcode( selection );
</span></span></pre></div>
<a id="trunkwpincludesjsmediamodelsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/media-models.js (22436 => 22437)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/media-models.js 2012-11-07 20:12:47 UTC (rev 22436)
+++ trunk/wp-includes/js/media-models.js 2012-11-07 20:14:41 UTC (rev 22437)
</span><span class="lines">@@ -14,8 +14,8 @@
</span><span class="cx"> * @return {object} A media workflow.
</span><span class="cx"> */
</span><span class="cx"> media = wp.media = function( attributes ) {
</span><del>- if ( media.view.Frame )
- return new media.view.Frame( attributes ).render().attach().open();
</del><ins>+ if ( media.view.MediaFrame.Post )
+ return new media.view.MediaFrame.Post( attributes ).render().attach().open();
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> _.extend( media, { model: {}, view: {}, controller: {} });
</span><span class="lines">@@ -497,13 +497,16 @@
</span><span class="cx"> more: function( options ) {
</span><span class="cx"> var query = this;
</span><span class="cx">
</span><ins>+ if ( this._more && 'pending' === this._more.state() )
+ return this._more;
+
</ins><span class="cx"> if ( ! this.hasMore )
</span><span class="cx"> return $.Deferred().resolve().promise();
</span><span class="cx">
</span><span class="cx"> options = options || {};
</span><span class="cx"> options.add = true;
</span><span class="cx">
</span><del>- return this.fetch( options ).done( function( resp ) {
</del><ins>+ return this._more = this.fetch( options ).done( function( resp ) {
</ins><span class="cx"> if ( _.isEmpty( resp ) || -1 === this.args.posts_per_page || resp.length < this.args.posts_per_page )
</span><span class="cx"> query.hasMore = false;
</span><span class="cx"> });
</span></span></pre></div>
<a id="trunkwpincludesjsmediaviewsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/media-views.js (22436 => 22437)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/media-views.js 2012-11-07 20:12:47 UTC (rev 22436)
+++ trunk/wp-includes/js/media-views.js 2012-11-07 20:14:41 UTC (rev 22437)
</span><span class="lines">@@ -53,6 +53,73 @@
</span><span class="cx"> */
</span><span class="cx">
</span><span class="cx"> /**
</span><ins>+ * wp.media.controller.Region
+ */
+ media.controller.Region = function( options ) {
+ _.extend( this, _.pick( options || {}, 'id', 'controller' ) );
+
+ this.on( 'empty', this.empty, this );
+ this.mode('empty');
+ };
+
+ // Use Backbone's self-propagating `extend` inheritance method.
+ media.controller.Region.extend = Backbone.Model.extend;
+
+ _.extend( media.controller.Region.prototype, Backbone.Events, {
+ trigger: function( id ) {
+ this._mode = id;
+ return Backbone.Events.trigger.apply( this, arguments );
+ },
+
+ mode: function( mode ) {
+ if ( mode )
+ return this.trigger( mode );
+ return this._mode;
+ },
+
+ view: function( view ) {
+ var previous = this._view,
+ mode = this._mode,
+ id = this.id;
+
+ // If no argument is provided, return the current view.
+ if ( ! view )
+ return previous;
+
+ // If we're attempting to switch to the current view, bail.
+ if ( view === previous )
+ return;
+
+ // Add classes to the new view.
+ if ( id )
+ view.$el.addClass( 'region-' + id );
+
+ if ( mode )
+ view.$el.addClass( 'mode-' + mode );
+
+ // Remove the hide class.
+ // this.$el.removeClass( 'hide-' + subview );
+
+ if ( previous ) {
+ // Fire the view's `destroy` event if it exists.
+ if ( previous.destroy )
+ previous.destroy();
+ // Undelegate events.
+ previous.undelegateEvents();
+
+ // Replace the view in place.
+ previous.$el.replaceWith( view.$el );
+ }
+
+ this._view = view;
+ },
+
+ empty: function() {
+ this.view( new Backbone.View() );
+ }
+ });
+
+ /**
</ins><span class="cx"> * wp.media.controller.StateMachine
</span><span class="cx"> */
</span><span class="cx"> media.controller.StateMachine = function( states ) {
</span><span class="lines">@@ -62,7 +129,9 @@
</span><span class="cx"> // Use Backbone's self-propagating `extend` inheritance method.
</span><span class="cx"> media.controller.StateMachine.extend = Backbone.Model.extend;
</span><span class="cx">
</span><del>- _.extend( media.controller.StateMachine.prototype, {
</del><ins>+ // Add events to the `StateMachine`.
+ _.extend( media.controller.StateMachine.prototype, Backbone.Events, {
+
</ins><span class="cx"> // Fetch a state model.
</span><span class="cx"> //
</span><span class="cx"> // Implicitly creates states.
</span><span class="lines">@@ -88,16 +157,23 @@
</span><span class="cx">
</span><span class="cx"> previous = this.state();
</span><span class="cx">
</span><del>- // Bail if we're trying to select the current state, or a state
</del><ins>+ // Bail if we're trying to select the current state, if we haven't
+ // created the `states` collection, or are trying to select a state
</ins><span class="cx"> // that does not exist.
</span><del>- if ( previous && id === previous.id || ! this.states.get( id ) )
</del><ins>+ if ( ( previous && id === previous.id ) || ! this.states || ! this.states.get( id ) )
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- if ( previous )
</del><ins>+ if ( previous ) {
</ins><span class="cx"> previous.trigger('deactivate');
</span><ins>+ this._previous = previous.id;
+ }
</ins><span class="cx">
</span><span class="cx"> this._state = id;
</span><span class="cx"> this.state().trigger('activate');
</span><ins>+ },
+
+ previous: function() {
+ return this._previous;
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -122,6 +198,7 @@
</span><span class="cx"> this.on( 'activate', this.activate, this );
</span><span class="cx"> this.on( 'deactivate', this._deactivate, this );
</span><span class="cx"> this.on( 'deactivate', this.deactivate, this );
</span><ins>+ this.on( 'reset', this.reset, this );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> activate: function() {},
</span><span class="lines">@@ -139,21 +216,33 @@
</span><span class="cx"> this.active = false;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ reset: function() {},
+
</ins><span class="cx"> menu: function() {
</span><del>- var menu = this.get('menu');
</del><ins>+ var menu = this.frame.menu,
+ mode = this.get('menu'),
+ view;
</ins><span class="cx">
</span><del>- if ( ! menu )
</del><ins>+ if ( ! mode )
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- this.frame.menu( menu );
- menu.select( this.id );
- },
</del><ins>+ if ( menu.mode() !== mode )
+ menu.mode( mode );
</ins><span class="cx">
</span><del>- toolbar: function() {},
- sidebar: function() {},
- content: function() {}
</del><ins>+ view = menu.view();
+ if ( view.select )
+ view.select( this.id );
+ }
</ins><span class="cx"> });
</span><span class="cx">
</span><ins>+ _.each(['toolbar','sidebar','content'], function( region ) {
+ media.controller.State.prototype[ region ] = function() {
+ var mode = this.get( region );
+ if ( mode )
+ this.frame[ region ].mode( mode );
+ };
+ });
+
</ins><span class="cx"> // wp.media.controller.Library
</span><span class="cx"> // ---------------------------
</span><span class="cx"> media.controller.Library = media.controller.State.extend({
</span><span class="lines">@@ -161,7 +250,8 @@
</span><span class="cx"> id: 'library',
</span><span class="cx"> multiple: false,
</span><span class="cx"> describe: false,
</span><del>- title: l10n.mediaLibraryTitle
</del><ins>+ toolbar: 'main-attachments',
+ sidebar: 'settings'
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> initialize: function() {
</span><span class="lines">@@ -193,7 +283,7 @@
</span><span class="cx">
</span><span class="cx"> selection.on( 'selection:single', this.buildDetails, this );
</span><span class="cx"> selection.on( 'selection:unsingle', this.clearDetails, this );
</span><del>- selection.on( 'add remove reset', this.updateToolbarVisibility, this );
</del><ins>+ selection.on( 'add remove reset', this.refreshToolbar, this );
</ins><span class="cx">
</span><span class="cx"> this._updateEmpty();
</span><span class="cx"> this.get('library').on( 'add remove reset', this._updateEmpty, this );
</span><span class="lines">@@ -211,49 +301,29 @@
</span><span class="cx"> this.off( 'change:empty', this.refresh, this );
</span><span class="cx"> },
</span><span class="cx">
</span><del>- toolbar: function() {
- var frame = this.frame;
-
- frame.toolbar( new media.view.Toolbar.PostLibrary({
- controller: frame
- }) );
</del><ins>+ reset: function() {
+ this.get('selection').clear();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> sidebar: function() {
</span><del>- var frame = this.frame;
-
- // Sidebar.
- frame.sidebar( new media.view.Sidebar({
- controller: frame
- }) );
-
</del><ins>+ media.controller.State.prototype.sidebar.apply( this, arguments );
</ins><span class="cx"> this.details();
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> content: function() {
</span><del>- var frame = this.frame,
- library = this.get('library'),
- view;
</del><ins>+ var frame = this.frame;
</ins><span class="cx">
</span><span class="cx"> // Content.
</span><span class="cx"> if ( this.get('empty') ) {
</span><span class="cx"> // Attempt to fetch any Attachments we don't already have.
</span><del>- library.more();
</del><ins>+ this.get('library').more();
</ins><span class="cx">
</span><span class="cx"> // In the meantime, render an inline uploader.
</span><del>- view = new media.view.UploaderInline({
- controller: frame
- });
</del><ins>+ frame.content.mode('upload');
</ins><span class="cx"> } else {
</span><span class="cx"> // Browse our library of attachments.
</span><del>- view = new media.view.AttachmentsBrowser({
- controller: frame,
- collection: library,
- model: this
- });
</del><ins>+ frame.content.mode('browse');
</ins><span class="cx"> }
</span><del>-
- frame.content( view.render() );
</del><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> refresh: function() {
</span><span class="lines">@@ -262,11 +332,12 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _updateEmpty: function() {
</span><del>- this.set( 'empty', ! this.get('library').length );
</del><ins>+ var library = this.get('library');
+ this.set( 'empty', ! library.length && ! library.props.get('search') );
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- updateToolbarVisibility: function() {
- this.frame.toolbar().visibility();
</del><ins>+ refreshToolbar: function() {
+ this.frame.toolbar.view().refresh();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> selectUpload: function( attachment ) {
</span><span class="lines">@@ -279,8 +350,9 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> buildDetails: function( model ) {
</span><del>- this.frame.sidebar().add( 'details', new media.view.Attachment.Details({
- controller: this.frame,
</del><ins>+ var frame = this.frame;
+ frame.sidebar.view().add( 'details', new media.view.Attachment.Details({
+ controller: frame,
</ins><span class="cx"> model: model,
</span><span class="cx"> priority: 80
</span><span class="cx"> }).render() );
</span><span class="lines">@@ -291,7 +363,7 @@
</span><span class="cx"> if ( this.get('selection').single() )
</span><span class="cx"> return this;
</span><span class="cx">
</span><del>- this.frame.sidebar().add( 'details', new Backbone.View({
</del><ins>+ this.frame.sidebar.view().add( 'details', new Backbone.View({
</ins><span class="cx"> priority: 80
</span><span class="cx"> }).render() );
</span><span class="cx"> return this;
</span><span class="lines">@@ -346,123 +418,197 @@
</span><span class="cx"> // ---------------------------
</span><span class="cx"> media.controller.Gallery = media.controller.Library.extend({
</span><span class="cx"> defaults: {
</span><del>- id: 'gallery',
</del><ins>+ id: 'gallery-edit',
</ins><span class="cx"> multiple: false,
</span><span class="cx"> describe: true,
</span><del>- title: l10n.createGalleryTitle,
</del><span class="cx"> edge: 199,
</span><del>- editing: false
</del><ins>+ editing: false,
+ sortable: true,
+ toolbar: 'gallery-edit',
+ sidebar: 'settings'
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- toolbar: function() {
- var frame = this.frame;
- frame.toolbar( new media.view.Toolbar.Gallery({
- controller: frame
- }) );
</del><ins>+ initialize: function() {
+ // The single `Attachment` view to be used in the `Attachments` view.
+ if ( ! this.get('AttachmentView') )
+ this.set( 'AttachmentView', media.view.Attachment.Gallery );
+ media.controller.Library.prototype.initialize.apply( this, arguments );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> sidebar: function() {
</span><span class="cx"> var frame = this.frame;
</span><span class="cx">
</span><del>- // Sidebar.
- frame.sidebar( new media.view.Sidebar({
- controller: frame
- }) );
</del><ins>+ media.controller.State.prototype.sidebar.apply( this, arguments );
+ this.details();
</ins><span class="cx">
</span><del>- this.details();
- frame.sidebar().add({
</del><ins>+ frame.sidebar.view().add({
</ins><span class="cx"> settings: new media.view.Settings.Gallery({
</span><span class="cx"> controller: frame,
</span><span class="cx"> model: this.get('library').props,
</span><span class="cx"> priority: 40
</span><span class="cx"> }).render()
</span><span class="cx"> });
</span><del>- },
-
- content: function() {
- this.frame.content( new media.view.Attachments({
- controller: this.frame,
- collection: this.get('library'),
- model: this,
- sortable: true,
- // The single `Attachment` view to be used in the `Attachments` view.
- AttachmentView: media.view.Attachment.Gallery
- }).render() );
</del><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- media.controller.GalleryAddImages = media.controller.Library.extend({
- defaults: {
- id: 'gallery:add',
- multiple: true,
- title: l10n.createGalleryTitle
- },
</del><ins>+ /**
+ * ========================================================================
+ * VIEWS
+ * ========================================================================
+ */
</ins><span class="cx">
</span><ins>+ /**
+ * wp.media.view.Frame
+ */
+ media.view.Frame = Backbone.View.extend({
+
</ins><span class="cx"> initialize: function() {
</span><del>- if ( ! this.get('library') )
- this.set( 'library', media.query({ type: 'image' }) );
- return media.controller.Library.prototype.initialize.apply( this, arguments );
</del><ins>+ this._createRegions();
+ this._createStates();
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- toolbar: function() {
- var frame = this.frame;
- frame.toolbar( new media.view.Toolbar.GalleryAddImages({
- controller: frame
- }) );
</del><ins>+ _createRegions: function() {
+ // Clone the regions array.
+ this.regions = this.regions ? this.regions.slice() : [];
+
+ // Initialize regions.
+ _.each( this.regions, function( region ) {
+ this[ region ] = new media.controller.Region({
+ controller: this,
+ id: region
+ });
+ }, this );
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- // Leave the sidebar.
- sidebar: function() {}
</del><ins>+ _createStates: function() {
+ // Create the default `states` collection.
+ this.states = new Backbone.Collection();
+
+ // Ensure states have a reference to the frame.
+ this.states.on( 'add', function( model ) {
+ model.frame = this;
+ }, this );
+ },
+
+ render: function() {
+ var els = _.map( this.regions, function( region ) {
+ return this[ region ].view().el;
+ }, this );
+
+ // Detach the current views to maintain event bindings.
+ $( els ).detach();
+ this.$el.html( els );
+
+ return this;
+ },
+
+ reset: function() {
+ this.states.invoke( 'trigger', 'reset' );
+ }
</ins><span class="cx"> });
</span><span class="cx">
</span><del>- /**
- * ========================================================================
- * VIEWS
- * ========================================================================
- */
</del><ins>+ // Make the `Frame` a `StateMachine`.
+ _.extend( media.view.Frame.prototype, media.controller.StateMachine.prototype );
</ins><span class="cx">
</span><span class="cx"> /**
</span><del>- * wp.media.view.Frame
</del><ins>+ * wp.media.view.MediaFrame
</ins><span class="cx"> */
</span><del>- media.view.Frame = Backbone.View.extend({
- tagName: 'div',
</del><ins>+ media.view.MediaFrame = media.view.Frame.extend({
</ins><span class="cx"> className: 'media-frame',
</span><del>- template: media.template('media-frame'),
</del><ins>+ regions: ['menu','content','sidebar','toolbar'],
</ins><span class="cx">
</span><span class="cx"> initialize: function() {
</span><ins>+ media.view.Frame.prototype.initialize.apply( this, arguments );
+
</ins><span class="cx"> _.defaults( this.options, {
</span><del>- state: 'upload',
- title: '',
- selection: [],
- library: {},
- modal: true,
- multiple: false,
- uploader: true,
- editing: false
</del><ins>+ title: '',
+ modal: true,
+ uploader: true
</ins><span class="cx"> });
</span><span class="cx">
</span><del>- this.createSelection();
- this.createSubviews();
- this.createStates();
</del><ins>+ // Initialize modal container view.
+ if ( this.options.modal ) {
+ this.modal = new media.view.Modal({
+ controller: this,
+ $content: this.$el,
+ title: this.options.title
+ });
+ }
+
+ // Initialize window-wide uploader.
+ if ( this.options.uploader ) {
+ this.uploader = new media.view.UploaderWindow({
+ uploader: {
+ dropzone: this.modal ? this.modal.$el : this.$el
+ }
+ });
+ }
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> render: function() {
</span><del>- var els = [ this.menu().el, this.content().el, this.sidebar().el, this.toolbar().el ];
-
</del><span class="cx"> if ( this.modal )
</span><span class="cx"> this.modal.render();
</span><span class="cx">
</span><del>- // Detach any views that will be rebound to maintain event bindings.
- this.$el.children().filter( els ).detach();
- this.$el.empty().append( els );
</del><ins>+ media.view.Frame.prototype.render.apply( this, arguments );
</ins><span class="cx">
</span><span class="cx"> // Render the window uploader if it exists.
</span><span class="cx"> if ( this.uploader )
</span><span class="cx"> this.uploader.render().$el.appendTo( this.$el );
</span><span class="cx">
</span><span class="cx"> return this;
</span><ins>+ }
+ });
+
+ // Map some of the modal's methods to the frame.
+ _.each(['open','close','attach','detach'], function( method ) {
+ media.view.MediaFrame.prototype[ method ] = function( view ) {
+ if ( this.modal )
+ this.modal[ method ].apply( this.modal, arguments );
+ return this;
+ };
+ });
+
+
+ /**
+ * wp.media.view.MediaFrame.Post
+ */
+ media.view.MediaFrame.Post = media.view.MediaFrame.extend({
+ initialize: function() {
+ media.view.MediaFrame.prototype.initialize.apply( this, arguments );
+
+ _.defaults( this.options, {
+ state: 'upload',
+ selection: [],
+ library: {},
+ multiple: false,
+ editing: false
+ });
+
+ this.bindHandlers();
+ this.createSelection();
+ this.createStates();
</ins><span class="cx"> },
</span><span class="cx">
</span><ins>+ bindHandlers: function() {
+ this.menu.on( 'main', this.mainMenu, this );
+ this.menu.on( 'batch', this.batchMenu, this );
+ this.menu.on( 'gallery', this.galleryMenu, this );
+
+ this.content.on( 'browse', this.browseContent, this );
+ this.content.on( 'upload', this.uploadContent, this );
+ this.content.on( 'embed', this.embedContent, this );
+
+ this.sidebar.on( 'settings', this.settingsSidebar, this );
+ this.sidebar.on( 'attachment-settings', this.attachmentSettingsSidebar, this );
+
+ this.toolbar.on( 'main-attachments', this.mainAttachmentsToolbar, this );
+ this.toolbar.on( 'main-embed', this.mainEmbedToolbar, this );
+ this.toolbar.on( 'batch-edit', this.batchEditToolbar, this );
+ this.toolbar.on( 'batch-add', this.batchAddToolbar, this );
+ this.toolbar.on( 'gallery-edit', this.galleryEditToolbar, this );
+ this.toolbar.on( 'gallery-add', this.galleryAddToolbar, this );
+ },
+
</ins><span class="cx"> createSelection: function() {
</span><span class="cx"> var controller = this,
</span><span class="cx"> selection = this.options.selection;
</span><span class="lines">@@ -475,107 +621,275 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> createStates: function() {
</span><del>- var options = this.options,
- menus = {
- landing: new media.view.Menu.Landing({
- controller: this
- })
- };
</del><ins>+ var options = this.options;
</ins><span class="cx">
</span><del>- // Create the default `states` collection.
- this.states = new Backbone.Collection();
-
- // Ensure states have a reference to the frame.
- this.states.on( 'add', function( model ) {
- model.frame = this;
- }, this );
-
</del><span class="cx"> // Add the default states.
</span><span class="cx"> this.states.add([
</span><span class="cx"> new media.controller.Library({
</span><span class="cx"> selection: options.selection,
</span><span class="cx"> library: media.query( options.library ),
</span><span class="cx"> multiple: this.options.multiple,
</span><del>- menu: menus.landing
</del><ins>+ menu: 'main',
+ sidebar: 'attachment-settings'
</ins><span class="cx"> }),
</span><ins>+
</ins><span class="cx"> new media.controller.Upload({
</span><span class="cx"> multiple: this.options.multiple,
</span><del>- menu: menus.landing
</del><ins>+ menu: 'main',
+ sidebar: 'attachment-settings'
</ins><span class="cx"> }),
</span><ins>+
</ins><span class="cx"> new media.controller.Gallery({
</span><del>- library: options.selection,
- editing: options.editing
</del><ins>+ editing: options.editing,
+ menu: 'gallery'
</ins><span class="cx"> }),
</span><del>- new media.controller.GalleryAddImages()
</del><ins>+
+ new media.controller.Library({
+ id: 'gallery-library',
+ library: media.query({ type: 'image' }),
+ multiple: true,
+ menu: 'gallery',
+ toolbar: 'gallery-add'
+ }),
+
+ new media.controller.Upload({
+ id: 'gallery-upload',
+ multiple: true,
+ menu: 'gallery',
+ toolbar: 'gallery-add'
+ })
</ins><span class="cx"> ]);
</span><span class="cx">
</span><ins>+ this.get('gallery-edit').on( 'change:library', this.updateGalleryLibraries, this ).set({
+ library: options.selection
+ });
+
</ins><span class="cx"> // Set the default state.
</span><span class="cx"> this.state( options.state );
</span><span class="cx"> },
</span><span class="cx">
</span><del>- createSubviews: function() {
- // Initialize a stub view for each subview region.
- _.each(['menu','content','sidebar','toolbar'], function( subview ) {
- this[ '_' + subview ] = new Backbone.View({
- tagName: 'div',
- className: 'media-' + subview
</del><ins>+ updateGalleryLibraries: function() {
+ var editLibrary = this.get('gallery-edit').get('library');
+
+ _.each(['gallery-library','gallery-upload'], function( id ) {
+ var state = this.get( id ),
+ original = state.get('_library'),
+ skeleton;
+
+ // Remember the state's original library.
+ if ( ! original )
+ state.set( '_library', original = state.get('library') );
+
+ // Create a skeleton library in its place.
+ skeleton = new Attachments( null, {
+ props: _.pick( original.props.toJSON(), 'order', 'orderby' )
</ins><span class="cx"> });
</span><ins>+
+ // Rejects attachments that do not exist in the original library
+ // or that do exist edit state's library.
+ skeleton.filters.difference = function( attachment ) {
+ return ! original.getByCid( attachment.cid ) || !! editLibrary.getByCid( attachment.cid );
+ };
+
+ skeleton.evaluate = function( attachment ) {
+ var valid = ! this.validator( attachment ),
+ inSkeleton = !! this.getByCid( attachment.cid );
+
+ if ( ! valid && inSkeleton )
+ this.remove( attachment );
+ else if ( valid && ! inSkeleton )
+ this.add( attachment ).sort();
+
+ return this;
+ };
+
+ skeleton.evaluateAll = function ( attachments ) {
+ _.each( attachments.models, this.evaluate, this );
+ return this;
+ };
+
+ skeleton.on( 'add remove', skeleton.evaluate, skeleton );
+ skeleton.on( 'reset', skeleton.evaluateAll, skeleton );
+ editLibrary.on( 'add remove', skeleton.evaluate, skeleton );
+ editLibrary.on( 'reset', skeleton.evaluateAll, skeleton );
+
+ // Mirror the original library.
+ skeleton.mirror( original );
+
+ // Ensure we've evaluated everything in the edit library.
+ skeleton.evaluateAll( editLibrary );
+
+ state.set( 'library', skeleton );
</ins><span class="cx"> }, this );
</span><ins>+ },
</ins><span class="cx">
</span><del>- // Initialize modal container view.
- if ( this.options.modal ) {
- this.modal = new media.view.Modal({
- controller: this,
- $content: this.$el,
- title: this.options.title
- });
- }
</del><ins>+ // Menus
+ mainMenu: function() {
+ this.menu.view( new media.view.Menu({
+ controller: this,
+ views: {
+ upload: {
+ text: l10n.uploadFilesTitle,
+ priority: 20
+ },
+ library: {
+ text: l10n.mediaLibraryTitle,
+ priority: 40
+ },
+ separateLibrary: new Backbone.View({
+ className: 'separator',
+ priority: 60
+ }),
+ embed: {
+ text: l10n.embedFromUrlTitle,
+ priority: 80
+ }
+ }
+ }) );
+ },
</ins><span class="cx">
</span><del>- // Initialize window-wide uploader.
- if ( this.options.uploader ) {
- this.uploader = new media.view.UploaderWindow({
- uploader: {
- dropzone: this.modal ? this.modal.$el : this.$el
</del><ins>+ batchMenu: function() {},
+
+ galleryMenu: function() {
+ var previous = this.previous(),
+ frame = this;
+
+ this.menu.view( new media.view.Menu({
+ controller: this,
+ views: {
+ cancel: {
+ text: l10n.cancelGalleryTitle,
+ priority: 20,
+ click: function() {
+ if ( previous )
+ frame.state( previous );
+ else
+ frame.close();
+ }
+ },
+ separateCancel: new Backbone.View({
+ className: 'separator',
+ priority: 40
+ }),
+ 'gallery-edit': {
+ text: l10n.editGalleryTitle,
+ priority: 60
+ },
+ 'gallery-upload': {
+ text: l10n.uploadImagesTitle,
+ priority: 80
+ },
+ 'gallery-library': {
+ text: l10n.mediaLibraryTitle,
+ priority: 100
</ins><span class="cx"> }
</span><del>- });
- }
- }
- });
</del><ins>+ }
+ }) );
</ins><span class="cx">
</span><del>- // Make the `Frame` a `StateMachine`.
- _.extend( media.view.Frame.prototype, media.controller.StateMachine.prototype );
</del><ins>+ },
</ins><span class="cx">
</span><del>- // Create methods to fetch and replace individual subviews.
- _.each(['menu','content','sidebar','toolbar'], function( subview ) {
- media.view.Frame.prototype[ subview ] = function( view ) {
- var previous = this[ '_' + subview ];
</del><ins>+ // Content
+ browseContent: function() {
+ var state = this.state();
</ins><span class="cx">
</span><del>- if ( ! view )
- return previous;
</del><ins>+ // Browse our library of attachments.
+ this.content.view( new media.view.AttachmentsBrowser({
+ controller: this,
+ collection: state.get('library'),
+ model: state,
+ sortable: state.get('sortable'),
</ins><span class="cx">
</span><del>- if ( view === previous )
- return;
</del><ins>+ AttachmentView: state.get('AttachmentView')
+ }).render() );
+ },
</ins><span class="cx">
</span><del>- view.$el.addClass( 'media-' + subview );
</del><ins>+ uploadContent: function() {
+ // In the meantime, render an inline uploader.
+ this.content.view( new media.view.UploaderInline({
+ controller: this
+ }).render() );
+ },
</ins><span class="cx">
</span><del>- // Remove the hide class.
- this.$el.removeClass( 'hide-' + subview );
</del><ins>+ embedContent: function() {},
</ins><span class="cx">
</span><del>- if ( previous.destroy )
- previous.destroy();
- previous.undelegateEvents();
- previous.$el.replaceWith( view.$el );
- this[ '_' + subview ] = view;
- };
- });
</del><ins>+ // Sidebars
+ settingsSidebar: function() {
+ this.sidebar.view( new media.view.Sidebar({
+ controller: this
+ }) );
+ },
</ins><span class="cx">
</span><del>- // Map some of the modal's methods to the frame.
- _.each(['open','close','attach','detach'], function( method ) {
- media.view.Frame.prototype[ method ] = function( view ) {
- if ( this.modal )
- this.modal[ method ].apply( this.modal, arguments );
- return this;
- };
</del><ins>+ attachmentSettingsSidebar: function() {
+ this.sidebar.view( new media.view.Sidebar({
+ controller: this,
+ views: {
+ settings: new media.view.Settings.AttachmentDisplay({
+ controller: this,
+ priority: 20
+ }).render()
+ }
+ }) );
+ },
+
+ // Toolbars
+ mainAttachmentsToolbar: function() {
+ this.toolbar.view( new media.view.Toolbar.Insert.Post({
+ controller: this
+ }) );
+ },
+
+ mainEmbedToolbar: function() {},
+ batchEditToolbar: function() {},
+ batchAddToolbar: function() {},
+
+ galleryEditToolbar: function() {
+ var editing = this.state().get('editing');
+ this.toolbar.view( new media.view.Toolbar({
+ controller: this,
+ items: {
+ insert: {
+ style: 'primary',
+ text: editing ? l10n.updateGallery : l10n.insertGallery,
+ priority: 80,
+
+ click: function() {
+ var controller = this.controller,
+ state = controller.state();
+
+ controller.close();
+ state.trigger( 'update', state.get('library') );
+
+ controller.reset();
+ // @todo: Make the state activated dynamic (instead of hardcoded).
+ controller.state('upload');
+ }
+ }
+ }
+ }) );
+ },
+
+ galleryAddToolbar: function() {
+ this.toolbar.view( new media.view.Toolbar({
+ controller: this,
+ items: {
+ insert: {
+ style: 'primary',
+ text: l10n.addToGallery,
+ priority: 80,
+
+ click: function() {
+ var controller = this.controller,
+ state = controller.state(),
+ edit = controller.get('gallery-edit');
+
+ edit.get('library').add( state.get('selection').models );
+ state.trigger('reset');
+ controller.state('gallery-edit');
+ }
+ }
+ }
+ }) );
+ }
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="lines">@@ -809,6 +1123,13 @@
</span><span class="cx"> this.render();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ destroy: function() {
+ _.each( this._views, function( view ) {
+ if ( view.destroy )
+ view.destroy();
+ });
+ },
+
</ins><span class="cx"> render: function() {
</span><span class="cx"> var views = _.chain( this._views ).sortBy( function( view ) {
</span><span class="cx"> return view.options.priority || 10;
</span><span class="lines">@@ -822,6 +1143,8 @@
</span><span class="cx"> this.$primary.html( _.pluck( views.primary || [], 'el' ) );
</span><span class="cx"> this.$secondary.html( _.pluck( views.secondary || [], 'el' ) );
</span><span class="cx">
</span><ins>+ this.refresh();
+
</ins><span class="cx"> return this;
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -861,182 +1184,102 @@
</span><span class="cx"> if ( ! options || ! options.silent )
</span><span class="cx"> this.render();
</span><span class="cx"> return this;
</span><del>- }
</del><ins>+ },
+
+ refresh: function() {}
</ins><span class="cx"> });
</span><span class="cx">
</span><del>- // wp.media.view.Toolbar.PostLibrary
</del><ins>+ // wp.media.view.Toolbar.Insert
</ins><span class="cx"> // ---------------------------------
</span><del>- media.view.Toolbar.PostLibrary = media.view.Toolbar.extend({
</del><ins>+ media.view.Toolbar.Insert = media.view.Toolbar.extend({
</ins><span class="cx"> initialize: function() {
</span><span class="cx"> var controller = this.options.controller,
</span><span class="cx"> selection = controller.state().get('selection');
</span><span class="cx">
</span><del>- this.options.items = {
</del><ins>+ this.options.items = _.defaults( this.options.items || {}, {
</ins><span class="cx"> selection: new media.view.Selection({
</span><span class="cx"> controller: controller,
</span><span class="cx"> collection: selection,
</span><span class="cx"> priority: -40
</span><span class="cx"> }).render(),
</span><span class="cx">
</span><del>- 'create-new-gallery': {
</del><ins>+ insert: {
</ins><span class="cx"> style: 'primary',
</span><del>- text: l10n.createNewGallery,
- priority: 40,
</del><ins>+ priority: 80,
+ text: l10n.insertIntoPost,
</ins><span class="cx">
</span><span class="cx"> click: function() {
</span><del>- this.controller.state('gallery');
</del><ins>+ controller.close();
+ controller.state().trigger( 'insert', selection );
+ selection.clear();
</ins><span class="cx"> }
</span><del>- },
-
- 'insert-into-post': new media.view.ButtonGroup({
- priority: 30,
- classes: 'dropdown-flip-x dropdown-flip-y',
- buttons: [
- {
- text: l10n.insertIntoPost,
- click: function() {
- controller.close();
- controller.state().trigger( 'insert', selection );
- selection.clear();
- }
- },
- {
- classes: ['down-arrow'],
- dropdown: new media.view.Settings.AttachmentDisplay().render().$el,
-
- click: function( event ) {
- var $el = this.$el;
-
- if ( ! $( event.target ).closest('.dropdown').length )
- $el.toggleClass('active');
-
- // Stop the event from propagating further so we can bind
- // a one-time event to the body (and ensure that a click
- // on the dropdown won't trigger said event).
- event.stopPropagation();
-
- if ( $el.is(':visible') ) {
- $(document.body).one( 'click', function() {
- $el.removeClass('active');
- });
- }
- }
- }
- ]
- }).render(),
-
- 'add-to-gallery': {
- text: l10n.addToGallery,
- priority: 20
</del><span class="cx"> }
</span><del>- };
</del><ins>+ });
</ins><span class="cx">
</span><span class="cx"> media.view.Toolbar.prototype.initialize.apply( this, arguments );
</span><del>- this.visibility();
</del><span class="cx"> },
</span><span class="cx">
</span><del>- visibility: function() {
- var selection = this.controller.state().get('selection'),
- count = selection.length,
- showGallery;
-
- // Check if every attachment in the selection is an image.
- showGallery = count > 1 && selection.all( function( attachment ) {
- return 'image' === attachment.get('type');
- });
-
- this.get('create-new-gallery').$el.toggle( showGallery );
- insert = this.get('insert-into-post');
- _.each( insert.buttons, function( button ) {
- button.model.set( 'style', showGallery ? '' : 'primary' );
- });
-
- _.first( insert.buttons ).model.set( 'disabled', ! count );
</del><ins>+ refresh: function() {
+ var selection = this.controller.state().get('selection');
+ this.get('insert').model.set( 'disabled', ! selection.length );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- // wp.media.view.Toolbar.Gallery
- // -----------------------------
- media.view.Toolbar.Gallery = media.view.Toolbar.extend({
</del><ins>+ // wp.media.view.Toolbar.Insert.Post
+ // ---------------------------------
+ media.view.Toolbar.Insert.Post = media.view.Toolbar.Insert.extend({
</ins><span class="cx"> initialize: function() {
</span><del>- var controller = this.options.controller,
- state = controller.state(),
- editing = state.get('editing'),
- library = state.get('library');
-
- this.options.items = {
- update: {
- style: 'primary',
- text: editing ? l10n.updateGallery : l10n.insertGallery,
</del><ins>+ this.options.items = _.defaults( this.options.items || {}, {
+ gallery: {
+ text: l10n.createNewGallery,
</ins><span class="cx"> priority: 40,
</span><del>- click: function() {
- var state = controller.state();
- controller.close();
- state.trigger( 'update', state.get('library') );
- controller.get('library').get('selection').clear();
- controller.state('library');
- }
- },
</del><span class="cx">
</span><del>- addImages: {
- text: l10n.addImages,
- priority: -40,
</del><ins>+ click: function() {
+ var controller = this.controller,
+ selection = controller.state().get('selection'),
+ edit = controller.get('gallery-edit');
</ins><span class="cx">
</span><del>- click: function() {
- controller.get('gallery:add').set( 'selection', new media.model.Selection( library.models, {
- props: controller.state().get('library').props.toJSON(),
</del><ins>+ edit.set( 'library', new media.model.Selection( selection.models, {
+ props: selection.props.toJSON(),
</ins><span class="cx"> multiple: true
</span><span class="cx"> }) );
</span><del>- controller.state('gallery:add');
</del><ins>+
+ this.controller.state('gallery-edit');
</ins><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><del>- cancel: {
- text: l10n.cancel,
- priority: -60,
</del><ins>+ batch: {
+ text: l10n.batchInsert,
+ priority: 60,
</ins><span class="cx">
</span><span class="cx"> click: function() {
</span><del>- if ( editing )
- controller.close();
- else
- controller.state('library');
</del><ins>+ this.controller.state('batch-edit');
</ins><span class="cx"> }
</span><span class="cx"> }
</span><del>- };
</del><ins>+ });
</ins><span class="cx">
</span><del>- media.view.Toolbar.prototype.initialize.apply( this, arguments );
- }
- });
</del><ins>+ media.view.Toolbar.Insert.prototype.initialize.apply( this, arguments );
+ },
</ins><span class="cx">
</span><del>- // wp.media.view.Toolbar.GalleryAddImages
- // -----------------------------
- media.view.Toolbar.GalleryAddImages = media.view.Toolbar.extend({
- initialize: function() {
- var controller = this.options.controller;
</del><ins>+ refresh: function() {
+ var selection = this.controller.state().get('selection'),
+ count = selection.length;
</ins><span class="cx">
</span><del>- this.options.items = {
- update: {
- style: 'primary',
- text: l10n.continueEditing,
- priority: 40,
</del><ins>+ // Call the parent's `refresh()` method.
+ media.view.Toolbar.Insert.prototype.refresh.apply( this, arguments );
</ins><span class="cx">
</span><del>- click: function() {
- controller.get('gallery').set( 'library', controller.state().get('selection') );
- controller.state('gallery');
- }
- },
</del><ins>+ // Check if every attachment in the selection is an image.
+ this.get('gallery').$el.toggle( count > 1 && selection.all( function( attachment ) {
+ return 'image' === attachment.get('type');
+ }) );
</ins><span class="cx">
</span><del>- cancel: {
- text: l10n.cancel,
- priority: -60,
</del><ins>+ // Batch insert shows for multiple selected attachments.
+ // Temporarily disabled with `false &&`.
+ this.get('batch').$el.toggle( false && count > 1 );
</ins><span class="cx">
</span><del>- click: function() {
- controller.state('gallery');
- }
- }
- };
-
- media.view.Toolbar.prototype.initialize.apply( this, arguments );
</del><ins>+ // Insert only shows for single attachments.
+ // Temporarily disabled.
+ // this.get('insert').$el.toggle( count <= 1 );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -1160,6 +1403,13 @@
</span><span class="cx"> this.render();
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ destroy: function() {
+ _.each( this._views, function( view ) {
+ if ( view.destroy )
+ view.destroy();
+ });
+ },
+
</ins><span class="cx"> render: function() {
</span><span class="cx"> var els = _( this._views ).chain().sortBy( function( view ) {
</span><span class="cx"> return view.options.priority || 10;
</span><span class="lines">@@ -1224,7 +1474,7 @@
</span><span class="cx">
</span><span class="cx"> toView: function( options, id ) {
</span><span class="cx"> options = options || {};
</span><del>- options.id = id;
</del><ins>+ options.id = options.id || id;
</ins><span class="cx"> return new media.view.MenuItem( options ).render();
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -1248,11 +1498,15 @@
</span><span class="cx"> className: 'media-menu-item',
</span><span class="cx">
</span><span class="cx"> events: {
</span><del>- 'click': 'toState'
</del><ins>+ 'click': 'click'
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- toState: function() {
- this.controller.state( this.options.id );
</del><ins>+ click: function() {
+ var options = this.options;
+ if ( options.click )
+ options.click.call( this );
+ else if ( options.id )
+ this.controller.state( options.id );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> render: function() {
</span><span class="lines">@@ -1267,27 +1521,6 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- media.view.Menu.Landing = media.view.Menu.extend({
- views: {
- upload: {
- text: l10n.uploadFilesTitle,
- priority: 20
- },
- library: {
- text: l10n.mediaLibraryTitle,
- priority: 40
- },
- separateLibrary: new Backbone.View({
- className: 'separator',
- priority: 60
- }),
- embed: {
- text: l10n.embedFromUrlTitle,
- priority: 80
- }
- }
- });
-
</del><span class="cx"> /**
</span><span class="cx"> * wp.media.view.Sidebar
</span><span class="cx"> */
</span><span class="lines">@@ -1328,6 +1561,7 @@
</span><span class="cx">
</span><span class="cx"> destroy: function() {
</span><span class="cx"> this.model.off( null, null, this );
</span><ins>+ this.$el.off( 'click', 'a', this.preventDefault );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> render: function() {
</span><span class="lines">@@ -1702,7 +1936,9 @@
</span><span class="cx"> _.defaults( this.options, {
</span><span class="cx"> search: true,
</span><span class="cx"> upload: false,
</span><del>- total: true
</del><ins>+ total: true,
+
+ AttachmentView: media.view.Attachment.Library
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> this.toolbar = new media.view.Toolbar({
</span><span class="lines">@@ -1722,8 +1958,9 @@
</span><span class="cx"> collection: this.collection,
</span><span class="cx"> model: this.model,
</span><span class="cx"> sortable: this.options.sortable,
</span><ins>+
</ins><span class="cx"> // The single `Attachment` view to be used in the `Attachments` view.
</span><del>- AttachmentView: media.view.Attachment.Library
</del><ins>+ AttachmentView: this.options.AttachmentView
</ins><span class="cx"> });
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -1868,10 +2105,6 @@
</span><span class="cx"> * wp.media.view.Settings
</span><span class="cx"> */
</span><span class="cx"> media.view.Settings = Backbone.View.extend({
</span><del>- tagName: 'div',
- className: 'attachment-display-settings',
- template: media.template('attachment-display-settings'),
-
</del><span class="cx"> events: {
</span><span class="cx"> 'click button': 'updateHandler',
</span><span class="cx"> 'change input': 'updateHandler',
</span><span class="lines">@@ -1895,7 +2128,10 @@
</span><span class="cx">
</span><span class="cx"> this.model.validate = function( attrs ) {
</span><span class="cx"> return _.any( attrs, function( value, key ) {
</span><del>- return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
</del><ins>+ // If we don't have a `setting` for the `key`, assume the
+ // `value` is valid. Otherwise, check if the `value` exists
+ // in the `setting.accepts` array.
+ return settings[ key ] && ! _.contains( settings[ key ].accepts, value );
</ins><span class="cx"> });
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpincludesmediaphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/media.php (22436 => 22437)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/media.php 2012-11-07 20:12:47 UTC (rev 22436)
+++ trunk/wp-includes/media.php 2012-11-07 20:14:41 UTC (rev 22437)
</span><span class="lines">@@ -1414,6 +1414,8 @@
</span><span class="cx"> </script>
</span><span class="cx">
</span><span class="cx"> <script type="text/html" id="tmpl-attachment-display-settings">
</span><ins>+ <h3><?php _e('Attachment Display Settings'); ?></h3>
+
</ins><span class="cx"> <h4><?php _e('Alignment'); ?></h4>
</span><span class="cx"> <div class="alignment button-group button-large" data-setting="align">
</span><span class="cx"> <button class="button" value="left">
</span><span class="lines">@@ -1445,6 +1447,8 @@
</span><span class="cx"> </script>
</span><span class="cx">
</span><span class="cx"> <script type="text/html" id="tmpl-gallery-settings">
</span><ins>+ <h3><?php _e('Gallery Settings'); ?></h3>
+
</ins><span class="cx"> <h4><?php _e('Link To'); ?></h4>
</span><span class="cx"> <div class="link-to button-group" data-setting="link">
</span><span class="cx"> <button class="button" value="post">
</span><span class="lines">@@ -1458,7 +1462,7 @@
</span><span class="cx"> <h4><?php _e('Gallery Columns'); ?></h4>
</span><span class="cx">
</span><span class="cx"> <select class="columns" name="columns" data-setting="columns">
</span><del>- <?php for( $i = 1; $i <= 9; $i++ ) : ?>
</del><ins>+ <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
</ins><span class="cx"> <option value="<?php echo esc_attr( $i ); ?>">
</span><span class="cx"> <?php echo esc_html( $i ); ?>
</span><span class="cx"> </option>
</span></span></pre></div>
<a id="trunkwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/script-loader.php (22436 => 22437)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/script-loader.php 2012-11-07 20:12:47 UTC (rev 22436)
+++ trunk/wp-includes/script-loader.php 2012-11-07 20:14:41 UTC (rev 22437)
</span><span class="lines">@@ -330,8 +330,9 @@
</span><span class="cx"> 'selected' => __( 'selected' ),
</span><span class="cx">
</span><span class="cx"> // Upload
</span><del>- 'uploadFilesTitle' => __( 'Upload Files' ),
- 'selectFiles' => __( 'Select files' ),
</del><ins>+ 'uploadFilesTitle' => __( 'Upload Files' ),
+ 'selectFiles' => __( 'Select files' ),
+ 'uploadImagesTitle' => __( 'Upload Images' ),
</ins><span class="cx">
</span><span class="cx"> // Library
</span><span class="cx"> 'mediaLibraryTitle' => __( 'Media Library' ),
</span><span class="lines">@@ -342,8 +343,14 @@
</span><span class="cx"> // Embed
</span><span class="cx"> 'embedFromUrlTitle' => __( 'Embed From URL' ),
</span><span class="cx">
</span><ins>+ // Batch
+ 'batchInsert' => __( 'Batch insert' ),
+ 'cancelBatchTitle' => __( '&#8592; Cancel Batch' ),
+
</ins><span class="cx"> // Gallery
</span><span class="cx"> 'createGalleryTitle' => __( 'Create Gallery' ),
</span><ins>+ 'editGalleryTitle' => __( 'Edit Gallery' ),
+ 'cancelGalleryTitle' => __( '&#8592; Cancel Gallery' ),
</ins><span class="cx"> 'insertGallery' => __( 'Insert gallery' ),
</span><span class="cx"> 'updateGallery' => __( 'Update gallery' ),
</span><span class="cx"> 'continueEditing' => __( 'Continue editing' ),
</span></span></pre>
</div>
</div>
</body>
</html>