WordPress.org

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, 6 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() ) {