WordPress.org

Make WordPress Core

Changeset 27918


Ignore:
Timestamp:
04/03/2014 03:20:40 AM (6 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.