Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-29 15:47:38 +02:00
Code Issues Projects Releases Wiki Activity

Media JS: Use a custom Attachment views for both the media library and gallery screens.

Browse Source 
To do so, the Attachment view code had to be shifted above the Workspace view code to ensure the subview is defined (preventing errors).

Also corrects an error in `wp.media.view.Attachments.add` where it was still using the default Attachment view.

see #21390, #21809.


git-svn-id: http://core.svn.wordpress.org/trunk@22046 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-09-27 06:53:54 +00:00
parent 7ac50f4811
commit e14d191fb6
2 changed files with 101 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wp-includes/css/media-views.css
View File

@ -248,11 +248,11 @@
border-color: #d54e21;
}
.attachment.selected {
.attachment.library.selected {
border-color: #21759b;
}
.attachment.selected:after {
.attachment.library.selected:after {
content: '\2713';
display: block;
height: 24px;

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

@ -366,6 +366,102 @@
}
});
/**
* wp.media.view.Attachment
*/
media.view.Attachment = Backbone.View.extend({
tagName: 'li',
className: 'attachment',
template: media.template('attachment'),
events: {
'click': 'toggleSelection'
},
initialize: function() {
this.controller = this.options.controller;
this.model.on( 'change:sizes change:uploading', this.render, this );
this.model.on( 'change:percent', this.progress, this );
this.model.on( 'add', this.select, this );
this.model.on( 'remove', this.deselect, this );
},
render: function() {
var attachment = this.model.toJSON(),
options = {
thumbnail: 'image' === attachment.type ? attachment.url : attachment.icon,
uploading: attachment.uploading,
orientation: attachment.orientation || 'landscape',
type: attachment.type,
subtype: attachment.subtype
};
// Use the medium image size if possible. If the medium size
// doesn't exist, then the attachment is too small.
// In that case, use the attachment itself.
if ( attachment.sizes && attachment.sizes.medium ) {
options.orientation = attachment.sizes.medium.orientation;
options.thumbnail = attachment.sizes.medium.url;
}
this.$el.html( this.template( options ) );
if ( attachment.uploading )
this.$bar = this.$('.media-progress-bar div');
else
delete this.$bar;
// Check if the model is selected.
if ( this.controller.selection.has( this.model ) )
this.select();
return this;
},
progress: function() {
if ( this.$bar && this.$bar.length )
this.$bar.width( this.model.get('percent') + '%' );
},
toggleSelection: function( event ) {
var selection = this.controller.selection;
selection[ selection.has( this.model ) ? 'remove' : 'add' ]( this.model );
},
select: function( model, collection ) {
// If a collection is provided, check if it's the selection.
// If it's not, bail; we're in another selection's event loop.
if ( collection && collection !== this.controller.selection )
return;
this.$el.addClass('selected');
},
deselect: function( model, collection ) {
// If a collection is provided, check if it's the selection.
// If it's not, bail; we're in another selection's event loop.
if ( collection && collection !== this.controller.selection )
return;
this.$el.removeClass('selected');
}
});
/**
* wp.media.view.Attachment.Library
*/
media.view.Attachment.Library = media.view.Attachment.extend({
className: 'attachment library'
});
/**
* wp.media.view.Attachment.Gallery
*/
media.view.Attachment.Gallery = media.view.Attachment.extend({
events: {}
});
/**
* wp.media.view.Workspace
*/
@ -457,7 +553,7 @@
*/
media.view.Workspace.Library = media.view.Workspace.extend({
// The single `Attachment` view to be used in the `Attachments` view.
// AttachmentView: media.view.Attachment.Library,
AttachmentView: media.view.Attachment.Library,
initialize: function() {
media.view.Workspace.prototype.initialize.apply( this, arguments );
@ -530,7 +626,7 @@
*/
media.view.Workspace.Gallery = media.view.Workspace.extend({
// The single `Attachment` view to be used in the `Attachments` view.
// AttachmentView: media.view.Attachment.Gallery,
AttachmentView: media.view.Attachment.Gallery,
initialize: function() {
media.view.Workspace.prototype.initialize.apply( this, arguments );
@ -646,7 +742,7 @@
add: function( attachment, index ) {
var view, children;
view = new media.view.Attachment({
view = new this.options.AttachmentView({
controller: this.controller,
model: attachment
}).render();
@ -685,89 +781,6 @@
}
});
/**
* wp.media.view.Attachment
*/
media.view.Attachment = Backbone.View.extend({
tagName: 'li',
className: 'attachment',
template: media.template('attachment'),
events: {
'click': 'toggleSelection'
},
initialize: function() {
this.controller = this.options.controller;
this.model.on( 'change:sizes change:uploading', this.render, this );
this.model.on( 'change:percent', this.progress, this );
this.model.on( 'add', this.select, this );
this.model.on( 'remove', this.deselect, this );
},
render: function() {
var attachment = this.model.toJSON(),
options = {
thumbnail: 'image' === attachment.type ? attachment.url : attachment.icon,
uploading: attachment.uploading,
orientation: attachment.orientation || 'landscape',
type: attachment.type,
subtype: attachment.subtype
};
// Use the medium image size if possible. If the medium size
// doesn't exist, then the attachment is too small.
// In that case, use the attachment itself.
if ( attachment.sizes && attachment.sizes.medium ) {
options.orientation = attachment.sizes.medium.orientation;
options.thumbnail = attachment.sizes.medium.url;
}
this.$el.html( this.template( options ) );
if ( attachment.uploading )
this.$bar = this.$('.media-progress-bar div');
else
delete this.$bar;
// Check if the model is selected.
if ( this.controller.selection.has( this.model ) )
this.select();
return this;
},
progress: function() {
if ( this.$bar && this.$bar.length )
this.$bar.width( this.model.get('percent') + '%' );
},
toggleSelection: function( event ) {
var selection = this.controller.selection;
selection[ selection.has( this.model ) ? 'remove' : 'add' ]( this.model );
},
select: function( model, collection ) {
// If a collection is provided, check if it's the selection.
// If it's not, bail; we're in another selection's event loop.
if ( collection && collection !== this.controller.selection )
return;
this.$el.addClass('selected');
},
deselect: function( model, collection ) {
// If a collection is provided, check if it's the selection.
// If it's not, bail; we're in another selection's event loop.
if ( collection && collection !== this.controller.selection )
return;
this.$el.removeClass('selected');
}
});
/**
* wp.media.view.SelectionPreview
*/