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

Media Grid/Modal Keyboard navigation improvements: 

* Add focus to arrows on Next/Previous in the grid's modal on left/right keypress, and add the necessary CSS for `:focus`
* When in a disabled input in the grid modal, allow the left/right keys to work
* Make the image editor return a `$.Deferred` so that there isn't a race condition with UI loading. 
* Assign focus when the edit image mode is rendered so that the modal can be closed on Esc press

Props wonderboymusic, adamsilverstein (for the initial patch).
See #23560.


git-svn-id: https://develop.svn.wordpress.org/trunk@29560 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor 2014-08-21 02:34:23 +00:00
parent 5e838e6f4a
commit baf230c80f
4 changed files with 40 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/wp-admin/js/image-edit.js
View File

@ -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) {

10
src/wp-includes/css/media-views.css
View File

@ -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;
}

21
src/wp-includes/js/media-grid.js
View File

@ -366,7 +366,8 @@
events: {
'click .left': 'previousMediaItem',
'click .right': 'nextMediaItem'
'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

23
src/wp-includes/js/media-views.js
View File

@ -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() {