WordPress.org
Get WordPress

Make WordPress Core

Ticket #27366: 27366.10.patch

File 27366.10.patch, 11.7 KB (added by azaozz, 11 years ago)

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

     
    12831283.more-filters-container .filtering-by .tag {
    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;
    12881289        margin: 0 5px;

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

     
    16401640}
    16411641
    16421642.image-details .advanced-toggle {
    1643         font-style: italic;
    16441643        color: #666;
    16451644        text-decoration: none;
    1646         margin: 20px;
    16471645        display: block;
    16481646}
    16491647
    … …  
    16631661        margin-top: 0;
    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%;
    16681699        max-height: 200px;
    … …  
    17241755}
    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%;
    17301762}
    … …  
    20032035                margin-left: 0;
    20042036        }
    20052037
    2006         .image-details .link-target {
    2007                 width: 100%;
     2038        .image-details .embed-media-settings .custom-size {
     2039                margin-left: 20px;
    20082040        }
    20092041
    20102042        .media-selection {

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

     
    369369                        this.on( 'change:size', this.updateSize, this );
    370370
    371371                        this.setLinkTypeFromUrl();
     372
     373                        this.set( 'aspectRatio', attributes.customWidth / attributes.customHeight );
     374                        this.set( 'originalUrl', attributes.url );
    372375                },
    373376
    374377                bindAttachmentListeners: function() {
    … …  
    447450                                return;
    448451                        }
    449452
     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' ) );
     457                                return;
     458                        }
     459
    450460                        size = this.attachment.get( 'sizes' )[ this.get( 'size' ) ];
    451461
    452462                        if ( ! size ) {

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

     
    60596059                events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
    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() {
    60656069                        // used in AttachmentDisplay.prototype.updateLinkTo
    … …  
    60666070                        this.options.attachment = this.model.attachment;
    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                },
    60716076
    … …  
    61236128                        }
    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' );
    61286156                        event.preventDefault();

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

     
    123123                        url: false,
    124124                        height: '',
    125125                        width: '',
    126                         size: false,
     126                        customWidth: '',
     127                        customHeight: '',
     128                        size: 'custom',
    127129                        caption: '',
    128130                        alt: '',
    129131                        align: 'none',
    … …  
    139141                metadata.url = dom.getAttrib( imageNode, 'src' );
    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, ' ' );
    150152                extraClasses = [];
    … …  
    199201                return metadata;
    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
    207213                classes = tinymce.explode( imageData.extraClasses, ' ' );
    … …  
    216222
    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                        }
    222228                }
    223229
     230                width = imageData.width;
     231                height = imageData.height;
     232
     233                if ( imageData.size === 'custom' ) {
     234                        width = imageData.customWidth;
     235                        height = imageData.customHeight;
     236                }
     237
    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,
    230244                        'class': classes.join( ' ' ) || null
    … …  
    239253                        'class': imageData.linkClassName || 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 );
    245260                        } else {
    … …  
    246261                                dom.remove( imageNode.parentNode, true );
    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 {
    258281                        node = imageNode;
    … …  
    259282                }
    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                        }
    269293
    … …  
    312336                }
    313337
    314338                editor.nodeChanged();
    315                 // refresh the toolbar
     339                // Refresh the toolbar
    316340                addToolbar( imageNode );
    317341        }
    318342
    … …  
    324348                        return;
    325349                }
    326350
    327                 editor.undoManager.add();
    328 
    329351                frame = wp.media({
    330352                        frame: 'image',
    331353                        state: 'image-details',
    … …  
    333355                } );
    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                };
    340364

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

     
    689689
    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"
    695695                                                                        data-setting="size"
    … …  
    705705                                                                                'full'      => __('Full Size'),
    706706                                                                        ) );
    707707
     708
    708709                                                                        foreach ( $sizes as $value => $name ) : ?>
    709710                                                                                <#
    710711                                                                                var size = data.sizes['<?php echo esc_js( $value ); ?>'];
    711712                                                                                if ( size ) { #>
    712                                                                                         <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
     713                                                                                        <option value="<?php echo esc_attr( $value ); ?>">
    713714                                                                                                <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
    714715                                                                                        </option>
    715716                                                                                <# } #>
    716717                                                                        <?php endforeach; ?>
     718                                                                        <option value="<?php echo esc_attr( 'custom' ); ?>">
     719                                                                                <?php _e( 'Custom Size' ); ?>
     720                                                                        </option>
    717721                                                                </select>
    718722                                                        </label>
    719723                                                <# } #>
     724                                                        <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
     725                                                                <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>
     726                                                        </div>
    720727                                        <# } #>
    721728
    722729                                        <div class="setting link-to">
    … …  
    744751                                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
    745752                                        </div>
    746753                                        <div class="advanced">
    747                                                 <a class="advanced-toggle" href="#"><?php _e('Show advanced options'); ?></a>
     754                                                <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
    748755                                                <div class="hidden">
    749756                                                        <label class="setting title-text">
    750757                                                                <span><?php _e('Image Title Attribute'); ?></span>