WordPress.org

Make WordPress Core

Changeset 29560


Ignore:
Timestamp:
08/21/2014 02:34:23 AM (5 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/image-edit.js

    r29269 r29560  
    303303        this._view = view;
    304304
    305         var data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
     305        var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
    306306            btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
    307307
     
    316316        };
    317317
    318         elem.load(ajaxurl, data, function() {
     318        dfd = $.ajax({
     319            url:  ajaxurl,
     320            type: 'post',
     321            data: data
     322        }).done(function( html ) {
     323            elem.html( html );
    319324            head.fadeOut('fast', function(){
    320325                elem.fadeIn('fast');
     
    323328            });
    324329        });
     330
     331        return dfd;
    325332    },
    326333
  • trunk/src/wp-includes/css/media-views.css

    r29548 r29560  
    27182718 * This should be OOCSS'd so both use a shared selector.
    27192719 */
     2720.edit-attachment-frame {
     2721    display: block;
     2722    height: 100%;
     2723    width: 100%;
     2724}
     2725
    27202726.edit-attachment-frame .edit-media-header {
    27212727    overflow: hidden;
     
    27742780}
    27752781
     2782.edit-attachment-frame .edit-media-header .left:hover,
    27762783.edit-attachment-frame .edit-media-header .right:hover,
    2777 .edit-attachment-frame .edit-media-header .left:hover {
     2784.edit-attachment-frame .edit-media-header .left:focus,
     2785.edit-attachment-frame .edit-media-header .right:focus {
    27782786    color: #2ea2cc;
    27792787}
  • trunk/src/wp-includes/js/media-grid.js

    r29551 r29560  
    366366
    367367        events: {
    368             'click .left':              'previousMediaItem',
    369             'click .right':             'nextMediaItem'
     368            'click .left':  'previousMediaItem',
     369            'click .right': 'nextMediaItem',
     370            'keydown':      'keyEvent'
    370371        },
    371372
     
    523524        previousMediaItem: function() {
    524525            if ( ! this.hasPrevious() ) {
     526                this.$( '.left' ).blur();
    525527                return;
    526528            }
    527529            this.model = this.library.at( this.getCurrentIndex() - 1 );
    528 
    529530            this.rerender();
     531            this.$( '.left' ).focus();
    530532        },
    531533
     
    535537        nextMediaItem: function() {
    536538            if ( ! this.hasNext() ) {
     539                this.$( '.right' ).blur();
    537540                return;
    538541            }
    539542            this.model = this.library.at( this.getCurrentIndex() + 1 );
    540 
    541543            this.rerender();
     544            this.$( '.right' ).focus();
    542545        },
    543546
     
    557560         */
    558561        keyEvent: function( event ) {
    559             var $target = $( event.target );
    560 
    561             //Don't go left/right if we are in a textarea or input field
    562             if ( $target.is( 'input' ) || $target.is( 'textarea' ) ) {
    563                 return event;
    564             }
    565 
    566             // Escape key, while in the Edit Image mode
    567             if ( 27 === event.keyCode ) {
    568                 this.modal.close();
     562            if ( 'INPUT' === event.target.tagName && ! ( event.target.readOnly || event.target.disabled ) ) {
     563                return;
    569564            }
    570565
  • trunk/src/wp-includes/js/media-views.js

    r29558 r29560  
    32573257            }
    32583258
    3259             $el.find( '.media-modal-close' ).focus();
     3259            this.$( '.media-modal-close' ).focus();
    32603260
    32613261            return this.propagate('open');
     
    48104810            // Catch arrow events
    48114811            if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
    4812                 this.arrowEvent(event);
     4812                this.controller.trigger( 'attachment:keydown:arrow', event );
    48134813                return;
    48144814            }
     
    48494849            // Don't scroll the view and don't attempt to submit anything.
    48504850            event.stopPropagation();
    4851         },
    4852         /**
    4853          * @param {Object} event
    4854          */
    4855         arrowEvent: function( event ) {
    4856             this.controller.trigger( 'attachment:keydown:arrow', event );
    4857             return false;
    48584851        },
    48594852        /**
     
    65796572                this.$( ':tabbable' ).eq( 0 ).blur();
    65806573                return false;
     6574            }
     6575
     6576            if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
     6577                this.controller.trigger( 'attachment:keydown:arrow', event );
     6578                return;
    65816579            }
    65826580        }
     
    71587156
    71597157        loadEditor: function() {
    7160             this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this );
     7158            var dfd = this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this );
     7159            dfd.done( _.bind( this.focus, this ) );
     7160        },
     7161
     7162        focus: function() {
     7163            this.$( '.imgedit-submit .button' ).eq( 0 ).focus();
    71617164        },
    71627165
Note: See TracChangeset for help on using the changeset viewer.