WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Media JS: Improve UX for which buttons show when inserting media into a post. 

'Insert into post' is the primary action when either one item is selected, or any number of non-image items are selected. If multiple images are selected, 'Insert into post' becomes secondary, and 'Create a new gallery' takes the primary spot.

Adds a method to `get` Button views from the Toolbar. Adds a model for certain button attributes to allow size, style, and text to be easily changed.

see #21390, #21808, #21809.


git-svn-id: http://core.svn.wordpress.org/trunk@22027 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-09-27 00:59:04 +00:00
parent fc5fb63599
commit 96a572d986
1 changed files with 53 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
wp-includes/js/media-views.js
View File

@ -289,6 +289,10 @@
return this;
},
get: function( id ) {
return this._views[ id ];
},
remove: function( id, options ) {
delete this._views[ id ];
if ( ! options || ! options.silent )
@ -310,25 +314,43 @@
'click': 'click'
},
defaults: {
text: '',
style: '',
size: 'large'
},
initialize: function() {
_.defaults( this.options, {
text: '',
classes: []
});
// Create a model with the provided `defaults`.
this.model = new Backbone.Model( this.defaults );
// If any of the `options` have a key from `defaults`, apply its
// value to the `model` and remove it from the `options object.
_.each( this.defaults, function( def, key ) {
var value = this.options[ key ];
if ( _.isUndefined( value ) )
return;
this.model.set( key, value );
delete this.options[ key ];
}, this );
this.model.on( 'change', this.render, this );
},
render: function() {
var classes = [ 'button', this.className ];
if ( this.options.style )
classes.push( 'button-' + this.options.style );
if ( this.model.get('style') )
classes.push( 'button-' + this.model.get('style') );
if ( this.options.size )
classes.push( 'button-' + this.options.size );
if ( this.model.get('size') )
classes.push( 'button-' + this.model.get('size') );
classes = classes.concat( this.options.classes );
this.el.className = classes.join(' ');
this.$el.text( this.options.text );
this.$el.text( this.model.get('text') );
return this;
},
@ -441,19 +463,22 @@
collection: this.controller.selection,
priority: -40
}),
'insert-into-post': {
style: 'primary',
text: 'Insert into post',
priority: 40
},
'create-new-gallery': {
style: 'primary',
text: 'Create a new gallery',
priority: 30,
priority: 40,
click: function() {
controller.render('gallery');
}
},
'insert-into-post': {
// style: 'primary',
text: 'Insert into post',
priority: 30
},
'add-to-gallery': {
text: 'Add to gallery',
priority: 20
@ -462,7 +487,19 @@
});
this.controller.selection.on( 'add remove', function() {
this.$el.toggleClass( 'with-toolbar', !! this.controller.selection.length );
var count = this.controller.selection.length,
showGallery;
this.$el.toggleClass( 'with-toolbar', !! count );
// Check if every attachment in the selection is an image.
showGallery = count > 1 && this.controller.selection.all( function( attachment ) {
return 'image' === attachment.get('type');
});
this.toolbarView.get('create-new-gallery').$el.toggle( showGallery );
insert = this.toolbarView.get('insert-into-post');
insert.model.set( 'style', showGallery ? '' : 'primary' );
}, this );
this.$content.append( this.toolbarView.$el );