Edit image modal:

- Make the calculation of the aspect ratio more robust.
- Better getting of the image height and width.
Props gcorne, see #27366
Built from https://develop.svn.wordpress.org/trunk@27942


git-svn-id: http://core.svn.wordpress.org/trunk@27772 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/media-models.js

@@ -369,13 +369,14 @@ window.wp = window.wp || {};
 			this.on( 'change:size', this.updateSize, this );
 
 			this.setLinkTypeFromUrl();
+			this.setAspectRatio();
 
-			this.set( 'aspectRatio', attributes.customWidth / attributes.customHeight );
 			this.set( 'originalUrl', attributes.url );
 		},
 
 		bindAttachmentListeners: function() {
 			this.listenTo( this.attachment, 'sync', this.setLinkTypeFromUrl );
+			this.listenTo( this.attachment, 'sync', this.setAspectRatio );
 			this.listenTo( this.attachment, 'change', this.updateSize );
 		},
 
@@ -466,6 +467,21 @@ window.wp = window.wp || {};
 			this.set( 'url', size.url );
 			this.set( 'width', size.width );
 			this.set( 'height', size.height );
+		},
+
+		setAspectRatio: function() {
+			var full;
+
+			if ( this.attachment ) {
+				full = this.attachment.get( 'sizes' ).full;
+
+				if ( full ) {
+					this.set( 'aspectRatio', full.width / full.height );
+					return;
+				}
+			}
+
+			this.set( 'aspectRatio', this.get( 'customWidth' ) / this.get( 'customHeight' ) );
 		}
 	});
 

wp-includes/js/media-views.js

@@ -6060,10 +6060,10 @@
 			'click .edit-attachment': 'editAttachment',
 			'click .replace-attachment': 'replaceAttachment',
 			'click .advanced-toggle': 'toggleAdvanced',
-			'change [data-setting="customWidth"]': 'syncCustomSize',
-			'change [data-setting="customHeight"]': 'syncCustomSize',
-			'keyup [data-setting="customWidth"]': 'syncCustomSize',
-			'keyup [data-setting="customHeight"]': 'syncCustomSize'
+			'change [data-setting="customWidth"]': 'onCustomSize',
+			'change [data-setting="customHeight"]': 'onCustomSize',
+			'keyup [data-setting="customWidth"]': 'onCustomSize',
+			'keyup [data-setting="customHeight"]': 'onCustomSize'
 		} ),
 		initialize: function() {
 			// used in AttachmentDisplay.prototype.updateLinkTo
@@ -6136,18 +6136,26 @@
 			}
 		},
 
-		syncCustomSize: function( event ) {
+		onCustomSize: function( event ) {
 			var dimension = $( event.target ).data('setting'),
+				num = $( event.target ).val(),
 				value;
 
+			// Ignore bogus input
+			if ( ! /^\d+/.test( num ) || parseInt( num, 10 ) < 1 ) {
+				event.preventDefault();
+				return;
+			}
+
 			if ( dimension === 'customWidth' ) {
-				value = Math.round( 1 / this.model.get( 'aspectRatio' ) * $( event.target ).val() );
+				value = Math.round( 1 / this.model.get( 'aspectRatio' ) * num );
 				this.model.set( 'customHeight', value, { silent: true } );
 				this.$( '[data-setting="customHeight"]' ).val( value );
 			} else {
-				value = Math.round( this.model.get( 'aspectRatio' ) * $( event.target ).val() );
-				this.$( '[data-setting="customWidth"]' ).val( value );
+				value = Math.round( this.model.get( 'aspectRatio' ) * num );
 				this.model.set( 'customWidth', value, { silent: true  } );
+				this.$( '[data-setting="customWidth"]' ).val( value );
+
 			}
 		},
 

wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -115,19 +115,14 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 
 	function extractImageData( imageNode ) {
 		var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
-			dom = editor.dom;
+			dom = editor.dom,
+			isIntRegExp = /^\d+$/;
 
 		// default attributes
 		metadata = {
 			attachment_id: false,
-			url: false,
-			height: '',
-			width: '',
-			customWidth: '',
-			customHeight: '',
 			size: 'custom',
 			caption: '',
-			alt: '',
 			align: 'none',
 			extraClasses: '',
 			link: false,
@@ -141,12 +136,20 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		metadata.url = dom.getAttrib( imageNode, 'src' );
 		metadata.alt = dom.getAttrib( imageNode, 'alt' );
 		metadata.title = dom.getAttrib( imageNode, 'title' );
-		width = dom.getAttrib( imageNode, 'width' ) || imageNode.width;
-		height = dom.getAttrib( imageNode, 'height' ) || imageNode.height;
-		metadata.width = parseInt( width, 10 );
-		metadata.height = parseInt( height, 10 );
-		metadata.customWidth = metadata.width;
-		metadata.customHeight = metadata.height;
+
+		width = dom.getAttrib( imageNode, 'width' );
+		height = dom.getAttrib( imageNode, 'height' );
+
+		if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {
+			width = imageNode.naturalWidth || imageNode.width;
+		}
+
+		if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {
+			height = imageNode.naturalHeight || imageNode.height;
+		}
+
+		metadata.customWidth = metadata.width = width;
+		metadata.customHeight = metadata.height = height;
 
 		classes = tinymce.explode( imageNode.className, ' ' );
 		extraClasses = [];