Changeset 27942

Timestamp:

04/04/2014 01:48:24 AM (11 years ago)

Author:

azaozz

Message:

Edit image modal:

• Make the calculation of the aspect ratio more robust.
• Better getting of the image height and width.

Props gcorne, see #27366

Location:

trunk/src/wp-includes/js

Files:

• media-models.js (modified) (3 diffs)
• media-views.js (modified) (2 diffs)
• tinymce/plugins/wpeditimage/plugin.js (modified) (2 diffs)

trunk/src/wp-includes/js/media-models.js

@@ -370 +370 @@
 
             this.setLinkTypeFromUrl();
-
-            this.set( 'aspectRatio', attributes.customWidth / attributes.customHeight );
+            this.setAspectRatio();
+
             this.set( 'originalUrl', attributes.url );
         },
@@ -377 +377 @@
         bindAttachmentListeners: function() {
             this.listenTo( this.attachment, 'sync', this.setLinkTypeFromUrl );
+            this.listenTo( this.attachment, 'sync', this.setAspectRatio );
             this.listenTo( this.attachment, 'change', this.updateSize );
         },
@@ -467 +468 @@
             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' ) );
         }
     });

trunk/src/wp-includes/js/media-views.js

@@ -6061 +6061 @@
             '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() {
@@ -6137 +6137 @@
         },
 
-        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 } );
+
             }
         },

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

@@ -116 +116 @@
     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: '',
@@ -142 +137 @@
         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, ' ' );