diff --git a/src/wp-includes/js/media-models.js b/src/wp-includes/js/media-models.js index 9aa8031d2f..21b42b4e01 100644 --- a/src/wp-includes/js/media-models.js +++ b/src/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' ) ); } }); diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 377f020ea1..6a01aa63ee 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/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() ); + value = Math.round( this.model.get( 'aspectRatio' ) * num ); + this.model.set( 'customWidth', value, { silent: true } ); this.$( '[data-setting="customWidth"]' ).val( value ); - this.model.set( 'customWidth', value, { silent: true } ); + } }, diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js index b7dcbae59f..a6c350264a 100644 --- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/src/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 = [];