Changeset 27918

Timestamp:

04/03/2014 03:20:40 AM (11 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:

• wp-admin/css/themes.css (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (4 diffs)
• wp-includes/js/media-models.js (modified) (2 diffs)
• wp-includes/js/media-views.js (modified) (3 diffs)
• wp-includes/js/tinymce/plugins/wpeditimage/plugin.js (modified) (10 diffs)
• wp-includes/media-template.php (modified) (3 diffs)

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

@@ -1284 +1284 @@
     background: #fff;
     border: 1px solid #e5e5e5;
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     font-size: 11px;

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

@@ -1641 +1641 @@
 
 .image-details .advanced-toggle {
-    font-style: italic;
     color: #666;
     text-decoration: none;
-    margin: 20px;
     display: block;
 }
@@ -1664 +1662 @@
 }
 
+.image-details .embed-media-settings .size {
+    margin-bottom: 4px;
+}
+
+.image-details .custom-size span {
+    display: block;
+}
+
+.image-details .custom-size label {
+    display: block;
+    float: left;
+}
+
+.image-details .custom-size span small {
+    color: #999;
+    font-size: inherit;
+}
+
+.image-details .custom-size input {
+    width: 5em;
+}
+
+.image-details .custom-size .sep {
+    float: left;
+    margin: 26px 6px 0 6px;
+}
+
+.image-details .custom-size::after {
+    content: '';
+    display: table;
+    clear: both;
+}
+
 .media-embed .thumbnail {
     max-width: 100%;
@@ -1725 +1756 @@
 
 .image-details .embed-media-settings .setting input.link-to-custom,
-.image-details .embed-media-settings .link-target {
+.image-details .embed-media-settings .link-target,
+.image-details .embed-media-settings .custom-size {
     margin-left: 27%;
     width: 70%;
@@ -2004 +2036 @@
     }
 
-    .image-details .link-target {
-        width: 100%;
+    .image-details .embed-media-settings .custom-size {
+        margin-left: 20px;
     }
 

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

@@ -370 +370 @@
 
             this.setLinkTypeFromUrl();
+
+            this.set( 'aspectRatio', attributes.customWidth / attributes.customHeight );
+            this.set( 'originalUrl', attributes.url );
         },
 
@@ -445 +448 @@
 
             if ( ! this.attachment ) {
+                return;
+            }
+
+            if ( this.get( 'size' ) === 'custom' ) {
+                this.set( 'width', this.get( 'customWidth' ) );
+                this.set( 'height', this.get( 'customHeight' ) );
+                this.set( 'url', this.get( 'originalUrl' ) );
                 return;
             }

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

@@ -6060 +6060 @@
             'click .edit-attachment': 'editAttachment',
             'click .replace-attachment': 'replaceAttachment',
-            'click .advanced-toggle': 'toggleAdvanced'
+            'click .advanced-toggle': 'toggleAdvanced',
+            'change [data-setting="customWidth"]': 'syncCustomSize',
+            'change [data-setting="customHeight"]': 'syncCustomSize',
+            'keyup [data-setting="customWidth"]': 'syncCustomSize',
+            'keyup [data-setting="customHeight"]': 'syncCustomSize'
         } ),
         initialize: function() {
@@ -6067 +6071 @@
             this.listenTo( this.model, 'change:url', this.updateUrl );
             this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
+            this.listenTo( this.model, 'change:size', this.toggleCustomSize );
             media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
         },
@@ -6124 +6129 @@
         },
 
+        toggleCustomSize: function() {
+            if ( this.model.get( 'size' ) !== 'custom' ) {
+                this.$( '.custom-size' ).addClass('hidden');
+            } else {
+                this.$( '.custom-size' ).removeClass('hidden');
+            }
+        },
+
+        syncCustomSize: function( event ) {
+            var dimension = $( event.target ).data('setting'),
+                value;
+
+            if ( dimension === 'customWidth' ) {
+                value = Math.round( 1 / this.model.get( 'aspectRatio' ) * $( event.target ).val() );
+                this.model.set( 'customHeight', value, { silent: true } );
+                this.$( '[data-setting="customHeight"]' ).val( value );
+            } else {
+                value = Math.round( this.model.get( 'aspectRatio' ) * $( event.target ).val() );
+                this.$( '[data-setting="customWidth"]' ).val( value );
+                this.model.set( 'customWidth', value, { silent: true } );
+            }
+        },
+
         toggleAdvanced: function( event ) {
             var $advanced = $( event.target ).closest( '.advanced' );

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

@@ -124 +124 @@
             height: '',
             width: '',
-            size: false,
+            customWidth: '',
+            customHeight: '',
+            size: 'custom',
             caption: '',
             alt: '',
@@ -140 +142 @@
         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;
 
         classes = tinymce.explode( imageNode.className, ' ' );
@@ -200 +202 @@
     }
 
