Changeset 29560

Timestamp:

08/21/2014 02:34:23 AM (7 years ago)

Author:

wonderboymusic

Message:

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.

Location:

trunk/src

Files:

• wp-admin/js/image-edit.js (modified) (3 diffs)
• wp-includes/css/media-views.css (modified) (2 diffs)
• wp-includes/js/media-grid.js (modified) (4 diffs)
• wp-includes/js/media-views.js (modified) (5 diffs)

trunk/src/wp-admin/js/image-edit.js

@@ -303 +303 @@
         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');
 
@@ -316 +316 @@
         };
 
-        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');
@@ -323 +328 @@
             });
         });
+
+        return dfd;
     },
 

trunk/src/wp-includes/css/media-views.css

@@ -2718 +2718 @@
  * 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;
@@ -2774 +2780 @@
 }
 
+.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;
 }

trunk/src/wp-includes/js/media-grid.js

@@ -366 +366 @@
 
         events: {
-            'click .left':              'previousMediaItem',
-            'click .right':             'nextMediaItem'
+            'click .left':  'previousMediaItem',
+            'click .right': 'nextMediaItem',
+            'keydown':      'keyEvent'
         },
 
@@ -523 +524 @@
         previousMediaItem: function() {
             if ( ! this.hasPrevious() ) {
+                this.$( '.left' ).blur();
                 return;
             }
             this.model = this.library.at( this.getCurrentIndex() - 1 );
-
             this.rerender();
+            this.$( '.left' ).focus();
         },
 
@@ -535 +537 @@
         nextMediaItem: function() {
             if ( ! this.hasNext() ) {
+                this.$( '.right' ).blur();
                 return;
             }
             this.model = this.library.at( this.getCurrentIndex() + 1 );
-
             this.rerender();
+            this.$( '.right' ).focus();
         },
 
@@ -557 +560 @@
          */
         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;
             }
 

trunk/src/wp-includes/js/media-views.js

@@ -3257 +3257 @@
             }
 
-            $el.find( '.media-modal-close' ).focus();
+            this.$( '.media-modal-close' ).focus();
 
             return this.propagate('open');
@@ -4810 +4810 @@
             // 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 +4849 @@
             // 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;
         },
         /**
@@ -6579 +6572 @@
                 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;
             }
         }
@@ -7158 +7156 @@
 
         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();
         },