enmi-conf.org: comparison wp/wp-includes/js/media-grid.js

Mercurial Mercurial > enmi-conf.org / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

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

changeset 16	a86126ab1dd4
parent 9	177826044cd9
child 18	be944660c56a

equal deleted inserted replaced

-:3d4e9c994f10
+:a86126ab1dd4
 					url += '?search=' + val;
 					this.gridRouter.navigate( this.gridRouter.baseUrl( url ), { replace: true } );
 				}
 			}, 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
 			.on( 'route:search', function () {
 				var href = window.location.href;
 		}
 		$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');
 		} else {
 			$browser.removeClass( 'fixed' );
 		}
 		this.browserView.dfd.done( _.bind( this.startHistory, this ) );
 	},
 	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();
 			}
 			Backbone.history.start( {
 		'upload.php?item=:slug':           'showItem',
 		'upload.php?search=:query':        'search',
 		'upload.php':                      'reset'
 	},
-	// Map routes against the page URL
+	// Map routes against the page URL.
 	baseUrl: function( url ) {
 		return 'upload.php' + url;
 	},
 	reset: function() {
 		if ( frame ) {
 			frame.close();
 		}
 	},
-	// 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 );
 		if ( item ) {
 			frame.trigger( 'edit:attachment', item );
 				$( 'body' ).on( 'keydown.media-modal', _.bind( this.keyEvent, this ) );
 			}, this ) );
 			// Completely destroy the modal DOM element when closing it.
 			this.modal.on( 'close', _.bind( function() {
-				$( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */
+				// Remove the keydown event.
-				// Restore the original focus item if possible
+				$( '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 ) );
 			// Set this frame as the modal's content.
 	editImageModeRender: function( view ) {
 		view.on( 'ready', view.loadEditor );
 	},
 	toggleNav: function() {
-		this.$('.left').toggleClass( 'disabled', ! this.hasPrevious() );
+		this.$( '.left' ).prop( 'disabled', ! this.hasPrevious() );
-		this.$('.right').toggleClass( 'disabled', ! this.hasNext() );
+		this.$( '.right' ).prop( 'disabled', ! this.hasNext() );
 	},
 	/**
 	 * Rerender the view.
 	 */
 	 */
 	previousMediaItem: function() {
 		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' );
 	},
 	/**
 	 * Click handler to switch to the next media item.
 	 */
 	nextMediaItem: function() {
 		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() {
 		return this.library.indexOf( this.model );
 	},
 	keyEvent: function( event ) {
 		if ( ( 'INPUT' === event.target.nodeName || 'TEXTAREA' === event.target.nodeName ) && ! ( event.target.readOnly || event.target.disabled ) ) {
 			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();
 		}
 	},
 	toggleBulkEditHandler: function() {
 		var toolbar = this.controller.content.get().toolbar, children;
 		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',
 				text: l10n.cancel
 			} );
 			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( {
 				size: '',
 				text: l10n.bulkSelect
 			} );
 			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();
 		}
 	}

enmi-conf.org