sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

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: https://develop.svn.wordpress.org/trunk@22046 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith 2012-09-27 06:53:54 +00:00
parent 3324270681
commit 22b3981229
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
*/