diff --git a/src/wp-admin/js/image-edit.js b/src/wp-admin/js/image-edit.js index 793fb3e861..7bf292880b 100644 --- a/src/wp-admin/js/image-edit.js +++ b/src/wp-admin/js/image-edit.js @@ -302,7 +302,7 @@ var imageEdit = window.imageEdit = { open : function( postid, nonce, view ) { this._view = view; - var data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid), + var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid), btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner'); btn.prop('disabled', true); @@ -315,13 +315,20 @@ var imageEdit = window.imageEdit = { 'do': 'open' }; - elem.load(ajaxurl, data, function() { + dfd = $.ajax({ + url: ajaxurl, + type: 'post', + data: data + }).done(function( html ) { + elem.html( html ); head.fadeOut('fast', function(){ elem.fadeIn('fast'); btn.removeAttr('disabled'); spin.hide(); }); }); + + return dfd; }, imgLoaded : function(postid) { diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 802e9d94b0..25d8d5fa8b 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -2717,6 +2717,12 @@ * * This should be OOCSS'd so both use a shared selector. */ +.edit-attachment-frame { + display: block; + height: 100%; + width: 100%; +} + .edit-attachment-frame .edit-media-header { overflow: hidden; } @@ -2773,8 +2779,10 @@ font-weight: 300; } +.edit-attachment-frame .edit-media-header .left:hover, .edit-attachment-frame .edit-media-header .right:hover, -.edit-attachment-frame .edit-media-header .left:hover { +.edit-attachment-frame .edit-media-header .left:focus, +.edit-attachment-frame .edit-media-header .right:focus { color: #2ea2cc; } diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js index 01ee9c5375..92cde6ce42 100644 --- a/src/wp-includes/js/media-grid.js +++ b/src/wp-includes/js/media-grid.js @@ -365,8 +365,9 @@ regions: [ 'title', 'content' ], events: { - 'click .left': 'previousMediaItem', - 'click .right': 'nextMediaItem' + 'click .left': 'previousMediaItem', + 'click .right': 'nextMediaItem', + 'keydown': 'keyEvent' }, initialize: function() { @@ -522,11 +523,12 @@ */ previousMediaItem: function() { if ( ! this.hasPrevious() ) { + this.$( '.left' ).blur(); return; } this.model = this.library.at( this.getCurrentIndex() - 1 ); - this.rerender(); + this.$( '.left' ).focus(); }, /** @@ -534,11 +536,12 @@ */ nextMediaItem: function() { if ( ! this.hasNext() ) { + this.$( '.right' ).blur(); return; } this.model = this.library.at( this.getCurrentIndex() + 1 ); - this.rerender(); + this.$( '.right' ).focus(); }, getCurrentIndex: function() { @@ -556,16 +559,8 @@ * Respond to the keyboard events: right arrow, left arrow, escape. */ keyEvent: function( event ) { - var $target = $( event.target ); - - //Don't go left/right if we are in a textarea or input field - if ( $target.is( 'input' ) || $target.is( 'textarea' ) ) { - return event; - } - - // Escape key, while in the Edit Image mode - if ( 27 === event.keyCode ) { - this.modal.close(); + if ( 'INPUT' === event.target.tagName && ! ( event.target.readOnly || event.target.disabled ) ) { + return; } // The right arrow key diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 664575fffa..047693f8e7 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -3256,7 +3256,7 @@ } } - $el.find( '.media-modal-close' ).focus(); + this.$( '.media-modal-close' ).focus(); return this.propagate('open'); }, @@ -4809,7 +4809,7 @@ // Catch arrow events if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) { - this.arrowEvent(event); + this.controller.trigger( 'attachment:keydown:arrow', event ); return; } @@ -4849,13 +4849,6 @@ // Don't scroll the view and don't attempt to submit anything. event.stopPropagation(); }, - /** - * @param {Object} event - */ - arrowEvent: function( event ) { - this.controller.trigger( 'attachment:keydown:arrow', event ); - return false; - }, /** * @param {Object} options */ @@ -6579,6 +6572,11 @@ this.$( ':tabbable' ).eq( 0 ).blur(); return false; } + + if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) { + this.controller.trigger( 'attachment:keydown:arrow', event ); + return; + } } }); @@ -7157,7 +7155,12 @@ }, loadEditor: function() { - this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this ); + var dfd = this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this ); + dfd.done( _.bind( this.focus, this ) ); + }, + + focus: function() { + this.$( '.imgedit-submit .button' ).eq( 0 ).focus(); }, back: function() {