Make WordPress Core

Ticket #21811: trac-21811-image-edit-view-01.patch

File trac-21811-image-edit-view-01.patch, 8.7 KB (added by tomauger, 10 years ago)

Builds on gcorne's patch by passing in the view to imageEdit, so that we can properly close the editor and revert to the previous view.

  • src/wp-admin/js/image-edit.js

     
    55        iasapi : {},
    66        hold : {},
    77        postid : '',
     8        _view : {},
    89
    910        intval : function(f) {
    1011                return f | 0;
     
    287288                });
    288289        },
    289290
    290         open : function(postid, nonce) {
     291        open : function( postid, nonce, view ) {
     292                _view = view;
     293
    291294                var data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
    292295                        btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
    293296
     
    397400
    398401                this.iasapi = {};
    399402                this.hold = {};
    400                 $('#image-editor-' + postid).fadeOut('fast', function() {
    401                         $('#media-head-' + postid).fadeIn('fast');
    402                         $(this).empty();
    403                 });
     403
     404                // If we've loaded the editor in the context of a Media Modal, then switch to the previous view,
     405                // whatever that might have been.
     406                if ( _view && 'object' == typeof _view ){
     407                        _view.controller.setState( _view.controller.lastState() );
     408                }
     409
     410                // In case we are not accessing the image editor in the context of a View, close the editor the old-skool way
     411                else {
     412                        $('#image-editor-' + postid).fadeOut('fast', function() {
     413                                $('#media-head-' + postid).fadeIn('fast');
     414                                $(this).empty();
     415                        });
     416                }
     417
     418
    404419        },
    405420
    406421        notsaved : function(postid) {
  • src/wp-includes/js/media-views.js

     
    10621062        });
    10631063
    10641064        /**
     1065         * wp.media.controller.EditImage
     1066         *
     1067         * @constructor
     1068         * @augments wp.media.controller.State
     1069         * @augments Backbone.Model
     1070         */
     1071        media.controller.EditImage = media.controller.State.extend({
     1072                defaults: {
     1073                        id: 'edit-image',
     1074                        url: '',
     1075                        menu: false,
     1076                        content: 'edit-image',
     1077                        syncSelection: true
     1078                },
     1079
     1080                activate: function() {
     1081                        this.syncSelection();
     1082                },
     1083
     1084                syncSelection: function() {
     1085                        var selection = this.get('selection'),
     1086                                manager = this.frame._selection;
     1087
     1088                        if ( ! this.get('syncSelection') || ! manager || ! selection ) {
     1089                                return;
     1090                        }
     1091
     1092                        // If the selection supports multiple items, validate the stored
     1093                        // attachments based on the new selection's conditions. Record
     1094                        // the attachments that are not included; we'll maintain a
     1095                        // reference to those. Other attachments are considered in flux.
     1096                        if ( selection.multiple ) {
     1097                                selection.reset( [], { silent: true });
     1098                                selection.validateAll( manager.attachments );
     1099                                manager.difference = _.difference( manager.attachments.models, selection.models );
     1100                        }
     1101
     1102                        // Sync the selection's single item with the master.
     1103                        selection.single( manager.single );
     1104                }
     1105        });
     1106
     1107        /**
    10651108         * wp.media.controller.Embed
    10661109         *
    10671110         * @constructor
     
    17401783                                        menu:    'gallery'
    17411784                                }),
    17421785
    1743                                 new media.controller.GalleryAdd()
     1786                                new media.controller.GalleryAdd(),
     1787
     1788                                new media.controller.EditImage( { selection: options.selection } )
    17441789                        ]);
    17451790
    17461791
     
    17681813
    17691814                                content: {
    17701815                                        'embed':          'embedContent',
     1816                                        'edit-image':     'editImageContent',
    17711817                                        'edit-selection': 'editSelectionContent'
    17721818                                },
    17731819
     
    18661912                        this.content.set( view );
    18671913                },
    18681914
     1915                editImageContent: function() {
     1916                        var selection = this.state().get('selection'),
     1917                                view = new media.view.EditImage( { model: selection.single() } ).render();
     1918
     1919                        this.content.set( view );
     1920
     1921                        // after bringing in the frame, load the actual editor via an ajax call
     1922                        view.loadEditor();
     1923                },
     1924
    18691925                // Toolbars
    18701926
    18711927                /**
     
    20372093                        media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
    20382094                        this.on( 'menu:create:image-details', this.createMenu, this );
    20392095                        this.on( 'content:render:image-details', this.renderImageDetailsContent, this );
     2096                        this.on( 'content:render:edit-image', this.editImageContent, this );
    20402097                        this.on( 'menu:render:image-details', this.renderMenu, this );
    20412098                        this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this );
    20422099                        // override the select toolbar
     
    20602117                                        toolbar: 'replace',
    20612118                                        priority:  80,
    20622119                                        displaySettings: true
    2063                                 })
     2120                                }),
     2121                                new media.controller.EditImage( { image: this.image } )
    20642122                        ]);
    20652123                },
    20662124
     
    21002158
    21012159                },
    21022160
     2161                editImageContent: function() {
     2162                        var attachment = this.state().get('image').attachment,
     2163                                view;
     2164
     2165                        if ( ! attachment ) {
     2166                                return;
     2167                        }
     2168
     2169                        view = new media.view.EditImage({
     2170                                controller: this,
     2171                                model: attachment
     2172                        }).render();
     2173
     2174                        this.content.set( view );
     2175
     2176                        // after bringing in the frame, load the actual editor via an ajax call
     2177                        view.loadEditor();
     2178
     2179                },
     2180
    21032181                renderImageDetailsToolbar: function() {
    21042182                        this.toolbar.set( new media.view.Toolbar({
    21052183                                controller: this,
     
    48954973                        }
    48964974                },
    48974975
    4898                 editAttachment: function() {
    4899                         this.$el.addClass('needs-refresh');
     4976                editAttachment: function( event ) {
     4977                        event.preventDefault();
     4978                        this.controller.setState( 'edit-image' );
    49004979                },
    49014980                /**
    49024981                 * @param {Object} event
     
    49064985                        event.preventDefault();
    49074986                        this.model.fetch();
    49084987                }
     4988
    49094989        });
    49104990
    49114991        /**
     
    51805260                className: 'image-details',
    51815261                template:  media.template('image-details'),
    51825262
     5263                events: {
     5264                        'click .edit-attachment': 'editAttachment'
     5265                },
     5266
    51835267                initialize: function() {
    51845268                        // used in AttachmentDisplay.prototype.updateLinkTo
    51855269                        this.options.attachment = this.model.attachment;
     
    52195303                resetFocus: function() {
    52205304                        this.$( '.caption textarea' ).focus();
    52215305                        this.$( '.embed-image-settings' ).scrollTop( 0 );
     5306                },
     5307
     5308                editAttachment: function( event ) {
     5309                        event.preventDefault();
     5310                        this.controller.setState( 'edit-image' );
    52225311                }
    52235312        });
     5313
     5314
     5315        media.view.EditImage = media.View.extend({
     5316                className: 'image-editor',
     5317                template: media.template('image-editor'),
     5318
     5319                initialize: function() {
     5320
     5321                        this.editor = window.imageEdit;
     5322                        media.View.prototype.initialize.apply( this, arguments );
     5323                },
     5324
     5325                prepare: function() {
     5326                        return this.model.toJSON();
     5327                },
     5328
     5329                render: function() {
     5330                        media.View.prototype.render.apply( this, arguments );
     5331                        return this;
     5332                },
     5333
     5334                loadEditor: function() {
     5335                        this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this );
     5336                }
     5337
     5338        });
     5339
    52245340}(jQuery));
  • src/wp-includes/media-template.php

     
    508508                                <div class="thumbnail">
    509509                                        <img src="{{ data.model.url }}" draggable="false" />
    510510                                </div>
     511                                <# if ( data.attachment ) { #>
     512                                        <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Image' ); ?>" />
     513                                <# } #>
    511514
    512515                                <div class="setting url">
    513516                                        <?php // might want to make the url editable if it isn't an attachment ?>
     
    597600                        </div>
    598601                </div>
    599602        </script>
     603
     604        <script type="text/html" id="tmpl-image-editor">
     605                <div id="media-head-{{{ data.id }}}"></div>
     606                <div id="image-editor-{{{ data.id }}}"></div>
     607        </script>
    600608        <?php
    601609
    602610        /**
  • src/wp-includes/media.php

     
    18691869                'nonces'      => array(
    18701870                        'update' => false,
    18711871                        'delete' => false,
     1872                        'edit'   => false
    18721873                ),
    18731874                'editLink'   => false,
    18741875        );
    18751876
    18761877        if ( current_user_can( 'edit_post', $attachment->ID ) ) {
    18771878                $response['nonces']['update'] = wp_create_nonce( 'update-post_' . $attachment->ID );
     1879                $response['nonces']['edit'] = wp_create_nonce( 'image_editor-' . $attachment->ID );
    18781880                $response['editLink'] = get_edit_post_link( $attachment->ID, 'raw' );
    18791881        }
    18801882
  • src/wp-includes/script-loader.php

     
    385385        // To enqueue media-views or media-editor, call wp_enqueue_media().
    386386        // Both rely on numerous settings, styles, and templates to operate correctly.
    387387        $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable' ), false, 1 );
    388         $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
     388        $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views', 'image-edit' ), false, 1 );
    389389        $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
    390390
    391391        if ( is_admin() ) {