<!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>[29266] trunk/src/wp-includes: Media Grid: general JS cleanup.</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 { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { 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/29266">29266</a></dd>
<dt>Author</dt> <dd>wonderboymusic</dd>
<dt>Date</dt> <dd>2014-07-22 16:20:59 +0000 (Tue, 22 Jul 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Media Grid: general JS cleanup.
Props ericlewis.
See <a href="http://core.trac.wordpress.org/ticket/28965">#28965</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludescssmediaviewscss">trunk/src/wp-includes/css/media-views.css</a></li>
<li><a href="#trunksrcwpincludesjsmediagridjs">trunk/src/wp-includes/js/media-grid.js</a></li>
<li><a href="#trunksrcwpincludesjsmediaviewsjs">trunk/src/wp-includes/js/media-views.js</a></li>
<li><a href="#trunksrcwpincludesmediatemplatephp">trunk/src/wp-includes/media-template.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludescssmediaviewscss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/css/media-views.css (29265 => 29266)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/css/media-views.css 2014-07-22 03:17:59 UTC (rev 29265)
+++ trunk/src/wp-includes/css/media-views.css 2014-07-22 16:20:59 UTC (rev 29266)
</span><span class="lines">@@ -912,7 +912,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .attachment.details,
</span><del>-.media-grid-view .selected.attachment {
</del><ins>+.media-frame.mode-grid .selected.attachment {
</ins><span class="cx"> -webkit-box-shadow: 0 0 0 1px #fff,
</span><span class="cx"> 0 0 0 5px #1e8cbe;
</span><span class="cx"> box-shadow: 0 0 0 1px #fff,
</span><span class="lines">@@ -921,7 +921,7 @@
</span><span class="cx">
</span><span class="cx"> .attachment.details .check,
</span><span class="cx"> .attachment.selected .check:focus,
</span><del>-.media-grid-view .attachment.selected .check {
</del><ins>+.media-frame.mode-grid .attachment.selected .check {
</ins><span class="cx"> background-color: #1e8cbe;
</span><span class="cx"> -webkit-box-shadow: 0 0 0 1px #fff,
</span><span class="cx"> 0 0 0 2px #1e8cbe;
</span><span class="lines">@@ -929,22 +929,22 @@
</span><span class="cx"> 0 0 0 2px #1e8cbe;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .attachment .check {
</del><ins>+.media-frame.mode-grid .attachment .check {
</ins><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .attachment .check div {
</del><ins>+.media-frame.mode-grid .attachment .check div {
</ins><span class="cx"> background-position: 21px 0;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .attachment.details .check div,
</span><del>-.media-grid-view .attachment.selected .check div {
</del><ins>+.media-frame.mode-grid .attachment.selected .check div {
</ins><span class="cx"> background-position: -21px 0;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .attachment.details .check:hover div,
</span><span class="cx"> .attachment.selected .check:focus div,
</span><del>-.media-grid-view .attachment.selected .check:hover div {
</del><ins>+.media-frame.mode-grid .attachment.selected .check:hover div {
</ins><span class="cx"> background-position: -60px 0;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1068,7 +1068,8 @@
</span><span class="cx"> display: inline-block;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.attachment-preview:hover ~ .inline-toolbar {
</del><ins>+.attachment-preview:hover + .inline-toolbar,
+.inline-toolbar:hover {
</ins><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -2596,26 +2597,27 @@
</span><span class="cx"> /**
</span><span class="cx"> * Media Grid
</span><span class="cx"> */
</span><del>-.media-grid-view,
-.media-grid-view .media-frame-content,
-.media-grid-view .attachments-browser .attachments,
-.media-grid-view .uploader-inline-content {
</del><ins>+.media-frame.mode-grid,
+.media-frame.mode-grid .media-frame-content,
+.media-frame.mode-grid .attachments-browser .attachments,
+.media-frame.mode-grid .uploader-inline-content {
</ins><span class="cx"> position: static;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Regions we don't use at all */
</span><del>-.media-grid-view .media-frame-title,
-.media-grid-view .media-frame-toolbar,
-.media-grid-view .media-frame-menu {
</del><ins>+.media-frame.mode-grid .media-frame-title,
+.media-frame.mode-grid .media-frame-toolbar,
+.media-frame.mode-grid .media-frame-router,
+.media-frame.mode-grid .media-frame-menu {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .media-frame-content {
</del><ins>+.media-frame.mode-grid .media-frame-content {
</ins><span class="cx"> background-color: transparent;
</span><span class="cx"> border: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .uploader-inline {
</del><ins>+.media-frame.mode-grid .uploader-inline {
</ins><span class="cx"> position: relative;
</span><span class="cx"> top: auto;
</span><span class="cx"> right: auto;
</span><span class="lines">@@ -2625,12 +2627,12 @@
</span><span class="cx"> margin-top: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .media-toolbar select {
</del><ins>+.media-frame.mode-grid .media-toolbar select {
</ins><span class="cx"> margin-top: 1px;
</span><span class="cx"> font-size: inherit;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .attachments-browser .bulk-select {
</del><ins>+.media-frame.mode-grid .attachments-browser .bulk-select {
</ins><span class="cx"> display: inline-block;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -2639,7 +2641,7 @@
</span><span class="cx"> *
</span><span class="cx"> * This should be OOCSS'd so both use a shared selector.
</span><span class="cx"> */
</span><del>-.media-grid-view .attachments-browser .media-toolbar {
</del><ins>+.media-frame.mode-grid .attachments-browser .media-toolbar {
</ins><span class="cx"> background: #fff;
</span><span class="cx"> -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
</span><span class="cx"> box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
</span><span class="lines">@@ -2657,7 +2659,7 @@
</span><span class="cx"> border: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view input[type="search"] {
</del><ins>+.media-frame.mode-grid input[type="search"] {
</ins><span class="cx"> margin: 1px;
</span><span class="cx"> padding: 3px 5px;
</span><span class="cx"> position: absolute;
</span><span class="lines">@@ -2669,7 +2671,7 @@
</span><span class="cx"> width: 280px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .view-switch {
</del><ins>+.media-frame.mode-grid .view-switch {
</ins><span class="cx"> display: inline-block;
</span><span class="cx"> float: none;
</span><span class="cx"> vertical-align: middle;
</span><span class="lines">@@ -2677,19 +2679,19 @@
</span><span class="cx"> margin: 0 20px 0 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view select {
</del><ins>+.media-frame.mode-grid select {
</ins><span class="cx"> margin: 0 10px 0 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .spinner {
</del><ins>+.media-frame.mode-grid .spinner {
</ins><span class="cx"> margin-top: 15px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .attachments-browser {
</del><ins>+.media-frame.mode-grid .attachments-browser {
</ins><span class="cx"> padding: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .attachments-browser .no-media {
</del><ins>+.media-frame.mode-grid .attachments-browser .no-media {
</ins><span class="cx"> color: #999;
</span><span class="cx"> font-size: 18px;
</span><span class="cx"> font-style: normal;
</span><span class="lines">@@ -2807,11 +2809,6 @@
</span><span class="cx"> top: 56px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-/* Hiding this for the moment instead of removing it from the template. */
-.edit-attachment-frame h3 {
- display: none;
-}
-
</del><span class="cx"> .edit-attachment-frame .attachment-details {
</span><span class="cx"> position: absolute;
</span><span class="cx"> overflow: auto;
</span><span class="lines">@@ -2953,12 +2950,12 @@
</span><span class="cx"> */
</span><span class="cx">
</span><span class="cx"> @media only screen and (max-width: 1120px) {
</span><del>- .media-grid-view .attachments-browser .media-toolbar-primary,
- .media-grid-view .attachments-browser .media-toolbar-secondary {
</del><ins>+ .media-frame.mode-grid .attachments-browser .media-toolbar-primary,
+ .media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
</ins><span class="cx"> float: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- .media-grid-view input[type="search"] {
</del><ins>+ .media-frame.mode-grid input[type="search"] {
</ins><span class="cx"> margin: 20px 0;
</span><span class="cx"> position: static;
</span><span class="cx"> width: 100%;
</span></span></pre></div>
<a id="trunksrcwpincludesjsmediagridjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/media-grid.js (29265 => 29266)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/media-grid.js 2014-07-22 03:17:59 UTC (rev 29265)
+++ trunk/src/wp-includes/js/media-grid.js 2014-07-22 16:20:59 UTC (rev 29266)
</span><span class="lines">@@ -1,8 +1,9 @@
</span><span class="cx"> /* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings, confirm */
</span><span class="cx"> (function($, _, Backbone, wp) {
</span><ins>+ // Local reference to the WordPress media namespace.
</ins><span class="cx"> var media = wp.media, l10n;
</span><span class="cx">
</span><del>- // Link any localized strings.
</del><ins>+ // Link localized strings and settings.
</ins><span class="cx"> if ( media.view.l10n ) {
</span><span class="cx"> l10n = media.view.l10n;
</span><span class="cx"> } else {
</span><span class="lines">@@ -11,6 +12,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /**
</span><ins>+ * wp.media.controller.EditAttachmentMetadata
+ *
</ins><span class="cx"> * A state for editing an attachment's metadata.
</span><span class="cx"> *
</span><span class="cx"> * @constructor
</span><span class="lines">@@ -20,45 +23,13 @@
</span><span class="cx"> media.controller.EditAttachmentMetadata = media.controller.State.extend({
</span><span class="cx"> defaults: {
</span><span class="cx"> id: 'edit-attachment',
</span><ins>+ // Title string passed to the frame's title region view.
</ins><span class="cx"> title: l10n.attachmentDetails,
</span><span class="cx"> // Region mode defaults.
</span><ins>+ content: 'edit-metadata',
</ins><span class="cx"> menu: false,
</span><del>- content: 'edit-metadata',
-
- url: ''
- },
-
- _ready: function() {},
-
- /**
- * Override media.controller.State._postActivate, since this state doesn't
- * include the regions expected there.
- */
- _postActivate: function() {
- this.frame.on( 'title:render:default', this._renderTitle, this );
-
- this._title();
- this._content();
- },
-
- /**
- * @access private
- */
- _title: function() {
- this.frame.title.render( this.get('titleMode') || 'default' );
- },
- /**
- * @access private
- */
- _renderTitle: function( view ) {
- view.$el.text( this.get('title') || '' );
- },
-
- _content: function() {
- var mode = this.get( 'content' );
- if ( mode ) {
- this.frame.content.render( mode );
- }
</del><ins>+ toolbar: false,
+ router: false
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -87,19 +58,17 @@
</span><span class="cx"> title: '',
</span><span class="cx"> modal: false,
</span><span class="cx"> selection: [],
</span><del>- library: {},
</del><ins>+ library: {}, // Options hash for the query to the media library.
</ins><span class="cx"> multiple: 'add',
</span><span class="cx"> state: 'library',
</span><span class="cx"> uploader: true,
</span><del>- mode: [ 'grid', 'edit' ]
</del><ins>+ mode: [ 'grid' ]
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) );
</span><del>- $(document).on( 'screen:options:open', _.bind( this.screenOptionsOpen, this ) );
- $(document).on( 'screen:options:close', _.bind( this.screenOptionsClose, this ) );
</del><span class="cx">
</span><span class="cx"> // Ensure core and media grid view UI is enabled.
</span><del>- this.$el.addClass('wp-core-ui media-grid-view');
</del><ins>+ this.$el.addClass('wp-core-ui');
</ins><span class="cx">
</span><span class="cx"> // Force the uploader off if the upload limit has been exceeded or
</span><span class="cx"> // if the browser isn't supported.
</span><span class="lines">@@ -122,18 +91,14 @@
</span><span class="cx"> this.options.uploader = false;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- /**
- * call 'initialize' directly on the parent class
- */
</del><ins>+ // Call 'initialize' directly on the parent class.
</ins><span class="cx"> media.view.MediaFrame.prototype.initialize.apply( this, arguments );
</span><span class="cx">
</span><del>- // Since we're not using the default modal built into
- // a media frame, append our $element to the supplied container.
</del><ins>+ // Append the frame view directly the supplied container.
</ins><span class="cx"> this.$el.appendTo( this.options.container );
</span><span class="cx">
</span><del>- this.createSelection();
</del><span class="cx"> this.createStates();
</span><del>- this.bindHandlers();
</del><ins>+ this.bindRegionModeHandlers();
</ins><span class="cx"> this.render();
</span><span class="cx">
</span><span class="cx"> // Update the URL when entering search string (at most once per second)
</span><span class="lines">@@ -145,17 +110,10 @@
</span><span class="cx"> self.gridRouter.navigate( self.gridRouter.baseUrl( url ) );
</span><span class="cx"> }, 1000 ) );
</span><span class="cx">
</span><ins>+ // This is problematic.
</ins><span class="cx"> _.delay( _.bind( this.createRouter, this ), 1000 );
</span><span class="cx"> },
</span><span class="cx">
</span><del>- screenOptionsOpen: function() {
- this.$el.addClass( 'media-grid-view-options' );
- },
-
- screenOptionsClose: function() {
- this.$el.removeClass( 'media-grid-view-options' );
- },
-
</del><span class="cx"> createRouter: function() {
</span><span class="cx"> this.gridRouter = new media.view.MediaFrame.Manage.Router();
</span><span class="cx">
</span><span class="lines">@@ -168,21 +126,9 @@
</span><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><del>- createSelection: function() {
- var selection = this.options.selection;
-
- if ( ! (selection instanceof media.model.Selection) ) {
- this.options.selection = new media.model.Selection( selection, {
- multiple: this.options.multiple
- });
- }
-
- this._selection = {
- attachments: new media.model.Attachments(),
- difference: []
- };
- },
-
</del><ins>+ /**
+ * Create the default states for the frame.
+ */
</ins><span class="cx"> createStates: function() {
</span><span class="cx"> var options = this.options;
</span><span class="cx">
</span><span class="lines">@@ -196,9 +142,6 @@
</span><span class="cx"> library: media.query( options.library ),
</span><span class="cx"> multiple: options.multiple,
</span><span class="cx"> title: options.title,
</span><del>- priority: 20,
-
- router: false,
</del><span class="cx"> content: 'browse',
</span><span class="cx">
</span><span class="cx"> filterable: 'mime-types'
</span><span class="lines">@@ -206,14 +149,19 @@
</span><span class="cx"> ]);
</span><span class="cx"> },
</span><span class="cx">
</span><del>- bindHandlers: function() {
</del><ins>+ /**
+ * Bind region mode activation events to proper handlers.
+ */
+ bindRegionModeHandlers: function() {
</ins><span class="cx"> this.on( 'content:create:browse', this.browseContent, this );
</span><del>- this.on( 'content:render:edit-image', this.editImageContent, this );
</del><span class="cx">
</span><span class="cx"> // Handle a frame-level event for editing an attachment.
</span><del>- this.on( 'edit:attachment', this.editAttachment, this );
</del><ins>+ this.on( 'edit:attachment', this.openEditAttachmentModal, this );
</ins><span class="cx"> },
</span><span class="cx">
</span><ins>+ /**
+ * Click handler for the `Add New` button.
+ */
</ins><span class="cx"> addNewClickHandler: function( event ) {
</span><span class="cx"> event.preventDefault();
</span><span class="cx"> this.trigger( 'toggle:upload:attachment' );
</span><span class="lines">@@ -222,7 +170,7 @@
</span><span class="cx"> /**
</span><span class="cx"> * Open the Edit Attachment modal.
</span><span class="cx"> */
</span><del>- editAttachment: function( model ) {
</del><ins>+ openEditAttachmentModal: function( model ) {
</ins><span class="cx"> // Create a new EditAttachment frame, passing along the library and the attachment model.
</span><span class="cx"> wp.media( {
</span><span class="cx"> frame: 'edit-attachments',
</span><span class="lines">@@ -233,16 +181,17 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><del>- * Content
</del><ins>+ * Create an attachments browser view within the content region.
</ins><span class="cx"> *
</span><del>- * @param {Object} content
</del><ins>+ * @param {Object} contentRegion Basic object with a `view` property, which
+ * should be set with the proper region view.
</ins><span class="cx"> * @this wp.media.controller.Region
</span><span class="cx"> */
</span><del>- browseContent: function( content ) {
</del><ins>+ browseContent: function( contentRegion ) {
</ins><span class="cx"> var state = this.state();
</span><span class="cx">
</span><span class="cx"> // Browse our library of attachments.
</span><del>- content.view = new media.view.AttachmentsBrowser({
</del><ins>+ contentRegion.view = new media.view.AttachmentsBrowser({
</ins><span class="cx"> controller: this,
</span><span class="cx"> collection: state.get('library'),
</span><span class="cx"> selection: state.get('selection'),
</span><span class="lines">@@ -259,54 +208,23 @@
</span><span class="cx">
</span><span class="cx"> AttachmentView: state.get('AttachmentView')
</span><span class="cx"> });
</span><del>- },
-
- editImageContent: function() {
- var image = this.state().get('image'),
- view = new media.view.EditImage( { model: image, controller: this } ).render();
-
- this.content.set( view );
-
- // after creating the wrapper view, load the actual editor via an ajax call
- view.loadEditor();
-
</del><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+ /**
+ * A similar view to media.view.Attachment.Details
+ * for use in the Edit Attachment modal.
+ *
+ * @constructor
+ * @augments wp.media.view.Attachment.Details
+ * @augments wp.media.view.Attachment
+ * @augments wp.media.View
+ * @augments wp.Backbone.View
+ * @augments Backbone.View
+ */
</ins><span class="cx"> media.view.Attachment.Details.TwoColumn = media.view.Attachment.Details.extend({
</span><del>- template: wp.template( 'attachment-details-two-column' ),
</del><ins>+ template: media.template( 'attachment-details-two-column' ),
</ins><span class="cx">
</span><del>- events: {
- 'change [data-setting]': 'updateSetting',
- 'change [data-setting] input': 'updateSetting',
- 'change [data-setting] select': 'updateSetting',
- 'change [data-setting] textarea': 'updateSetting',
- 'click .delete-attachment': 'deleteAttachment',
- 'click .trash-attachment': 'trashAttachment',
- 'click .edit-attachment': 'editAttachment',
- 'click .refresh-attachment': 'refreshAttachment',
- 'click .edit-image': 'handleEditImageClick'
- },
-
- initialize: function() {
- if ( ! this.model ) {
- return;
- }
-
- this.$el.attr('aria-label', this.model.get( 'title' ) ).attr( 'aria-checked', false );
-
- this.model.on( 'change:title', this._syncTitle, this );
- this.model.on( 'change:caption', this._syncCaption, this );
- this.model.on( 'change:percent', this.progress, this );
- this.model.on( 'change:album', this._syncAlbum, this );
- this.model.on( 'change:artist', this._syncArtist, this );
-
- // Update the selection.
- this.model.on( 'add', this.select, this );
- this.model.on( 'remove', this.deselect, this );
- this.model.on( 'sync', this.afterDelete, this );
- },
-
</del><span class="cx"> preDestroy: function( event ) {
</span><span class="cx"> event.preventDefault();
</span><span class="cx">
</span><span class="lines">@@ -324,10 +242,16 @@
</span><span class="cx"> media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments );
</span><span class="cx"> },
</span><span class="cx">
</span><del>- handleEditImageClick: function() {
</del><ins>+ editAttachment: function( event ) {
+ event.preventDefault();
</ins><span class="cx"> this.controller.setState( 'edit-image' );
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ /**
+ * Noop this from parent class, doesn't apply here.
+ */
+ toggleSelectionHandler: function() {},
+
</ins><span class="cx"> afterDelete: function( model ) {
</span><span class="cx"> if ( ! model.destroyed ) {
</span><span class="cx"> return;
</span><span class="lines">@@ -351,7 +275,7 @@
</span><span class="cx"> media.view.Attachment.Details.prototype.render.apply( this, arguments );
</span><span class="cx">
</span><span class="cx"> media.mixin.removeAllPlayers();
</span><del>- $( 'audio, video', this.$el ).each( function (i, elem) {
</del><ins>+ this.$( 'audio, video' ).each( function (i, elem) {
</ins><span class="cx"> var el = media.view.MediaDetails.prepareSrc( elem );
</span><span class="cx"> new MediaElementPlayer( el, media.mixin.mejsSettings );
</span><span class="cx"> } );
</span><span class="lines">@@ -359,11 +283,14 @@
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> /**
</span><del>- * A router for handling the browser history and application state
</del><ins>+ * A router for handling the browser history and application state.
+ *
+ * @constructor
+ * @augments Backbone.Router
</ins><span class="cx"> */
</span><span class="cx"> media.view.MediaFrame.Manage.Router = Backbone.Router.extend({
</span><span class="cx"> routes: {
</span><del>- 'upload.php?item=:slug': 'showitem',
</del><ins>+ 'upload.php?item=:slug': 'showItem',
</ins><span class="cx"> 'upload.php?search=:query': 'search',
</span><span class="cx"> ':default': 'defaultRoute'
</span><span class="cx"> },
</span><span class="lines">@@ -381,7 +308,7 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> // Show the modal with a specific item
</span><del>- showitem: function( query ) {
</del><ins>+ showItem: function( query ) {
</ins><span class="cx"> var library = media.frame.state().get('library');
</span><span class="cx">
</span><span class="cx"> // Remove existing modal if present
</span><span class="lines">@@ -410,6 +337,13 @@
</span><span class="cx"> * Opens in a modal by default.
</span><span class="cx"> *
</span><span class="cx"> * Requires an attachment model to be passed in the options hash under `model`.
</span><ins>+ *
+ * @constructor
+ * @augments wp.media.view.Frame
+ * @augments wp.media.View
+ * @augments wp.Backbone.View
+ * @augments Backbone.View
+ * @mixes wp.media.controller.StateMachine
</ins><span class="cx"> */
</span><span class="cx"> media.view.MediaFrame.EditAttachments = media.view.MediaFrame.extend({
</span><span class="cx">
</span><span class="lines">@@ -443,8 +377,8 @@
</span><span class="cx">
</span><span class="cx"> this.createStates();
</span><span class="cx">
</span><del>- this.on( 'content:render:edit-metadata', this.editMetadataContent, this );
- this.on( 'content:render:edit-image', this.editImageContentUgh, this );
</del><ins>+ this.on( 'content:create:edit-metadata', this.editMetadataMode, this );
+ this.on( 'content:create:edit-image', this.editImageMode, this );
</ins><span class="cx"> this.on( 'close', this.detach );
</span><span class="cx">
</span><span class="cx"> // Bind default title creation.
</span><span class="lines">@@ -473,6 +407,7 @@
</span><span class="cx"> self.resetRoute();
</span><span class="cx"> } );
</span><span class="cx">
</span><ins>+ // Set this frame as the modal's content.
</ins><span class="cx"> this.modal.content( this );
</span><span class="cx"> this.modal.open();
</span><span class="cx"> }
</span><span class="lines">@@ -496,41 +431,39 @@
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="cx"> * Content region rendering callback for the `edit-metadata` mode.
</span><ins>+ *
+ * @param {Object} contentRegion Basic object with a `view` property, which
+ * should be set with the proper region view.
</ins><span class="cx"> */
</span><del>- editMetadataContent: function() {
- var view = new media.view.Attachment.Details.TwoColumn({
</del><ins>+ editMetadataMode: function( contentRegion ) {
+ contentRegion.view = new media.view.Attachment.Details.TwoColumn({
</ins><span class="cx"> controller: this,
</span><span class="cx"> model: this.model
</span><span class="cx"> });
</span><del>- this.content.set( view );
</del><span class="cx"> // Update browser url when navigating media details
</span><span class="cx"> if ( this.model ) {
</span><span class="cx"> this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id ) );
</span><del>- } else {
- this.resetRoute();
</del><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><del>- * For some reason the view doesn't exist in the DOM yet, don't have the
- * patience to track this down right now.
</del><ins>+ * Render the EditImage view into the frame's content region.
+ *
+ * @param {Object} contentRegion Basic object with a `view` property, which
+ * should be set with the proper region view.
</ins><span class="cx"> */
</span><del>- editImageContentUgh: function() {
- _.defer( _.bind( this.editImageContent, this ) );
</del><ins>+ editImageMode: function( contentRegion ) {
+ contentRegion.view = new media.view.EditImage( { model: this.model, controller: this } );
+ // Defer a call to load the editor, which
+ // requires DOM elements to exist.
+ _.defer( _.bind( contentRegion.view.loadEditor, contentRegion.view ) );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> /**
</span><del>- * Render the EditImage view into the frame's content region.
</del><ins>+ * Close this modal and immediately open another one.
+ *
+ * Allows for quickly swapping out the attachment being edited.
</ins><span class="cx"> */
</span><del>- editImageContent: function() {
- var view = new media.view.EditImage( { model: this.model, controller: this } ).render();
-
- this.content.set( view );
-
- // after creating the wrapper view, load the actual editor via an ajax call
- view.loadEditor();
- },
-
</del><span class="cx"> resetContent: function() {
</span><span class="cx"> this.modal.close();
</span><span class="cx"> wp.media( {
</span><span class="lines">@@ -603,6 +536,9 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+ /**
+ * Controller for bulk selection.
+ */
</ins><span class="cx"> media.view.BulkSelection = media.View.extend({
</span><span class="cx"> className: 'bulk-select',
</span><span class="cx">
</span><span class="lines">@@ -628,6 +564,14 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+ /**
+ * Bulk Selection dropdown view.
+ *
+ * @constructor
+ * @augments wp.media.View
+ * @augments wp.Backbone.View
+ * @augments Backbone.View
+ */
</ins><span class="cx"> media.view.BulkSelectionActionDropdown = media.View.extend({
</span><span class="cx"> tagName: 'select',
</span><span class="cx">
</span><span class="lines">@@ -637,18 +581,37 @@
</span><span class="cx"> this.$el.append( $('<option></option>').val( '' ).html( l10n.bulkActions ) )
</span><span class="cx"> .append( $('<option></option>').val( 'delete' ).html( l10n.deletePermanently ) );
</span><span class="cx"> this.$el.prop( 'disabled', true );
</span><del>- this.$el.on( 'change', _.bind( this.toggleChange, this ) );
</del><ins>+ this.$el.on( 'change', _.bind( this.changeHandler, this ) );
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- toggleChange: function() {
</del><ins>+ /**
+ * Change handler for the dropdown.
+ *
+ * Sets the bulk selection controller's currentAction.
+ */
+ changeHandler: function() {
</ins><span class="cx"> this.controller.model.set( { 'currentAction': this.$el.val() } );
</span><span class="cx"> },
</span><ins>+
+ /**
+ * Enable or disable the dropdown if attachments have been selected.
+ */
</ins><span class="cx"> enabled: function() {
</span><span class="cx"> var disabled = ! this.controller.controller.state().get('selection').length;
</span><span class="cx"> this.$el.prop( 'disabled', disabled );
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+ /**
+ * Bulk Selection dropdown view.
+ *
+ * @constructor
+ *
+ * @augments wp.media.view.Button
+ * @augments wp.media.View
+ * @augments wp.Backbone.View
+ * @augments Backbone.View
+ */
</ins><span class="cx"> media.view.BulkSelectionActionButton = media.view.Button.extend({
</span><span class="cx"> tagName: 'button',
</span><span class="cx">
</span><span class="lines">@@ -658,7 +621,9 @@
</span><span class="cx"> this.listenTo( this.controller.model, 'change', this.enabled, this );
</span><span class="cx"> this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
</span><span class="cx"> },
</span><del>-
</del><ins>+ /**
+ * Button click handler.
+ */
</ins><span class="cx"> click: function() {
</span><span class="cx"> var selection = this.controller.controller.state().get('selection');
</span><span class="cx"> media.view.Button.prototype.click.apply( this, arguments );
</span><span class="lines">@@ -672,7 +637,10 @@
</span><span class="cx">
</span><span class="cx"> this.enabled();
</span><span class="cx"> },
</span><del>-
</del><ins>+ /**
+ * Enable or disable the button depending if a bulk action is selected
+ * in the bulk select dropdown, and if attachments have been selected.
+ */
</ins><span class="cx"> enabled: function() {
</span><span class="cx"> var currentAction = this.controller.model.get( 'currentAction' ),
</span><span class="cx"> selection = this.controller.controller.state().get('selection'),
</span><span class="lines">@@ -681,4 +649,4 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>-}(jQuery, _, Backbone, wp));
</del><ins>+}(jQuery, _, Backbone, wp));
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunksrcwpincludesjsmediaviewsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/media-views.js (29265 => 29266)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/media-views.js 2014-07-22 03:17:59 UTC (rev 29265)
+++ trunk/src/wp-includes/js/media-views.js 2014-07-22 16:20:59 UTC (rev 29266)
</span><span class="lines">@@ -1685,8 +1685,12 @@
</span><span class="cx"> */
</span><span class="cx"> media.view.Frame = media.View.extend({
</span><span class="cx"> initialize: function() {
</span><ins>+ _.defaults( this.options, {
+ mode: [ 'select' ]
+ });
</ins><span class="cx"> this._createRegions();
</span><span class="cx"> this._createStates();
</span><ins>+ this._createModes();
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _createRegions: function() {
</span><span class="lines">@@ -1721,12 +1725,99 @@
</span><span class="cx"> this.states.add( this.options.states );
</span><span class="cx"> }
</span><span class="cx"> },
</span><ins>+ _createModes: function() {
+ // Store active "modes" that the frame is in. Unrelated to region modes.
+ this.activeModes = new Backbone.Collection();
+ this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );
+
+ _.each( this.options.mode, function( mode ) {
+ this.activateMode( mode );
+ }, this );
+ },
</ins><span class="cx"> /**
</span><span class="cx"> * @returns {wp.media.view.Frame} Returns itself to allow chaining
</span><span class="cx"> */
</span><span class="cx"> reset: function() {
</span><span class="cx"> this.states.invoke( 'trigger', 'reset' );
</span><span class="cx"> return this;
</span><ins>+ },
+ /**
+ * Map activeMode collection events to the frame.
+ */
+ triggerModeEvents: function( model, collection, options ) {
+ var collectionEvent,
+ modeEventMap = {
+ add: 'activate',
+ remove: 'deactivate'
+ },
+ eventToTrigger;
+ // Probably a better way to do this.
+ _.each( options, function( value, key ) {
+ if ( value ) {
+ collectionEvent = key;
+ }
+ } );
+
+ if ( ! _.has( modeEventMap, collectionEvent ) ) {
+ return;
+ }
+
+ eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
+ this.trigger( eventToTrigger );
+ },
+ /**
+ * Activate a mode on the frame.
+ *
+ * @param string mode Mode ID.
+ * @returns {this} Returns itself to allow chaining.
+ */
+ activateMode: function( mode ) {
+ // Bail if the mode is already active.
+ if ( this.isModeActive( mode ) ) {
+ return;
+ }
+ this.activeModes.add( [ { id: mode } ] );
+ // Add a CSS class to the frame so elements can be styled for the mode.
+ this.$el.addClass( 'mode-' + mode );
+ /**
+ * Frame mode activation event.
+ *
+ * @event this#{mode}:activate
+ */
+ this.trigger( mode + ':activate' );
+
+ return this;
+ },
+ /**
+ * Deactivate a mode on the frame.
+ *
+ * @param string mode Mode ID.
+ * @returns {this} Returns itself to allow chaining.
+ */
+ deactivateMode: function( mode ) {
+ // Bail if the mode isn't active.
+ if ( ! this.isModeActive( mode ) ) {
+ return;
+ }
+ this.activeModes.remove( this.activeModes.where( { id: mode } ) );
+ this.$el.removeClass( 'mode-' + mode );
+ /**
+ * Frame mode deactivation event.
+ *
+ * @event this#{mode}:deactivate
+ */
+ this.trigger( mode + ':deactivate' );
+
+ return this;
+ },
+ /**
+ * Check if a mode is enabled on the frame.
+ *
+ * @param string mode Mode ID.
+ * @return bool
+ */
+ isModeActive: function( mode ) {
+ return Boolean( this.activeModes.where( { id: mode } ).length );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -1759,8 +1850,7 @@
</span><span class="cx"> _.defaults( this.options, {
</span><span class="cx"> title: '',
</span><span class="cx"> modal: true,
</span><del>- uploader: true,
- mode: [ 'select' ]
</del><ins>+ uploader: true
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> // Ensure core UI is enabled.
</span><span class="lines">@@ -1776,14 +1866,6 @@
</span><span class="cx"> this.modal.content( this );
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // Store active "modes" that the frame is in. Unrelated to region modes.
- this.activeModes = new Backbone.Collection();
- this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );
-
- _.each( this.options.mode, function( mode ) {
- this.activateMode( mode );
- }, this );
-
</del><span class="cx"> // Force the uploader off if the upload limit has been exceeded or
</span><span class="cx"> // if the browser isn't supported.
</span><span class="cx"> if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) {
</span><span class="lines">@@ -1948,85 +2030,6 @@
</span><span class="cx">
</span><span class="cx"> window.tb_remove = this._tb_remove;
</span><span class="cx"> delete this._tb_remove;
</span><del>- },
-
- /**
- * Map activeMode collection events to the frame.
- */
- triggerModeEvents: function( model, collection, options ) {
- var collectionEvent,
- modeEventMap = {
- add: 'activate',
- remove: 'deactivate'
- },
- eventToTrigger;
- // Probably a better way to do this.
- _.each( options, function( value, key ) {
- if ( value ) {
- collectionEvent = key;
- }
- } );
-
- if ( ! _.has( modeEventMap, collectionEvent ) )
- return;
-
- eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
- this.trigger( eventToTrigger );
- },
- /**
- * Activate a mode on the frame.
- *
- * @param string mode Mode ID.
- * @returns {this} Returns itself to allow chaining.
- */
- activateMode: function( mode ) {
- // Bail if the mode is already active.
- if ( this.isModeActive( mode ) ) {
- return;
- }
- this.activeModes.add( [ { id: mode } ] );
- // Add a css class to the frame for anything that needs to be styled
- // for the mode.
- this.$el.addClass( 'mode-' + mode );
- /**
- * Frame mode activation event.
- *
- * @event this#{mode}:activate
- */
- this.trigger( mode + ':activate' );
-
- return this;
- },
- /**
- * Deactivate a mode on the frame.
- *
- * @param string mode Mode ID.
- * @returns {this} Returns itself to allow chaining.
- */
- deactivateMode: function( mode ) {
- // Bail if the mode isn't active.
- if ( ! this.isModeActive( mode ) ) {
- return;
- }
- this.activeModes.remove( this.activeModes.where( { id: mode } ) );
- this.$el.removeClass( 'mode-' + mode );
- /**
- * Frame mode deactivation event.
- *
- * @event this#{mode}:deactivate
- */
- this.trigger( mode + ':deactivate' );
-
- return this;
- },
- /**
- * Check if a mode is enabled on the frame.
- *
- * @param string mode Mode ID.
- * @return bool
- */
- isModeActive: function( mode ) {
- return Boolean( this.activeModes.where( { id: mode } ).length );
</del><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="lines">@@ -4631,10 +4634,15 @@
</span><span class="cx"> buttons: {},
</span><span class="cx">
</span><span class="cx"> initialize: function() {
</span><del>- var selection = this.options.selection;
</del><ins>+ var selection = this.options.selection,
+ options = _.defaults( this.options, {
+ rerenderOnModelChange: true
+ } );
+ this.$el.attr( 'aria-label', this.model.get( 'title' ) ).attr( 'aria-checked', false );
</ins><span class="cx">
</span><del>- this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
- this.model.on( 'change', this.render, this );
</del><ins>+ if ( options.rerenderOnModelChange ) {
+ this.model.on( 'change', this.render, this );
+ }
</ins><span class="cx"> this.model.on( 'change:title', this._syncTitle, this );
</span><span class="cx"> this.model.on( 'change:caption', this._syncCaption, this );
</span><span class="cx"> this.model.on( 'change:artist', this._syncArtist, this );
</span><span class="lines">@@ -4646,11 +4654,10 @@
</span><span class="cx"> this.model.on( 'remove', this.deselect, this );
</span><span class="cx"> if ( selection ) {
</span><span class="cx"> selection.on( 'reset', this.updateSelect, this );
</span><ins>+ // Update the model's details view.
+ this.model.on( 'selection:single selection:unsingle', this.details, this );
+ this.details( this.model, this.controller.state().get('selection') );
</ins><span class="cx"> }
</span><del>-
- // Update the model's details view.
- this.model.on( 'selection:single selection:unsingle', this.details, this );
- this.details( this.model, this.controller.state().get('selection') );
</del><span class="cx"> },
</span><span class="cx"> /**
</span><span class="cx"> * @returns {wp.media.view.Attachment} Returns itself to allow chaining
</span><span class="lines">@@ -4752,7 +4759,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // In the grid view, bubble up an edit:attachment event to the controller.
</span><del>- if ( this.controller.activeModes.where( { id: 'edit' } ).length ) {
</del><ins>+ if ( this.controller.isModeActive( 'grid' ) ) {
</ins><span class="cx"> this.controller.trigger( 'edit:attachment', this.model );
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="lines">@@ -6318,22 +6325,15 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> initialize: function() {
</span><ins>+ this.options = _.defaults( this.options, {
+ rerenderOnModelChange: false
+ });
</ins><span class="cx"> /**
</span><span class="cx"> * call 'initialize' directly on the parent class
</span><span class="cx"> */
</span><span class="cx"> media.view.Attachment.prototype.initialize.apply( this, arguments );
</span><span class="cx"> },
</span><span class="cx"> /**
</span><del>- * @returns {wp.media.view..Attachment.Details} Returns itself to allow chaining
- */
- render: function() {
- /**
- * call 'render' directly on the parent class
- */
- media.view.Attachment.prototype.render.apply( this, arguments );
- return this;
- },
- /**
</del><span class="cx"> * @param {Object} event
</span><span class="cx"> */
</span><span class="cx"> deleteAttachment: function( event ) {
</span><span class="lines">@@ -6379,11 +6379,12 @@
</span><span class="cx"> this.model.fetch();
</span><span class="cx"> },
</span><span class="cx"> /**
</span><ins>+ * When reverse tabbing(shift+tab) out of the right details panel, deliver
+ * the focus to the item in the list that was being edited.
+ *
</ins><span class="cx"> * @param {Object} event
</span><span class="cx"> */
</span><span class="cx"> toggleSelectionHandler: function( event ) {
</span><del>- // Reverse tabbing out of the right details panel
- // should take me back to the item in the list that was being edited.
</del><span class="cx"> if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === $( ':tabbable', this.$el ).filter( ':first' )[0] ) {
</span><span class="cx"> $('.attachments-browser .details').focus();
</span><span class="cx"> return false;
</span></span></pre></div>
<a id="trunksrcwpincludesmediatemplatephp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/media-template.php (29265 => 29266)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/media-template.php 2014-07-22 03:17:59 UTC (rev 29265)
+++ trunk/src/wp-includes/media-template.php 2014-07-22 16:20:59 UTC (rev 29266)
</span><span class="lines">@@ -263,9 +263,6 @@
</span><span class="cx"> </script>
</span><span class="cx">
</span><span class="cx"> <script type="text/html" id="tmpl-attachment-details-two-column">
</span><del>- <h3>
- <?php _e('Attachment Details'); ?>
- </h3>
</del><span class="cx"> <div class="attachment-media-view">
</span><span class="cx"> <div class="thumbnail thumbnail-{{ data.type }}">
</span><span class="cx"> <# if ( data.uploading ) { #>
</span><span class="lines">@@ -294,7 +291,7 @@
</span><span class="cx">
</span><span class="cx"> <div class="attachment-actions">
</span><span class="cx"> <# if ( 'image' === data.type && ! data.uploading ) { #>
</span><del>- <a class="button edit-image" href="#"><?php _e( 'Edit Image' ); ?></a>
</del><ins>+ <a class="button edit-attachment" href="#"><?php _e( 'Edit Image' ); ?></a>
</ins><span class="cx"> <# } #>
</span><span class="cx">
</span><span class="cx"> <# if ( ! data.uploading && data.can.remove ) { #>
</span></span></pre>
</div>
</div>
</body>
</html>