Ticket #24409: 24409-01.patch

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

@@ -2 +2 @@
 window.wp = window.wp || {};
 
 (function($){
-        var Attachment, Attachments, Query, compare, l10n, media;
+        var Attachment, Attachments, Query, PostImage, compare, l10n, media;
 
         /**
          * wp.media( attributes )
@@ -30 +30 @@
                         frame = new MediaFrame.Select( attributes );
                 } else if ( 'post' === attributes.frame && MediaFrame.Post ) {
                         frame = new MediaFrame.Post( attributes );
+                } else if ( 'image' === attributes.frame && MediaFrame.ImageDetails ) {
+                        frame = new MediaFrame.ImageDetails( attributes );
                 }
 
                 delete attributes.frame;
@@ -326 +328 @@
         });
 
         /**
+         * wp.media.model.Attachment
+         *
+         * @constructor
+         * @augments Backbone.Model
+         *
+         **/
+        PostImage = media.model.PostImage = Backbone.Model.extend({
+
+                initialize: function( attributes ) {
+                        this.attachment = false;
+
+                        if ( attributes.attachment_id ) {
+                                this.attachment = media.model.Attachment.get( attributes.attachment_id );
+                                this.dfd = this.attachment.fetch();
+                                this.listenTo( this.attachment, 'sync', this.setLinkTypeFromUrl );
+                        }
+
+                        // keep url in sync with changes to the type of link
+                        this.on( 'change:link', this.updateLinkUrl, this );
+                        this.on( 'change:size', this.updateSize, this );
+
+                },
+
+                setLinkTypeFromUrl: function() {
+                        var linkUrl = this.get( 'linkUrl' ),
+                                type;
+
+                        if ( ! linkUrl ) {
+                                this.set( 'link', 'none' );
+                                return;
+                        }
+
+                        // default to custom if there is a linkUrl
+                        type = 'custom';
+
+                        if ( this.attachment ) {
+                                if ( this.attachment.get( 'url' ) === linkUrl ) {
+                                        type = 'file';
+                                } else if ( this.attachment.get( 'link' ) === linkUrl ) {
+                                        type = 'post';
+                                }
+                        } else {
+                                if ( this.get( 'url' ) === linkUrl ) {
+                                        type = 'file';
+                                }
+                        }
+
+                        this.set( 'link', type );
+
+                },
+
+
+                updateLinkUrl: function() {
+                        var link = this.get( 'link' ),
+                                url;
+
+                        switch( link ) {
+                                case 'file':
+                                        if ( this.attachment ) {
+                                                url = this.attachment.get( 'url' );
+                                        } else {
+                                                url = this.get( 'url' );
+                                        }
+                                        this.set( 'linkUrl', url );
+                                        break;
+                                case 'post':
+                                        this.set( 'linkUrl', this.attachment.get( 'link' ) );
+                                        break;
+                                case 'none':
+                                        this.set( 'linkUrl', '' );
+                                        break;
+
+                        }
+
+                },
+
+                updateSize: function() {
+                        var size;
+
+                        if ( ! this.attachment ) {
+                                return;
+                        }
+
+                        size = this.attachment.get( 'sizes' )[ this.get( 'size' ) ];
+                        this.set( 'url', size.url );
+                        this.set( 'width', size.width );
+                        this.set( 'height', size.height );
+
+                }
+
+
+        });
+
+        /**
          * wp.media.model.Attachments
          *
          * @constructor
@@ -1111 +1207 @@
                 window.wp = null;
         });
 
-}(jQuery));
- No newline at end of file
+}(jQuery));

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

@@ -980 +980 @@
                 }
         });
 
+
+        media.controller.ImageDetails = media.controller.State.extend({
+
+                defaults: _.defaults({
+                        id: 'image-details',
+                        filterable: 'uploaded',
+                        multiple: false,
+                        toolbar: 'image-details',
+                        title: l10n.imageDetailsTitle,
+                        content: 'image-details',
+                        menu: 'image-details',
+                        router: false,
+                        attachment: false,
+                        priority: 60,
+                        editing: false,
+                        syncSelection: false
+                }, media.controller.Library.prototype.defaults ),
+
+                // probably should have some notion of an embed model
+                initialize: function( options ) {
+                        var attachment = false;
+                        this.props = new media.model.PostImage( options.metadata );
+
+                        media.controller.State.prototype.initialize.apply( this, arguments );
+                },
+
+                activate: function() {
+                        media.controller.State.prototype.activate.apply( this, arguments );
+                },
+
+                deactivate: function() {
+                        /**
+                         * call 'deactivate' directly on the parent class
+                         */
+                        media.controller.State.prototype.deactivate.apply( this, arguments );
+                }
+
+        });
+
+        /**
+         * wp.media.controller.ReplaceImage
+         *
+         * Replace a selected single image
+         *
+         **/
+        media.controller.ReplaceImage = media.controller.Library.extend({
+
+
+
+        });
+
         /**
          * wp.media.controller.Embed
          *
@@ -1923 +1974 @@
                                         }
                                 }
                         }) );
+                },
+
+        });
+
+        media.view.MediaFrame.ImageDetails = media.view.MediaFrame.Select.extend({
+                defaults: {
+                        id:      'image',
+                        url:     '',
+                        menu:    'image-details',
+                        content: 'image-details',
+                        toolbar: 'image-details',
+                        type:    'link',
+                        title:    l10n.imageDetailsTitle,
+                        priority: 120
+                },
+
+                bindHandlers: function() {
+                        media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
+                        this.on( 'menu:create:image-details', this.createMenu, this );
+                        this.on( 'content:render:image-details', this.renderImageDetailsContent, this );
+                        this.on( 'menu:render:image-details', this.renderMenu, this );
+                        this.on( 'toolbar:render:image-details', this.renderToolbar, this );
+                },
+
+                createStates: function() {
+                        var options = this.options;
+                        this.states.add([
+                                new media.controller.ImageDetails({
+                                        metadata: options.metadata,
+                                        editable: false,
+                                        menu: 'image-details'
+                                }),
+                                new media.controller.Library({
+                                        id: 'replace-image',
+                                        library:   media.query(),
+                                        multiple:  false,
+                                        title:     l10n.imageReplaceTitle,
+                                        menu: 'image-details',
+                                        priority:  80
+                                })
+                        ]);
+                },
+
+                renderImageDetailsContent: function() {
+                        var view = new media.view.ImageDetails({
+                                controller: this,
+                                model: this.state().props,
+                                attachment: this.state().props.attachment
+                        }).render();
+
+                        this.content.set( view );
+
+                },
+
+                renderMenu: function( view ) {
+                        var lastState = this.lastState(),
+                                previous = lastState && lastState.id,
+                                frame = this;
+
+                        view.set({
+                                cancel: {
+                                        text:     l10n.imageDetailsCancel,
+                                        priority: 20,
+                                        click:    function() {
+                                                if ( previous ) {
+                                                        frame.setState( previous );
+                                                } else {
+                                                        frame.close();
+                                                }
+                                        }
+                                },
+                                separateCancel: new media.View({
+                                        className: 'separator',
+                                        priority: 40
+                                })
+                        });
+
+                },
+
+                renderToolbar: function() {
+                        this.toolbar.set( new media.view.Toolbar({
+                                controller: this,
+                                items: {
+                                        update: {
+                                                style:    'primary',
+                                                text:     l10n.update,
+                                                priority: 80,
+
+                                                click: function() {
+                                                        var controller = this.controller,
+                                                                state = controller.state();
+
+                                                        controller.close();
+
+                                                        // not sure if we want to use wp.media.string.image which will create a shortcode or
+                                                        // perhaps wp.html.string to at least to build the <img />
+
+                                                        state.trigger( 'update', state.props.toJSON() );
+
+                                                        // Restore and reset the default state.
+                                                        controller.setState( controller.options.state );
+                                                        controller.reset();
+                                                }
+                                        }
+                                }
+                        }) );
                 }
+
+
+
         });
 
+
         /**
          * wp.media.view.Modal
          *
@@ -4932 +5093 @@
                         this.$('img').attr( 'src', this.model.get('url') );
                 }
         });
-}(jQuery));
- No newline at end of file
+
+        // maybe I should just avoid the inheritance
+        media.view.ImageDetails = media.view.Settings.AttachmentDisplay.extend({
+                className: 'image-details',
+                template:  media.template('image-details'),
+
+                prepare: function() {
+                        var attachment = false;
+
+                        if ( this.model.attachment ) {
+                                attachment = this.model.attachment.toJSON();
+                        }
+                        return _.defaults({
+                                model: this.model.toJSON(),
+                                attachment: attachment
+                        }, this.options );
+                },
+
+
+                render: function() {
+                        var self = this,
+                                args = arguments;
+                        if ( this.model.attachment && 'pending' === this.model.dfd.state() ) {
+                                // should instead show a spinner when the attachment is new and then add a listener that updates on change
+                                this.model.dfd.done( function() {
+                                        media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
+                                } );
+                        } else {
+                                media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
+                        }
+
+
+                        return this;
+                }
+        });
+}(jQuery));

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

@@ -101 +101 @@
                 });
         }
 
+        function extractImageData( imageNode ) {
+                var classes, metadata, captionBlock, caption;
+
+                // default attributes
+                metadata = {
+                        attachment_id: false,
+                        url: false,
+                        height: '',
+                        width: '',
+                        size: 'none',
+                        caption: '',
+                        alt: '',
+                        align: 'none',
+                        link: 'none',
+                        linkUrl: ''
+                };
+
+                metadata.url = editor.dom.getAttrib( imageNode, 'src' );
+                metadata.alt = editor.dom.getAttrib( imageNode, 'alt' );
+                metadata.width = parseInt( editor.dom.getAttrib( imageNode, 'width' ), 10 );
+                metadata.height = parseInt( editor.dom.getAttrib( imageNode, 'height' ), 10 );
+
+                //TODO: probably should capture attributes on both the <img /> and the <a /> so that they can be restored when the image and/or caption are updated
+                // maybe use getAttribs()
+
+                // extract meta data from classes (candidate for turning into a method)
+                classes = imageNode.className.split( ' ' );
+                tinymce.each( classes, function( name ) {
+
+                        if ( /^wp-image/.test( name ) ) {
+                                metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
+                        }
+
+                        if ( /^align/.test( name ) ) {
+                                metadata.align = name.replace( 'align', '' );
+                        }
+
+                        if ( /^size/.test( name ) ) {
+                                metadata.size = name.replace( 'size-', '' );
+                        }
+                } );
+
+
+                // extract caption
+                captionBlock = editor.dom.getParents( imageNode, '.wp-caption' );
+
+                if ( captionBlock.length ) {
+                        captionBlock = captionBlock[0];
+
+                        classes = captionBlock.className.split( ' ' );
+                        tinymce.each( classes, function( name ) {
+                                if ( /^align/.test( name ) ) {
+                                        metadata.align = name.replace( 'align', '' );
+                                }
+                        } );
+                        caption = editor.dom.select( 'dd.wp-caption-dd', captionBlock );
+                        if ( caption.length ) {
+                                caption = caption[0];
+                                // need to do some more thinking about this
+                                metadata.caption = editor.serializer.serialize( caption )
+                                        .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
+
+                        }
+                }
+
+                // extract linkTo
+                if ( imageNode.parentNode.nodeName === 'A' ) {
+                        metadata.linkUrl = editor.dom.getAttrib( imageNode.parentNode, 'href' );
+                }
+
+                return metadata;
+
+        }
+
+        function updateImage( imageNode, imageData ) {
+                var className, width, node, html, captionNode, nodeToReplace, uid;
+
+                if ( imageData.caption ) {
+
+                        html = createImageAndLink( imageData, 'html' );
+
+                        width = imageData.width + 10;
+                        className = 'align' + imageData.align;
+
+                        //TODO: shouldn't add the id attribute if it isn't an attachment
+
+                        // should create a new function for genrating the caption markup
+                        html =  '<dl id="'+ imageData.attachment_id +'" class="wp-caption '+ className +'" style="width: '+ width +'px">' +
+                                '<dt class="wp-caption-dt">'+ html + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
+
+                        node = editor.dom.create( 'div', { 'class': 'mceTemp', draggable: 'true' }, html );
+                } else {
+                        node = createImageAndLink( imageData, 'node' );
+                }
+
+                nodeToReplace = imageNode;
+
+                captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
+
+                if ( captionNode ) {
+                        nodeToReplace = captionNode;
+                } else {
+                        if ( imageNode.parentNode.nodeName === 'A' ) {
+                                nodeToReplace = imageNode.parentNode;
+                        }
+                }
+                // uniqueId isn't super exciting, so maybe we want to use something else
+                uid = editor.dom.uniqueId( 'wp_' );
+                editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
+                editor.dom.replace( node, nodeToReplace );
+
+                // find the updated node
+                node = editor.dom.select( '[data-wp-replace-id="' + uid + '"]' )[0];
+
+                editor.dom.setAttrib( node, 'data-wp-replace-id', '' );
+
+                if ( node.nodeName === 'IMG' ) {
+                        editor.selection.select( node );
+                } else {
+                        editor.selection.select( editor.dom.select( 'img', node )[0] );
+                }
+                editor.nodeChanged();
+
+        }
+
+        function createImageAndLink( imageData, mode ) {
+                var classes = [],
+                        props;
+
+                mode = mode ? mode : 'node';
+
+
+                if ( ! imageData.caption ) {
+                        classes.push( 'align' + imageData.align );
+                }
+
+                if ( imageData.attachment_id ) {
+                        classes.push( 'wp-image-' + imageData.attachment_id );
+                        if ( imageData.size ) {
+                                classes.push( 'size-' + imageData.size );
+                        }
+                }
+
+                props = {
+                        src: imageData.url,
+                        width: imageData.width,
+                        height: imageData.height,
+                        alt: imageData.alt
+                };
+
+                if ( classes.length ) {
+                        props['class'] = classes.join( ' ' );
+                }
+
+                if ( imageData.linkUrl ) {
+                        if ( mode === 'node' ) {
+                                return editor.dom.create( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
+                        } else if ( mode === 'html' ) {
+                                return editor.dom.createHTML( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
+                        }
+                } else {
+                        if ( mode === 'node' ) {
+                                return editor.dom.create( 'img', props );
+                        } else if ( mode === 'html' ) {
+                                return editor.dom.createHTML( 'img', props );
+                        }
+
+                }
+        }
+
         editor.on( 'init', function() {
                 var dom = editor.dom;
 
@@ -452 +622 @@
                 }
         });
 
+        editor.on( 'mouseup', function( e ) {
+                var imageNode, frame;
+                if ( e.target.nodeName === 'IMG' && editor.dom.getAttrib( e.target, 'data-mce-selected' ) === '1' ) {
+                        // Don't trigger on right-click
+                        if ( e.button !== 2 ) {
+
+                                if ( editor.dom.hasClass( e.target, 'mceItem' ) || '1' === editor.dom.getAttrib( e.target, 'data-mce-placeholder' ) ) {
+                                        return;
+                                }
+
+
+                                imageNode = e.target;
+
+                                // file, post, custom, none
+                                frame = wp.media({
+                                        frame: 'image',
+                                        state: 'image-details',
+                                        multiple: false,
+                                        editing: true,
+                                        metadata: extractImageData( imageNode )
+                                } );
+
+                                // update the image when update is clicked in the media frame
+                                frame.state('image-details').on( 'update', function( imageData ) {
+                                        editor.focus();
+                                        updateImage( imageNode, imageData );
+                                } );
+
+                                frame.open();
+
+
+                        }
+                }
+        } );
+
         editor.wpSetImgCaption = function( content ) {
                 return parseShortcode( content );
         };

src/wp-includes/media-template.php

@@ -500 +500 @@
                         }
                 </style>
         </script>
+
+        <script type="text/html" id="tmpl-image-details">
+                <?php // reusing .media-embed to pick up the styles for now ?>
+                <div class="media-embed">
+                        <div class="embed-image-settings">
+                                <div class="thumbnail">
+                                        <img src="{{ data.model.url }}" draggable="false" />
+                                </div>
+
+                                <div class="url">
+                                        <?php // might want to make the url editable if it isn't an attachment ?>
+                                        <input type="text" disabled="disabled" value="{{ data.model.url }}" />
+                                </div>
+
+                                <?php
+                                /** This filter is documented in wp-admin/includes/media.php */
+                                if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
+                                        <label class="setting caption">
+                                                <span><?php _e('Caption'); ?></span>
+                                                <textarea data-setting="caption">{{ data.model.caption }}</textarea>
+                                        </label>
+                                <?php endif; ?>
+
+                                <label class="setting alt-text">
+                                        <span><?php _e('Alt Text'); ?></span>
+                                        <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
+                                </label>
+
+                                <div class="setting align">
+                                        <span><?php _e('Align'); ?></span>
+                                        <div class="button-group button-large" data-setting="align">
+                                                <button class="button" value="left">
+                                                        <?php esc_attr_e('Left'); ?>
+                                                </button>
+                                                <button class="button" value="center">
+                                                        <?php esc_attr_e('Center'); ?>
+                                                </button>
+                                                <button class="button" value="right">
+                                                        <?php esc_attr_e('Right'); ?>
+                                                </button>
+                                                <button class="button active" value="none">
+                                                        <?php esc_attr_e('None'); ?>
+                                                </button>
+                                        </div>
+                                </div>
+                                <div class="setting link-to">
+                                <span><?php _e('Link To'); ?></span>
+
+                                <# if ( data.attachment ) { #>
+                                        <div class="button-group button-large" data-setting="link">
+                                                <button class="button" value="file">
+                                                        <?php esc_attr_e('Media File'); ?>
+                                                </button>
+                                                <button class="button" value="post">
+                                                        <?php esc_attr_e('Attachment Page'); ?>
+                                                </button>
+                                                <button class="button" value="custom">
+                                                        <?php esc_attr_e('Custom URL'); ?>
+                                                </button>
+                                                <button class="button active" value="none">
+                                                        <?php esc_attr_e('None'); ?>
+                                                </button>
+                                        </div>
+                                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
+
+                                <# } else { #>
+                                        <div class="button-group button-large" data-setting="link">
+                                                <button class="button" value="file">
+                                                        <?php esc_attr_e('Image URL'); ?>
+                                                </button>
+                                                <button class="button" value="custom">
+                                                        <?php esc_attr_e('Custom URL'); ?>
+                                                </button>
+                                                <button class="button active" value="none">
+                                                        <?php esc_attr_e('None'); ?>
+                                                </button>
+                                        </div>
+                                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
+
+                                <# } #>
+
+
+                                <# if ( data.attachment ) { #>
+                                        <div class="setting size">
+                                                <span><?php _e('Size'); ?></span>
+                                                <div class="button-group button-large" data-setting="size">
+                                                <?php
+                                                        /** This filter is documented in wp-admin/includes/media.php */
+                                                        $sizes = apply_filters( 'image_size_names_choose', array(
+                                                                'thumbnail' => __('Thumbnail'),
+                                                                'medium'    => __('Medium'),
+                                                                'large'     => __('Large'),
+                                                                'full'      => __('Full Size'),
+                                                        ) );
+
+                                                        foreach ( $sizes as $value => $name ) : ?>
+                                                                <#
+                                                                var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
+                                                                if ( size ) { #>
+                                                                        <button class="button" value="<?php echo esc_attr( $value ); ?>">
+                                                                                <?php echo esc_html( $name ); ?>
+                                                                                </button>
+                                                                <# } #>
+                                                        <?php endforeach; ?>
+                                                </div>
+                                        </div>
+                                <# } #>
+                                </div>
+                        </div>
+                </div>
+        </script>
         <?php
 
         /**

src/wp-includes/media.php

@@ -1967 +1967 @@
                 'search'      => __( 'Search' ),
                 'select'      => __( 'Select' ),
                 'cancel'      => __( 'Cancel' ),
+                'update'      => __( 'Update' ),
                 /* translators: This is a would-be plural string used in the media manager.
                    If there is not a word you can use in your language to avoid issues with the
                    lack of plural support here, turn it into "selected: %d" then translate it.
@@ -2005 +2006 @@
                 'addToGallery'       => __( 'Add to gallery' ),
                 'addToGalleryTitle'  => __( 'Add to Gallery' ),
                 'reverseOrder'       => __( 'Reverse order' ),
+
+
+                // Edit Image
+                'imageDetailsTitle'     => __( 'Image Details' ),
+                'imageReplaceTitle'     => __( 'Replace Image' ),
+                'imageDetailsCancel'     => __( 'Cancel Edit' )
         );
 
         $settings = apply_filters( 'media_view_settings', $settings, $post );