WordPress.org

Make WordPress Core

Changeset 27942


Ignore:
Timestamp:
04/04/2014 01:48:24 AM (6 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/media-models.js

    r27918 r27942  
    370370
    371371            this.setLinkTypeFromUrl();
    372 
    373             this.set( 'aspectRatio', attributes.customWidth / attributes.customHeight );
     372            this.setAspectRatio();
     373
    374374            this.set( 'originalUrl', attributes.url );
    375375        },
     
    377377        bindAttachmentListeners: function() {
    378378            this.listenTo( this.attachment, 'sync', this.setLinkTypeFromUrl );
     379            this.listenTo( this.attachment, 'sync', this.setAspectRatio );
    379380            this.listenTo( this.attachment, 'change', this.updateSize );
    380381        },
     
    467468            this.set( 'width', size.width );
    468469            this.set( 'height', size.height );
     470        },
     471
     472        setAspectRatio: function() {
     473            var full;
     474
     475            if ( this.attachment ) {
     476                full = this.attachment.get( 'sizes' ).full;
     477
     478                if ( full ) {
     479                    this.set( 'aspectRatio', full.width / full.height );
     480                    return;
     481                }
     482            }
     483
     484            this.set( 'aspectRatio', this.get( 'customWidth' ) / this.get( 'customHeight' ) );
    469485        }
    470486    });
  • trunk/src/wp-includes/js/media-views.js

    r27918 r27942  
    60616061            'click .replace-attachment': 'replaceAttachment',
    60626062            'click .advanced-toggle': 'toggleAdvanced',
    6063             'change [data-setting="customWidth"]': 'syncCustomSize',
    6064             'change [data-setting="customHeight"]': 'syncCustomSize',
    6065             'keyup [data-setting="customWidth"]': 'syncCustomSize',
    6066             'keyup [data-setting="customHeight"]': 'syncCustomSize'
     6063            'change [data-setting="customWidth"]': 'onCustomSize',
     6064            'change [data-setting="customHeight"]': 'onCustomSize',
     6065            'keyup [data-setting="customWidth"]': 'onCustomSize',
     6066            'keyup [data-setting="customHeight"]': 'onCustomSize'
    60676067        } ),
    60686068        initialize: function() {
     
    61376137        },
    61386138
    6139         syncCustomSize: function( event ) {
     6139        onCustomSize: function( event ) {
    61406140            var dimension = $( event.target ).data('setting'),
     6141                num = $( event.target ).val(),
    61416142                value;
    61426143
     6144            // Ignore bogus input
     6145            if ( ! /^\d+/.test( num ) || parseInt( num, 10 ) < 1 ) {
     6146                event.preventDefault();
     6147                return;
     6148            }
     6149
    61436150            if ( dimension === 'customWidth' ) {
    6144                 value = Math.round( 1 / this.model.get( 'aspectRatio' ) * $( event.target ).val() );
     6151                value = Math.round( 1 / this.model.get( 'aspectRatio' ) * num );
    61456152                this.model.set( 'customHeight', value, { silent: true } );
    61466153                this.$( '[data-setting="customHeight"]' ).val( value );
    61476154            } else {
    6148                 value = Math.round( this.model.get( 'aspectRatio' ) * $( event.target ).val() );
     6155                value = Math.round( this.model.get( 'aspectRatio' ) * num );
     6156                this.model.set( 'customWidth', value, { silent: true  } );
    61496157                this.$( '[data-setting="customWidth"]' ).val( value );
    6150                 this.model.set( 'customWidth', value, { silent: true } );
     6158
    61516159            }
    61526160        },
  • trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    r27918 r27942  
    116116    function extractImageData( imageNode ) {
    117117        var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
    118             dom = editor.dom;
     118            dom = editor.dom,
     119            isIntRegExp = /^\d+$/;
    119120
    120121        // default attributes
    121122        metadata = {
    122123            attachment_id: false,
    123             url: false,
    124             height: '',
    125             width: '',
    126             customWidth: '',
    127             customHeight: '',
    128124            size: 'custom',
    129125            caption: '',
    130             alt: '',
    131126            align: 'none',
    132127            extraClasses: '',
     
    142137        metadata.alt = dom.getAttrib( imageNode, 'alt' );
    143138        metadata.title = dom.getAttrib( imageNode, 'title' );
    144         width = dom.getAttrib( imageNode, 'width' ) || imageNode.width;
    145         height = dom.getAttrib( imageNode, 'height' ) || imageNode.height;
    146         metadata.width = parseInt( width, 10 );
    147         metadata.height = parseInt( height, 10 );
    148         metadata.customWidth = metadata.width;
    149         metadata.customHeight = metadata.height;
     139
     140        width = dom.getAttrib( imageNode, 'width' );
     141        height = dom.getAttrib( imageNode, 'height' );
     142
     143        if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {
     144            width = imageNode.naturalWidth || imageNode.width;
     145        }
     146
     147        if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {
     148            height = imageNode.naturalHeight || imageNode.height;
     149        }
     150
     151        metadata.customWidth = metadata.width = width;
     152        metadata.customHeight = metadata.height = height;
    150153
    151154        classes = tinymce.explode( imageNode.className, ' ' );
Note: See TracChangeset for help on using the changeset viewer.