WordPress.org

Make WordPress Core

Ticket #21811: 21811-modal-03.patch

File 21811-modal-03.patch, 10.6 KB (added by gcorne, 6 years ago)
  • src/wp-admin/js/image-edit.js

    diff --git src/wp-admin/js/image-edit.js src/wp-admin/js/image-edit.js
    index 9eaf51b..35a471c 100644
    var imageEdit = window.imageEdit = { 
    55        iasapi : {},
    66        hold : {},
    77        postid : '',
     8        _view : {},
    89
    910        intval : function(f) {
    1011                return f | 0;
    var imageEdit = window.imageEdit = { 
    287288                });
    288289        },
    289290
    290         open : function(postid, nonce) {
     291        open : function( postid, nonce, view ) {
     292                this._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
    var imageEdit = window.imageEdit = { 
    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 ( this._view && 'object' === typeof this._view ){
     407                        this._view.cancel();
     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-editor.js

    diff --git src/wp-includes/js/media-editor.js src/wp-includes/js/media-editor.js
    index 9ae3f83..faf373e 100644
     
    562562
    563563                        this._frame = wp.media({
    564564                                state: 'featured-image',
    565                                 states: [ new wp.media.controller.FeaturedImage() ]
     565                                states: [ new wp.media.controller.FeaturedImage() , new wp.media.controller.EditImage() ]
    566566                        });
    567567
    568568                        this._frame.on( 'toolbar:create:featured-image', function( toolbar ) {
     
    574574                                });
    575575                        }, this._frame );
    576576
     577                        this._frame.on( 'content:render:edit-image', function() {
     578                                var selection = this.state('featured-image').get('selection'),
     579                                        view = new wp.media.view.EditImage( { model: selection.single(), controller: this } ).render();
     580
     581                                this.content.set( view );
     582
     583                                // after bringing in the frame, load the actual editor via an ajax call
     584                                view.loadEditor();
     585
     586                        }, this._frame );
     587
    577588                        this._frame.state('featured-image').on( 'select', this.select );
    578589                        return this._frame;
    579590                },
  • src/wp-includes/js/media-views.js

    diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js
    index 6b912f0..977dc07 100644
     
    930930                        toolbar:    'featured-image',
    931931                        title:      l10n.setFeaturedImageTitle,
    932932                        priority:   60,
    933                         syncSelection: false
     933                        syncSelection: true
    934934                }, media.controller.Library.prototype.defaults ),
    935935
    936936                initialize: function() {
     
    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                        if ( ! this.get('selection') ) {
     1082                                this.set( 'selection', new media.model.Selection() );
     1083                        }
     1084                        this.syncSelection();
     1085                },
     1086
     1087                syncSelection: function() {
     1088                        var selection = this.get('selection'),
     1089                                manager = this.frame._selection;
     1090
     1091                        if ( ! this.get('syncSelection') || ! manager || ! selection ) {
     1092                                return;
     1093                        }
     1094
     1095                        // If the selection supports multiple items, validate the stored
     1096                        // attachments based on the new selection's conditions. Record
     1097                        // the attachments that are not included; we'll maintain a
     1098                        // reference to those. Other attachments are considered in flux.
     1099                        if ( selection.multiple ) {
     1100                                selection.reset( [], { silent: true });
     1101                                selection.validateAll( manager.attachments );
     1102                                manager.difference = _.difference( manager.attachments.models, selection.models );
     1103                        }
     1104
     1105                        // Sync the selection's single item with the master.
     1106                        selection.single( manager.single );
     1107                }
     1108        });
     1109
     1110        /**
    10651111         * wp.media.controller.Embed
    10661112         *
    10671113         * @constructor
     
    17401786                                        menu:    'gallery'
    17411787                                }),
    17421788
    1743                                 new media.controller.GalleryAdd()
     1789                                new media.controller.GalleryAdd(),
     1790
     1791                                new media.controller.EditImage( { selection: options.selection } )
    17441792                        ]);
    17451793
    17461794
     
    17681816
    17691817                                content: {
    17701818                                        'embed':          'embedContent',
     1819                                        'edit-image':     'editImageContent',
    17711820                                        'edit-selection': 'editSelectionContent'
    17721821                                },
    17731822
     
    18661915                        this.content.set( view );
    18671916                },
    18681917
     1918                editImageContent: function() {
     1919                        var selection = this.state().get('selection'),
     1920                                view = new media.view.EditImage( { model: selection.single(), controller: this } ).render();
     1921
     1922                        this.content.set( view );
     1923
     1924                        // after bringing in the frame, load the actual editor via an ajax call
     1925                        view.loadEditor();
     1926
     1927                },
     1928
    18691929                // Toolbars
    18701930
    18711931                /**
     
    20372097                        media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
    20382098                        this.on( 'menu:create:image-details', this.createMenu, this );
    20392099                        this.on( 'content:render:image-details', this.renderImageDetailsContent, this );
     2100                        this.on( 'content:render:edit-image', this.editImageContent, this );
    20402101                        this.on( 'menu:render:image-details', this.renderMenu, this );
    20412102                        this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this );
    20422103                        // override the select toolbar
     
    20602121                                        toolbar: 'replace',
    20612122                                        priority:  80,
    20622123                                        displaySettings: true
    2063                                 })
     2124                                }),
     2125                                new media.controller.EditImage( { image: this.image } )
    20642126                        ]);
    20652127                },
    20662128
     
    21002162
    21012163                },
    21022164
     2165                editImageContent: function() {
     2166                        var attachment = this.state().get('image').attachment,
     2167                                view;
     2168
     2169                        if ( ! attachment ) {
     2170                                return;
     2171                        }
     2172
     2173                        view = new media.view.EditImage( { model: attachment, controller: this } ).render();
     2174
     2175                        this.content.set( view );
     2176
     2177                        // after bringing in the frame, load the actual editor via an ajax call
     2178                        view.loadEditor();
     2179
     2180                },
     2181
    21032182                renderImageDetailsToolbar: function() {
    21042183                        this.toolbar.set( new media.view.Toolbar({
    21052184                                controller: this,
     
    48954974                        }
    48964975                },
    48974976
    4898                 editAttachment: function() {
    4899                         this.$el.addClass('needs-refresh');
     4977                editAttachment: function( event ) {
     4978                        event.preventDefault();
     4979                        this.controller.setState( 'edit-image' );
    49004980                },
    49014981                /**
    49024982                 * @param {Object} event
     
    49064986                        event.preventDefault();
    49074987                        this.model.fetch();
    49084988                }
     4989
    49094990        });
    49104991
    49114992        /**
     
    51795260        media.view.ImageDetails = media.view.Settings.AttachmentDisplay.extend({
    51805261                className: 'image-details',
    51815262                template:  media.template('image-details'),
    5182 
     5263                events: {
     5264                        'click .edit-attachment': 'editAttachment'
     5265                },
    51835266                initialize: function() {
    51845267                        // used in AttachmentDisplay.prototype.updateLinkTo
    51855268                        this.options.attachment = this.model.attachment;
     
    52195302                resetFocus: function() {
    52205303                        this.$( '.caption textarea' ).focus();
    52215304                        this.$( '.embed-image-settings' ).scrollTop( 0 );
     5305                },
     5306
     5307                editAttachment: function( event ) {
     5308                        event.preventDefault();
     5309                        this.controller.setState( 'edit-image' );
     5310                }
     5311        });
     5312
     5313
     5314        media.view.EditImage = media.View.extend({
     5315
     5316                className: 'image-editor',
     5317                template: media.template('image-editor'),
     5318
     5319                initialize: function( options ) {
     5320                        this.editor = window.imageEdit;
     5321                        this.controller = options.controller;
     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                cancel: function() {
     5339                                var lastState = this.controller.lastState();
     5340                                this.controller.setState( lastState );
    52225341                }
     5342
    52235343        });
     5344
    52245345}(jQuery));
  • src/wp-includes/media-template.php

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
    index 28f4a1a..68a64a9 100644
    function wp_print_media_templates() { 
    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 ?>
    function wp_print_media_templates() { 
    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

    diff --git src/wp-includes/media.php src/wp-includes/media.php
    index aac3c44..eadd719 100644
    function wp_prepare_attachment_for_js( $attachment ) { 
    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
    function maybe_regenerate_attachment_metadata( $attachment ) { 
    22582260                        delete_transient( $regeneration_lock );
    22592261                }
    22602262        }
    2261 }
    2262  No newline at end of file
     2263}
  • src/wp-includes/script-loader.php

    diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php
    index 6e4488d..305019f 100644
    function wp_default_scripts( &$scripts ) { 
    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() ) {