WordPress.org
Get WordPress

Make WordPress Core

Changeset 27918


Ignore:
Timestamp:
04/03/2014 03:20:40 AM (13 years ago)
Author:
azaozz
Message:

Edit Image modal:

  • Fix issue with adding a link to an image that didn't have one previously.
  • Adjust the look-and-feel of the advance options toggle so that it becomes a section heading that can be open/closed.
  • Add a Custom Size option to the size drop-down that reveals fields for soft-resizing the image inserted into the post.

Props gcorne, and props sdasse for the design help, see #27366

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/themes.css

    r27896 r27918  
    12841284        background: #fff;
    12851285        border: 1px solid #e5e5e5;
     1286        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    12861287        box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    12871288        font-size: 11px;

  • trunk/src/wp-includes/css/media-views.css

    r27898 r27918  
    16411641
    16421642.image-details .advanced-toggle {
    1643         font-style: italic;
    16441643        color: #666;
    16451644        text-decoration: none;
    1646         margin: 20px;
    16471645        display: block;
    16481646}
    … …  
    16641662}
    16651663
     1664.image-details .embed-media-settings .size {
     1665        margin-bottom: 4px;
     1666}
     1667
     1668.image-details .custom-size span {
     1669        display: block;
     1670}
     1671
     1672.image-details .custom-size label {
     1673        display: block;
     1674        float: left;
     1675}
     1676
     1677.image-details .custom-size span small {
     1678        color: #999;
     1679        font-size: inherit;
     1680}
     1681
     1682.image-details .custom-size input {
     1683        width: 5em;
     1684}
     1685
     1686.image-details .custom-size .sep {
     1687        float: left;
     1688        margin: 26px 6px 0 6px;
     1689}
     1690
     1691.image-details .custom-size::after {
     1692    content: '';
     1693        display: table;
     1694    clear: both;
     1695}
     1696
    16661697.media-embed .thumbnail {
    16671698        max-width: 100%;
    … …  
    17251756
    17261757.image-details .embed-media-settings .setting input.link-to-custom,
    1727 .image-details .embed-media-settings .link-target {
     1758.image-details .embed-media-settings .link-target,
     1759.image-details .embed-media-settings .custom-size {
    17281760        margin-left: 27%;
    17291761        width: 70%;
    … …  
    20042036        }
    20052037
    2006         .image-details .link-target {
    2007                 width: 100%;
     2038        .image-details .embed-media-settings .custom-size {
     2039                margin-left: 20px;
    20082040        }
    20092041

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

    r27687 r27918  
    370370
    371371                        this.setLinkTypeFromUrl();
     372
     373                        this.set( 'aspectRatio', attributes.customWidth / attributes.customHeight );
     374                        this.set( 'originalUrl', attributes.url );
    372375                },
    373376
    … …  
    445448
    446449                        if ( ! this.attachment ) {
     450                                return;
     451                        }
     452
     453                        if ( this.get( 'size' ) === 'custom' ) {
     454                                this.set( 'width', this.get( 'customWidth' ) );
     455                                this.set( 'height', this.get( 'customHeight' ) );
     456                                this.set( 'url', this.get( 'originalUrl' ) );
    447457                                return;
    448458                        }

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

    r27901 r27918  
    60606060                        'click .edit-attachment': 'editAttachment',
    60616061                        'click .replace-attachment': 'replaceAttachment',
    6062                         'click .advanced-toggle': 'toggleAdvanced'
     6062                        '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'
    60636067                } ),
    60646068                initialize: function() {
    … …  
    60676071                        this.listenTo( this.model, 'change:url', this.updateUrl );
    60686072                        this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
     6073                        this.listenTo( this.model, 'change:size', this.toggleCustomSize );
    60696074                        media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    60706075                },
    … …  
    61246129                },
    61256130
     6131                toggleCustomSize: function() {
     6132                        if ( this.model.get( 'size' ) !== 'custom' ) {
     6133                                this.$( '.custom-size' ).addClass('hidden');
     6134                        } else {
     6135                                this.$( '.custom-size' ).removeClass('hidden');
     6136                        }
     6137                },
     6138
     6139                syncCustomSize: function( event ) {
     6140                        var dimension = $( event.target ).data('setting'),
     6141                                value;
     6142
     6143                        if ( dimension === 'customWidth' ) {
     6144                                value = Math.round( 1 / this.model.get( 'aspectRatio' ) * $( event.target ).val() );
     6145                                this.model.set( 'customHeight', value, { silent: true } );
     6146                                this.$( '[data-setting="customHeight"]' ).val( value );
     6147                        } else {
     6148                                value = Math.round( this.model.get( 'aspectRatio' ) * $( event.target ).val() );
     6149                                this.$( '[data-setting="customWidth"]' ).val( value );
     6150                                this.model.set( 'customWidth', value, { silent: true } );
     6151                        }
     6152                },
     6153
    61266154                toggleAdvanced: function( event ) {
    61276155                        var $advanced = $( event.target ).closest( '.advanced' );

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

    r27898 r27918  
    124124                        height: '',
    125125                        width: '',
    126                         size: false,
     126                        customWidth: '',
     127                        customHeight: '',
     128                        size: 'custom',
    127129                        caption: '',
    128130                        alt: '',
    … …  
    140142                metadata.alt = dom.getAttrib( imageNode, 'alt' );
    141143                metadata.title = dom.getAttrib( imageNode, 'title' );
    142 
    143144                width = dom.getAttrib( imageNode, 'width' ) || imageNode.width;
    144145                height = dom.getAttrib( imageNode, 'height' ) || imageNode.height;
    145 
    146146                metadata.width = parseInt( width, 10 );
    147147                metadata.height = parseInt( height, 10 );
     148                metadata.customWidth = metadata.width;
     149                metadata.customHeight = metadata.height;
    148150
    149151                classes = tinymce.explode( imageNode.className, ' ' );
    … …  
    200202        }
    201203
     204        function hasTextContent( node ) {
     205                return node && !! ( node.textContent || node.innerText );
     206        }
     207
    202208        function updateImage( imageNode, imageData ) {
    203                 var classes, className, width, node, html, parent, wrap,
    204                         captionNode, dd, dl, id, attrs, linkAttrs,
     209                var classes, className, node, html, parent, wrap, linkNode,
     210                        captionNode, dd, dl, id, attrs, linkAttrs, width, height,
    205211                        dom = editor.dom;
    206212
    … …  
    217223                if ( imageData.attachment_id ) {
    218224                        classes.push( 'wp-image-' + imageData.attachment_id );
    219                         if ( imageData.size ) {
     225                        if ( imageData.size && imageData.size !== 'custom' ) {
    220226                                classes.push( 'size-' + imageData.size );
    221227                        }
     228                }
     229
     230                width = imageData.width;
     231                height = imageData.height;
     232
     233                if ( imageData.size === 'custom' ) {
     234                        width = imageData.customWidth;
     235                        height = imageData.customHeight;
    222236                }
    223237
    224238                attrs = {
    225239                        src: imageData.url,
    226                         width: imageData.width || null,
    227                         height: imageData.height || null,
     240                        width: width || null,
     241                        height: height || null,
    228242                        alt: imageData.alt,
    229243                        title: imageData.title || null,
    … …  
    240254                };
    241255
    242                 if ( imageNode.parentNode.nodeName === 'A' ) {
     256                if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
     257                        // Update or remove an existing link wrapped around the image
    243258                        if ( imageData.linkUrl ) {
    244259                                dom.setAttribs( imageNode.parentNode, linkAttrs );
    … …  
    247262                        }
    248263                } else if ( imageData.linkUrl ) {
    249                         html = dom.createHTML( 'a', linkAttrs, dom.getOuterHTML( imageNode ) );
    250                         dom.outerHTML( imageNode, html );
     264                        if ( linkNode = dom.getParent( imageNode, 'a' ) ) {
     265                                // The image is inside a link together with other nodes,
     266                                // or is nested in another node, move it out
     267                                dom.insertAfter( imageNode, linkNode );
     268                        }
     269
     270                        // Add link wrapped around the image
     271                        linkNode = dom.create( 'a', linkAttrs );
     272                        imageNode.parentNode.insertBefore( linkNode, imageNode );
     273                        linkNode.appendChild( imageNode );
    251274                }
    252275
    253276                captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
    254277
    255                 if ( imageNode.parentNode.nodeName === 'A' ) {
     278                if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
    256279                        node = imageNode.parentNode;
    257280                } else {
    … …  
    260283
    261284                if ( imageData.caption ) {
    262                         width = parseInt( imageData.width, 10 );
     285
    263286                        id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
    264                         className = 'wp-caption align' + imageData.align;
     287                        className = 'wp-caption align' + ( imageData.align || 'none' );
    265288
    266289                        if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
     290                                width = parseInt( width, 10 );
    267291                                width += 10;
    268292                        }
    … …  
    313337
    314338                editor.nodeChanged();
    315                 // refresh the toolbar
     339                // Refresh the toolbar
    316340                addToolbar( imageNode );
    317341        }
    … …  
    324348                        return;
    325349                }
    326 
    327                 editor.undoManager.add();
    328350
    329351                frame = wp.media({
    … …  
    334356
    335357                callback = function( imageData ) {
    336                         updateImage( img, imageData );
    337358                        editor.focus();
     359                        editor.undoManager.transact( function() {
     360                                updateImage( img, imageData );
     361                        } );
    338362                        frame.detach();
    339363                };

  • trunk/src/wp-includes/media-template.php

    r27899 r27918  
    690690                                        <# if ( data.attachment ) { #>
    691691                                                <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
    692                                                         <label class="setting">
     692                                                        <label class="setting size">
    693693                                                                <span><?php _e('Size'); ?></span>
    694694                                                                <select class="size" name="size"
    … …  
    710710                                                                                var size = data.sizes['<?php echo esc_js( $value ); ?>'];
    711711                                                                                if ( size ) { #>
    712                                                                                         <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
     712                                                                                        <option value="<?php echo esc_attr( $value ); ?>">
    713713                                                                                                <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
    714714                                                                                        </option>
    715715                                                                                <# } #>
    716716                                                                        <?php endforeach; ?>
     717                                                                        <option value="<?php echo esc_attr( 'custom' ); ?>">
     718                                                                                <?php _e( 'Custom Size' ); ?>
     719                                                                        </option>
    717720                                                                </select>
    718721                                                        </label>
    719722                                                <# } #>
     723                                                        <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
     724                                                                <label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
     725                                                        </div>
    720726                                        <# } #>
    721727
    … …  
    745751                                        </div>
    746752                                        <div class="advanced">
    747                                                 <a class="advanced-toggle" href="#"><?php _e('Show advanced options'); ?></a>
     753                                                <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
    748754                                                <div class="hidden">
    749755                                                        <label class="setting title-text">
Note: See TracChangeset for help on using the changeset viewer.