+    function hasTextContent( node ) {
+        return node && !! ( node.textContent || node.innerText );
+    }
+
     function updateImage( imageNode, imageData ) {
-        var classes, className, width, node, html, parent, wrap,
-            captionNode, dd, dl, id, attrs, linkAttrs,
+        var classes, className, node, html, parent, wrap, linkNode,
+            captionNode, dd, dl, id, attrs, linkAttrs, width, height,
             dom = editor.dom;
 
@@ -217 +223 @@
         if ( imageData.attachment_id ) {
             classes.push( 'wp-image-' + imageData.attachment_id );
-            if ( imageData.size ) {
+            if ( imageData.size && imageData.size !== 'custom' ) {
                 classes.push( 'size-' + imageData.size );
             }
+        }
+
+        width = imageData.width;
+        height = imageData.height;
+
+        if ( imageData.size === 'custom' ) {
+            width = imageData.customWidth;
+            height = imageData.customHeight;
         }
 
         attrs = {
             src: imageData.url,
-            width: imageData.width || null,
-            height: imageData.height || null,
+            width: width || null,
+            height: height || null,
             alt: imageData.alt,
             title: imageData.title || null,
@@ -240 +254 @@
         };
 
-        if ( imageNode.parentNode.nodeName === 'A' ) {
+        if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
+            // Update or remove an existing link wrapped around the image
             if ( imageData.linkUrl ) {
                 dom.setAttribs( imageNode.parentNode, linkAttrs );
@@ -247 +262 @@
             }
         } else if ( imageData.linkUrl ) {
-            html = dom.createHTML( 'a', linkAttrs, dom.getOuterHTML( imageNode ) );
-            dom.outerHTML( imageNode, html );
+            if ( linkNode = dom.getParent( imageNode, 'a' ) ) {
+                // The image is inside a link together with other nodes,
+                // or is nested in another node, move it out
+                dom.insertAfter( imageNode, linkNode );
+            }
+
+            // Add link wrapped around the image
+            linkNode = dom.create( 'a', linkAttrs );
+            imageNode.parentNode.insertBefore( linkNode, imageNode );
+            linkNode.appendChild( imageNode );
         }
 
         captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
 
-        if ( imageNode.parentNode.nodeName === 'A' ) {
+        if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
             node = imageNode.parentNode;
         } else {
@@ -260 +283 @@
 
         if ( imageData.caption ) {
-            width = parseInt( imageData.width, 10 );
+
             id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
-            className = 'wp-caption align' + imageData.align;
+            className = 'wp-caption align' + ( imageData.align || 'none' );
 
             if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+                width = parseInt( width, 10 );
                 width += 10;
             }
@@ -313 +337 @@
 
         editor.nodeChanged();
-        // refresh the toolbar
+        // Refresh the toolbar
         addToolbar( imageNode );
     }
@@ -324 +348 @@
             return;
         }
-
-        editor.undoManager.add();
 
         frame = wp.media({
@@ -334 +356 @@
 
         callback = function( imageData ) {
-            updateImage( img, imageData );
             editor.focus();
+            editor.undoManager.transact( function() {
+                updateImage( img, imageData );
+            } );
             frame.detach();
         };

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

@@ -690 +690 @@
                     <# if ( data.attachment ) { #>
                         <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
-                            <label class="setting">
+                            <label class="setting size">
                                 <span><?php _e('Size'); ?></span>
                                 <select class="size" name="size"
@@ -710 +710 @@
                                         var size = data.sizes['<?php echo esc_js( $value ); ?>'];
                                         if ( size ) { #>
-                                            <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
+                                            <option value="<?php echo esc_attr( $value ); ?>">
                                                 <?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
                                             </option>
                                         <# } #>
                                     <?php endforeach; ?>
+                                    <option value="<?php echo esc_attr( 'custom' ); ?>">
+                                        <?php _e( 'Custom Size' ); ?>
+                                    </option>
                                 </select>
                             </label>
                         <# } #>
+                            <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
+                                <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>
+                            </div>
                     <# } #>
 
@@ -745 +751 @@
                     </div>
                     <div class="advanced">
-                        <a class="advanced-toggle" href="#"><?php _e('Show advanced options'); ?></a>
+                        <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
                         <div class="hidden">
                             <label class="setting title-text">