WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Media: Close image rotation menu when not focused. 

Implement a focus monitor so that if user focus moves away from the image rotation menu, it closes and doesn't block the image editing canvas. Follow up to [56239], [55919].

Props nithi22, deepakvijayan, dharm1025, faisal03.
Fixes #58756.
Built from https://develop.svn.wordpress.org/trunk@56652


git-svn-id: http://core.svn.wordpress.org/trunk@56164 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2023-09-21 17:49:18 +00:00
parent cd11ddbac1
commit 665928659b
4 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
wp-admin/includes/image-edit.php
View File

@ -63,7 +63,7 @@ function wp_image_editor( $post_id, $msg = false ) {
<button type="button" onclick="imageEdit.toggleCropTool( <?php echo "$post_id, '$nonce'"; ?>, this );" aria-expanded="false" aria-controls="imgedit-crop" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
<button type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php esc_html_e( 'Scale' ); ?></button>
<div class="imgedit-rotate-menu-container">
<button type="button" aria-controls="imgedit-rotate-menu" class="imgedit-rotate button" aria-expanded="false" onclick="imageEdit.togglePopup(this)"><?php esc_html_e( 'Image Rotation' ); ?></button>
<button type="button" aria-controls="imgedit-rotate-menu" class="imgedit-rotate button" aria-expanded="false" onclick="imageEdit.togglePopup(this)" onblur="imageEdit.monitorPopup(this)"><?php esc_html_e( 'Image Rotation' ); ?></button>
<div id="imgedit-rotate-menu" class="imgedit-popup-menu">
<?php
// On some setups GD library does not provide imagerotate() - Ticket #11536.
@ -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)"><?php esc_html_e( 'Rotate 90° left' ); ?></button>
<button type="button" class="imgedit-rright button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 90° right' ); ?></button>
<button type="button" class="imgedit-rfull button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(180, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 180°' ); ?></button>
<button type="button" class="imgedit-rleft button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup(this)"><?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(this)"><?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(this)"><?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)" 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)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
<button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup(this)" 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(this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
<?php echo $note_no_rotate; ?>
</div>
</div>

31
wp-admin/js/image-edit.js
View File

@ -244,6 +244,37 @@
return false;
},
/**
* Observes whether the popup should remain open based on focus position.
*
* @since 6.4.0
*
* @memberof imageEdit
*
* @param {HTMLElement} el The activated control element.
*
* @return {boolean} Always returns false.
*/
monitorPopup : function(el) {
var $el = $( el );
var $parent = document.querySelector( '.imgedit-rotate-menu-container' );
var $toggle = document.querySelector( '.imgedit-rotate-menu-container .imgedit-rotate' );
setTimeout( function() {
var $focused = document.activeElement;
var $contains = $parent.contains( $focused );
// If $focused is defined and not inside the menu container, close the popup.
if ( $focused && ! $contains ) {
if ( 'true' === $toggle.getAttribute( 'aria-expanded' ) ) {
imageEdit.togglePopup( $toggle );
}
}
}, 100 );
return false;
},
/**
* Navigate popup menu by arrow keys.
*

2
wp-admin/js/image-edit.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

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