sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Media: Improve form validation errors handling when editing images.

Browse Source 
* Use the same check for a numeric value used on the crop fields on all the other fields: don't display "NaN", just empty the field.
* Remove the inline script that runs the initialization of the image editor and call it after the editor UI is fully ready.

Props afercia.
Fixes #36316.

git-svn-id: https://develop.svn.wordpress.org/trunk@37966 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling 2016-07-05 13:36:59 +00:00
parent 961dd36801
commit 727b070c60
2 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/wp-admin/includes/image-edit.php
View File

@ -60,11 +60,11 @@ function wp_image_editor($post_id, $msg = false) {
<legend><?php _e( 'New dimensions:' ); ?></legend>
<div class="nowrap">
<label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
<input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
<input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
</label>
<span class="imgedit-separator">&times;</span>
<label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
<input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
<input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
</label>
<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
<input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
@ -116,11 +116,11 @@ function wp_image_editor($post_id, $msg = false) {
<legend><?php _e( 'Aspect ratio:' ); ?></legend>
<div class="nowrap">
<label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
<input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
<input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
</label>
<span class="imgedit-separator">:</span>
<label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
</label>
</div>
</fieldset>
@ -129,11 +129,11 @@ function wp_image_editor($post_id, $msg = false) {
<legend><?php _e( 'Selection:' ); ?></legend>
<div class="nowrap">
<label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
<input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
<input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
</label>
<span class="imgedit-separator">&times;</span>
<label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
</label>
</div>
</fieldset>
@ -224,7 +224,6 @@ function wp_image_editor($post_id, $msg = false) {
</div>
<div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
<script type="text/javascript">jQuery( function() { imageEdit.init(<?php echo $post_id; ?>); });</script>
<div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e("There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor."); ?></div>
</div>
<?php

28
src/wp-admin/js/image-edit.js
View File

@ -8,6 +8,10 @@ var imageEdit = window.imageEdit = {
_view : false,
intval : function(f) {
/*
* Bitwise OR operator: one of the obscure ways to truncate floating point figures,
* worth reminding JavaScript doesn't have a distinct "integer" type.
*/
return f | 0;
},
@ -79,10 +83,14 @@ var imageEdit = window.imageEdit = {
return $('input[name="imgedit-target-' + postid + '"]:checked', '#imgedit-save-target-' + postid).val() || 'full';
},
scaleChanged : function(postid, x) {
scaleChanged : function( postid, x, el ) {
var w = $('#imgedit-scale-width-' + postid), h = $('#imgedit-scale-height-' + postid),
warn = $('#imgedit-scale-warn-' + postid), w1 = '', h1 = '';
if ( false === this.validateNumeric( el ) ) {
return;
}
if ( x ) {
h1 = ( w.val() !== '' ) ? Math.round( w.val() / this.hold.xy_ratio ) : '';
h.val( h1 );
@ -361,6 +369,8 @@ var imageEdit = window.imageEdit = {
btn.removeClass( 'button-activated' );
spin.removeClass( 'is-active' );
});
// Initialise the Image Editor now that everything is ready.
imageEdit.init( postid );
});
return dfd;
@ -586,12 +596,16 @@ var imageEdit = window.imageEdit = {
});
},
setNumSelection : function(postid) {
setNumSelection : function( postid, el ) {
var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
x = this.intval( elX.val() ), y = this.intval( elY.val() ),
img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
sizer = this.hold.sizer, x1, y1, x2, y2, ias = this.iasapi;
if ( false === this.validateNumeric( el ) ) {
return;
}
if ( x < 1 ) {
elX.val('');
return false;
@ -650,8 +664,7 @@ var imageEdit = window.imageEdit = {
y = this.intval( $('#imgedit-crop-height-' + postid).val() ),
h = $('#image-preview-' + postid).height();
if ( !this.intval( $(el).val() ) ) {
$(el).val('');
if ( false === this.validateNumeric( el ) ) {
return;
}
@ -676,6 +689,13 @@ var imageEdit = window.imageEdit = {
this.iasapi.update();
}
}
},
validateNumeric: function( el ) {
if ( ! this.intval( $( el ).val() ) ) {
$( el ).val( '' );
return false;
}
}
};
})(jQuery);