Media: Fix viewport scrolling and code style in image rotation.

Change `browsePopup` to use `onkeydown`, pass the `event` parameter from the calling control, and adjust variable naming style.

The `browsePopup` method used for the image rotation menu used `onkeyup` to trigger events, which prevented capturing browser scroll actions with arrows occurring on `onkeydown`.

Props afercia, deepakvijayan, nirajgirixd, joedolson, antpb.
Fixes #60548.
Built from https://develop.svn.wordpress.org/trunk@58946


git-svn-id: http://core.svn.wordpress.org/trunk@58342 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2024-08-28 16:45:11 +00:00
parent 05541b406c
commit e57bee933a
4 changed files with 15 additions and 13 deletions

View File

@ -75,9 +75,9 @@ function wp_image_editor( $post_id, $msg = false ) {
) ) {
$note_no_rotate = '';
?>
<button type="button" class="imgedit-rleft button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Rotate 90&deg; left' ); ?></button>
<button type="button" class="imgedit-rright button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Rotate 90&deg; right' ); ?></button>
<button type="button" class="imgedit-rfull button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(180, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Rotate 180&deg;' ); ?></button>
<button type="button" class="imgedit-rleft button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Rotate 90&deg; left' ); ?></button>
<button type="button" class="imgedit-rright button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Rotate 90&deg; right' ); ?></button>
<button type="button" class="imgedit-rfull button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.rotate(180, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Rotate 180&deg;' ); ?></button>
<?php
} else {
$note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
@ -88,8 +88,8 @@ function wp_image_editor( $post_id, $msg = false ) {
}
?>
<hr />
<button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
<button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
<button type="button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
<button type="button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
<?php echo $note_no_rotate; ?>
</div>
</div>

View File

@ -296,14 +296,16 @@
* Navigate popup menu by arrow keys.
*
* @since 6.3.0
* @since 6.7.0 Added the event parameter.
*
* @memberof imageEdit
*
* @param {Event} event The key or click event.
* @param {HTMLElement} el The current element.
*
* @return {boolean} Always returns false.
*/
browsePopup : function(el) {
browsePopup : function(event, el) {
var $el = $( el );
var $collection = $( el ).parent( '.imgedit-popup-menu' ).find( 'button' );
var $index = $collection.index( $el );
@ -316,14 +318,14 @@
if ( $next === $last ) {
$next = 0;
}
var $target = false;
var target = false;
if ( event.keyCode === 40 ) {
$target = $collection.get( $next );
target = $collection.get( $next );
} else if ( event.keyCode === 38 ) {
$target = $collection.get( $prev );
target = $collection.get( $prev );
}
if ( $target ) {
$target.focus();
if ( target ) {
target.focus();
event.preventDefault();
}

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.7-alpha-58945';
$wp_version = '6.7-alpha-58946';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.