From 727b070c60009db8d30d35d2f4d20878b8ba414d Mon Sep 17 00:00:00 2001
From: Dominik Schilling <ocean90@git.wordpress.org>
Date: Tue, 5 Jul 2016 13:36:59 +0000
Subject: [PATCH] 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
---
 src/wp-admin/includes/image-edit.php | 13 ++++++-------
 src/wp-admin/js/image-edit.js        | 28 ++++++++++++++++++++++++----
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
index 99e1c400ff..5f5dc878ec 100644
--- a/src/wp-admin/includes/image-edit.php
+++ b/src/wp-admin/includes/image-edit.php
@@ -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
diff --git a/src/wp-admin/js/image-edit.js b/src/wp-admin/js/image-edit.js
index ae75992301..6af28dc84f 100644
--- a/src/wp-admin/js/image-edit.js
+++ b/src/wp-admin/js/image-edit.js
@@ -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);