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 = ''; $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-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" 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-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" 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-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 <?php
} else { } else {
$note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>'; $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 /> <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" 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" 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(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; ?> <?php echo $note_no_rotate; ?>
</div> </div>
</div> </div>

View File

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

File diff suppressed because one or more lines are too long

View File

@@ -16,7 +16,7 @@
* *
* @global string $wp_version * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.