<!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>[22321] trunk: Add a sidebar to the media modal.</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/22321">22321</a></dd>
<dt>Author</dt> <dd>koopersmith</dd>
<dt>Date</dt> <dd>2012-10-29 06:56:23 +0000 (Mon, 29 Oct 2012)</dd>
</dl>
<h3>Log Message</h3>
<pre>Add a sidebar to the media modal.
* Adds `wp.media.view.Sidebar`, to aid in rendering the sidebar.
* Removes the `directions` from the `Attachments` view and shifts search into a separate view (`wp.mce.view.Search`) that can be relocated at will. This also serves to simplify the `Attachments` view by removing the nested `list` and `$list` parameters.
* Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog.
see <a href="http://core.trac.wordpress.org/ticket/21390">#21390</a>, <a href="http://core.trac.wordpress.org/ticket/21776">#21776</a>, <a href="http://core.trac.wordpress.org/ticket/21808">#21808</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadminincludesmetaboxesphp">trunk/wp-admin/includes/meta-boxes.php</a></li>
<li><a href="#trunkwpincludescssmediaviewscss">trunk/wp-includes/css/media-views.css</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="trunkwpadminincludesmetaboxesphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/includes/meta-boxes.php (22320 => 22321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/includes/meta-boxes.php 2012-10-28 23:29:17 UTC (rev 22320)
+++ trunk/wp-admin/includes/meta-boxes.php 2012-10-29 06:56:23 UTC (rev 22321)
</span><span class="lines">@@ -1018,7 +1018,8 @@
</span><span class="cx"> var $element = $('#select-featured-image'),
</span><span class="cx"> $thumbnailId = $element.find('input[name="thumbnail_id"]'),
</span><span class="cx"> title = '<?php _e( "Choose a Featured Image" ); ?>',
</span><del>- workflow, selection, setFeaturedImage;
</del><ins>+ update = '<?php _e( "Update Featured Image" ); ?>',
+ frame, selection, setFeaturedImage;
</ins><span class="cx">
</span><span class="cx"> setFeaturedImage = function( thumbnailId ) {
</span><span class="cx"> $element.find('img').remove();
</span><span class="lines">@@ -1029,41 +1030,52 @@
</span><span class="cx"> $element.on( 'click', '.choose, img', function( event ) {
</span><span class="cx"> event.preventDefault();
</span><span class="cx">
</span><del>- if ( ! workflow ) {
- workflow = wp.media({
</del><ins>+ if ( ! frame ) {
+ frame = wp.media({
</ins><span class="cx"> title: title,
</span><span class="cx"> library: {
</span><span class="cx"> type: 'image'
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>- selection = workflow.state().get('selection');
</del><ins>+ frame.toolbar( new wp.media.view.Toolbar({
+ controller: frame,
+ items: {
+ update: {
+ style: 'primary',
+ text: update,
+ priority: 40,
</ins><span class="cx">
</span><del>- selection.on( 'add', function( model ) {
- var sizes = model.get('sizes'),
- size;
</del><ins>+ click: function() {
+ var selection = frame.state().get('selection'),
+ model = selection.first(),
+ sizes = model.get('sizes'),
+ size;
</ins><span class="cx">
</span><del>- setFeaturedImage( model.id );
</del><ins>+ setFeaturedImage( model.id );
</ins><span class="cx">
</span><del>- // @todo: might need a size hierarchy equivalent.
- if ( sizes )
- size = sizes['post-thumbnail'] || sizes.medium;
</del><ins>+ // @todo: might need a size hierarchy equivalent.
+ if ( sizes )
+ size = sizes['post-thumbnail'] || sizes.medium;
</ins><span class="cx">
</span><del>- // @todo: Need a better way of accessing full size
- // data besides just calling toJSON().
- size = size || model.toJSON();
</del><ins>+ // @todo: Need a better way of accessing full size
+ // data besides just calling toJSON().
+ size = size || model.toJSON();
</ins><span class="cx">
</span><del>- workflow.close();
- selection.clear();
</del><ins>+ frame.close();
+ selection.clear();
</ins><span class="cx">
</span><del>- $( '<img />', {
- src: size.url,
- width: size.width
- }).prependTo( $element );
- });
</del><ins>+ $( '<img />', {
+ src: size.url,
+ width: size.width
+ }).prependTo( $element );
+ }
+ }
+ }
+ }) );
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- workflow.open();
</del><ins>+ frame.open();
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> $element.on( 'click', '.remove', function( event ) {
</span></span></pre></div>
<a id="trunkwpincludescssmediaviewscss"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/css/media-views.css (22320 => 22321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/css/media-views.css 2012-10-28 23:29:17 UTC (rev 22320)
+++ trunk/wp-includes/css/media-views.css 2012-10-29 06:56:23 UTC (rev 22321)
</span><span class="lines">@@ -72,9 +72,12 @@
</span><span class="cx"> * Toolbar
</span><span class="cx"> */
</span><span class="cx"> .media-toolbar {
</span><del>- position: relative;
- z-index: 50;
- height: 60px;
</del><ins>+ position: absolute;
+ top: 0;
+ left: 220px;
+ right: 0;
+ z-index: 100;
+ height: 50px;
</ins><span class="cx"> padding: 0 10px;
</span><span class="cx"> border-bottom: 1px solid #dfdfdf;
</span><span class="cx"> }
</span><span class="lines">@@ -91,22 +94,64 @@
</span><span class="cx"> .media-toolbar-primary > .media-button-group {
</span><span class="cx"> margin-left: 10px;
</span><span class="cx"> float: left;
</span><del>- margin-top: 16px;
</del><ins>+ margin-top: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .media-toolbar-secondary > .media-button,
</span><span class="cx"> .media-toolbar-secondary > .media-button-group {
</span><span class="cx"> margin-right: 10px;
</span><span class="cx"> float: left;
</span><del>- margin-top: 16px;
</del><ins>+ margin-top: 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span><ins>+ * Sidebar
+ */
+.media-sidebar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 219px;
+ z-index: 50;
+ background: #f5f5f5;
+ border-right: 1px solid #dfdfdf;
+}
+
+.hide-sidebar .media-sidebar {
+ display: none;
+}
+
+.media-sidebar .sidebar-title {
+ font-weight: 200;
+ font-size: 20px;
+ margin: 0;
+ padding: 12px 10px 10px;
+ line-height: 28px;
+ /*border-bottom: 1px solid #dfdfdf;*/
+}
+
+.media-sidebar .sidebar-content {
+ padding: 0 10px;
+}
+
+.media-sidebar .search {
+ display: block;
+ width: 100%;
+}
+
+.media-sidebar .selection-preview {
+ display: block;
+ padding-top: 5px;
+}
+
+/**
</ins><span class="cx"> * Frame
</span><span class="cx"> */
</span><span class="cx">
</span><del>-.media-frame .attachments,
-.media-frame .media-toolbar {
</del><ins>+.media-frame .media-content,
+.media-frame .media-toolbar,
+.media-frame .media-sidebar {
</ins><span class="cx"> -webkit-transition-property: left, right, top, bottom, margin;
</span><span class="cx"> -moz-transition-property: left, right, top, bottom, margin;
</span><span class="cx"> -ms-transition-property: left, right, top, bottom, margin;
</span><span class="lines">@@ -120,35 +165,41 @@
</span><span class="cx"> transition-duration: 0.2s;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-frame .attachments {
</del><ins>+.media-frame .media-content {
</ins><span class="cx"> position: absolute;
</span><del>- top: 61px;
- left: 0;
</del><ins>+ top: 51px;
+ left: 220px;
</ins><span class="cx"> right: 0;
</span><span class="cx"> bottom: 0;
</span><span class="cx"> height: auto;
</span><span class="cx"> width: auto;
</span><ins>+ overflow: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.media-frame.hide-toolbar .attachments {
- top: 0;
</del><ins>+.media-frame.hide-sidebar .media-content {
+ left: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.media-frame .media-toolbar {
- margin-top: 0;
</del><ins>+.media-frame .media-toolbar .add-to-gallery {
+ display: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.media-frame.hide-toolbar .media-toolbar {
- margin-top: -61px;
</del><ins>+/**
+ * Search
+ */
+.media-frame .search {
+ margin-top: 11px;
+ padding: 4px;
+ line-height: 18px;
+ font-size: 13px;
+ color: #464646;
+ font-family: sans-serif;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.media-frame .media-toolbar .add-to-gallery {
- display: none;
-}
</del><span class="cx"> /**
</span><span class="cx"> * Attachments
</span><span class="cx"> */
</span><del>-.attachments {
</del><ins>+/*.attachments {
</ins><span class="cx"> position: relative;
</span><span class="cx"> width: 100%;
</span><span class="cx"> height: 100%;
</span><span class="lines">@@ -173,16 +224,6 @@
</span><span class="cx"> font-weight: 200;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.attachments-header .search {
- float: right;
- margin-top: 11px;
- padding: 4px;
- line-height: 18px;
- font-size: 13px;
- color: #464646;
- font-family: sans-serif;
-}
-
</del><span class="cx"> .attachments ul {
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 50px;
</span><span class="lines">@@ -191,7 +232,7 @@
</span><span class="cx"> bottom: 0;
</span><span class="cx"> overflow: auto;
</span><span class="cx"> margin: 0 0 20px;
</span><del>-}
</del><ins>+}*/
</ins><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Attachment
</span><span class="lines">@@ -401,7 +442,6 @@
</span><span class="cx"> bottom: 0;
</span><span class="cx"> background: rgba( 0, 86, 132, 0.9 );
</span><span class="cx">
</span><del>- /*z-index: -200;*/
</del><span class="cx"> z-index: 250000;
</span><span class="cx"> display: none;
</span><span class="cx"> text-align: center;
</span><span class="lines">@@ -414,10 +454,6 @@
</span><span class="cx"> transition: opacity 250ms;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-/*.drag-over .uploader-window {
- z-index: 250000;
-}*/
-
</del><span class="cx"> .uploader-window-content {
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 30px;
</span></span></pre></div>
<a id="trunkwpincludesjsmediaviewsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/js/media-views.js (22320 => 22321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/js/media-views.js 2012-10-28 23:29:17 UTC (rev 22320)
+++ trunk/wp-includes/js/media-views.js 2012-10-29 06:56:23 UTC (rev 22321)
</span><span class="lines">@@ -113,7 +113,8 @@
</span><span class="cx"> defaults: {
</span><span class="cx"> id: 'library',
</span><span class="cx"> multiple: false,
</span><del>- describe: false
</del><ins>+ describe: false,
+ title: l10n.mediaLibrary
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> initialize: function() {
</span><span class="lines">@@ -130,25 +131,41 @@
</span><span class="cx"> var frame = this.frame,
</span><span class="cx"> toolbar;
</span><span class="cx">
</span><ins>+ // Toolbar.
</ins><span class="cx"> toolbar = this._postLibraryToolbar = new media.view.Toolbar.PostLibrary({
</span><span class="cx"> controller: frame,
</span><del>- selection: this.get('selection')
</del><ins>+ state: this
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> frame.toolbar( toolbar );
</span><span class="cx"> this.get('selection').on( 'add remove', toolbar.visibility, toolbar );
</span><span class="cx">
</span><ins>+ // Sidebar.
+ frame.sidebar( new media.view.Sidebar({
+ controller: frame,
+ views: {
+ search: new media.view.Search({
+ controller: frame,
+ model: this.get('library').props,
+ priority: 20
+ }),
+
+ selection: new media.view.SelectionPreview({
+ controller: frame,
+ collection: this.get('selection'),
+ priority: 40
+ })
+ }
+ }) );
+
+ // Content.
</ins><span class="cx"> frame.content( new media.view.Attachments({
</span><del>- directions: this.get('multiple') ? l10n.selectMediaMultiple : l10n.selectMediaSingular,
</del><span class="cx"> controller: frame,
</span><span class="cx"> collection: this.get('library'),
</span><span class="cx"> // The single `Attachment` view to be used in the `Attachments` view.
</span><span class="cx"> AttachmentView: media.view.Attachment.Library
</span><span class="cx"> }).render() );
</span><span class="cx">
</span><del>- if ( ! this.get('selection').length )
- frame.$el.addClass('hide-toolbar');
-
</del><span class="cx"> // If we're in a workflow that supports multiple attachments,
</span><span class="cx"> // automatically select any uploading attachments.
</span><span class="cx"> if ( this.get('multiple') )
</span><span class="lines">@@ -173,7 +190,8 @@
</span><span class="cx"> defaults: {
</span><span class="cx"> id: 'gallery',
</span><span class="cx"> multiple: true,
</span><del>- describe: true
</del><ins>+ describe: true,
+ title: l10n.createGallery
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> initialize: function() {
</span><span class="lines">@@ -186,14 +204,19 @@
</span><span class="cx"> activate: function() {
</span><span class="cx"> var frame = this.frame;
</span><span class="cx">
</span><ins>+ // Toolbar.
</ins><span class="cx"> frame.toolbar( new media.view.Toolbar.Gallery({
</span><span class="cx"> controller: frame,
</span><del>- editing: this.get('editing'),
- selection: this.get('selection')
</del><ins>+ state: this
</ins><span class="cx"> }) );
</span><span class="cx">
</span><ins>+ // Sidebar.
+ frame.sidebar( new media.view.Sidebar({
+ controller: frame
+ }).render() );
+
+ // Content.
</ins><span class="cx"> frame.content( new media.view.Attachments({
</span><del>- directions: 'Gallery time!',
</del><span class="cx"> controller: frame,
</span><span class="cx"> collection: this.get('selection'),
</span><span class="cx"> sortable: true,
</span><span class="lines">@@ -245,7 +268,7 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> render: function() {
</span><del>- var els = [ this.sidebar().el, this.toolbar().el, this.content().el ];
</del><ins>+ var els = [ this.toolbar().el, this.sidebar().el, this.content().el ];
</ins><span class="cx">
</span><span class="cx"> if ( this.modal )
</span><span class="cx"> this.modal.render();
</span><span class="lines">@@ -634,16 +657,11 @@
</span><span class="cx"> // ---------------------------------
</span><span class="cx"> media.view.Toolbar.PostLibrary = media.view.Toolbar.extend({
</span><span class="cx"> initialize: function() {
</span><del>- var selection = this.options.selection,
</del><ins>+ var state = this.options.state,
+ selection = state.get('selection'),
</ins><span class="cx"> controller = this.options.controller;
</span><span class="cx">
</span><span class="cx"> this.options.items = {
</span><del>- 'selection-preview': new media.view.SelectionPreview({
- controller: controller,
- collection: selection,
- priority: -40
- }),
-
</del><span class="cx"> 'create-new-gallery': {
</span><span class="cx"> style: 'primary',
</span><span class="cx"> text: l10n.createNewGallery,
</span><span class="lines">@@ -662,7 +680,7 @@
</span><span class="cx"> text: l10n.insertIntoPost,
</span><span class="cx"> click: function() {
</span><span class="cx"> controller.close();
</span><del>- controller.state().trigger( 'insert', selection );
</del><ins>+ state.trigger( 'insert', selection );
</ins><span class="cx"> selection.clear();
</span><span class="cx"> }
</span><span class="cx"> },
</span><span class="lines">@@ -698,16 +716,16 @@
</span><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> media.view.Toolbar.prototype.initialize.apply( this, arguments );
</span><ins>+ this.visibility();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> visibility: function() {
</span><del>- var selection = this.options.selection,
</del><ins>+ var state = this.options.state,
+ selection = state.get('selection'),
</ins><span class="cx"> controller = this.options.controller,
</span><span class="cx"> count = selection.length,
</span><span class="cx"> showGallery;
</span><span class="cx">
</span><del>- controller.$el.toggleClass( 'hide-toolbar', ! count );
-
</del><span class="cx"> // Check if every attachment in the selection is an image.
</span><span class="cx"> showGallery = count > 1 && selection.all( function( attachment ) {
</span><span class="cx"> return 'image' === attachment.get('type');
</span><span class="lines">@@ -718,6 +736,8 @@
</span><span class="cx"> _.each( insert.buttons, function( button ) {
</span><span class="cx"> button.model.set( 'style', showGallery ? '' : 'primary' );
</span><span class="cx"> });
</span><ins>+
+ _.first( insert.buttons ).model.set( 'disabled', ! count );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -725,8 +745,9 @@
</span><span class="cx"> // -----------------------------
</span><span class="cx"> media.view.Toolbar.Gallery = media.view.Toolbar.extend({
</span><span class="cx"> initialize: function() {
</span><del>- var editing = this.options.editing,
- selection = this.options.selection,
</del><ins>+ var state = this.options.state,
+ editing = state.get('editing'),
+ selection = state.get('selection'),
</ins><span class="cx"> controller = this.options.controller;
</span><span class="cx">
</span><span class="cx"> this.options.items = {
</span><span class="lines">@@ -736,7 +757,7 @@
</span><span class="cx"> priority: 40,
</span><span class="cx"> click: function() {
</span><span class="cx"> controller.close();
</span><del>- controller.state().trigger( 'update', selection );
</del><ins>+ state.trigger( 'update', selection );
</ins><span class="cx"> selection.clear();
</span><span class="cx"> controller.state('library');
</span><span class="cx"> }
</span><span class="lines">@@ -769,9 +790,10 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> defaults: {
</span><del>- text: '',
- style: '',
- size: 'large'
</del><ins>+ text: '',
+ style: '',
+ size: 'large',
+ disabled: false
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> initialize: function() {
</span><span class="lines">@@ -796,17 +818,19 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> render: function() {
</span><del>- var classes = [ 'button', this.className ];
</del><ins>+ var classes = [ 'button', this.className ],
+ model = this.model.toJSON();
</ins><span class="cx">
</span><del>- if ( this.model.get('style') )
- classes.push( 'button-' + this.model.get('style') );
</del><ins>+ if ( model.style )
+ classes.push( 'button-' + model.style );
</ins><span class="cx">
</span><del>- if ( this.model.get('size') )
- classes.push( 'button-' + this.model.get('size') );
</del><ins>+ if ( model.size )
+ classes.push( 'button-' + model.size );
</ins><span class="cx">
</span><span class="cx"> classes = _.uniq( classes.concat( this.options.classes ) );
</span><span class="cx"> this.el.className = classes.join(' ');
</span><span class="cx">
</span><ins>+ this.$el.attr( 'disabled', model.disabled );
</ins><span class="cx">
</span><span class="cx"> // Detach the dropdown.
</span><span class="cx"> if ( this.options.dropdown )
</span><span class="lines">@@ -822,7 +846,7 @@
</span><span class="cx">
</span><span class="cx"> click: function( event ) {
</span><span class="cx"> event.preventDefault();
</span><del>- if ( this.options.click )
</del><ins>+ if ( this.options.click && ! this.model.get('disabled') )
</ins><span class="cx"> this.options.click.apply( this, arguments );
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="lines">@@ -855,6 +879,70 @@
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> /**
</span><ins>+ * wp.media.view.Sidebar
+ */
+ media.view.Sidebar = Backbone.View.extend({
+ tagName: 'div',
+ className: 'media-sidebar',
+ template: media.template('sidebar'),
+
+ initialize: function() {
+ this.controller = this.options.controller;
+ this._views = {};
+
+ if ( this.options.views )
+ this.add( this.options.views, { silent: true }).render();
+ },
+
+ render: function() {
+ var els = _( this._views ).chain().sortBy( function( view ) {
+ return view.options.priority || 10;
+ }).pluck('el').value();
+
+ // Make sure to detach the elements we want to reuse.
+ // Otherwise, `jQuery.html()` will unbind their events.
+ $( els ).detach();
+
+ this.$el.html( this.template({
+ title: this.controller.state().get('title') || '',
+ uploader: this.controller.options.uploader
+ }) );
+
+ this.$('.sidebar-content').html( els );
+
+ return this;
+ },
+
+ add: function( id, view, options ) {
+ // Accept an object with an `id` : `view` mapping.
+ if ( _.isObject( id ) ) {
+ _.each( id, function( view, id ) {
+ this.add( id, view, options );
+ }, this );
+ return this;
+ }
+
+ view.controller = view.controller || this.controller;
+
+ this._views[ id ] = view;
+ if ( ! options || ! options.silent )
+ this.render();
+ return this;
+ },
+
+ get: function( id ) {
+ return this._views[ id ];
+ },
+
+ remove: function( id, options ) {
+ delete this._views[ id ];
+ if ( ! options || ! options.silent )
+ this.render();
+ return this;
+ }
+ });
+
+ /**
</ins><span class="cx"> * wp.media.view.Attachment
</span><span class="cx"> */
</span><span class="cx"> media.view.Attachment = Backbone.View.extend({
</span><span class="lines">@@ -1068,12 +1156,11 @@
</span><span class="cx"> * wp.media.view.Attachments
</span><span class="cx"> */
</span><span class="cx"> media.view.Attachments = Backbone.View.extend({
</span><del>- tagName: 'div',
</del><ins>+ tagName: 'ul',
</ins><span class="cx"> className: 'attachments',
</span><del>- template: media.template('attachments'),
</del><span class="cx">
</span><span class="cx"> events: {
</span><del>- 'keyup .search': 'search'
</del><ins>+ 'scroll': 'scroll'
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> initialize: function() {
</span><span class="lines">@@ -1092,13 +1179,10 @@
</span><span class="cx"> }, this );
</span><span class="cx"> }, this );
</span><span class="cx">
</span><del>- this.collection.on( 'reset', this.refresh, this );
</del><ins>+ this.collection.on( 'reset', this.render, this );
</ins><span class="cx">
</span><del>- this.$list = $('<ul />');
- this.list = this.$list[0];
-
</del><ins>+ // Throttle the scroll handler.
</ins><span class="cx"> this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
</span><del>- this.$list.on( 'scroll.attachments', this.scroll );
</del><span class="cx">
</span><span class="cx"> this.initSortable();
</span><span class="cx"> },
</span><span class="lines">@@ -1110,13 +1194,13 @@
</span><span class="cx"> if ( ! this.options.sortable || ! $.fn.sortable )
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this.$list.sortable({
</del><ins>+ this.$el.sortable({
</ins><span class="cx"> // If the `collection` has a `comparator`, disable sorting.
</span><span class="cx"> disabled: !! collection.comparator,
</span><span class="cx">
</span><span class="cx"> // Prevent attachments from being dragged outside the bounding
</span><span class="cx"> // box of the list.
</span><del>- containment: this.$list,
</del><ins>+ containment: this.$el,
</ins><span class="cx">
</span><span class="cx"> // Change the position of the attachment as soon as the
</span><span class="cx"> // mouse pointer overlaps a thumbnail.
</span><span class="lines">@@ -1144,30 +1228,21 @@
</span><span class="cx"> // If the `orderby` property is changed on the `collection`,
</span><span class="cx"> // check to see if we have a `comparator`. If so, disable sorting.
</span><span class="cx"> collection.props.on( 'change:orderby', function() {
</span><del>- this.$list.sortable( 'option', 'disabled', !! collection.comparator );
</del><ins>+ this.$el.sortable( 'option', 'disabled', !! collection.comparator );
</ins><span class="cx"> }, this );
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> render: function() {
</span><del>- // Detach the list from the DOM to prevent event removal.
- this.$list.detach();
-
- this.$el.html( this.template( this.options ) ).append( this.$list );
- this.refresh();
- return this;
- },
-
- refresh: function() {
</del><span class="cx"> // If there are no elements, load some.
</span><span class="cx"> if ( ! this.collection.length ) {
</span><span class="cx"> this.collection.more();
</span><del>- this.$list.empty();
</del><ins>+ this.$el.empty();
</ins><span class="cx"> return this;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Otherwise, create all of the Attachment views, and replace
</span><span class="cx"> // the list in a single DOM operation.
</span><del>- this.$list.html( this.collection.map( function( attachment ) {
</del><ins>+ this.$el.html( this.collection.map( function( attachment ) {
</ins><span class="cx"> return new this.options.AttachmentView({
</span><span class="cx"> controller: this.controller,
</span><span class="cx"> model: attachment
</span><span class="lines">@@ -1188,37 +1263,57 @@
</span><span class="cx"> model: attachment
</span><span class="cx"> }).render();
</span><span class="cx">
</span><del>- children = this.$list.children();
</del><ins>+ children = this.$el.children();
</ins><span class="cx">
</span><span class="cx"> if ( children.length > index )
</span><span class="cx"> children.eq( index ).before( view.$el );
</span><span class="cx"> else
</span><del>- this.$list.append( view.$el );
</del><ins>+ this.$el.append( view.$el );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> remove: function( attachment, index ) {
</span><del>- var children = this.$list.children();
</del><ins>+ var children = this.$el.children();
</ins><span class="cx"> if ( children.length )
</span><span class="cx"> children.eq( index ).detach();
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> scroll: function( event ) {
</span><span class="cx"> // @todo: is this still necessary?
</span><del>- if ( ! this.$list.is(':visible') )
</del><ins>+ if ( ! this.$el.is(':visible') )
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- if ( this.list.scrollHeight < this.list.scrollTop + ( this.list.clientHeight * this.options.refreshThreshold ) ) {
</del><ins>+ if ( this.el.scrollHeight < this.el.scrollTop + ( this.el.clientHeight * this.options.refreshThreshold ) ) {
</ins><span class="cx"> this.collection.more();
</span><span class="cx"> }
</span><ins>+ }
+ });
+
+ /**
+ * wp.media.view.Search
+ */
+ media.view.Search = Backbone.View.extend({
+ tagName: 'input',
+ className: 'search',
+
+ attributes: {
+ type: 'text',
+ placeholder: l10n.search
</ins><span class="cx"> },
</span><span class="cx">
</span><ins>+ events: {
+ 'keyup': 'search'
+ },
+
+ render: function() {
+ this.el.value = this.model.escape('search');
+ return this;
+ },
+
</ins><span class="cx"> search: function( event ) {
</span><del>- var props = this.collection.props;
-
</del><span class="cx"> if ( event.target.value )
</span><del>- props.set( 'search', event.target.value );
</del><ins>+ this.model.set( 'search', event.target.value );
</ins><span class="cx"> else
</span><del>- props.unset('search');
</del><ins>+ this.model.unset('search');
</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 (22320 => 22321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/media.php 2012-10-28 23:29:17 UTC (rev 22320)
+++ trunk/wp-includes/media.php 2012-10-29 06:56:23 UTC (rev 22321)
</span><span class="lines">@@ -1309,11 +1309,9 @@
</span><span class="cx"> </div>
</span><span class="cx"> </script>
</span><span class="cx">
</span><del>- <script type="text/html" id="tmpl-attachments">
- <div class="attachments-header">
- <h3><%- directions %></h3>
- <input class="search" type="text" placeholder="<?php esc_attr_e('Search'); ?>" />
- </div>
</del><ins>+ <script type="text/html" id="tmpl-sidebar">
+ <h2 class="sidebar-title"><%- title %></h2>
+ <div class="sidebar-content"></div>
</ins><span class="cx"> </script>
</span><span class="cx">
</span><span class="cx"> <script type="text/html" id="tmpl-attachment">
</span></span></pre></div>
<a id="trunkwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/script-loader.php (22320 => 22321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/script-loader.php 2012-10-28 23:29:17 UTC (rev 22320)
+++ trunk/wp-includes/script-loader.php 2012-10-29 06:56:23 UTC (rev 22321)
</span><span class="lines">@@ -323,16 +323,17 @@
</span><span class="cx"> $scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'media-models', 'wp-plupload' ), false, 1 );
</span><span class="cx"> did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(
</span><span class="cx"> // Generic
</span><del>- 'insertMedia' => __( 'Insert Media' ),
- 'selectMediaSingular' => __( 'Select a media file:' ),
- 'selectMediaMultiple' => __( 'Select one or more media files:' ),
</del><ins>+ 'insertMedia' => __( 'Insert Media' ),
+ 'search' => __( 'Search' ),
</ins><span class="cx">
</span><span class="cx"> // Library
</span><ins>+ 'mediaLibrary' => __( 'Media Library' ),
</ins><span class="cx"> 'createNewGallery' => __( 'Create a new gallery' ),
</span><span class="cx"> 'insertIntoPost' => __( 'Insert into post' ),
</span><span class="cx"> 'addToGallery' => __( 'Add to gallery' ),
</span><span class="cx">
</span><span class="cx"> // Gallery
</span><ins>+ 'createGallery' => __( 'Create Gallery' ),
</ins><span class="cx"> 'returnToLibrary' => __( 'Return to media library' ),
</span><span class="cx"> 'continueEditingGallery' => __( 'Continue editing gallery' ),
</span><span class="cx"> 'insertGalleryIntoPost' => __( 'Insert gallery into post' ),
</span></span></pre>
</div>
</div>
</body>
</html>