--- a/wp/wp-includes/js/media-grid.js Tue Oct 22 16:11:46 2019 +0200
+++ b/wp/wp-includes/js/media-grid.js Tue Dec 15 13:49:49 2020 +0100
@@ -265,7 +265,7 @@
}
}, 1000 );
- // Update the URL when entering search string (at most once per second)
+ // Update the URL when entering search string (at most once per second).
search.on( 'input', _.bind( input, this ) );
this.gridRouter
@@ -346,7 +346,7 @@
$browser = this.$('.attachments-browser');
$toolbar = $browser.find('.media-toolbar');
- // Offset doesn't appear to take top margin into account, hence +16
+ // Offset doesn't appear to take top margin into account, hence +16.
if ( ( $browser.offset().top + 16 ) < this.$window.scrollTop() + this.$adminBar.height() ) {
$browser.addClass( 'fixed' );
$toolbar.css('width', $browser.width() + 'px');
@@ -434,7 +434,7 @@
},
startHistory: function() {
- // Verify pushState support and activate
+ // Verify pushState support and activate.
if ( window.history && window.history.pushState ) {
if ( Backbone.History.started ) {
Backbone.history.stop();
@@ -529,7 +529,7 @@
'upload.php': 'reset'
},
- // Map routes against the page URL
+ // Map routes against the page URL.
baseUrl: function( url ) {
return 'upload.php' + url;
},
@@ -542,19 +542,19 @@
}
},
- // Respond to the search route by filling the search field and trigggering the input event
+ // Respond to the search route by filling the search field and trigggering the input event.
search: function( query ) {
jQuery( '#media-search-input' ).val( query ).trigger( 'input' );
},
- // Show the modal with a specific item
+ // Show the modal with a specific item.
showItem: function( query ) {
var media = wp.media,
frame = media.frames.browse,
library = frame.state().get('library'),
item;
- // Trigger the media frame to open the correct item
+ // Trigger the media frame to open the correct item.
item = library.findWhere( { id: parseInt( query, 10 ) } );
item.set( 'skipHistory', true );
@@ -718,8 +718,9 @@
// Completely destroy the modal DOM element when closing it.
this.modal.on( 'close', _.bind( function() {
- $( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */
- // Restore the original focus item if possible
+ // Remove the keydown event.
+ $( 'body' ).off( 'keydown.media-modal' );
+ // Move focus back to the original item in the grid if possible.
$( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).focus();
this.resetRoute();
}, this ) );
@@ -800,8 +801,8 @@
},
toggleNav: function() {
- this.$('.left').toggleClass( 'disabled', ! this.hasPrevious() );
- this.$('.right').toggleClass( 'disabled', ! this.hasNext() );
+ this.$( '.left' ).prop( 'disabled', ! this.hasPrevious() );
+ this.$( '.right' ).prop( 'disabled', ! this.hasNext() );
},
/**
@@ -831,8 +832,10 @@
if ( ! this.hasPrevious() ) {
return;
}
+
this.trigger( 'refresh', this.library.at( this.getCurrentIndex() - 1 ) );
- this.$( '.left' ).focus();
+ // Move focus to the Previous button. When there are no more items, to the Next button.
+ this.focusNavButton( this.hasPrevious() ? '.left' : '.right' );
},
/**
@@ -842,8 +845,21 @@
if ( ! this.hasNext() ) {
return;
}
+
this.trigger( 'refresh', this.library.at( this.getCurrentIndex() + 1 ) );
- this.$( '.right' ).focus();
+ // Move focus to the Next button. When there are no more items, to the Previous button.
+ this.focusNavButton( this.hasNext() ? '.right' : '.left' );
+ },
+
+ /**
+ * Set focus to the navigation buttons depending on the browsing direction.
+ *
+ * @since 5.3.0
+ *
+ * @param {string} which A CSS selector to target the button to focus.
+ */
+ focusNavButton: function( which ) {
+ $( which ).focus();
},
getCurrentIndex: function() {
@@ -866,11 +882,11 @@
return;
}
- // The right arrow key
+ // The right arrow key.
if ( 39 === event.keyCode ) {
this.nextMediaItem();
}
- // The left arrow key
+ // The left arrow key.
if ( 37 === event.keyCode ) {
this.previousMediaItem();
}
@@ -941,7 +957,7 @@
children = toolbar.$( '.media-toolbar-secondary > *, .media-toolbar-primary > *' );
- // TODO: the Frame should be doing all of this.
+ // @todo The Frame should be doing all of this.
if ( this.controller.isModeActive( 'select' ) ) {
this.model.set( {
size: 'large',
@@ -949,6 +965,7 @@
} );
children.not( '.spinner, .media-button' ).hide();
this.$el.show();
+ toolbar.$el.addClass( 'media-toolbar-mode-select' );
toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
} else {
this.model.set( {
@@ -957,6 +974,7 @@
} );
this.controller.content.get().$el.removeClass( 'fixed' );
toolbar.$el.css( 'width', '' );
+ toolbar.$el.removeClass( 'media-toolbar-mode-select' );
toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
children.not( '.media-button' ).show();
this.controller.state().get( 'selection' ).reset();