Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390.

git-svn-id: http://core.svn.wordpress.org/trunk@22594 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-11-15 02:36:06 +00:00
parent 0427b96415
commit 79c74bbe1e
3 changed files with 141 additions and 80 deletions

View File

@ -811,10 +811,33 @@
font-weight: bold;
}
.media-selection .clear-selection {
.media-selection .selection-info a {
display: block;
text-decoration: none;
float: left;
padding: 1px 8px;
margin: 1px 8px 1px -8px;
line-height: 16px;
text-decoration: none;
border-right: 1px solid #dfdfdf;
color: #21759B;
}
.media-selection .selection-info a:hover {
background: #21759B;
color: #fff;
border-color: transparent;
}
.media-selection .selection-info a:last-child {
border-right: 0;
}
.media-selection .selection-info .clear-selection {
color: red;
}
.media-selection .selection-info .clear-selection:hover {
background: red;
}
.media-selection .attachments {
@ -825,11 +848,17 @@
vertical-align: top;
}
.media-selection .selected.attachment {
.attachment.selection.selected {
box-shadow: none;
}
.media-selection .details.attachment {
.attachment.selection.details {
box-shadow:
0 0 0 1px #fff,
0 0 0 4px #1e8cbe;
}
.media-selection .attachment.selection.details {
box-shadow:
0 0 0 1px #fff,
0 0 0 3px #1e8cbe;

View File

@ -372,32 +372,20 @@
},
refreshSelection: function() {
var selection = this.get('selection'),
mode = this.frame.content.mode();
this.frame.toolbar.view().refresh();
this.trigger( 'refresh:selection', this, this.get('selection') );
this.trigger( 'refresh:selection', this, selection );
if ( ! selection.length && 'browse' !== mode && 'upload' !== mode )
this.content();
},
selectUpload: function( attachment ) {
this.get('selection').add( attachment );
},
toggleSelection: function( model ) {
var selection = this.get('selection');
if ( ! model )
return;
if ( selection.has( model ) ) {
// If the model is the single model, remove it.
// If it is not the same as the single model,
// it now becomes the single model.
selection[ selection.single() === model ? 'remove' : 'single' ]( model );
} else {
selection.add( model ).single();
}
return this;
},
buildComposite: function() {
var original = this.get('_library'),
exclude = this.get('exclude'),
@ -518,7 +506,7 @@
// The single `Attachment` view to be used in the `Attachments` view.
if ( ! this.get('AttachmentView') )
this.set( 'AttachmentView', media.view.Attachment.Gallery );
this.set( 'AttachmentView', media.view.Attachment.EditLibrary );
media.controller.Library.prototype.initialize.apply( this, arguments );
},
@ -867,6 +855,7 @@
this.content.view( new media.view.AttachmentsBrowser({
controller: this,
collection: state.get('library'),
selection: state.get('selection'),
model: state,
sortable: state.get('sortable'),
search: state.get('searchable'),
@ -980,6 +969,7 @@
main = {
multiple: this.options.multiple,
menu: 'main',
sidebar: 'attachment-settings',
// Update user settings when users adjust the
// attachment display settings.
@ -1058,12 +1048,13 @@
var handlers = {
menu: {
batch: 'batchMenu',
gallery: 'galleryMenu'
'batch': 'batchMenu',
'gallery': 'galleryMenu'
},
content: {
embed: 'embedContent'
'embed': 'embedContent',
'edit-selection': 'editSelectionContent'
},
sidebar: {
@ -1086,19 +1077,6 @@
}, this );
}, this );
_.each(['library', 'upload'], function( id ) {
this.get( id ).on( 'refresh:selection', function( state, selection ) {
var sidebar = this.sidebar;
if ( ! selection.length )
sidebar.mode('clear');
else if ( selection.length === 1 )
sidebar.mode('attachment-settings');
else
sidebar.mode('settings');
}, this );
}, this );
this.sidebar.on( 'gallery-settings', this.onSidebarGallerySettings, this );
},
@ -1204,6 +1182,35 @@
view.url.focus();
},
editSelectionContent: function() {
var state = this.state(),
selection = state.get('selection'),
view;
view = new media.view.AttachmentsBrowser({
controller: this,
collection: selection,
selection: selection,
model: state,
sortable: true,
search: false,
AttachmentView: media.view.Attachment.EditSelection
}).render();
view.toolbar.set( 'backToLibrary', {
text: l10n.returnToLibrary,
priority: -100,
click: function() {
this.controller.content.mode('browse');
}
});
// Browse our library of attachments.
this.content.view( view );
},
// Sidebars
onSidebarGallerySettings: function( options ) {
var library = this.state().get('library');
@ -1761,7 +1768,11 @@
selection: new media.view.Selection({
controller: controller,
collection: selection,
priority: -40
priority: -40,
editable: function() {
this.controller.content.mode('edit-selection');
}
}).render(),
insert: {
@ -1771,8 +1782,7 @@
click: function() {
controller.close();
controller.state().trigger( 'insert', selection );
selection.clear();
controller.state().trigger( 'insert', selection ).reset();
}
},
@ -1782,12 +1792,6 @@
click: selectionToLibrary('gallery-edit', function( selection ) {
return selection.where({ type: 'image' });
})
},
batch: {
text: l10n.batchInsert,
priority: 60,
click: selectionToLibrary('batch-edit')
}
});
@ -1800,16 +1804,10 @@
this.get('insert').model.set( 'disabled', ! selection.length );
// Check if every attachment in the selection is an image.
// Check if any attachment in the selection is an image.
this.get('gallery').$el.toggle( count > 1 && selection.any( function( attachment ) {
return 'image' === attachment.get('type');
}) );
// Batch insert shows for multiple selected attachments.
this.get('batch').$el.toggle( count > 1 );
// Insert only shows for single attachments.
this.get('insert').$el.toggle( count <= 1 );
}
});
@ -2075,7 +2073,8 @@
'change [data-setting]': 'updateSetting',
'change [data-setting] input': 'updateSetting',
'change [data-setting] select': 'updateSetting',
'change [data-setting] textarea': 'updateSetting'
'change [data-setting] textarea': 'updateSetting',
'click .close': 'removeFromLibrary'
},
buttons: {},
@ -2147,17 +2146,30 @@
},
toggleSelection: function( event ) {
this.controller.state().toggleSelection( this.model );
var selection = this.options.selection,
model = this.model;
if ( ! selection )
return;
if ( selection.has( model ) ) {
// If the model is the single model, remove it.
// If it is not the same as the single model,
// it now becomes the single model.
selection[ selection.single() === model ? 'remove' : 'single' ]( model );
} else {
selection.add( model ).single();
}
},
selected: function() {
var selection = this.controller.state().get('selection');
var selection = this.options.selection;
if ( selection )
return selection.has( this.model );
},
select: function( model, collection ) {
var selection = this.controller.state().get('selection');
var selection = this.options.selection;
// Check if a selection exists and if it's the collection provided.
// If they're not the same collection, bail; we're in another
@ -2169,7 +2181,7 @@
},
deselect: function( model, collection ) {
var selection = this.controller.state().get('selection');
var selection = this.options.selection;
// Check if a selection exists and if it's the collection provided.
// If they're not the same collection, bail; we're in another
@ -2181,7 +2193,7 @@
},
details: function( model, collection ) {
var selection = this.controller.state().get('selection'),
var selection = this.options.selection,
details;
if ( selection !== collection )
@ -2220,6 +2232,13 @@
return;
this.model.save( $setting.data('setting'), event.target.value );
},
removeFromLibrary: function( event ) {
// Stop propagation so the model isn't selected.
event.stopPropagation();
this.collection.remove( this.model );
}
});
@ -2231,24 +2250,11 @@
});
/**
* wp.media.view.Attachment.Gallery
* wp.media.view.Attachment.EditLibrary
*/
media.view.Attachment.Gallery = media.view.Attachment.extend({
media.view.Attachment.EditLibrary = media.view.Attachment.extend({
buttons: {
close: true
},
events: (function() {
var events = _.clone( media.view.Attachment.prototype.events );
events['click .close'] = 'removeFromGallery';
return events;
}()),
removeFromGallery: function( event ) {
// Stop propagation so the model isn't selected.
event.stopPropagation();
this.controller.state().get('library').remove( this.model );
}
});
@ -2388,7 +2394,9 @@
this.$el.html( this.collection.map( function( attachment ) {
return new this.options.AttachmentView({
controller: this.controller,
model: attachment
model: attachment,
collection: this.collection,
selection: this.options.selection
}).render().$el;
}, this ) );
@ -2404,7 +2412,9 @@
view = new this.options.AttachmentView({
controller: this.controller,
model: attachment
model: attachment,
collection: this.collection,
selection: this.options.selection
}).render();
children = this.$el.children();
@ -2521,6 +2531,7 @@
this.attachments = new media.view.Attachments({
controller: this.controller,
collection: this.collection,
selection: this.options.selection,
model: this.model,
sortable: this.options.sortable,
@ -2603,11 +2614,13 @@
template: media.template('media-selection'),
events: {
'click .edit-selection': 'edit',
'click .clear-selection': 'clear'
},
initialize: function() {
_.defaults( this.options, {
editable: false,
clearable: true
});
@ -2615,6 +2628,7 @@
this.attachments = new media.view.Attachments({
controller: this.controller,
collection: this.collection,
selection: this.collection,
sortable: true,
model: new Backbone.Model({
edge: 40,
@ -2655,6 +2669,12 @@
this.$('.count').text( this.collection.length + ' ' + l10n.selected );
},
edit: function( event ) {
event.preventDefault();
if ( this.options.editable )
this.options.editable.call( this, this.collection );
},
clear: function( event ) {
event.preventDefault();
this.collection.clear();
@ -2666,10 +2686,18 @@
* wp.media.view.Attachment.Selection
*/
media.view.Attachment.Selection = media.view.Attachment.extend({
className: 'attachment selection',
// On click, just select the model, instead of removing the model from
// the selection.
toggleSelection: function() {
this.controller.state().get('selection').single( this.model );
this.options.selection.single( this.model );
}
});
media.view.Attachment.EditSelection = media.view.Attachment.Selection.extend({
buttons: {
close: true
}
});

View File

@ -1355,6 +1355,7 @@ function wp_enqueue_media( $args = array() ) {
'mediaLibraryTitle' => __( 'Media Library' ),
'createNewGallery' => __( 'Create a new gallery' ),
'insertIntoPost' => __( 'Insert into post' ),
'returnToLibrary' => __( '&#8592; Return to library' ),
// Embed
'embedFromUrlTitle' => __( 'Embed From URL' ),
@ -1522,6 +1523,9 @@ function wp_print_media_templates( $attachment ) {
<script type="text/html" id="tmpl-media-selection">
<div class="selection-info">
<span class="count"></span>
<# if ( data.editable ) { #>
<a class="edit-selection" href="#"><?php _e('Edit'); ?></a>
<# } #>
<# if ( data.clearable ) { #>
<a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
<# } #>