WordPress/wp-includes/js/media/views/attachment/details.js

156 lines
3.8 KiB
JavaScript

/*globals wp, _ */
/**
* wp.media.view.Attachment.Details
*
* @class
* @augments wp.media.view.Attachment
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
var Attachment = require( '../attachment.js' ),
l10n = wp.media.view.l10n,
Details;
Details = Attachment.extend({
tagName: 'div',
className: 'attachment-details',
template: wp.template('attachment-details'),
attributes: function() {
return {
'tabIndex': 0,
'data-id': this.model.get( 'id' )
};
},
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 .untrash-attachment': 'untrashAttachment',
'click .edit-attachment': 'editAttachment',
'click .refresh-attachment': 'refreshAttachment',
'keydown': 'toggleSelectionHandler',
'click .detach-from-parent': 'detachFromParent'
},
initialize: function() {
this.options = _.defaults( this.options, {
rerenderOnModelChange: false
});
this.on( 'ready', this.initialFocus );
// Call 'initialize' directly on the parent class.
Attachment.prototype.initialize.apply( this, arguments );
},
initialFocus: function() {
if ( ! wp.media.isTouchDevice ) {
this.$( ':input' ).eq( 0 ).focus();
}
},
/**
* @param {Object} event
*/
deleteAttachment: function( event ) {
event.preventDefault();
if ( window.confirm( l10n.warnDelete ) ) {
this.model.destroy();
// Keep focus inside media modal
// after image is deleted
this.controller.modal.focusManager.focus();
}
},
/**
* @param {Object} event
*/
trashAttachment: function( event ) {
var library = this.controller.library;
event.preventDefault();
if ( wp.media.view.settings.mediaTrash &&
'edit-metadata' === this.controller.content.mode() ) {
this.model.set( 'status', 'trash' );
this.model.save().done( function() {
library._requery( true );
} );
} else {
this.model.destroy();
}
},
/**
* @param {Object} event
*/
untrashAttachment: function( event ) {
var library = this.controller.library;
event.preventDefault();
this.model.set( 'status', 'inherit' );
this.model.save().done( function() {
library._requery( true );
} );
},
/**
* @param {Object} event
*/
editAttachment: function( event ) {
var editState = this.controller.states.get( 'edit-image' );
if ( window.imageEdit && editState ) {
event.preventDefault();
editState.set( 'image', this.model );
this.controller.setState( 'edit-image' );
} else {
this.$el.addClass('needs-refresh');
}
},
/**
* @param {Object} event
*/
refreshAttachment: function( event ) {
this.$el.removeClass('needs-refresh');
event.preventDefault();
this.model.fetch();
},
/**
* When reverse tabbing(shift+tab) out of the right details panel, deliver
* the focus to the item in the list that was being edited.
*
* @param {Object} event
*/
toggleSelectionHandler: function( event ) {
if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === this.$( ':tabbable' ).get( 0 ) ) {
this.controller.trigger( 'attachment:details:shift-tab', event );
return false;
}
if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
this.controller.trigger( 'attachment:keydown:arrow', event );
return;
}
},
/**
* @param {Object} event
*/
detachFromParent: function( event ) {
event.preventDefault();
this.model.save({
'parent' : 0,
'uploadedTo' : 0,
'uploadedToLink' : '',
'uploadedToTitle' : ''
});
}
});
module.exports = Details;