Changeset 58946

Timestamp:

08/28/2024 04:43:52 PM (4 months ago)

Author:

joedolson

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/lib/image-edit.js (modified) (2 diffs)
• wp-admin/includes/image-edit.php (modified) (2 diffs)

trunk/src/js/_enqueues/lib/image-edit.js

@@ -297 +297 @@
      *
      * @since 6.3.0
-     *
-     * @memberof imageEdit
-     *
+     * @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' );
@@ -317 +319 @@
             $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 );
-        }
-        if ( $target ) {
-            $target.focus();
+            target = $collection.get( $prev );
+        }
+        if ( target ) {
+            target.focus();
             event.preventDefault();
         }

trunk/src/wp-admin/includes/image-edit.php

@@ -76 +76 @@
                 $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 {
@@ -89 +89 @@
             ?>
                     <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>