Media: Improve form validation errors handling when editing images.
* 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
parent
961dd36801
commit
727b070c60
|
|
@ -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">×</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">×</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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue